Programming Flex 3

Component Styles

When you’re working with an application component and styles, the application component can define its own style values for components within it. The easiest way to specify such styles is to define Cascading Style Sheets (CSS) within the application component as you would within an application (however, you will still have the limitation of not being able to specify CSS type selectors other than in ActionScript). When working with styles within a component, keep in mind why application components exist. They don’t exist to be as fully featured and flexible as distributed components. They exist to allow you to build an application more efficiently. As such, you may find that defining styles within an application component is acceptable.

Note

With application components, you can also define your own custom styles, as discussed in Chapter 19.

Also, as we saw in Chapter 8, styles in Flex support inheritance, which is also supported by application components. When defining a global style or CSS custom class, these styles are applied to all display items in Flex. This allows you the benefit of providing one master CSS file for an application. In the CSS file, you can define your custom style, and for any component in your application you can apply the style by setting the styleName property.

In this example, we first set the styleName property of the Label component:

<mx:Label id="contactName" styleName="heading" x="10" y="10" text="John Doe"/>

Once the styleName value is set, ...