A type selector consists of the name of an ActionScript class that represents a visual component, followed by a code block containing one or more style declarations. This type selector declares a set of styles that are applied to all Label controls:

Label {
  color:#ff0000;
  font-size:14;
}

Because ActionScript class names are case-sensitive, type selectors must be spelled exactly the same as the names of the ActionScript visual components to which the styles are being applied.

Multiple type selectors

You can apply a set of styles to multiple types using a selector consisting of a comma-delimited list. This declaration applies to all instances of the Label, Text, TextInput, and TextArea controls:

Label, Text, TextInput, TextArea {
  color:#ff0000;
  font-size:14;
}

Type selectors and custom components

Type selectors also can be used to apply styles to instances of your own custom components. For example, if you create a custom component in an MXML file named MyComponent.mxml, its type is MyComponent. This style sheet applies styles to all instances of the custom component:

MyComponent {
  color:#ff0000;
  font-size:14;
}

Type selectors and class inheritance

When you declare a type selector in a style sheet, the selector's inheritable styles apply to all instances of that type and to all instances of any of the type's subclasses. For example, because the VBox and HBox containers are both extended from the Box superclass, the Box selector applies its style declarations for all instances of either container:

Box {
  background-color:silver;
  border-style:solid;
  border-color:black;
  border-thickness:2;
  padding-top:5;
  padding-bottom:5;
  padding-left:5;
  padding-right:5;
}

Figure 10.1 shows the resulting application with an HBox and VBox that use the same styles.

Figure 10.1. VBox and HBox using the Box selector styles

Class inheritance also is taken into account with custom components. If a custom component named MyComponent is extended from the VBox or HBox containers, it also would apply the inheritable styles declared in the Box selector.

Because the Canvas container isn't extended from Box, to apply the same styles to this container as well, you could use a multiple type selector:

Box, Canvas {
  . . . style declarations . . .
}

A style name selector, also sometimes known as a class selector, consists of any valid string, prepended with a period (.). Style names are typically created with an initial lowercase character and any mixture of uppercase and lowercase characters after that. This style name selector contains a single style declaration:

.redFont {
  color:#ff0000;
}

A style name selector doesn't apply its styles to any object on its own. Instead, each object "opts in" to apply the selector's styles with the styleName property. This Label control uses the style rules in the redFont selector:

<mx:Label text="Hello World" styleName="redFont"/>

Style name selectors can be declared in the Application or within any custom component. If the same style name selector is declared at two levels of the application's containership and sets conflicting values for any particular style, the declaration in the custom component takes precedence.

The global selector has a reserved name of global (always typed in all lowercase). Styles declared within the global selector are applied to all visual components in the entire application.

This global declaration sets the default font family and color for the entire application:

global {
  font-family:Times New Roman, Times, serif;
  color:purple;
}

You can embed a style sheet in an MXML application or component with the <mx:Style> compiler tag set. As previously described, a style sheet embedded in a custom component can include only style name selectors. Style sheets embedded in the Application can contain a mixture of type, style name, and global selectors.

The code in Listing 10.1 shows an application with an embedded style sheet. The embedded style sheet's selectors and rules are applied to the entire application.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="<st>http://www.adobe.com/2006/mxml"
   horizontalAlign="center"
  layout="horizontal">

  <mx:Style>

    global {
      font-family:Times New Roman, Times, serif;
      color:purple;
    }

    Box {
      background-color:silver;
      border-style:solid;
      border-color:black;
      border-thickness:2;
      padding-top:5;
      padding-bottom:5;
      padding-left:5;
      padding-right:5;
    }

    .redFont {
      color:#ff0000;
    }

  </mx:Style>

  <mx:VBox>
    <mx:Label text="Hello World" styleName="redFont"/>
    <mx:Button label="Click me"/>
  </mx:VBox>

  <mx:HBox>
    <mx:Label text="Hello World"/>
    <mx:Button label="Click me"/>
  </mx:HBox>

</mx:Application>

You can store style sheets in text files with a file extension of .css. As with embedded style sheets, an external style sheet contains a collection of style selectors, each declaring one or more style and value.

Flex Builder can create a new style sheet for you in a couple of ways:

Creating a blank style sheet

To create a new blank style sheet, select File → New → CSS File from the Flex Builder menu, or right-click in the Flex Navigator view and select New → CSS File . As shown in Figure 10.2, set the filename and location of the CSS file.

Figure 10.2. Creating a new external style sheet

