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

Figure 1. Preview the sample application.

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

Requirements

In order to complete this tutorial, you need the following software and files:

Flash Builder 4

• Download
• Learn more

Sample files:

• ex3_03_starter.zip (ZIP, 20 KB)
• ex3_03_solution.zip (ZIP, 19 KB)

Prerequisite knowledge

• Exercise 1.1: Creating and skinning an application
• Exercise 1.3: Creating and using an MXML class
• Exercise 3.1: Using text controls
• Exercise 3.2: Using text layout features

Using the Appearance view and the CSS global selector

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

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

5. Run the application.

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

   

   Figure 2. Run the starter file.

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 10 (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.

   

   Figure 3. Change the global font to Verdana and the font size to 10.

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

   

   Figure 4. Notice the EmployeePortal.css file.

10. Open EmployeePortal.css.

    You should see the global selector with the fontFamily property value of Verdana and the fontSize property value of 10 (see Figure 5).

    

    Figure 5. Open the EmployeePortal.css file.

11. Open the EmployeePortal.mxml file and switch to Source mode.

12. Locate the Style tag that was generated when you changed the global font style (see Figure 6).

    

    Figure 6. Locate the generated Style tag.

13. Move the Style tag from below the Properties of the parent comment and place it below the Styles comment (see Figure 7).

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

    

    Figure 7. Move the Style tag.

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

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

Figure 8. See all the text ecept the title reflects the global css selector.

Using a component selector

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 go 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 9).

   

   Figure 9. Change the Employee of the Month Panel container background to light grey.

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.

   <s:Panel width="287" height="472" 
       title="Employee of the Month" 
       backgroundColor="#E8E8E8">
            <components:EmployeeOfTheMonth/>          
   </s:Panel>

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 10.

   

   Figure 10. See the Employee of the Month Panel container has a light-grey background.

7. Return to Flash Builder.
8. Open EmployeePortal.css.

9. Below the global selector, create a Panel container selector that will set the backgroundColor property value.

   global
   {
       fontFamily: Verdana;
       fontSize: 10;
   }
    
   s|Panel
   {
       backgroundColor: #E8E8E8;
   }

10. Save the file.

11. Run the application.

    You should see the panels reflect the new background color except for the Monthly Events panel, which contains a TextArea control with background color (see Figure 11).

    

    Figure 11. Compare the panel background colors.

12. From the opening tag of the Employee of the Month Panel container, remove the backgroundColor property value.

    <s:Panel width="287" height="472" 
        title="Employee of the Month">
               
    <components:EmployeeOfTheMonth/>
               
    </s:Panel>

13. Save the file and run the application.

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

    

    Figure 12. Run the application to see it still looks the same.

14. Open the MonthlyEvents.mxml file.

15. In Source mode, locate the opening TextArea control tag.

    <s:TextArea color="#0B85B7" 
        height="100%" width="287"
        contentBackgroundColor="#FCFCE0" 
        editable="false" 
        paragraphSpaceBefore="4">
    ...

16. From the tag, remove the contentBackgroundColor property value.

    <s:TextArea color="#0B85B7" 
        height="100%" width="287"
        editable="false" 
        paragraphSpaceBefore="4">
    ...

17. To the tag, assign the contentBackgroundAlpha property a value of 0.

    This will make the TextArea control transparent.

    <s:TextArea color="#0B85B7" 
        height="100%" width="287" 
        editable="false" 
        paragraphSpaceBefore="4"
        contentBackgroundAlpha="0">
    ...

18. Save the file and run the application.

You should see that all three panels have gray backgrounds (see Figure 13).

Figure 13. Run the application to see the background color applied to all three Panel containers.

Using multiple selectors

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

1. Return to the EmployeePortal.css file in Flash Builder.

2. Below the CSS selector for the Panel container, create a CSS selector for the Button control class.

   s|Panel
   {
       backgroundColor: #E8E8E8;
   }
    
   s|Button
   {
    
   }

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

   s|Button
   {
       color: #0074AA;
   }

4. Save the file and run the application.

   You should see the Button control label text is now blue, as shown in Figure 14.

   

   Figure 14. Run the application and see the Button control label text is blue.

5. Return to the EmployeePortal.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).

   s|Button
   {
       color: #0074AA;
   }
    
   s|Button
   {
       color: #000000;
   }

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 15).

   

   Figure 15. Run the application to see the Button control label text is black.

8. Return to the EmployeePortal.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.

   s|Button
   {
       color: #000000;
   }
    
   s|Button
   {
       font-family:"Arial";
   }
   
   

10. Save the file and run the application.

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

    

    Figure 16. Change the Button control label text font to Arial.

Creating a custom CSS namespace

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

1. Return to the EmployeePortal.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.

   @namespace s "library://ns.adobe.com/flex/spark";
   @namespace mx "library://ns.adobe.com/flex/halo";
   @namespace cx "components.*";

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

   s|Button
   {
       font-family:"Arial";
   }
   
   cx|MonthlyEvents
   {
       color: #000000;
   }

4. Save the file.
5. Open the MonthlyEvents.mxml file.

6. Locate the TextArea control and remove the color property value from the opening tag.

   <s:TextArea height="100%" width="287"
      editable="false"
      paragraphSpaceBefore="4"
      contentBackgroundAlpha="0.0">

7. Save the file and run the application.

You should see the text color within the Monthly Events panel is black (see Figure 17).

Figure 17. Run the application to see the text within the Monthly Events Panel container is black.

Test your knowledge

What does the global selector do in a CSS file?

A global selector defines styles that can be applied to the entire application.

What is the multiple selector rule?

The multiple selector rule states that for components with the same properties, the last property takes precedence. If there are two components with different properties, both are applied.

How do you define a custom namespace within a CSS file?

Using @namespace cx "components.*"; will define the custom namespace where cx can be the name of the custom space and components refers to the directory where the mxml components are kept.

About the author