Flex Article

Designing Flex 3 skins and styles using Creative Suite 3 and Flex Builder 3

Styling Flex components using CSS Design mode

One of the major new features in Flex Builder 3 is the CSS Design mode. In this mode, you can visually edit the CSS styles that apply to a component. This mode has much of the functionality that was in the original Flex Style Explorer, with the advantage that it directly writes the CSS into your project, eliminating the need to copy and paste code around. This section describes how to get started with CSS Design mode.

Creating default component styles

Here’s how to create default styles for Flex components. The default style for a component is applied to every instance of that component in the application by default.

1. Launch Flex Builder 3.
2. Create a new project using File > New > Flex Project.
3. In the Project name: field at the top, type StyleTest.
4. Click Finish. This will open the main application file for your project, StyleTest.mxml.
5. Create a new CSS file using File > New > CSS File.
6. Name the file styles.css and click Finish. This will open the new blank CSS file in an editor window.
7. In the toolbar at the top of the CSS editor, click the Design button.
8. Click on the New Style button immediately to the right of the Style dropdown in the toolbar.
9. In the New Style dialog, choose the component you want to style and click OK.
10. Use the controls in the Flex Properties panel on the right to edit the component’s styles.

Depending on the component you choose, you might see a single example of the component in the design view, or you might see multiple states of the component. For example, a button has several states: its normal (“up”) state, which is what it looks like when the user isn’t interacting with it; its “over” state, which is what it looks like when the mouse is over it, and so on. Different style properties affect different states of the component, so you’ll need to play around to see how they work.

Testing your styles in an application

Once you’ve created styles for a number of different components, you can see how the styles look in a real application. (Note: these instructions assume you’re using the standalone version of Flex Builder 3.)

1. While still in the CSS design editor, choose File > Save.
2. Click on the editor tab for StyleTest.mxml (which opened up automatically in step 4 above).
3. In the code, immediately below the <mx:Application> tag, type: <mx:Style source=”styles.css”/>
4. Click on the Design button in the toolbar at the top to switch to MXML Design mode. Several new panels appear.
5. From the Components panel in the lower left, drag the components you styled into the design area and lay them out as you like. The components should look the same as they did when you styled them in the CSS editor.
6. Choose Run > Run StyleTest. This will run your application in the browser. As you interact with the components you created, the various states of the components should also look like they did in the CSS editor.

Creating multiple styles for one component

You can use the CSS Design mode to create different kinds of styles. In the examples above, you created styles that applied to all instances of the component you were styling. However, you can also create multiple styles for a single component—for example, if you want to have different button styles in the same application. Here’s how:

1. Go back to the CSS editor for styles.css
2. Click New Style.
3. Select “Specific component with style name”.
4. Choose a component type as before—for example, Button.
5. In the “Name:” field, type a name—for example, redButton.
6. Click OK.
7. Customize the appearance of the button using the Flex Properties panel as before.
8. Choose File > Save.
9. Switch back to the editor tab for StyleTest.mxml (which should still be in Design mode).
10. Drag a button into the design area. Note that it looks like the default Flex button style (or the button style you created the first time around, if you did so)—it doesn’t look like your new redButton yet.
11. In the Flex Properties panel on the right, choose “redButton” from the “Style:” dropdown. Your button will now look like the redButton you designed.

Creating CSS styles from an application layout

All these examples started from the CSS editor. However, you might want to start by laying out a screen of your application first and tweaking its appearance there, then creating CSS styles after the fact, so you can reuse them in other areas of your application. The Convert to CSS feature in Flex Builder 3 makes this easy.

1. Create a new Flex Project using File > New > Flex Project.
2. Name the project MyApp and click Finish. This opens the main application file, MyApp.mxml.
3. Click the Design button in the toolbar.
4. Drag a Button from the Components panel into the design area.
5. Customize the appearance of the button using the Flex Properties panel. Note that the changes you make here only affect this button. If you drag a couple of other buttons into the design area, you’ll see that they have the default Flex appearance.
6. When you’ve finished customizing the button, click Convert to CSS... in the Flex Properties panel.
7. A dialog box appears that looks like the New Style dialog box. However, you have an additional option now for generating a CSS file to create the style in
8. Click New... and enter a name for the CSS file.
9. Leave the rest of the values unchanged and click OK to create a default style for Button. The CSS editor will open and show the new CSS style that was created from your original button. The new stylesheet is automatically applied to your main application, so you don’t need to add the <mx:Style> tag manually.
10. Choose File > Save.
11. Switch back to MyApp.mxml.

Note that the other buttons you dragged out now look the same as the first button. This is because the style you created became the new default style for Button. If you want to create a specific button style that doesn’t apply to every button in your application, just choose “Specific component with style name” in the Convert to CSS dialog as in the previous section and make up a name for your button style. You can then specify which buttons will use that style using the Style dropdown in the Flex Properties panel as before.

This section has only scratched the surface of what you can do with CSS Design mode. I’ll describe more features in the next section, but for more detail on styling components, refer to the documentation on CSS Design mode.

Page 3 of 5

Previous Page

Next Page