This chapter is from the book
This chapter is from the book
This chapter is from the book
Applying Styles Using CSS
Although applying styles inline is easy, the real power of the styling framework is that you can define sets of styles, called selectors, and apply them to many component instances. Selectors are defined using CSS (cascading style sheets) syntax written in either external style sheets or in between <mx:Style> tags within a component.
The CSS syntax used in Flex is similar to that used in HTML; however, there are some important differences you should be aware of. This section discusses local and external styles, the various available selectors, and compares Flex CSS to HTML CSS.
Understanding Local and External Styles
Styles can be defined using CSS in either an external style sheet or within MXML <mx:Style> tags. Styles defined in the latter mode are available only to the components and their children that are created within that particular MXML file. Using an external style sheet is recommended because it keeps all the styles centralized, which can increase legibility and simplify maintenance. Also, external style sheets can be packaged into themes and then dynamically loaded to change the look of an application without needing to recompile the application, as described later in this chapter.
Unless otherwise specified, a Flex application loads the standard Halo theme. The style sheet associated with this theme is located at [Adobe Flex Builder 3]/sdks/3.0.0/frameworks/projects/framework/defaults.css. Although this style sheet doesn't define every property for all components, it does define a lot of them. If you replace this file or load a different style sheet, your application may look pretty plain unless you redefine a lot of styles.
Understanding CSS Selectors
Style definitions, whether created externally or locally, comprise a set of styles, called selectors. Based on how they're named, they are applied to components in one of several ways: per instance (class selector), per class (type selector), or globally (global selector). Listing 4-3 provides the general syntax of how styles are defined in CSS.
Listing 4-3. Typical CSS selector syntax
style_name
{
style_property: value;
[...]
}
Class Selectors
Class selectors define a set of properties that can be applied to specific instances of components. For example, a class selector named bigRed may specify fontSize of 24 and color value of 0xFF0000 (see Listing 4-4). These properties can then be applied to any instance of a component by setting the styleName property to bigRed (see Listing 4-5).
Listing 4-4. The bigRed class selector definition
.bigRed
{
fontSize: 24;
color: #FF0000;
}
Listing 4-5. The bigRed class selector being applied to an instance of button and an instance of ComboBox
<mx:Button styleName="bigRed" /> <mx:ComboBox styleName="bigRed" />
Type Selectors
Type selectors define a set of properties that are automatically applied to all instances of a certain component. For example, a Button type selector that specifies a color value of 0xFF0000 causes all instances of button to have red text (see Listing 4-6).
Listing 4-6. A Button type selector specifying red text
Button
{
color: #FFFFFF;
}
The Global Selector
The global selector is a special type selector that can impact nearly every component of a Flex or AIR application. Basically, if no other styles have been defined for a component, a value from the global selector will be applied, if available.
Because Application (or WindowedApplication in AIR) is typically the topmost container, defining a type selector for Application seems to behave very similarly to using the global selector. However, the key difference is that setting a style property in the global selector can affect even noninheriting properties. For example, setting cornerRadius to 8 in the global selector affects all components that have a cornerRadius style property, even though cornerRadius is not an inheritable style (see Listing 4-7). Setting cornerRadius to 8 in only the Application selector will not impact any components.
Also, the global selector impacts components that are not actually children of the main Application container, such as popup alerts or windows.
Listing 4-7. The special global selector specifying a cornerRadius of 8 pixels
global
{
cornerRadius: 8px;
}
HTML versus Flex CSS
If you've used CSS in HTML, the syntax for CSS in Flex will be familiar, but you'll find that the capabilities differ. Flex does not actually allow you to "cascade" styles in CSS as you can with HTML. For example, the CSS code snippet in Listing 4-8 will not apply styling to a button inside a component called SearchInput. CSS in Flex also does not support pseudo selectors, like img:hover. This means the code in Listing 4-9 would not affect the over state of a button in Flex, as it might in HTML. Furthermore, you cannot specify dimensions (such as width and height) and positioning (such as x and y), as you can in HTML.
Listing 4-8. Cascading styles, as depicted here, will not work in the Flex CSS implementation
SearchInput Button
{
color: #FFFFFF;
fillColors: #72CFFF, #165D81;
}
Listing 4-9. Pseudo selectors, as shown here, will not work in the Flex CSS implementation
Button:over
{
color: #222222;
fillColors: #72CFFF, #165D81;
}