Skinning Custom Controls - MACROMEDIA FLEX - DEVELOPING COMPONENTS AND THEMES Manual

invalidate()
Indicates that just the visuals for the object have changed, but size and position of
subobjects have not changed. This method calls the method.
draw()
invalidateProperties()
Indicates that you have changed properties. This method calls the
method.
commitProperties()
You should call the method infrequently because it measures and redraws
invalidateSize()
everything on the screen, and this can be an expensive action. Sometimes you need to call more
than one of these methods to force a layout, even though the computed sizes did not change.
You must call an invalidation method at least once during the instantiation of your component.
The most common place for you to do this is in the or
createChildren() layoutChildren()
method.

Skinning custom controls

A user-interface control is composed entirely of attached MovieClip objects or symbols that are
stored inside a SWF file. All assets for a user-interface control can be external to the user-interface
control, so they can also be used by other components. For example, if your component needs
button functionality, you can reuse the existing Button component assets.
The Button control uses a separate symbol to represent each of its states (FalseDown, FalseUp,
Disabled, Selected, and so on). However, you can associate your custom symbols—called skins—
with these states. At runtime, the old and new symbols are exported in the SWF file. The old
states become invisible to give way to the new symbols. This ability to change skins during
author-time as well as runtime is called skinning.
To use skinning in components, create a variable for every skin element or linkage used in the
component in your ActionScript class file. This lets someone set a different skin element just by
changing a parameter in the component, as the following example shows:
var falseUpSkin = "mySkin";
The name mySkin is subsequently used as the linkage name of the symbol to display the
.
FalseUpSkin
The following example shows the skin variables for the various states of the Button component:
var falseUpSkin:String = "ButtonSkin";
var falseDownSkin:String = "ButtonSkin";
var falseOverSkin:String = "ButtonSkin"
var falseDisabledSkin:String = "ButtonSkin";
var trueUpSkin:String = "ButtonSkin";
var trueDownSkin:String = "ButtonSkin";
var trueOverSkin:String = "ButtonSkin";
var trueDisabledSkin:String = "ButtonSkin";
var falseUpIcon:String = "";
var falseDownIcon:String = "";
var falseOverIcon:String = "";
var falseDisabledIcon:String = "";
var trueUpIcon:String = "";
var trueDownIcon:String = "";
var trueOverIcon:String = "";
var trueDisabledIcon:String = "";

Skinning custom controls

69