
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).
Figure 1. Review your task for this exercise.
In this exercise, you will learn how to:
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 therotation
property with a value of 90 and thetop
,bottom
andright
properties all with a value of 0.
<skins:PanelSkin
rotation="90" top="0" bottom="0" right="0"/>
- Locate the
Group
container with theid
ofcontentGroup
and remove thetop
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 thewidth
property with a value of227
.
<components:EmployeeOfTheMonth width="227"/>
- Repeat step 13 for the
Cafeteria
andMonthlyEvents
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.
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 thewidth
property to100%
. - Save the file.
- Open the EmployeeOfTheMonth.mxml file from the components package.
- Locate the
Label
control with the text Hardware Engineering Product Manager. Change thevalue
of the width property to100
and change the value of theheight
property to50
. - 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
titleDisplay
Label
control and add therotation
property with a value of90
. - From the
Label
control, remove theverticalAlign
andleft
properties.
- To the
Label
control, reassign theright
property with a value of8
and thetop
property with a value of35
.
<s:Label id="titleDisplay"
linebreak="explicit"
right="8"
top="35"
height="30"
fontWeight="bold"
color="#FFFFFF"
rotation="90"/>
- 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).
Figure 6. The title text is displayed vertically.
- Return to the PanelContainerSkin.mxml file in Flash Builder.
- Locate the second
Rect
block.
- To the opening
Rect
tag, add theright
property with a value of 0.
<s:Rect height="23" width="23"
right="0">
<s:fill>
<s:SolidColor id="headerSkinColor"/>
</s:fill>
</s:Rect>
- 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.
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 thelayout
property block under theProperties of the parent
comment. - Remove the
paddingBottom
property from theVerticalLayout
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
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.