Styles affect the appearance of components. They alter visual parameters such as border thickness, or replace the entire look of a component with a new image (skin). You can set style properties inline on an MXML tag or separately using CSS code.

When you apply inline styles to components, you can convert component styles into a CSS rule in an external stylesheet. You can also move from the MXML editor to the CSS editor when external styles are used.

Apply inline styles to a component

1. With your MXML file open in Design mode, click the component to select it.
2. Enter the style property values in the Flex Properties view.

   

   In Category view, the Styles category lists the styles that can be applied to the selected component.

   

Apply an external or embedded style to an application

1. Make sure you import the external style sheet or embed styles in your MXML file.

   For example, the following expression imports an external style sheet called styles.css:

   <mx:Style source="styles.css"/>
   
   

   The following expression embeds two styles in the MXML file using CSS code:

   <mx:Style>
       .myclass { color: Red } /* class selector */
       Button { fontSize: 10pt; color: Yellow } /* type selector */
   </mx:Style>
   
   

   For styles such as Button, the style is automatically applied to all matching components.

   For styles such as .myclass follow these steps:

2. Click the component in the MXML editor's Design mode to select it.
3. Apply the desired style by selecting it from the Style pop-up menu in the Flex Properties view.

   

   The Style pop-up menu lists the styles defined in the external style sheet or embedded in the current file.

Convert to CSS

1. From your MXML file, click a component in the design area, then apply style values from the Flex Properties view.
2. Click the Convert to CSS button.

   

3. If you have multiple projects open in your workspace, select/deselect the resource files you want to save in the Save Resources dialog. Then click OK.
4. In the New Style Rule dialog box, select the .css file or click New to create one. Then select the type of the style rule you want to create, which determines the components it will affect.

   

5. Click OK.

Edit style rule

When external CSS styles are already applied to a component, you can quickly jump from the component to edit these styles.

1. Select a component and in the Flex Properties view.
2. Click the Edit Style Rule button next to the Style pop-up menu, then select the style you want to edit.

   The CSS file opens in the CSS editor's Design mode. You use the Flex Properties view to make further changes. You can also modify your CSS in Source mode.

Using the CSS editor in Design mode

The CSS Design mode editor allows you to visually display and edit the contents of a CSS file. As with the MXML editor, you use the Flex Properties view to edit styles. The toolbar gives you quick access to common tasks such as creating and deleting styles, and pan/view. You can also apply skins for Flex components in CSS Design mode.

Create new style

1. Click the New Style button next to the Style pop-up menu on the CSS Design editor toolbar.

   

2. In the New Style dialog box choose a Selector Type option for the style to be created.

   The type selected determines which components the styles will be applied to. If there is a specific component affected by the new style rule, select a component from the pop-up menu.

   When the style is selected, it is previewed in the design area. Use the Flex Properties view to make further changes to your CSS.

For more information, see Using Cascading Style Sheets in the Adobe Flex 3 Developer Guide.

Edit styles and skins

In CSS editor's Design mode you can manipulate CSS and skin styles for Flex components.

1. In the Flex Properties Standard view, click the Style or Skin buttons to alter your CSS style or skins.
2. Choose from the controls and pop-up menus to modify your CSS or skin styles.
3. To use graphical skins, click the Skin button and then choose Image File or Flash Symbol from the pop-up menu. The supported formats are the same as the Import Skin Artwork wizard.

   

Edit scale grids

When an image file is applied as a skin, the Edit Scale Grid button appears in the upper-right corner of the design area. The scaling grid allows you to visually resize image skins.

1. Click the Edit Scale Grid button.

   The preview switches to editing mode with dotted lines representing the grid.

2. Drag the lines to reposition the grid.
3. Click the Edit Scale Grid button again to leave editing mode.

For more information, see Using 9-slice scaling with embedded images in the Adobe Flex 3 Developer Guide.

Edit content area

When you apply skins to a sub-class of a container (for example, VBox, Panel, Canvas) you may need to adjust the region where the container lays out its child Flex components.

1. Select Design > Show Content Area.
2. Drag the resize handles to resize the content area.

Edit sub-parts of a component

When the selected component has an external style set on it, an Edit button appears next to the Style field. Some components contain entire built-in sub-components with their own style and skin properties. For example, Accordion has section header buttons and List contain a VScrollBar.

 While viewing the parent component, click the Edit button.

Flex Builder automatically generates CSS code for both the parent component and the sub-part.

After viewing the sub-part, click the Back button to return to the parent component.

Default values

Most style properties that are not explicitly set on the selected item will still have a default value that is inherited through the CSS style chain. For example, ToggleButtonBar inherits any styles applied to ButtonBar.

The Flex Properties view displays default, inherited values for any style properties that are not explicitly set on a selected item. To distinguish default values from values that are not explicitly set, text fields use gray italic text and color swatches use a paler border.

For more information, see Using Styles and Themes in the Adobe Flex 3 Developer Guide.

Additional options in the CSS editor

Many of the features in the CSS Flex Properties view are expanded versions of similar features in the MXML editor. For example, you can also make changes to text, fill, and layout styles from this view.

Additional options in the CSS editor include an expanded fonts list, an Embed This Font option, and color swatches for choosing rollover, selected, and disabled text. The fonts list includes all web fonts, installed OS fonts, TTF files, and any additional embedded fonts in the current CSS file.

For more information, see the Adobe Flex 3 Developer Guide.

Importing Skin Artwork

You use the Import Skin Artwork wizard to import both vector graphics artwork and bitmap artwork from the CS3 versions of Flash, 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.

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 CS3 for Flash Player 9
     • Vector graphic files created in Adobe illustrator CS3 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 checkbox 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 Flex 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.

Refreshing Design mode to render properly

If necessary, you can refresh the MXML and CSS editors' Design mode to render your layout properly. The rendering of your layout can become out of date in certain situations. This can happen, for example, if you modify a visual element in a dependent Flash component (SWC). Styles and skins may also not be rendered properly because Flex Builder needs to rebuild the file.

 Click the Refresh button in the editor toolbar.