Flex Style Explorer

flexexplorer

An important part of developing for Flex is skinning or styling the components. Flex has a great set of components with a default appearance. If you want to customize the components to style them without loosing time use Flex Style Explorer. Flex Style Explorer has a very nice visual dashboard which allows you to edit colors, padding, corner radius, fonts, shadows, alpha, background, and more. Once you edit a component it creates the CSS for you and you can export the CSS. This is great for any designer or developer. You do not need Flex to use Flex Style Explorer. You can use Flex Style Explorer in Fireworks CS3 or on the web. This article will cover new features, the advantages, the disadvantages, and exploring components in Flex Style Explorer.

The new features of Flex Style Explorer 2.0.1 are:
– Advanced Color Picker
– Export All CSS
– Support for StyleName Styles
– Text Formatting Styles
– Text-Entry for Slider Controls
– Inclusion on New Components
– Improved Navigation
– Indication of Components Edited
– Progressive Disclosure of Controls
– Improved Graphic Representation of Styles
– Improved Scrollbar management

The Advantages
Flex Style Explorer has a great graphic representation of the styles as well as an easy to use navigation. The navigation allows you to pick and choose which components you would like to style. You do not have to style them all you can pick and choose.

The Disadvantages
Flex Style Explorer does not allow you to add or draw customized graphics and it does not have universal style sheet. For example, if you have a specific font you would like all of the components to use you can not just change it in one place and expect all the components to use the desired font. You must edit each components font to use the font of your choice. If you do not change it for all components necessary it will stay as the default.

Check out Flex Style Explorer
To begin using Flex Style Explorer open Fireworks CS3. Make sure you have Flex Style Explorer. If you are using Fireworks go to Window > FlexStyleExplorer. If you do not have Flex Style Explorer you can install it. (Install Flex Style Explorer for Fireworks CS3) or you can try it out on the web. (Flex Style Explorer on the web)

The dashboard is very easy to use.
Here are some key terms when looking at the controls:
Alpha – Transparency
Corner Radius – rounded corners of the component
Highlight Alphas – highlights on the buttons
Theme – is the highlighted border around the component that highlights when you roll over the component
Horizontal Gap – space between the tabs, buttonbar, and togglebar
Open/close duration – Combo box drop down you can control the speed of how long it closes and opens.

Component List:
Application
application

Buttons
button1

Containers
container

Form Elements
form

List
lists1

Navigators
navigation

Rules
rules

ScrollBars
scrollbar

Sliders
sliders

ColorPicker
colorpicker

DataGrid
datagrid

MenuBar
menubar

ProgressBar
progress1

In Conclusion
After you have styled the components in Flex Style Explorer you can Export the CSS and import the CSS into Flex. To learn more about Flex and how you can use these components take the Tour de Flex.

About Curious Minds
We are a web development firm in New York and Chicago, providing development resources and consulting for websites and mobile apps since 2004.