24 May 2011
In this exercise you will learn how to use a skin to make the Panel container title bar vertical (see Figure 1).
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.
You should see the application shown in Figure 2.
skins:PanelSkintag, add the
rotationproperty with a value of 90 and the
rightproperties all with a value of 0.
<skins:PanelSkin rotation="90" top="0" bottom="0" right="0"/>
Groupcontainer with the
contentGroupand remove the
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).
EmployeeOfTheMonthcomponent instance, add the
widthproperty with a value of
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.
RichTextcontainer tag and reassign the value of the
Labelcontrol with the text Hardware Engineering Product Manager. Change the value of the
100and change the value of the
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).
Labelcontrol and add the
rotationproperty with a value of
Labelcontrol, remove the
Labelcontrol, reassign the
rightproperty with a value of
topproperty with a value of
<s:Label id="titleDisplay" linebreak="explicit" right="8" top="35" height="30" fontWeight="bold" color="#FFFFFF" rotation="90"/>
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).
Recttag, add the
rightproperty with a value of
<s:Rect height="23" width="23" right="0"> <s:fill> <s:SolidColor id="headerSkinColor"/> </s:fill> </s:Rect>
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.
VerticalLayoutclass nested in the
layoutproperty block under the
Properties of the parentcomment.
paddingBottomproperty from the
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.
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.