After you've created the external style sheet file, you can manually add selectors and properties. As shown in Figure 10.3, Flex Builder provides code completion support in external style sheets that helps you correctly type the property names and values. To get code completion help at any time, press Ctrl+spacebar to see available properties and values.

Figure 10.3. Code completion in an external style sheet

Listing 10.2 shows the contents of an external style sheet file. Notice that there is no <mx:Style> tag set, because this is no longer an MXML file.

global {
  font-family:Times New Roman, Times, serif;
  color:purple;
}
Box {
  background-color:silver;
  border-style:solid;
  border-color:black;
  border-thickness:2;
  padding-top:5;
  padding-bottom:5;
  padding-left:5;
  padding-right:5;

}
  .redFont {
    color:#ff0000;
}

To incorporate an external style sheet into an application, declare the <mx:Style> tag set with a source property referring to the style sheet file by its name and relative location:

<mx:Style source="styles.css"/>

Listing 10.3 shows the application now referring to an external style sheet.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="<st>http://www.adobe.com/2006/mxml"
  horizontalAlign="center" layout="horizontal">
  <mx:Style source="styles.css"/>
  <mx:VBox>
    <mx:Label text="Hello World" styleName="redFont"/>
    <mx:Button label="Click me"/>
  </mx:VBox>
  <mx:HBox>
    <mx:Label text="Hello World"/>
    <mx:Button label="Click me"/>
  </mx:HBox>
</mx:Application>

Exporting existing styles

Flex Builder 3 adds a new feature that allows you to export inline styles of any component instance to an external style sheet and then link the current application to that external file.

When you export styles from a component instance, you can define what kind of selector the styles should be applied to the following:

Follow these steps to learn how this feature works:

Figure 10.4. Exporting styles from the Flex Properties view

Click to export styles

Figure 10.5. The New Style Rule dialog box

<mx:Label text="Hello World" fontSize="14"/>

<mx:Label text="Hello World" fontWeight="bold"/>

<mx:Label text="Hello World" color="0x0000FF"/>

Label {
  color:rgb(100%, 0%, 0%);
}

<mx:Label text="Hello World" color="teal"/>

<mx:Button label="Click Me" fillColors="[blue, white]"/>

Button {
  fill-colors:#0000ff,#000000;
}

The application's source now contains an <mx:Style> declaration pointing to the external style sheet, and the Label control's inline styles have been removed:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="vertical">
    <mx:Label text="Hello World"/>
    <mx:Style source="newStyleSheet.css"/>
</mx:Application>

The external style sheet now contains the styles that were part of the Label declaration, now applied in a type selector:

/* CSS file */
Label
{
    color: #ff0000;
    fontSize: 14;
}

Flex Builder 3 can create a compiled style sheet with a simple menu selection. These steps describe how to compile a style sheet:

Figure 10.6. Using the Compile CSS to SWF option

The compiled SWF file is created in the same folder as the external style sheet, and is also copied to the project's output folder.

You should see the new compiledstyles.swf file in the project source folder.

The compiled style sheet file becomes an asset that can be dynamically loaded at runtime. Its styles can then immediately be applied to existing component instances in the application.

To load the precompiled application at runtime, use an ActionScript class named StyleManager. The class has a method named loadStyleDeclarations() that loads compiled style sheets and optionally updates the application's style declarations immediately.

Follow these steps to use the StyleManager class:

When the application first loads, the Label control is displayed with its default font color, weight, and size. When you click Load Styles, the application loads the compiled style sheet and updates the Label control's presentation.

Using the StyleManager class, you also can unload styles, delay style updates, and react to various events in the process of working with dynamic styles.

Every visual component in the Flex framework supports methods named setStyle() and getStyle() that allow you to set or get any particular style's values. As described previously, you cannot use simple dot syntax to access style information (as you might with a component property). This code, for example, would produce a compiler error:

myLabel.fontSize=18;

The use of dot syntax to separate a component instance id and its members works with properties, but not with styles.

Instead, use the setStyle() method to reset a style's value at runtime:

myLabel.setStyle("fontSize", 18);

And use the getStyle() method to get a style's value:

var currentSize:Number = myLabel.getStyle("fontSize");

The code in Listing 10.5 shows an application with Label control and two Button controls. Clicking Change Font Size results in modifying the Label control's font size at runtime. Clicking Get Font Size displays the Label control's current font size.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
      layout="vertical">

    <mx:Label id="myLabel" text="Hello World" fontSize="10"/>

    <mx:Button label="Change Font Size"
    click="myLabel.setStyle('fontSize', 18)"/>

