by Adobe
adobe_logo

Created

28 June 2011

 

Apply more skins

 
 

Code

FlexWebTestDrive.css
 
@namespace s "library://ns.adobe.com/flex/spark"; (...) s|Application { skinClass: ClassReference("skins.ApplicationSkin"); } s|Button, s|ToggleButton { skinClass: ClassReference("skins.ButtonSkin"); } .actionButton { skinClass:ClassReference("skins.ActionButtonSkin"); } s|DataGrid { skinClass: ClassReference("skins.DataGridSkin"); } s|VScrollBar { skinClass: ClassReference("skins.VScrollBarSkin"); }
FlexWebTestDrive.mxml
 
<s:Application ...> (...) <s:controlBarContent> <s:Label id="xyzLabel" text="XYZ Corporation Directory"/> </s:controlBarContent> <s:Button id="empBtn" x="50" y="30" .../> <s:Button id="deptBtn" x="178" y="30" .../> (...) <s:Form includeIn="EmployeeDetails" x="36" y="240" .../> <s:Form includeIn="EmployeeDetails" x="323" y="240" .../> <s:Button id="addBtn" x="580" y="216" styleName="actionButton" .../> <s:Button id="deleteBtn" x="452" y="216" .../> <s:Button id="updateBtn" x="323" y="216" .../> (...) <s:ToggleButton id="toggleBtn" x="600" y="30" width="100" styleName="actionButton"/> <s:Form x="36" y="240" ...> <s:Form y="240" .../> </s:Application>

Tutorial

In this tutorial, you skin the rest of the application by applying prewritten skins.
 

 
Step 1: Create an Application control bar.

Return to Design mode for FlexWebTestDrive.mxml and select the Application tag by clicking anywhere not on a component. Check the Control bar check box (see Figure 1). Drag the XYZ label and drop it in the controlBarContent area (see Figure 2). Remove the label's x and y properties for all states and reposition the components so they are closer to the top of the application in all states.
 
Create an Application control bar.
Figure 1. Create an Application control bar.
Move the XYZ label into the control bar.
Figure 2. Move the XYZ label into the control bar.
Switch to Source mode. Your code should appear as shown here:
 
<s:controlBarContent> <s:Label id="xyzLabel" text="XYZ Corporation Directory"/> </s:controlBarContent>
You set the controlBarContent property of the Application container to an array of components to include in its control bar area. The location and appearance of the control bar area is determined by the spark.skins.spark.ApplicationSkin class. By default, it appears at the top of the content area with a grey background, a black border line, and its children laid out horizontally. You will use a custom skin to change the appearance and layout of the control bar next.
 
When you reposition the components nearer the top of the application, make sure you do not accidentally set the buttons' enabled properties to the same value for all states; remember in some states they are enabled and in others disabled. To avoid this, do not use the Apply Current Properties to All States option for the buttons in Design mode. It is probably easiest to just change the y values for all the components in Source mode; for example, change y values to 30, 70, 216, and 240 for the various objects.
 
Run the application and/or switch to Design mode for FlexWebTestDrive.mxml and view the new application control bar (see Figure 3).
 
View the new application control bar.
Figure 3. View the new application control bar.

 
Step 2: Download the Test Drive skins.

Download and unzip testdrive_skins.zip and move the skins it contains to the skins folder of your Flash Builder project (see Figure 4).
 
Add skins to your project.
Figure 4. Add skins to your project.

 
Step 3: Review the ApplicationSkin class.

Open skins/ApplicationSkin.mxml and review the code (see Figure 5).
 
This ApplicationSkin was created as a copy of the default Application skin, spark.skins.spark.ApplicationSkin. It was modified to set the color of the application background and the color and layout of the application control bar.
 
Locate the backgroundRect rectangle. Its color was changed to light gray, #E6E6E6.
 
Below this, you will see a Group with a vertical layout that contains topGroup and contentGroup Group containers. The topGroup contains the graphics and contents for the control bar.
 
