Move the background elements

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.

Download the ex5_07_starter.zip file provided in the Exercise files section and extract the ex5_07_starter.fxp to your computer.

Open Flash Builder.

Import the ex5_07_starter.fxp file.

Open the ex5_07_starter.mxml file.

Run the application.

You should see the application shown in Figure 2.

Figure 2. Run the application.

Return to Flash Builder

Within the Package Explorer view, open the PanelContainerSkin.mxml file from the skins package.

Locate the skins:PanelSkin tag.

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.

<skins:PanelSkin
rotation="90" top="0" bottom="0" right="0"/>

Locate the Group container with the id of contentGroup and remove the top property.

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

Figure 3. Add a rotation to the Panel container title bar.

Return to the ex5_07_starter.mxml file.

To the EmployeeOfTheMonth component instance, add the width property with a value of 227.

<components:EmployeeOfTheMonth width="227"/>

Repeat step 13 for the Cafeteria and MonthlyEvents component instances.

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 notice that the text for the employee's title in the Employee of the Month panel is very close to the edge of the panel.

Figure 4. The Calorie Information is not contained within the Cafeteria panel.

Move the text elements and make them vertical

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.

Return to Flash Builder and open Cafeteria.mxml from the components package.

Locate the RichText container tag and reassign the value of the width property to 100%.

Save the file.

Open the EmployeeOfTheMonth.mxml file from the components package.

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.

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

Figure 5. The content in the Cafeteria Special panel does not overlap with the panel skin.

Return to Flash Builder and open the PanelContainerSkin.mxml file.

Locate the titleDisplayLabel control and add the rotation property with a value of 90.

From the Label control, remove the verticalAlign and left properties.

To the Label control, reassign the right property with a value of 8 and the top property with a value of 35.

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.

Figure 7. The color blocks are positioned above the panel titles.

Return to Flash Builder and open the MonthlyEvents.mxml file from the components package.

Locate the VerticalLayout class nested in the layout property block under the Properties of the parent comment.

Remove the paddingBottom property from the VerticalLayout tag.

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

Figure 8. The Scroller goes to the bottom of the Monthly Events panel.

In this exercise you learned how to use a skin to make the Panel container title bar vertical