User Guide

188 Creating Custom Style Properties
This gradient is defined by two colors that you set by using a new style property called
fillColors. The fillColors style takes an array of two colors that component users can set.
The StyledRectangle.as class defines default colors for the
fillColors style, but you can also
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 property to #FF00FF and #00FFFF. For the second StyledRectangle
components, you use the
click event of a Button control to change the fillColor style by
using the
setStyle() method. The third component sets the style property by using an
MXML tag attribute.