Locate the control bar fill rectangle. Its fill was changed to a SolidColorFill with a color of dark gray, 0x333333 and its left, right, and top properties were set to 0.
 
Locate the skin parts, controlBarGroup and contentGroup. The components you add to the Application's controlBarContent property are added to the contentBarGroup Group container. Notice that by default it has a horizontal layout with specific paddings. When you add components to the Application container (like the application buttons and DataGrid), they are added to the contentGroup Group container.
 
Review the ApplicationSkin code.
Figure 5. Review the ApplicationSkin code.
Note, the id values assigned to the Group containers. These are the names assigned to the subcomponents (the skin parts) defined and referenced in the host component's source code, in this case, the Application container. In you want to include a control bar in the Application skin and specify its look and layout, you must create an instance of the skin part with the assigned id in the skin. You can look up the names and types of the skin parts you can reference in a component skin in the component's API (see Figure 6). Remember you can open a component's API by selecting Help > Dynamic Help, clicking a tag in MXML, and then clicking the API link in the Help view.
 
Navigate to the skin parts of the Application in the API.
Figure 6. Navigate to the skin parts of the Application in the API.

 
Step 4: Apply the ApplicationSkin.

In FlexWebTestDrive.css, remove the backgroundColor style from the Application type selector and add a skinClass style set to the ApplicationSkin class.
 
s|Application { skinClass: ClassReference("skins.ApplicationSkin"); }
Run the application and/or switch to Design mode for FlexWebTestDrive.mxml. The application should still have a light gray background but the control bar should now look different (see Figure 7).
 
View the skinned Application container.
Figure 7. View the skinned Application container.

 
Step 5: Review the ButtonSkin class.

Open skins/ButtonSkin.mxml and review the code (see Figure 8).
 
This ButtonSkin was created as a copy of the default Button skin, spark.skins.spark.ButtonSkin. It was modified to change the minimum size of the button, the button graphics, and the label style.
 
Locate the minWidth and minHeight properties in the SparkButtonSkin tag. They have been set to 120 and 30 pixels, so the default button size is now larger. The button can be larger than this size depending upon the text and style of the Label component it contains.
 
Locate the fill rectangle that creates the button graphics. The default skin has multiple rectangles defined to create the fill, shadows, highlights, lowlights, and borders. These have all been replaced in this skin with one rectangle. It has rounded corners, a dark outline, and a gray gradient fill. When the button is pressed or disabled, inner shadows are also added.
 
Review the ButtonSkin code.
Figure 8. Review the ButtonSkin code.
At the end of the file is a Label control called labelDisplay, a skin part of the component (see Figure 9). This is the component whose text property gets set when you set a Button's label property. The various attributes specify what the Label should look like and where it should appear in the Button component. In this skin, the label text will be aligned in the center of the button (actually 1 pixel below the vertical center line) and at least 10 pixels from the right and left edges and 2 pixels from the top and bottom. Its color has been set to white or gray if the button is disabled. If you do not want a label on a button, simply remove this label from the skin.
 
Navigate to the Button skin parts in the API.
Figure 9. Navigate to the Button skin parts in the API.

 
Step 6: Review the ActionButtonSkin class.

Open skins/ActionButtonSkin.mxml and review the code (see Figure 10).
 
This ActionButtonSkin class is identical to the ButtonSkin you just looked at except the colors in the rectangle fill gradient have been changed to blue.
 
Review the ActionButtonSkin code.
Figure 10. Review the ActionButtonSkin code.

 
Step 7: Apply the ButtonSkin.

Return to Design mode for FlexWebTestDrive.mxml. Select the Employees button and in the Properties view, set the style to skins.ButtonSkin (see Figure 11). Click the Convert to CSS button and in the New Style Rule dialog box, select Specific component. In FlexWebTestDrive.css, remove the color, cornerRadius, and fontWeight styles from the Button selector.
 
