Exercise 5.5: Creating and applying skins

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.

In this exercise, you will learn how to:

• Create a skin
• Apply a skin
• Display content within a skin
• Skin a Flex container
• Apply a skin using CSS
• Use FXG shapes created in Adobe Illustrator

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

5. In the New MXML Component dialog box, name the component ApplicationContainerSkin.
6. Base the component on the spark.skins.SparkSkin package and remove the width and height properties (see Figure 3).

7. Click Finish.

   The ApplicationContainerSkin.mxml file will open in the Editor.

8. Between the SparkSkin tags, below the Declarations block, create a Metadata block:

9. 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:

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.

10. Below the Metadata tag block, add a states tag block:

11. Within the states block, add a State instance and add the name property with a value of normal:

12. Below the State instance, add another State instance and add the name property with a value of disabled:

13. Below the states block, add a Rect tag block:

14. 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:

15. To the opening Rect tag, add the radiusX and radiusY properties, each with a value of 10.

16. Between the Rect tags, add a fill property block.

17. Between the <code>fill</code> tags, add a <code>SolidColor</code> instance with the <code>color</code> property value assigned to <code>#CCCCCC</code>

18. Save the file.

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.

3. Save the file.
4. 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.

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:

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

4. Return to the ApplicationContainerSkin.mxml file in Flash Builder.
5. To the opening Rect tag, remove the x and y properties.
6. 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.

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

8. Return to the ApplicationContainerSkin.mxml file.
9. 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.
10. 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).

11. Return to the ex5_05_starter.mxml file.
12. To the opening HGroup tag, change the x and y values to 0.
13. 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.
14. To the components:EmployeeDirectory tag, change the x value to 0.
15. To the components:Cafeteria tag, change the x value to 275.
16. To the components:MonthlyEvents tag, change the x value to 550.
17. To the LOGOUT Button control, change the x value to 710.
18. 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).

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.

19. Return to the ApplicationContainerSkin.mxml file.
20. Surround the Rect control and the contentGroup container with a Group container.
21. Remove the horizonalCenter and verticalCenter properties from the opening Rect and contentGroup tags.
22. To the opening tag of the new parent Group container, add the horizontalCenter and verticalCenter properties with a value of 0.
23. From the opening Rect tag, remove the width and height properties.
24. 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.
25. 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.

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

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.

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

6. From the SkinnableContainer tag, cut the gap property.
7. Save the file.
8. Open the TopContainerSkin.mxml file and locate the layout tags within the Group container.
9. In the HorizontalLayout tag, paste the gap property.

10. Save the file and run the application.

The header of the Employee Portal application now has a blue background (see Figure 10).

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.

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

6. Return to the PanelContainerSkin.mxml file.
7. 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.
8. To the Label tag, add a color property and assign a value of #FFFFFF. This will change the panel titles to white.

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

10. Return to the ex5_05_starter.mxml file.
11. Locate the SkinnableContainer tag.
12. To the Label tag with the text property of Employee, add a color property and set the value to #FFFFFF.
13. To the Label tag with the text property of Portal, add a color property and set the value to #FFFFFF.
14. 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.

15. Return to the ex5_05_starter.css file in Flash Builder.
16. In the Panel selector, comment out the skinClass:ClassReference.
17. Save the file.
18. Return to ex5_05_starter.mxml.
19. To the EmployeeOfTheMonth components tag, add the skinClass property with a value of skins.PanelContainerSkin.
20. Repeat step 20 for the Cafeteria and MonthlyEvents component tags.
21. 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).

22. Return to the ex5_05_starter.mxml file.
23. To the EmployeeDirectory component instance, add a backgroundColor property with a value of #E8E8E8.
24. 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).

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.

3. Open the TopContainerSkin.mxml file.
4. Within the file, comment out the Rect block.
5. 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.

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

In this exercise you created a skin for the Employee Portal application and used the provided skinning components to configure the application.