Flex Article

Flex Style Explorer: A Designer’s Tool to Bridge the Design-Development Gap in Flex

Designing for Macromedia Flex applications requires a different workflow than what most traditional web designers are used to. In HTML design, designers create web graphics in a visual design tool such as Macromedia Fireworks, slice up the images, and then hand those slices off to the developers. Meanwhile, with Flash design, the designer works directly in the Macromedia Flash authoring environment, and either takes on the responsibilities of the developer, or hands the FLA file to a developer.

With Flex applications, however, it doesn’t make much sense for a designer to work in Flex Builder and hand MXML files to developers; there are too many implications for development in setting up that file. Additionally, a designer in this scenario doesn’t really slice up images and hand them off. This leaves the designer for Flex applications with two possible approaches. In the first approach, the designer would create pixel-level specifications that the developer can use to create the appropriate CSS files. In the second approach, the designer would hand off a CSS file, or more appropriately, work closely with a developer to edit the CSS file to achieve an appropriate visual design.

As the Macromedia Consulting group worked with visual designers and user-experience professionals who were tasked with creating the visual and interaction design of Flex applications, we decided to develop the Flex Style Explorer application to help them create, design, and implement CSS styling in Flex applications. The specific purpose of Flex Style Explorer is as follows:

• Create a catalog of the available style controls for Flex components.
• Allow for easy, real-time manipulation of the component’s style to see the effect of the various controls.
• Provide the CSS associated with each style control.

Figure 1. The Flex Style Explorer application

Launch Flex Style Explorer to follow along with this tutorial.

Requirements

To complete this tutorial you will need to install the following software and files:

Macromedia Flex

• Try
• Buy

Macromedia Flash Player

• Download Flash Player

Tutorials and sample files:

• flex_style_explorer.zip (ZIP, 258K)

Download and install Flex Style Explorer on your local machine.

When To Use Flex Style Explorer

Each organization uses Flex Style Explorer differently. One approach is to use it when you’re creating or modifying the visual design of your Flex Application. Many organizations use the traditional waterfall methodology—an information architect creates wire frames and visual designers use the wire frames to create a visual design; the designers hand all the polished "screens" off to the developer to build. With this approach, Flex Style Explorer would be used as a reference tool. As the designer creates a visual design for the wire frames in a visual design program such as Fireworks, Flex Style Explorer dictates which properties are available for visual design for the components that exist in the application. Furthermore, after a design has been established, the visual designer can use Flex Style Explorer to specify the associated CSS for the design that he or she has created, putting the power and responsibility of the CSS styling in the hands of the designer. This helps limit the all-too-common back and forth between designer and developer—where the designer creates a visual design, developer says it can’t be done the way it was specified, the designer makes some changes, and so on.

The other approach to using Flex Style Explorer is becoming more common. Specifically, the information architect hands the wire frames off to the developers instead of the designers. The developers build the application using the default Flex components. Once the developers build the front-end, the designer has a working user interface—they can design not only the default state of the screen, but all the appropriate rollover and selected states. With a working user interface, the visual designer ideally creates and modifies the CSS file associated with the application. In this scenario, Flex Style Explorer is a reference for the styles available for each of the components; Flex Style Explorer also provides the visual designer with the appropriate CSS to enter into the file associated with the application.

With either approach, Flex Style Explorer is a complementary tool, rather than a stand-alone solution. In the first instance it’s used in concert with an application such as Fireworks. In the second instance, it used in concert with the built application and the CSS file.

Installing Flex Style Explorer

You can run Flex Style Explorer online at www.markme.com/mc/archives/FlexStyleExplorer.html. However, if you’d like to run it locally without an Internet connection, you can install a local copy by performing the following steps:

1. Download Flex Style explorer from the Requirements section above.
2. Unzip the downloaded file.
3. Save the file named FlexStyleExplorer.swf and the folder name backgrounds in a desired location on your Flex server.
4. If you have installed the stand-alone Flash Player, double-click FlexStyleExplorer.swf, otherwise you’ll need to open it in a browser window, which will prompt you to download the latest version of Flash Player.
5. If you’d like to use a custom graphic for the backgroundImage property of Application, place your custom graphic in the backgrounds folder and name it myBackground.swf. (Although it’s possible, I wouldn’t necessarily recommend using a JPG file for the background image of an application, since it will scale to fit and become distorted).

How to Use Flex Style Explorer

To use Flex Style Explorer, simply start it in either the Flash Stand-alone Player or in your browser window. Click the controls in the left panel and the assigned property will appear in the middle panel, and the associated CSS for the chosen properties will appear in the right panel. If you’d like to export the CSS for use in your own application, select the text in the CSS area, right-click and copy the text.

Some Caveats in Using Flex Style Explorer

While the Macromedia Consulting team made every attempt possible to catalog all possible styles, there are some we may not have included. For example, the ability to specify the size, weight, underline, font-family where text appears in components. Rather than repeat all the text styles for every component, we've included a view for text formatting, and noted that you can format any component that has text. In the future, we may add all text styles to all the components.

Send any comments, ideas, or complaints on Flex Style Explorer to mcblogfeedback@macromedia.com. If you feel that there are any components that are missing, please let us know. Keep in mind that it's a style application and therefore focuses on visible components. Therefore, such components as Tile, Grid, and Canvas are not included.

The Future of Flex Style Explorer

In the future, the Macromedia Consulting team may include the following features in Flex Style Explorer:

• A selection of predefined themes or examples from which to compare CSS and the ability to bring these into edit mode
• The ability to have a global custom color palette for the user to select from across components

Flex Style Explorer has proven to be a useful tool in assisting designers and developers working together to create the ideal visual design for a Flex application. There are still legitimate cases which require either custom components or skinning, but with the help of this tool, visual designers can see more and more that they can create their unique vision for the application entirely with CSS.

About the author