Exercise 5.2: Defining selector styles

In this exercise, you will use the Flash Builder Appearance view and cascading style sheets (CSS) to create the styles shown in Figure 1.

In this exercise, you will learn how to:

• Use the Appearance view and the CSS global selector
• Use a CSS component selector
• Use multiple CSS selectors
• Create a custom CSS namespace

In this section, you will use the Appearance view to change the text style for the sample application.

1. Download the ex5_02_starter.zip file if you haven't already and extract the file ex5_02_starter.fxp to your computer.
2. Open Flash Builder.
3. Import the ex5_02_starter.fxp file.
4. Open the ex5_02_starter.mxml file.
5. Run the application.

   You should see the Employee Portal page shown in Figure 2.

6. Return to Flash Builder.
7. Switch to Design mode.
8. Open the Appearance view and change the global application font from Arial to Verdana, and the font size to 11 (see Figure 3).

   Note: The Appearance view is located by default next to the Properties view. If you do not see the view, select Window > Appearance.

9. In the Package Explorer view, notice the generated ex5_02_starter.css file (see Figure 4).

10. Open ex5_02_starter.css.

    You should see the global selector with the fontFamily property value of Verdana and the fontSize property value of 11.

11. Open the ex5_02_starter.mxml file and switch to Source mode.
12. Locate the Style tag that was generated when you changed the global font style.

13. Move the Style tag from below the Properties of the parent comment and place it below the Styles comment.

    The Style tag will work where it was positioned, but moving it makes your code consistent with the coding convention for this video series.

14. Save the file.
15. Run the application.

You should see application text reflects the global style selector located in ex5_02_starter.css (see Figure 5).

In this section you will use a CSS selector to set the background color for all the Panel containers within the application.

1. Return to Flash Builder and switch to Design mode.
2. Select the Employee of the Month Panel container and use the Properties view to change the background color to #E8E8E8 (see Figure 6).

3. Switch to Source mode.
4. Locate the EmployeeOfTheMonth Panel container.
5. Note that the opening tag of the Panel container has the backgroundColor property set to #E8E8E8.

6. Save the file and run the application.

   You should see the Employee of the Month panel has a light-grey background color as shown in Figure 7.

7. Return to Flash Builder.
8. Open ex5_02_starter.css.
9. Below the global selector, create a Panel container selector that will set the background-color property value to #E8E8E8.

Note: In Flex, you can use either the MXML or CSS version of the background color property—backgroundColor or background-color, respectively. If you use the content assist tool, the CSS property, background-color, will be added.

10. Save the file.
11. Run the application.

    You should see that all of the panels now have the new background color (see Figure 8).

12. Return to the ex5_02_starter.mxml file in Flash Builder.
13. From the opening tag of the Employee of the Month Panel container, remove the backgroundColor property value.

14. Save the file and run the application.

    You should see there has been no visual change made to the application, meaning the component selector is working for the Panel containers.

In this section, you will use CSS to change the styles of Flex controls.

1. Return to the ex5_02_starter.css file in Flash Builder.
2. Below the CSS selector for the Panel container, create a CSS selector for the Button control class.

3. Within the selector, assign the color property a value of #0074AA (blue).

4. Save the file and run the application.

Note that the label text for all of the Button controls are now blue (see Figure 9).

5. Return to the ex5_02_starter.css file in Flash Builder.
6. Below the Button control selector, create another CSS selector for the Button control, assigning the color property value to #000000 (black).

7. Save the file and run the application.

   You should see the Button control label text is now black because the second selector is being processed due to the multiple selector rule (see Figure 10).

8. Return to the ex5_02_starter.css file in Flash Builder.
9. Below the Button control selector, create another CSS selector for the Button control, assigning the font-family property value to Arial.

10. Save the file and run the application.

    You should see the button label text changed to Arial (see Figure 11).

In this section, you will create a custom namespace to style the custom components within the Employee Portal.

1. Return to the ex5_02_starter.css file in Flash Builder.
2. Below the declaration of the mx namespace, use the @namespace syntax to create the namespace cx, that references the contents of the components folder.

3. Below the third Button control selector, use the cx namespace to change the color of text in the MonthlyEvents Panel container to #0B85B7 (blue).

4. Save the file and run the application.

You should see that the text color within the Monthly Events panel is now blue (see Figure 12).

5. Return to the ex5_02_starter.mxml file.
6. To the Monthly Events component, add a color property and assign the value to #000000 (black).
7. Save the file and run the application.

   The text color within the Monthly Events panel is now black (see Figure 13). The property on the Panel container overrides the value set with CSS.

In this exercise you used the Flash Builder Appearance view and cascading style sheets (CSS) to create styles.