View comments | RSS feed

Defining component parameters

When building a component, you can add parameters that define its appearance and behavior. The most commonly used parameters appear as authoring parameters in the Component inspector and Property inspector. You can also set all inspectable and collection parameters with ActionScript. You define these properties in the component class file by using the Inspectable tag (see About the Inspectable tag).

The following example sets several component parameters in the JellyBean class file, and exposes them with the Inspectable tag in the Component inspector:

class JellyBean{
    // a string parameter
    [Inspectable(defaultValue="strawberry")]
    public var flavorStr:String; 
    
    // a string list parameter
    [Inspectable(enumeration="sour,sweet,juicy,rotten",defaultValue="sweet")]
    public var flavorType:String; 
    
    // an array parameter
    [Inspectable(name="Flavors", defaultValue="strawberry,grape,orange", verbose=1, category="Fruits")] 
    var flavorList:Array; 
    
    // an object parameter
    [Inspectable(defaultValue="belly:flop,jelly:drop")]
    public var jellyObject:Object;
    
    // a color parameter
    [Inspectable(defaultValue="#ffffff")]
    public var jellyColor:Color;

    // a setter
    [Inspectable(defaultValue="default text")]
    function set text(t:String) {
}
}

You can use any of the following types for parameters:

NOTE

 

The JellyBean class is a theoretical example. To see an actual example, look at the Button.as class file that installs with Flash in the language/First Run/Classes/mx/controls directory.


Flash CS3


Comments


petkusj said on Jan 14, 2008 at 9:50 AM :
Is there a way (for ActionScript 3.0/Flash CS3) to add an Inspectable with
getter and setter functions to a base class that is then shared by its
subclasses?

Here's what I'm trying to do (and I apologize for adding this comment in this
ActionScript 2.0 page). I want to create a bunch of components that have a
set of predefined colors and I want to set those colors from the parameter
inspector, using a drop down menu created from an Inspectable of type List.

I can easily create an Inspectable in the base class and have all those
subclasses use that same Inspectable, but how do you tell that specific
instance to change to that color? I thought the most logical way is to either
override the getter/setter for each Inspector (although I seem to be losing the
drop-down) or dispatch an Event whenever the drop-down for an instance is
changed. But how from a base class can I send an argument to a specific
instance of a subclass that a choice meant for that one instance alone has
been made?

Of course, this would be a simpler matter if the arguments/items/data for an
Inspectable could be populated programmatically. Then I could just add the
Inspectable to each subclass but supply the data for the Inspectable from an
array/dictionary/object. But as far as I can tell, an enumeration takes it data
from a string inside the Inspectable tag and not from outside itself.

Any suggestions would be greatly appreciated.

Thanks,

Jennifer
petkusj said on Jan 17, 2008 at 12:43 PM :
I got it working! I probably had it working a long time ago but I didn't realize
that static-declared variables/constants aren't inherited by subclasses. D'oh!

So, here's what I did. I created the Inspectables tag in the base class:

[CODE][Inspectable(type="List",
enumeration="ORANGE,BLUE,BLACK,WHITE", defaultValue="ORANGE",
name="Font color:")]
public function set setBackGroundColor (value:String):void {
_backgroundcolor = this[value];
dispatchEvent(new myEvents(myEvents.PARAMETER_CHANGE, false,
false));
}[/CODE]

Notice that there's a event that's dispatched when setFontColor is called.
That event is defined in a simple event class that imports/extends Event and
creates the following constant.

[CODE]public static const PARAMETER_CHANGE:String =
"labelColorChange";[/CODE]

I also update the protected variable _backgroundcolor with the value
obtained in the setter. Of course, I have to evaluate the string variable
[B]value[/B] as one of the constants (ORANGE,BLUE, etc) that I defined at
the top of the base class.

My component class (which extends the base class) then has an
addEventListener in the configUI function. (I've set the base to import/extend
UIComponent so I can take advantage of the built-in invalidation method.)
Here's the addEventListener:

[CODE]addEventListener(myEvents.PARAMETER_CHANGE,parameterCha
nge);[/CODE]

And all parameterChange function does is call invalidate(), which in turn
calls the draw() function. (It's named draw(), of course, because that's the
function name in the base class that I'm overriding. And in turn, the base
class is overriding the draw() function that's defined in Adobe's
fl.core.UIComponent class that the base class is extending.

It seems like a lot of running around to perform a simple task, but at least
now all my Inspectables are in my base class and available to all the
components that extend that base class.

I still have a few ways to screw up, however. I've created my color constants
at the top of the class and later I have several Inspectables that populate
enumerations with those same color constant names. But it would be a lot
easier if I could make an array with those constants and populate the
enumerations from that array.

But this is still quite workable. I hope my fumblings might help somebody
else.

Jennifer

 

RSS feed | Send me an e-mail when comments are added to this page | Comment Report

Current page: http://livedocs.adobe.com/flash/9.0/main/00002506.html