Learning Flex 3

Chapter 14. STYLING APPLICATIONS

Flex comes with a powerful and extensible framework of components. The framework isn’t bound to any one style or look. The Flex components do come with a default look and feel, but you can easily change them using styles. You have the ability to quickly modify specific style properties of individual components or even create styles that can be applied to all components. Using Cascading Style Sheets (CSS), you can create reusable styles that let you make major changes to the look of your applications. You can even use custom graphics such as .jpg and .gif files to entirely replace the look of components.

Using Inline Styles

You can apply styles to a component in a couple of ways. You’ve already been using a few style properties in the applications you’ve built. You’ve used properties like fontWeight, fontSize, and backgroundColor in the ContactManager application to customize controls. You applied them using inline styles, meaning you applied the styles inside the MXML tag of a component.

The easiest way to apply these styles is by using Flex Builder’s Design mode. In this mode, the Standard view in the Flex Properties panel gives you the most common style properties for a particular component. For applying complex styles like gradient fills, this panel is a lifesaver. You don’t have to worry about the specifics; you simply select colors with the drop-down color picker or apply font styles and other properties with simple text input fields and drop-down ...