Flex Test Drive: Change the appearance of your application

Video | Code | Tutorial | Links

Create a style sheet

Download the TestDrive solution files (ZIP, 14 MB)

Code

FlexWebTestDrive.mxml

assets/FlexWebTestDrive.css

Tutorial

In the previous four modules, you learned to create, debug, and deploy a Flex application. In this module, you learn how to change the appearance of your application using styling and skinning.

With styling, you set component styles inline in MXML (as you already have) or preferably, in a style sheet using selectors (style rules). Each component has a limited number of styles defined for it. For example, for a Label you can set styles including font-size, font-family, and color. For a Button, you can also set a corner-radius style. If you want to change the appearance of a component more drastically then possible with a component's styles, you need to create or edit the associated component skin—the file specifying what the component should look like.

There are two families of components in the Flex framework: Spark and MX. The tags that start with s, like <s:Button>, are Spark components introduced in Flex 4 or later. The tags that start with mx, like <mx:Button> and <mx:PieChart> (which you will use in the next module), are the older Flex components. You set the appearance of MX components primarily using styling. The Spark components have been rearchitected to primarily use a skinning (rather than styling) model in which each component's associated skin file manages everything related to a component's appearance, including its graphics, its layout, and its states. Many but not all of the MX components have been rearchitected as Spark components. When both Spark and MX versions of a component exist, use the newer Spark version of the component.

In this tutorial, you learn to create a style sheet and define style rules that you apply to your application. In the following tutorials, you create and use component skins.

Step 1: Create a style sheet and a CSS global selector.

Return to FlexWebTestDrive.mxml in Design mode. Navigate to the Appearance view and change font and color styles (see Figure 1).

If you don't want to choose your own values, here are some you can use:
font-family: Verdana, font-size: 10, chrome-color: #494949.

Your components in the design area will reflect these new styles. Even though the global font-size is set to 10 pixels, the XYZ label is still large because it has a font-size style set inline in its MXML tag. Closer, or more specific style values take precedence.

Switch to Source mode. You will see a new Style tag below the Application tag.

In the Package Explorer, you should see a new file, FlexWebTestDrive.css. Open it. You will see a global CSS selector whose styles will be applied to all components.

Run the application and see the different fonts and colors.

Step 2: Move the style sheet into an assets folder.

In the Package Explorer, create a new assets package (if it does not already exist). Drag FlexWebTestDrive.css and drop it in the assets folder. In the Move dialog box that appears, click OK. Return to FlexWebTestDrive.mxml and change the Style tag to use the new location.

Your code should appear as shown here:

Step 3: Modify a CSS selector.

In FlexWebTestDrive.css,change the font-family to Arial, the font-size to 12, and add a symbol-color of white (#FFFFFF).

When typing styles, press Ctrl+spacebar to force Content Assist to pop up so you can select styles from this list (see Figure 3).

Save the file and then run the application. The font has changed again and the scroll arrows are now white.

Step 4: Create a CSS type selector.

In Design mode for FlexWebTestDrive.mxml, select one of the buttons and in the Properties view set its text to bold and white and change its corner radius to 5.Look at the generated code. Return to Design mode and click the Convert to CSS button (see Figure 4). In the New Style Rule dialog box, select Specific component (see Figure 5).

When you set styles in the Properties view, styles are set inline for the selected state.

To move the styles from the component tag to a style sheet, make sure the button component is selected and then click the Convert to CSS button in the Properties view (see Figure 4).

When you choose to create a selector for a specific component, a CSS type selector is created whose styles will automatically be applied to all component instances of this type—in this case, all Button controls.

Return to FlexWebTestDrive.css. You will see a new CSS type selector:

The s in front of Button is to specify that this is the style for Spark Buttons, not MX Buttons.

Return to FlexWebTestDrive.mxml in Design mode or run the application. All the buttons (except the Bigger Text ToggleButton) should now have rounded corners and bold, white text, but the disabled buttons are now difficult to read (see Figure 6).

Step 5: Create a CSS pseudo selector.

In FlexWebTestDrive.css, create a pseudo selector for the disabled state of Button components and set its color to black, #000000.

Look at a component's API to find its defined states that can be used in the pseudo selectors (see Figure 7). Remember you can open a component's API by selecting Help > Dynamic Help, clicking a tag in MXML, and then clicking the API link in the Help view.

Return to FlexWebTestDrive.mxml in Design mode or run the application. You should now be able to read disabled buttons (see Figure 8).

Step 6: Style the ToggleButton controls.

In FlexWebTestDrive.css, use a comma-delimited list to use the same style rule for Button and ToggleButton instances.

The selector should appear as shown here:

The BiggerText ToggleButton should now also have bold, white text and rounded corners (see Figure 9).

Step 7: Create a CSS class selector.

In Design mode, select the Add button and in the Properties view change its chrome-color to a blue color, like #7091B9 (see Figure 10). Click the Convert to CSS button. In the New Style Rule dialog box, select All components with style name and name the style actionButton (see Figure 11). Make this the style used by the Add button in all the application states.

The new selector in FlexWebTestDrive.css should appear as shown here:

This class selector can be selectively applied to any component.

Return to Source mode in FlexWebTestDrive.mxml and locate the addBtn button. It now has a styleName property (for one state) set equal to the name of the class selector you just defined.

To set it for all states, modify the source code to styleName="actionButton".

Step 8: Assign a CSS class selector to another component.

In Design mode, select the Bigger Text button in the Departments state. Select the actionButton style in the Properties view (see Figure 12).

Any styles that can be applied to that component will appear in the drop-down list.

The ToggleButton tag should appear as shown here:

The actionButton style was selectively applied to this second button, which should now also be blue (see Figure 13).

Step 9: Set the Application background color.

In FlexWebTestDrive.css, create a Spark Application selector and set the backgroundColor to light gray, #E6E6E6.

The selector should appear as shown here:

Save the file and run the application. The background color should now be light gray when the application loads and when it is displayed.

Step 10: Create a CSS ID selector.

In Source mode of FlexWebTestDrive.mxml, give the XYZ Label an id of xyzLabel and remove its color, fontWeight, and fontSize styles. In FlexWebTestDrive.css, create an ID selector for the Label using #xyzLabel and set the color to #FFFFFF, the font-weight to bold, and the font-size to 24.

Your Label should appear as shown here:

 Your CSS ID selector should appear as shown here:

Return to FlexWebTestDrive.mxml in Design mode or run the application and make sure the XYZ Label is large, white, and bold (see Figure 14).

In this tutorial, you learned to create a style sheet and define CSS global, type, class, pseudo, and ID selectors. In addition to these selectors, you can also create component specific class selectors and descendant selectors. In the next tutorial, you will learn to change the appearance of a component more drastically by creating and using skins.

Learn more

Documentation: Using Flex 4.5

• Styles and themes
• Using Cascading Style Sheets
• About style value formats
• Applying styles
• About style inheritance
• Using the StyleManager class
• Loading style sheets at runtime
• Applying themes with Flash Builder

Flex Developer Center

• UI design and RIA workflows