<mx:Button label="Get Font Size"
      click="myLabel.text='Current font size: ' +
      myLabel.getStyle('fontSize')"/>

</mx:Application>

As shown in Figure 10.7, the Label displays its own current font size when the second button is clicked.

Figure 10.7. The font size changes when the ActionScript code is executed.

<mx:Label text="{'Current font size: ' + myLabel.getStyle('fontSize')}"/>

You can modify style selectors at runtime with the CSSStyleDeclaration and StyleManager classes. You can use one of these approaches:

Using bound CSS declarations

To bind a CSSStyleDeclaration to a style selector, pass the selector as an argument to the class's constructor method:

var style:CSSStyleDeclaration = new CSSStyleDeclaration("Label");

Then, to change the styles in the selector, use the object's setStyle() method using the same syntax as with individual component instances:

style.setStyle("fontSize", 18);

When the setStyle() method is executed, the selector and any component instances it effects are updated immediately.

Binding CSS declarations with the StyleManager class

You can delay updates of styles by using unbound instances of CSSStyleDeclaration. To create an unbound style declaration, use the class's constructor method without any arguments:

var style:CSSStyleDeclaration = new CSSStyleDeclaration();

Set the style declaration's rules with the setStyle() method as described previously. Then, to bind the declaration to a style selector, call StyleManager.setStyleDeclaration() with three arguments:

The code in Listing 10.6 declares an unbound instance of CSSStyleDeclaration, sets two styles, and then binds and updates the styles.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
      layout="vertical">
  <mx:Script>
    <![CDATA[
      private function setLabelStyles(size:Number, weight:String):void
      {
        var style:CSSStyleDeclaration = new CSSStyleDeclaration();
        style.setStyle("fontSize", size);
        style.setStyle("fontWeight", weight);
        StyleManager.setStyleDeclaration("Label", style, true);

}
    ]]>
    </mx:Script>
    <mx:Style>
    Label {
      font-size:12;
    }
    </mx:Style>
    <mx:Label text="Hello World"/>
    <mx:Button label="Change Label Styles"
    click="setLabelStyles(18, 'bold')"/>
</mx:Application>

A graphical skin is an image that is designed to replace the default appearance of a Flex visual component. You can create graphical skins in these formats:

When a skin graphic will always be displayed with the same dimensions, you can use bitmap graphics built in any of these formats and have the freedom to use any graphical editing application you like. Many applications successfully create .png, .gif, and .jpg format graphic files, including Adobe Fireworks, Photoshop, and Illustrator.

When you create a bitmap graphic to use as a skin, the original graphic should be sized exactly as you want it to appear in Flex. For example, all the graphical skins that will be used to visually represent the CheckBox controls typically share the same dimension of width and height (to create a square appearance).

Graphical skins are assigned to visual components through the styles API. The Styles documentation for any particular visual component will include both simple styles that require values typed as String, Number, and Array values and skinning styles that require embedded graphics. For example, the CheckBox component supports these graphical skins to represent the box and tick mark area of the control:

In order to properly skin the CheckBox component, each icon style should have a graphic assigned to it. To assign a skin, add the appropriate style name, followed by an Embed() declaration that references the graphic file. This declaration means the downIcon.png graphic is displayed when the mouse button is down over a CheckBox with a selected property of true:

downSelectedIcon: Embed(source="skins/downSelectedIcon.png");

Assuming you've created a bitmap graphic for each button state, the CheckBox selector might look like this:

CheckBox
{
    upIcon: Embed(source="skins/upIcon.png");
    downIcon: Embed(source="skins/downIcon.png");
    overIcon: Embed(source="skins/overIcon.png");
    disabledIcon: Embed(source="skins/disabledIcon.png");
    selectedUpIcon: Embed(source="skins/selectedUpIcon.png");
    selectedOverIcon: Embed(source="skins/selectedOverIcon.png");
    selectedDownIcon: Embed(source="skins/selectedDownIcon.png");
    selectedDisabledIcon:
      Embed(source="skins/selectedDisabled.png");
}

Figure 10.8. A skinned CheckBox component

Bitmap versus vector graphics

The first three types of graphics listed here are bitmap graphics, meaning that they store information about individual pixels in the graphic file. These types of graphics don't always scale well when stretched to accommodate a visual component that's been resized. A graphic created as a .png file may look fine when presented in its original size, but when its size is expanded at runtime, it shows the raw pixels in a phenomenon known as pixelating or stair steps.

Figure 10.9 shows a bitmap graphic in its original size of 30 pixels height and width and the same graphic displayed at three times its original size.

