trilemetry_bio

Created

3 May 2011

Requirements

Prerequisite knowledge Required products Exercise files User level

Flash Builder 4.7 Premium (Download trial)

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

 
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.
 
  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.
     
Run the application.
Figure 2. Run the application.
 
  1. Return to Flash Builder
  2. Within the Package Explorer view, open the PanelContainerSkin.mxml file from the skins package.
  3. Locate the skins:PanelSkin tag.
  4. 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"/>
  1. Locate the Group container with the id of contentGroup and remove the top property.
  2. 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).
     
Add a rotation to the Panel container title bar.
Figure 3. Add a rotation to the Panel container title bar.
 
  1. Return to the ex5_07_starter.mxml file.
  2. To the EmployeeOfTheMonth component instance, add the width property with a value of 227.
<components:EmployeeOfTheMonth width="227"/>
  1. Repeat step 13 for the Cafeteria and MonthlyEvents component instances.
  2. 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.
     
The Calorie Information is not contained within the Cafeteria 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.
 
  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).
     
The content in the Cafeteria Special panel does not overlap with the panel skin.
Figure 5. The content in the Cafeteria Special panel does not overlap with the panel skin.
 
  1. Return to Flash Builder and open the PanelContainerSkin.mxml file.
  2. Locate the titleDisplay Label control and add the rotation property with a value of 90.
  3. From the Label control, remove the verticalAlign and left properties.
  4. To the Label control, reassign the right property with a value of 8 and the top property with a value of 35.
<s:Label id="titleDisplay" linebreak="explicit" right="8" top="35" height="30" fontWeight="bold" color="#FFFFFF" rotation="90"/>
  1. 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).
     
The title text is displayed vertically.
Figure 6. The title text is displayed vertically.
  1. Return to the PanelContainerSkin.mxml file in Flash Builder.
  2. Locate the second Rect block.
  3. To the opening Rect tag, add the right property with a value of 0.
<s:Rect height="23" width="23" right="0"> <s:fill> <s:SolidColor id="headerSkinColor"/> </s:fill> </s:Rect>
  1. 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.
     
The color blocks are positioned above the panel titles.
Figure  7. The color blocks are positioned above the panel titles.
 
  1. Return to Flash Builder and open the MonthlyEvents.mxml file from the components package.
  2. Locate the VerticalLayout class nested in the layout property block under the Properties of the parent comment.
  3. Remove the paddingBottom property from the VerticalLayout tag.
  4. 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).
 
The Scroller goes to the bottom of the Monthly Events panel.
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
 

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.