Modifying user interfaces using skins

Skin classes modify the appearance of controls in a user interface. The way you create, edit, and import skins differs for Spark components and MX components.

About Spark skins

Spark skins control all visual elements of a component, including layout. Spark skins can contain multiple elements, such as graphic elements, text, images, and transitions. Spark skins support states. You can use a skin to define the appearance of a component for each of the component's states. Skins typically specify minimum sizing requirements for the component. For details on how Spark skins are implemented in Flex, see About Spark skinning.

You can use Flash Builder to generate and edit skins for a Spark component. When Flash Builder generates a skin, it creates a skin class in MXML. You can modify the appearance defined by the skin in the MXML editor. Some changes can be made in Design mode of the editor, while others require you to edit the MXML file in Source mode. See Generating and editing skins for Spark components.

About skins for MX components

Skins for MX components can be either a bitmap graphic or a vector graphic. A bitmap graphic, called a graphical skin, is made up of individual pixels that together form an image. A vector graphic, called a programmatic skin, consists of a set of line definitions that specify a line’s starting and end point, thickness, color, and other information required by Adobe® Flash® Player to draw the line. For details on how skins are implemented for MX components in Flex, see About MX component skinning.

You can use Flash Builder to import skin artwork for MX components. See Importing skin artwork for MX components.

The mx.skins.spark package defines Spark skins for MX components.

Generating and editing skins for Spark components

You can use Flash Builder to generate and edit skins for Spark components. When you generate a skin, Flash Builder uses a skin from the theme for a project. The default theme for a project is Spark. You can change the theme for a project from the Appearance view. See Applying themes.

When generating a skin for a component, Flash Builder creates an MXML file that implements the Skin class for the component. You can specify whether to generate the Skin class as a copy of an existing skin or generate a blank Skin class file.

Use a combination of the MXML editor in Design and Source mode to edit the skin. In Design mode, use the Outline view to select elements of the skin to edit. Use States view to navigate between the states of a component. Some parts of a skin cannot be edited in Design mode. Use Source mode to edit parts of skin that are not available in Design mode.

Some components contain subcomponents. For example, an HSlider component contains Button components that define the thumb and track of the HSlider. Subcomponents can only be skinned in Source mode.

Component states, skin parts, and host components

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.

Note: Specifying a host component for a skin class is required when generating skin classes using Flash Builder. However, if creating skin classes directly in source code, a host component is not required.

Skinning contract between a skin and its 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:

 

Skin Class

Host Component

Required?

Host component

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

n/a

No

Skin states

<s:states> 
<s:State name="up"/> 
</s:states>
[SkinStates("up")]; 
public class Button { 
... 
}

Yes

Skin parts

<s:Button id="upButton"/>
[SkinPart(required="false")] 
public var:upButton Button;

Yes

Data

text="{hostComponent.title}"
[Bindable] 
public var title:String;

No

Skin declaration

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.

Generate and edit a skin for a Spark Button (Design mode)

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.

Creating and editing skins for Spark components (Source mode)

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.

Note: You can convert the generated skin class to CSS to view the styles that are applied. See Converting a skin to a CSS style.

Converting a skin to a CSS style

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.

Importing skin artwork for MX components

You use the Import Skin Artwork wizard to import both vector graphics artwork and bitmap artwork from the CS4 versions of Flash Professional, Fireworks, Illustrator, and Photoshop. (For bitmap artwork, any .PNG, .JPG, or .GIF can be used). The artwork can then be used as skins for Flex components.

Note: Adobe provides a set of skinning templates to make it easy to create skins for the built-in Flex components. Use the templates with Flash, Fireworks, Illustrator, or Photoshop to create the artwork. You can also use Flash to create fully functional custom Flex components. For more information, see the articles in Importing Flash Professional Assets into Flex.
  1. Select File > Import > Skin Artwork.

    In the plugin version, select File > Import > Artwork.

  2. In the Import Skin Artwork dialog box:

    • Choose a folder of bitmaps or a SWC or SWF file to import skins from, or click Browse to locate one. Supported file types include the following:

      • AS3 SWF and AS3 SWC files created in Adobe Flash Professional CS5

      • Vector graphic files created in Adobe Illustrator® and exported as SWF files for Flash Player 8

      • Bitmap graphic files in PNG, GIF, and JPG formats

    • Choose a folder to import the skins to. The folder must be a source folder for a Flex project (or you can specify a subfolder in the source folder). The default selection is the folder for the Flex project currently open.

    • In the Copy Artwork To Subfolder field, the default folder name is based on the folder or assets being imported. Click Browse to choose a different location.

    • In the Create Skin Style Rules In field, specify a name for a CSS file that will contain the style rules. The default name is based on the name of the artwork folder or Flash file being imported.

    • Click the Delete All Existing Rules In File check box if you want the specified CSS file to be overwritten upon importing (as opposed to importing skins and keeping other existing definitions in the CSS file). The box is unchecked by default, and if the CSS file does not exist it is disabled.

    • In the Apply Styles To Application field, the default is the selected file in the Flex Navigator or active editor view, or the main application file for the project.

    • Click Next.

  3. In the next Import Skin Artwork dialog box, select the skins you want to import and specify which CSS style type and skin part property will be used. You can check items one at a time or click Check All or Uncheck All.

    • If items do not have a valid style or skin part property name, they will not be checked by default. The following examples show the naming convention used in Flash Builder:

      • Button_upSkin

      • Button_glow_downSkin (maps to downSkin property of Button.glow style rule)

      • TabBar-tab_upSkin (upSkin property maps to tabStyleName property of TabBar style rule)

      • MyCustomComponent_borderSkin

      For custom components, the item will be checked if the component has been defined somewhere within the project you are importing to.

    • If necessary choose a style and skin part for the pop-up menus in each column.

    • Click Finish.

      A CSS file is created and displayed in the Source view. The CSS file will be attached to the application specified in the wizard. If you import a SWC file, it is automatically added to the library path for the project.