Requirements

Prerequisite knowledge Required products Exercise files User level

Flash Builder 4.7 Premium (Download trial)

Beginning

 
Introduction

In this exercise you will create a skin for the Employee Portal application and use the provided skinning components to configure the application so that it appears as shown in Figure 1.
 
Review your tasks for this exercise.
Figure 1. Review your tasks for this exercise.
 

 
Create a skin

In this section, you will use Flash Builder to create a skin for the Employee Portal application.
 
  1. Download the ex5_05_starter.zip file if you haven't done so already and extract the ex5_05_starter.fxp file to your computer.
  2. Open Flash Builder.
  3. Import the ex5_05_starter.fxp file.
  4. Within the Package Explorer, right-click the skins folder and select New > MXML Component (see Figure 2).
Create a new MXML application.
Figure 2. Create a new MXML application.
 
  1. In the New MXML Component dialog box, name the component ApplicationContainerSkin.
  2. Base the component on the spark.skins.SparkSkin package and remove the width and height properties (see Figure 3).
Name the application ApplicationContainerSkin.
Figure 3. Name the application ApplicationContainerSkin.
  1. Click Finish.
    The ApplicationContainerSkin.mxml file will open in the Editor.
     
  2. Between the SparkSkin tags, below the Declarations block, create a Metadata block:
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"> <fx:Metadata> </fx:Metadata> </s:SparkSkin>
  1. Between the Metadata tags, type [H to invoke the content assist tool, select the HostComponent() function and assign the spark.components.Application package to the skin:
<fx:Metadata> [HostComponent("spark.components.Application")] </fx:Metadata>
The HostComponent metadata tag identifies the host component of a Spark skin class. As a result of this definition, you can access the public members of the host component's instance from within the skin. In other words, in this case, you can access the properties of the Application tag.  You will learn how to use component properties in a later video and exercise.
 
  1. Below the Metadata tag block, add a states tag block:
... </fx:Metadata> <s:states> </s:states>
  1. Within the states block, add a State instance and add the name property with a value of normal:
<s:states> <s:State name="normal"/> </s:states>
  1. Below the State instance, add another State instance and add the name property with a value of disabled:
<s:states> <s:State name="normal" /> <s:State name="disabled" /> </s:states>
  1. Below the states block, add a Rect tag block:
... </s:states> <s:Rect> </s:Rect>
  1. Within the opening Rect tag, assign the width property value to 848, the height property value to 600, and the x and y property values to 0:
<s:Rect width="848" height="600" x="0" y="0"> </s:Rect>
  1. To the opening Rect tag, add the radiusX and radiusY properties, each with a value of 10.
<s:Rect width="848" height="600" x="0" y="0" radiusX="10" radiusY="10"> </s:Rect>
  1. Between the Rect tags, add a fill property block.
<s:Rect width="848" height="600" x="0" y="0" radiusX="10" radiusY="10"> <s:fill> </s:fill> </s:Rect>
  1. Between the <code>fill</code> tags, add a <code>SolidColor</code> instance with the <code>color</code> property value assigned to <code>#CCCCCC</code>
<s:fill> <s:SolidColor color="#CCCCCC"/> </s:fill>
  1. Save the file.

 
Apply a skin

In this section you will apply the ApplicationContainerSkin component to the Employee Portal application.
 
  1. From the Package Explorer view, open the ex5_05_starter.mxml file.
  2. To the opening Application tag, assign the skinClass property value to skins.ApplicationContainerSkin.
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:components="components.*" skinClass="skins.ApplicationContainerSkin">
  1. Save the file.
  2. Run the application.
You should see a gray rectangle with rounded corners, which will be the skin for the application (see Figure 4). Note that none of the content is displayed in the application.
 
Run the application to see the gray application skin applied.
Figure 4. Run the application to see the gray application skin applied.
 

 
Display content within a skin

In this section, you will use a Flex container control to display the Employee Portal application through the ApplicationContainerSkin skin.
 
  1. Return to the ApplicationContainerSkin.mxml file in Flash Builder.
  2. Below the closing Rect tag, create a Group container and assign the id property value to contentGroup:
</s:Rect> <s:Group id="contentGroup"> </s:Group>
  1. Save the file and run the application.
    You should see the Employee Portal application is now visible, but is not centered in the browser (see Figure 5).
     
Run the application to see the Employee Portal application is not centered within the browser.
Figure 5. Run the application to see the Employee Portal application is not centered within the browser.
 
  1. Return to the ApplicationContainerSkin.mxml file in Flash Builder.
  2. To the opening Rect tag, remove the x and y properties.
  3. Assign the horizontalCenter and verticalCenter properties to the Rect tag with a value of 0. This will constrain the application background to the center of the browser.
<s:Rect width="848" height="600" radiusX="10" radiusY="10" horizontalCenter="0" verticalCenter="0">
  1. Save the file and run the application.
    You should see that the gray application skin is now centered in your browser. Also notice that when you resize your browser, the skin remains centered within your browser, but the content does not stay centered (see Figure 6).
     
The gray application skin is centered within the browser.
Figure 6. The gray application skin is centered within the browser.
 
  1. Return to the ApplicationContainerSkin.mxml file.
  2. To the opening Group tag, assign the horizontalCenter and verticalCenter properties a value of 0. This will constrain the application content to the center of the browser.
  3. Save the file and run the application.
    Note that the application content is constrained to the center of the browser, but the content does not look centered. This is because padding was previously added to the static position values so that the content did not start at a position of x="0" and y="0" (see Figure 7).
     
The content does not look centered in the browser.
Figure 7. The content does not look centered in the browser.
 
  1. Return to the ex5_05_starter.mxml file.
  2. To the opening HGroup tag, change the x and y values to 0.
  3. To the components:EmployeeOfTheMonth tag, change the x value to 0. Leave the y value since you will be adding a title bar later which needs the extra space.
  4. To the components:EmployeeDirectory tag, change the x value to 0.
  5. To the components:Cafeteria tag, change the x value to 275.
  6. To the components:MonthlyEvents tag, change the x value to 550.
  7. To the LOGOUT Button control, change the x value to 710.
  8. Save the file and run the application.
    You should now see that both the application skin and the content are constrained to the center of the browser (see Figure 8).
     
The application skin and content are centered in the browser.
Figure 8. The application skin and content are centered in the browser.
 
Currently the ApplicationContainerSkin is hardcoded to a specific height and width value. If you make changes to the content, the skin will not automatically resize. Next you will make the ApplicationContainerSkin reusable by nesting and constraining the gray background rectangle and the contentGroup container instance inside of a new Group container.
 
  1. Return to the ApplicationContainerSkin.mxml file.
  2. Surround the Rect control and the contentGroup container with a Group container.
  3. Remove the horizonalCenter and verticalCenter properties from the opening Rect and contentGroup tags.
  4. To the opening tag of the new parent Group container, add the horizontalCenter and verticalCenter properties with a value of 0.
  5. From the opening Rect tag, remove the width and height properties.
  6. Add the left, right, top, and bottom properties to the Rect tag with a value of 0. This will constrain the rectangle zero pixels to the left, right, top and bottom of the parent Group container.
  7. To the opening tag of the contentGroup container, add the left, right, top, and bottom properties with a value of 30. This constrains the contentGroup container to 30 pixels to the to the left, right, top, and bottom of the parent Group container.
<s:Group horizontalCenter="0" verticalCenter="0"> <s:Rect left="0" right="0" top="0" bottom="0" radiusX="10" radiusY="10"> <s:fill> <s:SolidColor color="#CCCCCC"/> </s:fill> </s:Rect> <s:Group id="contentGroup" left="30" right="30" top="30" bottom="30"> </s:Group> </s:Group>
  1. Save the file and run the application.
    You should see that the application skin now has a 30-pixel border around the content (see Figure 9).
     
The application has a 30-pixel border around the content.
Figure 9. The application has a 30-pixel border around the content.
 

 
Skin a Flex container

In this section, you will apply a skin to the EmployeePortal header image.
 
  1. From the Package Explorer view, open and review the TopContainerSkin.mxml file.
    Note that the TopContainerSkin.mxml contains code similar to the code in the ApplicationContainerSkin.mxml file.
     
  2. Open the ex5_05_starter.mxml file.
    To make the title bar skinnable, you will replace the HGroup container with a SkinnableContainer container.
     
  3. Change the opening and closing HGroup tags to SkinnableContainer tags.
  4. To the opening SkinnableContainer tag, assign the skinClass property value to skins.TopContainerSkin.
<s:SkinnableContainer x="0" y="0" gap="15" skinClass="skins.TopContainerSkin">
  1. Save the file.
    Notice that there is a compile error that reads, "Cannot resolve attribute 'gap' for component type spark.components.SkinnableContainer." This error occurs because the SkinnableContainer does not support the gap property.
     
  2. From the SkinnableContainer tag, cut the gap property.
  3. Save the file.
  4. Open the TopContainerSkin.mxml file and locate the layout tags within the Group container.
  5. In the HorizontalLayout tag, paste the gap property.
<s:Group id="contentGroup" verticalCenter="0" left="20"> <s:layout> <s:HorizontalLayout gap="15"/> </s:layout> </s:Group>
  1. Save the file and run the application.
The header of the Employee Portal application now has a blue background (see Figure 10).
 
 Apply a skin to the application header.
Figure 10. Apply a skin to the application header.
 

 
Apply a skin using CSS

In this section you will skin the application using a skin component and a CSS file.
 
  1. From the Package Explorer view, open and review the PanelContainerSkin.mxml file.
    Note that the code is similar to the code within the ApplicationContainerSkin.mxml file you created earlier.
     
  2. From the Package Explorer view, open the ex5_05_starter.css file.
  3. Locate the selector for Spark Panel containers.
  4. Within the selector, delete the backgroundColor property and value and use the classReference() function to assign the skinClass property value to the skin.PanelContainerSkin component.
s|Panel { skinClass:ClassReference("skins.PanelContainerSkin"); }
  1. Save the file and run the application.
    You should see that the panels are skinned, but the panel titles begin in the red box (see Figure 11).
     
Panel containers are not skinned correctly
Figure 11. Panel containers are not skinned correctly
 
  1. Return to the PanelContainerSkin.mxml file.
  2. To the titleDisplay Label control, change the left property value to 35. This will shift the panel title to the right of the red box.
  3. To the Label tag, add a color property and assign a value of #FFFFFF. This will change the panel titles to white.
<s:Label id="titleDisplay" lineBreak="explicit" left="35" right="4" top="2" height="30" verticalAlign="middle" fontWeight="bold" color="#FFFFFF'/>
  1. Save the file and run the application.
    You should see the panel titles are white and display to the right of the red box (see Figure 12).
     
The panel title are white and to the right of the red box.
Figure 12. The panel title are white and to the right of the red box.
  1. Return to the ex5_05_starter.mxml file.
  2. Locate the SkinnableContainer tag.
  3. To the Label tag with the text property of Employee, add a color property and set the value to #FFFFFF.
  4. To the Label tag with the text property of Portal, add a color property and set the value to #FFFFFF.
  5. Save the file and run the application.
    You should see the application as shown in Figure 13. Notice that the Employee Portal heading is now white.
     
The Employee Portal heading is now white.
Figure 13. The Employee Portal heading is now white.
 
  1. Return to the ex5_05_starter.css file in Flash Builder.
  2. In the Panel selector, comment out the skinClass:ClassReference.
  3. Save the file.
  4. Return to ex5_05_starter.mxml.
  5. To the EmployeeOfTheMonth components tag, add the skinClass property with a value of skins.PanelContainerSkin.
  6. Repeat step 20 for the Cafeteria and MonthlyEvents component tags.
  7. Save the file and run the application.
    You should see that all of the panels are skinned except for the Employee Directory panel. Notice that the background color for the Employee Directory panel is white (see Figure 14).
     
 All of the panels except for the Employee Directory panel are skinned.
Figure 14. All of the panels except for the Employee Directory panel are skinned.
 
  1. Return to the ex5_05_starter.mxml file.
  2. To the EmployeeDirectory component instance, add a backgroundColor property with a value of #E8E8E8.
  3. Save the file and run the application.
You should now see that the Employee Directory panel has a background color even though it is not skinned like the other panels (see Figure 15).
 
The Employee Directory has a background color.
Figure 15. The Employee Directory has a background color.

 
Use FXG shapes created in Illustrator CS5

In this section you will learn how to use a Flash XML Graphic (FXG) file to style components in Flash Builder.
 
  1. Return to Flash Builder.
  2. From the Package Explorer view, open the TopSkin.fxg file and review the code.
    The TopSkin.fxg file was created using Adobe Illustrator CS5. The file opened in Illustrator CS5 appears as shown in Figure 16. Note that the only rounded corner is the top right corner.
     
View of the TopSkin.fxg file opened in Illustrator CS5.
Figure 16. View of the TopSkin.fxg file opened in Illustrator CS5.
 
  1. Open the TopContainerSkin.mxml file.
  2. Within the file, comment out the Rect block.
  3. Below the commented Rect tags, add a skins tag for the TopSkin file. The skins namespace is used to add the TopSkin.fxg file to the application. You'll notice that when you added the skins tag, a skins namespace was added to the skin class.
<skins:TopSkin/>
  1. Save the file and run the application.
You should see that only the top right corner of the SkinnableContainer container skin is curved (see Figure 17).
 
The top right corner of the title bar is curved.
Figure 17. The top right corner of the title bar is curved.
 
In this exercise you created a skin for the Employee Portal application and used the provided skinning components to configure the application.
 

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.