Modifying user interfaces using skins

Skins define the appearance of a component for each state of the component. For example, a Spark Button has four states, up, over, down, and disabled. When you generate a skin for a Spark Button, you can specify the appearance for each of these states.

Each component has parts that can be styled. For example, for a Button component, you can style the Button fill color, text attributes for the Button label, and the Rect components that make up the Button’s border.

When using Flash Builder to create skins for a component, you specify a host component upon which the generated skin is based. By default, the host component is the base class of the component you are skinning. However, you can select a different host component.

The skinning contract between a skin class and a component class defines the rules that each member must follow so that they can communicate with one another.

The skin class must declare skin states and define the appearance of skin parts. Skin classes also usually specify the host component, and sometimes bind to data defined on the host component.

The component class declares which skin class it uses. It must also identify skin states and skin parts with metadata. If the skin class binds to data on the host component, the host component must define that data.

The following table shows these rules of the skinning contract:

<fx:Metadata> 
[HostComponent("spark.components.Button")] 
</fx:Metadata> 

<s:states> 
<s:State name="up"/> 
</s:states>

[SkinStates("up")]; 
public class Button { 
... 
}

<s:Button id="upButton"/>

[SkinPart(required="false")] 
public var:upButton Button;

text="{hostComponent.title}"

[Bindable] 
public var title:String;

In Flash Builder, a Skin declaration is the file that implements the skin for a component. Flex defines a skin declaration for each visual component. When you generate a new skin for a component, Flash Builder generates the Skin declaration.

You can view the Skin declaration for selected components:

1. In Design mode of the MXML editor, select a Spark component in the design area.

2. From the context menu for the component, select Open Skin Declaration.

   The class implementing the skin opens in Source mode of the editor.

   If the class is one that you created, you can edit the file.

   You can also do the following to open a skin declaration file:

   • With the component selected, in the Style section of the Properties view click the icon near the Skin field.

   • In Source mode, with a Spark component selected, from the Flash Builder menu, select Navigate > Open Skin Declaration.

This example generates a Skin class for a Spark Button, showing you how to use a combination of Flash Builder views to edit the skin. It assumes you are working in a Flex project using the default Spark theme.

1. Create an application file. In Design mode of the editor, add a Spark Button to the application.

2. From the context menu for the Button, select Create Skin.

   The New MXML Skin dialog opens.

   You can also do the following to open the New MXML Skin dialog.

   • In the Style section of the Properties view, select the icon near the Skin field.

   • From the Flash builder menu, select New > MXML Skin

   • In Design mode of the editor, select Design > Create Skin

3. Specify the following in the New MXML Skin Dialog:

   • Source Folder and Package for the generated Skin declaration.

   • Name

     The name for the Skin class you are creating.

   • Host Component

     To change the default component, click Browse and select a host component.

   • (Recommended) Select Create As Copy Of and do not remove ActionScript styling code

     If you are new to skinning, use a copy to get started creating a Skin class. Modify the ActionScript styling code.

   • (Advanced Users) Do either of the following if you are familiar with creating Skin classes:

     Remove ActionScript styling code or do not create a copy of an existing class.

     If you do not create a copy of an existing class, Flash Builder generates a blank Skin class file with some comments to guide you.

     The remaining steps of this procedure assume that you followed the Recommended option for generating a Skin class.

4. Click Finish.

   Flash Builder generates a Skin class file and opens it in Design mode of the MXML editor.

   The Button component is selected.

   The up state of the Button is selected in the States View.

5. For each state of the Button, modify the Text styles, Content Background styles, and Color styles.

   Use the editing tools in Style section of Properties view to make your changes.

6. Open Outline view:

   Notice that the top-level node, SparkSkin, is selected.

7. In Outline view, select Rect shadow to define styles for the Button’s shadow.

   Notice that the Style section tools are not available.

8. Switch to Source mode of the editor.

   Flash Builder highlights the Rect component that defines the Button’s shadow. Make any changes for the Button’s shadow.

9. Save the Skin class file and your application file.

   In Design mode of the MXML editor you can view the skin for the button, assuming that you followed the recommended option in Step 3. If the styles do not show, Select the Refresh icon for the design area.

   Notice that the application file added a reference to the Skin class that you created.

10. Run the application to see how the skin changes for Up, Over, and Down states of the Button.

You can open the New MXML Skin dialog directly in Source mode of the editor. For example, do the following to create a skinClass for a Spark Button component.

1. In Source mode of the editor, place your cursor inside a <s:Button> tag and type the following:

   <s:Button skinClass="

   After you type the first quote for the skinClass name, a context menu appears.

2. With Create Skin highlighted in the code hints, the Enter key opens the New MXML Skin dialog.

   This dialog is the same dialog that opens in Design Mode.

   See the instructions in Generate and edit a skin for a Spark Button (Design mode) for creating the skinClass.

3. Click Finish.

   Flash Builder generates a new skinClass based on your selections in the New MXML Skin dialog. The editor switches to the source for the newly generated class.

4. Edit the skinClass.

   Save your class file and application file.

Using Flash Builder, you can convert a skin for a component into a CSS style. The advantage of converting the skin to style is to use the style as a type selector for all components of that class. Otherwise, set the skinClass property for each component.

The following procedure shows how to convert a skin for a Spark Button into a CSS style.

1. Generate and edit a skin for a Button component.

2. In Design mode of the editor, select the button. In the Styles section of the Properties view, click Convert to CSS.

3. In the New Style Rule dialog, select or create a CSS file for the style.

   If you do not have a CSS file in the project that you want to use, click New to create a file.

4. Specify the Selector Type. Choose from the following:

   • All Components

     The style applies to all components in the application.

   • All Components With Style Name

     Components specify this style selector by name. If you choose this option, then specify a name for the type selector.

   • Specific Component

     The style applies only to the selected component.

   • Specific component With Style Name

     The style applies only to the selected component, and references the style by the name of the type selector. If you choose this option, then specify a name for the type selector.

5. After specifying a Selector Type, click OK.

   Flash Builder generates or updates the specified CSS file. Flash Builder also modifies the source code in the application to reference the type selector in the CSS file.

   Flash Builder removes references to the skinClass property for the component.