Applying styles

Skinning is the process of changing the appearance of a component by modifying or replacing its visual elements. These elements can be made up of bitmap images, SWF files, or class files that contain drawing methods that define vector images.Skins can define the appearance of a component in various states. For example, you can specify the appearance of a Button component in the up, down, over, and disabled states.

Using Flash Builder, you can convert a component’s skin to CSS styles.

Use the Appearance view to define styles that apply to an entire application. Flash Builder saves the style defined in Appearance view as a global CSS style selector.

1. In Design mode of the MXML editor, open an MXML application file that contains several components.

2. In Appearance view, specify global styles for the application.

   If Appearance view is not visible, select Window > Other Views > Flash Builder > Appearance.

   After you apply the styles, Flash Builder creates a global CSS style selector for the specified style.

   If this is the first style referenced in the application, Flash Builder creates a new CSS file and references it in the MXML application file.

   If your application already references a CSS file or a <fx:Style> block, Flash Builder updates the CSS with the global style selector.

Use the Properties view to define inline styles for selected components.

1. In Design mode of the MXML editor, open an MXML application file that contains several components.

2. Select a component and specify style property values in the Style area of Properties view.

   The Style area changes, depending on the component you select.

   

   Properties view showing styles for a DataGrid

3. In Properties view, select Category view to list all the styles that can be applied to the selected component.

   
   Note: Multi-word style names in Flex can be written either like an ActionScript identifier (for example, fontFamily) or like similar HTML styles (for example, font-family).

4. After specifying a style, switch to Source mode to view the generated inline code that applies the style.

You can embed CSS styles in an MXML application file or reference an external CSS file. The following example shows CSS code to apply styles to all Spark Button components in an application. It also creates a selector, .myStyle, that can be applied to any component:

    @namespace s "library://ns.adobe.com/flex/spark"; 
    @namespace mx "library://ns.adobe.com/flex/mx"; 
 
    s|Button { fontSize: 16pt; color: Red } /* type selector */ 
    .myStyle { color: Red } /* class selector */ 

For styles applied to components, such as s|Button, the selector for components must specify a namespace. In this example, s|Button defines a style that is automatically applied to all Spark Button components.

Use the CSS period notation to create a selector that can be applied to any component. In this example, .myStyle does not have to declare a namespace and can be applied to any component.

Flex has specific requirements for creating and applying styles. For details, see Using styles in Flex.

You can convert inline styles and component skins to CSS styles. During the conversion, you can specify whether to make the styles global or to apply to a specific component. You can also specify a CSS style selector for the generated styles.

1. In Design mode of the MXML editor, select a component in the design area. The component should use inline styles or specify a skinClass property.

   See Generating and editing skins for Spark components for information on specifying a skinClass for a component.

2. In Properties view, click Convert to CSS.

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 a new file.

5. Specify the Selector type. Choose from the following:

   • All Components

     The style is global and applies to all components in the application.

   • All Components With Style Name

     Components specify this style selector using the styleName attribute. If you choose this option, then specify a name for the 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.

6. 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 inline style or the skinClass property for the component.

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.

2. In the Properties View, 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 Properties View to make further changes. You can also modify your CSS in Source mode.

Use the New CSS File wizard to create CSS files for a project. The New CSS File wizard creates a blank file that you can use to define your CSS styles.

By default, Flash Builder adds the default namespaces for Spark and MX styles.

To create a blank CSS file:

1. From the Flash Builder menu, select File > New CSS File.

2. Specify a source folder.

   The source folder can be in the current project or another project.

3. Specify a package for the file

   Select from the packages available in the project. If you want to place the file in a new package, then first create the package. Select File > New Package.

4. Specify a Name for the file.

5. Click Finish.

Flash Builder uses templates that define the contents of newly created files. You can customize the templates that Flash Builder uses. See Customizing File Templates.

Flash Builder provides a CSS editor which you can use to create and edit style sheets for your application. The CSS editor is available only in Source mode.

When you create a new style sheet in Flash Builder, Flash Builder provides the following declarations for the Spark and MX namespaces:

@namespace s "library://ns.adobe.com/flex/spark"; 
@namespace mx "library://ns.adobe.com/flex/mx";

Some Spark and MX components share the same local name. For example, there is a Spark Button component (in the spark.components.* package) and a MX Button component (in the mx.controls.* package). To distinguish between different components that share the same name, you specify namespaces in your CSS that apply to types.

If you do not use type selectors in your style sheets, then you are not required to declare namespaces. For more information, including examples, see About namespaces in CSS.