Programming Flex 3

Adding Styling Support

One of the key features of Flex that Flash Player does not inherently support is styles. As we discussed earlier in the book, styles in Flex are a robust mechanism for defining component styles on an instance, class, or global basis, within MXML, ActionScript, and CSS. Styling support is built into the Flex framework and is exposed to custom components that inherit from UIComponent. Because of this, the complexity for integrating styling support for our components is greatly reduced.

To add support for styles, you need to add a style metadata tag and override the styleChanged() method. After you do that, you can use the getStyle() utility method from within your component to retrieve the value of the style. In this section, we will build the code to add a horizontalGap style that will control the space between the icon and the label in our instant messenger status icon component.

First, you need to define the style metadata tag by preceding the class declaration, specifying the style’s name and type, and usually disable inheritance:

[Style(name="horizontalGap",type="int", inheriting="false")]
public class StatusIcon extends UIComponent
{

Next, you need to implement the styleChanged() method:

override public  function styleChanged(styleProp:String):void
{
    super.styleChanged(styleProp);
    if(styleProp == "horizontalGap")
    {
        invalidateSize();
        invalidateDisplayList();
    }
}

In styleChanged(), we first call super.styleChanged(), passing it the styleProp value. Then we check ...