Exercise 5.7: Creating a vertical title bar on a Panel container

In this exercise you will learn how to use a skin to make the Panel container title bar vertical (see Figure 1).

In this exercise you will learn how to:

• Move the background elements
• Move the text elements and make them vertical

In this section, you will use the PanelContainerSkin.mxml skin component to adjust the Panel container title skins so that they display vertically intead of horizontally.

1. Download the ex5_07_starter.zip file provided in the Exercise files section and extract the ex5_07_starter.fxp to your computer.
2. Open Flash Builder.
3. Import the ex5_07_starter.fxp file.
4. Open the ex5_07_starter.mxml file.
5. Run the application.

   You should see the application shown in Figure 2.

6. Return to Flash Builder
7. Within the Package Explorer view, open the PanelContainerSkin.mxml file from the skins package.
8. Locate the skins:PanelSkin tag.
9. To the skins:PanelSkin tag, add the rotation property with a value of 90 and the top, bottom, and right properties all with a value of 0.

10. Locate the Group container with the id of contentGroup and remove the top property.
11. Save the file and run the application.

    You should see the Panel container title skin located on the right of each Panel container, but is overlapped by the Panel container content and the content within each panel has shifted up (see Figure 3).

12. Return to the ex5_07_starter.mxml file.
13. To the EmployeeOfTheMonth component instance, add the width property with a value of 227.

14. Repeat step 13 for the Cafeteria and MonthlyEvents component instances.
15. Save the file and run the application.

    You should see that the content is contained within each panel container, except for the Calorie Information in the Cafeteria panel (see Figure 4). Also note that the text for the employee's title in the Employee of the Month panel is very close to the edge of the panel.

In this section, you will adjust the position of the text elements and you will make the panel title display vertically along the panel title skins.

1. Return to Flash Builder and open Cafeteria.mxml from the components package.
2. Locate the RichText container tag and reassign the value of the width property to 100%.
3. Save the file.
4. Open the EmployeeOfTheMonth.mxml file from the components package.
5. Locate the Label control with the text Hardware Engineering Product Manager. Change the value of the width property to 100 and change the value of the height property to 50.
6. Save the file and run the application.

   You should see the content in the Cafeteria panel does not overlap with the panel skin and the employee's title in the Employee of the Month panel has better spacing (see Figure 5).

7. Return to Flash Builder and open the PanelContainerSkin.mxml file.
8. Locate the titleDisplay Label control and add the rotation property with a value of 90.
9. From the Label control, remove the verticalAlign and left properties.
   
10. To the Label control, reassign the right property with a value of 8 and the top property with a value of 35.
    

11. Save the file and run the application.
    

    The title text is now displayed vertically along the right side of the Panel containers, but the colored box is not positioned above the panel title (see Figure 6).

12. Return to the PanelContainerSkin.mxml file in Flash Builder.
13. Locate the second Rect block.
    
14. To the opening Rect tag, add the right property with a value of 0.

15. Save the file and run the application.

    You should see the color blocks are now properly positioned above the panel titles (see Figure 7). Note that, in the Monthly Events panel is a gap between the bottom of the Scroller and the bottom of the Panel container. This happened because you added a padding property to the VerticalLayout class of the Monthly Events Panel in a previous exercise.

16. Return to Flash Builder and open the MonthlyEvents.mxml file from the components package.
17. Locate the VerticalLayout class nested in the layout property block under the Properties of the parent comment.
18. Remove the paddingBottom property from the VerticalLayout tag.
19. Save the file and run the application.

Note that the Scroller now goes to the bottom of the Monthly Events panel container (see Figure 8).

In this exercise you learned how to use a skin to make the Panel container title bar vertical. In the next exercise you learn how to use a skin to animate Button states.