ADOBE® FLEX® BUILDER™ 3: USING ADOBE FLEX BUILDER 3

ADOBE FLEX BUILDER 3

Using Adobe Flex Builder 3

81

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.

Note: You can also modify your CSS in Source mode.

For more information, see “Using Cascading Style Sheets” on page 479 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.

ADOBE FLEX BUILDER 3

Using Adobe Flex Builder 3

82

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” on page 784 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.

Note: These default values apply to both the MXML editor and the CSS editor. However, in the MXML editor only some

(not all) fields in the Flex Properties view are styles. Fields that are not styles will only display values that are explicitly

set.

For more information, see “Using Styles and Themes” on page 470 in the Adobe Flex 3 Developer Guide.