Figure 10.9. The effect of scaling on a bitmap graphic

With a bitmap image, the graphic is distorted and pixelated when it's expanded to a scale greater than 100 percent of its original size.

Vector graphics store their information mathematically instead of one pixel at a time. As a result, when these graphics are scaled to a larger size, they don't distort in the same way. You can create vector graphics with either Adobe Flash or Illustrator CS3.

Figure 10.10 shows a vector graphic created in Flash with its original size of 30 pixels height and width and the same graphic displayed at three times its original size.

Figure 10.10. The effect of scaling on a vector graphic

With the vector graphic, the edges of the graphic are recalculated as its scale is increased. The resulting smooth lines and gradients are clearly a better result than with the bitmap approach.

The Flex framework uses a skinning library built in Flash CS3 to determine a Flex application's default visual appearance. The Flash source file that's used to build the graphical skinning library is named AeonGraphical.fla and is stored in this folder under the Flex Builder installation folder:

sdks/3.0.0/frameworks/themes/AeonGraphical/src

If you have Flash CS3, you can open this file and see how it's built. Follow these steps to build it yourself:

Figure 10.12. The Flash skinning source file's Library panel

Follow these steps to create a new skinning graphic in Flash CS3:

After the Flash document has been created, you're ready to use the skinning graphic in a Flex application.

If you're working with Flash and have downloaded the exercise files from the Web site, follow these steps to view a document showing simple skinning graphics for the CheckBox component:

As shown in Figure 10.14, the Linkage properties for each symbol have a class consisting of the component name and the skinning style name, separated by an underscore (_) character.

Figure 10.14. Setting symbol Linkage properties

Flash symbols that will be used as graphical skins have these requirements:

After publishing a document as an .swf file, you're ready to use the Flash symbols as graphical skins.

As described previously, graphical skins are assigned to visual components through the styles interface. When you assign a Flash symbol as a graphical skin, the syntax is similar to that for a bitmap graphic, but you also need to tell the Flex compiler which symbol to use.

This declaration assigns the CheckBox component's downSelectedIcon skin to the appropriate symbol from a compiled Flash document:

downSelectedIcon: Embed(source="skins/CheckBoxSkins.swf",
  symbol="CheckBox_downSelectedIcon");

Flex Builder 3 adds a new feature that allows you to import bitmap or vector-based graphical skins and create the required style sheet declarations. The resulting output is stored in an external style sheet that can then be linked into the application with an <mx:Style> tag set.

You can import vector-based skins that are created in Flash CS3 or Illustrator CS3. In this section, I describe how to prepare skins for import in Flash and then how to import them into your project.

Preparing symbols in Flash for import

Before you can import graphical skins with the Flex Builder skin artwork import tool, the skins must be exported to a Flash component library. A component library is an archived file in .zip format with a file extension of .swc.

Follow these steps to export multiple MovieClip symbols from Flash CS3:

You're now ready to import the graphical skin symbols.

Importing skin artwork

Flex Builder's skin artwork import tool can import graphical skins from these kinds of files:

Follow these steps to import graphics from a Flash component library created using the steps in the preceding section:

The .css file you select now contains skin style declarations wrapped in the selectors you selected. Listing 10.7 shows the resulting style sheet declaration code.

CheckBox
{
    disabledIcon: Embed(skinClass="CheckBox_disabledIcon");
    downIcon: Embed(skinClass="CheckBox_downIcon");

overIcon: Embed(skinClass="CheckBox_overIcon");
    selectedDisabledIcon:
      Embed(skinClass="CheckBox_selectedDisabledIcon");
    selectedDownIcon: Embed(skinClass="CheckBox_selectedDownIcon");
    selectedOverIcon: Embed(skinClass="CheckBox_selectedOverIcon");
    selectedUpIcon: Embed(skinClass="CheckBox_selectedUpIcon");
    upIcon: Embed(skinClass="CheckBox_upIcon");
}

Because the skin symbols are now stored as ActionScript classes in a component library, this syntax assigns each of them to the appropriate style name:

overIcon: Embed(skinClass="CheckBox_overIcon");

The import tool also explicitly adds the component library to the Flex project's build path, as shown in Figure 10.16. Each Flash symbol is exported as an ActionScript class in the component library, the library is in the project's build path, and the style declarations bind the Flash symbol classes to the Flex visual components.

Figure 10.16. The Flex project build path after importing Flash-based skinning symbols

The imported skin library

A complete Flash-based skin library will contain many graphic symbols wrapped in a component library and an associated .css file that binds the symbols to the visual components during the compilation process.