Requirements

Prerequisite knowledge Required products Exercise files User level

Flash Builder 4.7 Premium (Download trial)

Beginning

 
Introduction

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

 
Use 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 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.
     
Run the starter file.
Figure 2. Run the starter file.
 
  1. Return to Flash Builder.
  2. Switch to Design mode.
  3. 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.
     
Change the global font to Verdana and the font size to 11.
Figure 3. Change the global font to Verdana and the font size to 11.
 
  1. In the Package Explorer view, notice the generated ex5_02_starter.css file (see Figure 4).
Notice the ex5_02_starter.css file.
Figure 4. Notice the ex5_02_starter.css file.
 
  1. 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.
     
  1. Open the ex5_02_starter.mxml file and switch to Source mode.
  2. Locate the Style tag that was generated when you changed the global font style.
<!-- Properties of the parent ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ --> <s:layout> <s:BasicLayout/> </s:layout> <fx:Style source=”ex5_02_starter.css”/> <!-- Metadata ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
  1. 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.
     
<!-- Styles ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ --> <fx:Style source="ex5_02_starter.css"/> <!-- Script ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
  1. Save the file.
  2. Run the application.
You should see application text reflects the global style selector located in ex5_02_starter.css (see Figure 5).
 
See all the text except the title reflects the global css selector.
Figure 5. See all the text except the title reflects the global css selector.

 
Use 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 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).
Change the Employee of the Month Panel container background to light grey.
Figure 6. Change the Employee of the Month Panel container background to light grey.
 
  1. Switch to Source mode.
  2. Locate the EmployeeOfTheMonth Panel container.
  3. Note that the opening tag of the Panel container has the backgroundColor property set to #E8E8E8.
<components:EmployeeOfTheMonth title="Employee of the Month" x="24" y="95" backgroundColor="#E8E8E8"/>
  1. 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.
     
The Employee of the Month panel container has a light-grey background.
Figure  7. The Employee of the Month panel container has a light-grey background.
 
  1. Return to Flash Builder.
  2. Open ex5_02_starter.css.
  3. 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.
 
global { fontFamily: Verdana; fontSize: 10; } s|Panel { background-color: #E8E8E8; }
  1. Save the file.
  2. Run the application.
    You should see that all of the panels now have the new background color (see Figure 8).
     
Compare the panel background colors.
Figure 8. Compare the panel background colors.
 
  1. Return to the ex5_02_starter.mxml file in Flash Builder.
  2. From the opening tag of the Employee of the Month Panel container, remove the backgroundColor property value.
<components:EmployeeOfTheMonth title="Employee of the Month" x="24" y="95"/>
  1. 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.
     

 
Use multiple selectors

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.
s|Panel { background-color: #E8E8E8; } s|Button { }
  1. Within the selector, assign the color property a value of #0074AA (blue).
s|Button { color: #0074AA; }
  1. Save the file and run the application.
  2. Note that the label text for all of the Button controls are now blue (see Figure 9).
     
Run the application; the Button control label text is blue.
Figure 9. Run the application; the Button control label text is blue.
 
  1. Return to the ex5_02_starter.css file in Flash Builder.
  2. 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; }
  1. 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).
     
Run the application to see the Button control label text is black.
Figure 10. Run the application to see the Button control label text is black.
 
  1. Return to the ex5_02_starter.css file in Flash Builder.
  2. 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"; }
  1. Save the file and run the application.
    You should see the button label text changed to Arial (see Figure 11).
     
Change the Button control label text font to Arial.
Figure 11. Change the Button control label text font to Arial.
 

 
Create 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 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.
@namespace s "library://ns.adobe.com/flex/spark"; @namespace mx "library://ns.adobe.com/flex/mx"; @namespace cx "components.*";
  1. Below the third Button control selector, use the cx namespace to change the color of text in the MonthlyEvents Panel container to #0B85B7 (blue).
s|Button { font-family:"Arial"; } cx|MonthlyEvents { color: #0B85B7; }
  1. Save the file and run the application.
  2. You should see that the text color within the Monthly Events panel is now blue (see Figure 12).
     
The text color in the Monthly Events panel is blue.
Figure  12. The text color in the Monthly Events panel is blue.
 
  1. Return to the ex5_02_starter.mxml file.
  2. To the Monthly Events component, add a color property and assign the value to #000000 (black).
  3. 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.
     
 The text in the Monthly Events panel is now black.
Figure 13. The text in the Monthly Events panel is now black.
 
In this exercise you used the Flash Builder Appearance view and cascading style sheets (CSS) to create styles.
 

Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License+Adobe Commercial Rights


This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe.