Adobe FLEX 2 - CREATING AND EXTENDING COMPONENTS Manual page 188

This gradient is defined by two colors that you set by using a new style property called
. The
fillColors fillColors
The StyledRectangle.as class defines default colors for the
set them as the following example shows:
<?xml version="1.0"?>
<!-- skinstyle\mainRectWithFillStyles.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:MyComp="myComponents.*">
<!-- Set style by using a CSS type selector. -->
<mx:Style>
StyledRectangle {fillColors: #FF00FF, #00FFFF}
</mx:Style>
<!-- By default, use the style defined by the CSS type selector. -->
<MyComp:StyledRectangle id="mySR1"/>
<!-- By default, use the style defined by the CSS type selector. -->
<MyComp:StyledRectangle id="mySR2"/>
<!-- Change the default style by using the setStyle() method. -->
<mx:Button label="Set gradient"
click="mySR2.setStyle('fillColors', [0x000000, 0xFFFFFF]);"/>
<!-- Set fillColors in MXML. -->
<MyComp:StyledRectangle id="mySR3" fillColors="[0x00FF00, 0xFFFFFF]"/>
</mx:Application>
In this example, the CSS type selector for the StyledRectangle component sets the initial
values of the
fillColors
components, you use the
using the
setStyle()
MXML tag attribute.
188 Creating Custom Style Properties
style takes an array of two colors that component users can set.
property to
#FF00FF
event of a Button
click
method. The third component sets the style property by using an
fillColors
and . For the second StyledRectangle
#00FFFF
control to change the
style, but you can also
style by
fillColor