Set a button's skin to skins.ButtonSkin.
Figure 11. Set a button's skin to skins.ButtonSkin.
Your code should appear as shown here:
 
s|Button, s|ToggleButton { color: #FFFFFF; cornerRadius: 5; fontWeight: bold; skinClass: ClassReference("skins.ButtonSkin"); }
Switch to Design mode for FlexWebTestDrive.mxml. All the buttons (except the search button) should now be dark and larger. The labels are still bold, however, because the Button selector still has a fontWeight style set that will take precedence over the value set for the label in the skin. Return to FlexWebTestDrive.css and remove the color, cornerRadius, and fontWeight styles from the Button selector. You can also remove the disabled Button selector.
 
s|Button, s|ToggleButton { skinClass: ClassReference("skins.ButtonSkin"); }
Return to FlexWebTestDrive.mxml. All the buttons (except the search button) should now be dark, larger, and have non-bold, white text (see Figure 12).
 
View the skinned buttons.
Figure 12. View the skinned buttons.

 
Step 8: Reposition the buttons.

Reposition the buttons so they do not overlap (see Figure 13).
 
Avoid repositioning in Design mode and using the Apply Current Properties to All States option for the buttons. Instead, it is probably easiest to use Design mode to move a button to its new location in one state and then switch to Source mode and make this the new position for all the states.
 
Reposition the buttons.
Figure 13. Reposition the buttons.

 
Step 9: Selectively apply the ActionButtonSkin.

In FlexWebTestDrive.css, remove the chromeColor style from the actionButton class selector and add a skinClass style set to your new ActionButtonSkin class.
 
Your selector should appear as shown here:
 
.actionButton { skinClass: ClassReference("skins.ActionButtonSkin"); }
Run the application. Mouse over the various buttons and then press them to see the different graphics in each of the button states (see Figure 14).
 
View the different states of the skinned buttons.
Figure 14. View the different states of the skinned buttons.

 
Step 10: Review the DataGridSkin class.

Open skins/DataGridSkin.mxml and review the code (see Figure 15).
 
This DataGridSkin was created as a copy of the default DataGrid skin, spark.skins.spark.DataGridSkin with no styling. It was modified to change the color of the line separating the column headers and the renderer class used to render each column header.
 
Locate the headerColumnSeparator component. Its color was changed to dark gray, #333333 and a drop shadow filter was added.
 
Locate the headerRenderer component. It specifies the class to be used to render each of the column headers. In the default skin, this is set equal to the class, DefaultGridHeaderRenderer. Here, it has been changed to a custom renderer, GridHeaderRenderer located in the skins package.
 
Review the DataGridSkin code.
Figure 15. Review the DataGridSkin code.

 
Step 11: Review the GridHeaderRenderer class.

Open skins/GridHeaderRenderer.mxml and review the code.
 
This GridHeaderRenderer class was created as a copy of the DefaultGridHeaderRenderer class. It was modified to remove the styling code, to change the graphics for each of the column headers, and the style of the text in the column headers.
 
Locate the minHeight property in the GridItemRenderer tag. It has been increased from 21 to 30 pixels.
 
Locate the labelDisplay Label control (see Figure 16) used to display the text in the column headers. Its textAlign and fontWeight properties have been changed to center and normal instead of left and bold.
 
Review the Label control in the GridHeaderRenderer code.
Figure 16. Review the Label control in the GridHeaderRenderer code.
Locate the fill rectangle used to draw the graphics for each column header (see Figure 17). The default skin has multiple rectangles defined to create the fill, shadows, highlights, lowlights, and borders. These have all been replaced in this skin with one rectangle. It has a dark gray, gradient fill and an inner shadow when it is pressed.
 
Review the fill rectangle in the GridHeaderRenderer code.
Figure 17. Review the fill rectangle in the GridHeaderRenderer code.

 
Step 12: Apply DataGridSkin.

In FlexWebTestDrive.css, create a type selector for the Spark DataGrid component and set its skinClass to your DataGridSkin class.
 
s|DataGrid { skinClass: ClassReference("skins.DataGridSkin"); }
Run the application. The DataGrid header is now taller and uses different graphics (see Figure 18). Mouse over and press one of the column headers and see the different graphics used. Switch to the Departments state and see that the Departments DataGrid is also skinned.
 
View the skinned DataGrid column headers.
Figure 18. View the skinned DataGrid column headers.

 
Step 13: Review the VScrollBarSkin class.

Open skins/VScrollBarSkin.mxml and review the code (see Figure 19).
 
This VScrollBarSkin was created as a copy of the default VScrollBar skin, spark.skins.spark.VScrollBarSkin. It contains four buttons, one for the scroll track, one for the scroll thumb, one for the increment button, and one for the decrement button (see Figure 19). It has been modified so new skin classes are used for each of the four buttons.
 
Review the VScrollBarSkin code.
Figure 19. Review the VScrollBarSkin code.

 
Step 14: Review the VScrollBarTrackSkin class.

Open skins/VScrollBarTrackSkin.mxml and review the code (see Figure 20).
 
This VScrollBarThumbSkin was created as a new Button skin. It has one rectangle with a dark outline, a solid gray fill, and an inner shadow.
 
Review the VScrollBarTrackSkin code.
Figure 20. Review the VScrollBarTrackSkin code.

 
Step 15: Review the VScrollBarThumbSkin class.

Open skins/VScrollBarThumbSkin.mxml and review the code (see Figure 21).
 
This VScrollBarThumbSkin was also created as a new Button skin. It has one rectangle with a dark outline and a gray solid or gradient fill depending upon the button state.
 
Review the VScrollBarThumbSkin code.
Figure 21. Review the VScrollBarThumbSkin code.

 
Step 16: Review the ScrollBarUpButtonSkin class.

Open skins/ScrollBarUpButtonSkin.mxml and review the code (see Figure 22).
 
This ScrollBarUpButtonSkin was created as a copy of the default ScrollBarUpButtonSkin skin, spark.skins.spark.ScrollBarUpButtonSkin without the styling code. It was modified to change the button graphics.
 
Locate the border/background rectangle that creates the button graphics. The default skin has multiple rectangles defined to create a border, fill, and highlight. These have all been replaced in this skin with one rectangle. It has a dark outline, a gray gradient fill, and an inner shadow when the button is pressed.
 
Locate the Path tag that defines the arrow. The fill has been changed from a RadialGradient fill to a SolidColor white fill.
 
Review the ScrollBarUpButtonSkin code.
Figure 22. Review the ScrollBarUpButtonSkin code.

 
Step 17: Review the ScrollBarDownButtonSkin class.

Open skins/ScrollBarDownButtonSkin.mxml and review the code (see Figure 23).
 
This ScrollBarDownButtonSkin class is identical to the ScrollBarUpButtonSkin you just looked at except the path creating the arrow is different so the arrow points down.
 
Review the ScrollBarDownButtonSkin code.
Figure 23. Review the ScrollBarDownButtonSkin code.

 
Step 18: Apply VScrollBarSkin.

In FlexWebTestDrive.css, create a type selector for the Spark VScrollBar component and set its skinClass to your VScrollBarSkin class.
 
s|VScrollBar { skinClass: ClassReference("skins.VScrollBarSkin"); }
Run the application and look at the skinned scroll bar. Mouse over and press the various scroll bar components (see Figure 24).
 
View the skinned scroll bar.
Figure 24. View the skinned scroll bar.
You have now successfully skinned all the components in the application.
 
In this module you learned to change the appearance of your application using styling and skinning. In the next module, you learn to add and format Flex charting components.
 

 
Learn more

 
Documentation: Using Flex 4.5
 
ActionScript 3 Reference
 
Flex Developer Center
 
Documentation: Using Fireworks
 
Documentation: Using Illustrator
 
Documentation: Using Photoshop