Flex Test Drive: Change the appearance of your application

Video | Code | Tutorial | Links

Apply more skins

Download the Test Drive solution files (ZIP, 14 MB)
Download assets files for this tutorial (ZIP, 2 KB)

Code

FlexWebTestDrive.css

FlexWebTestDrive.mxml

skins.ApplicationSkin

skins.ButtonSkin

skins.ActionButtonSkin

skins.DataGridSkin

skins.VScrollBarSkin

skins.VScrollBarTrackSkin

skins.VScrollBarThumbSkin

skins.ScrollButtonUpSkin

skins.ScrollButtonDownSkin

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.

Switch to Source mode. Your code should appear as shown here:

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

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

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.

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.

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.

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

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.

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.

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.

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.

Your code should appear as shown here:

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.

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

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.

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:

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

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.

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.

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.

Step 12: Apply DataGridSkin.

In FlexWebTestDrive.css, create a type selector for the Spark DataGrid component and set its skinClass to your DataGridSkin class.

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.

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.

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.

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.

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.

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.

Step 18: Apply VScrollBarSkin.

In FlexWebTestDrive.css, create a type selector for the Spark VScrollBar component and set its skinClass to your VScrollBarSkin class.

Run the application and look at the skinned scroll bar. Mouse over and press the various scroll bar components (see Figure 24).

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

• Spark Skinning
• Skinning Spark components
• MXML graphics
• Graphics classes and elements
• FXG

ActionScript 3 Reference

• spark.components
• spark.primitives
• mx.graphics

Flex Developer Center

• UI design and RIA workflows
• Flash Catalyst Developer Center

Documentation: Using Fireworks

• Prototyping Flex applications
• Export FXG files

Documentation: Using Illustrator

• Working with FXG

Documentation: Using Photoshop

• Photoshop CS5 FXG Extension