New Flex Style Explorer: Jam-Packed with New Features

I’m extremely excited to be able to announce that a new version of the Flex Style Explorer is available, and it has a ton of cool new features that should make users much more productive. Some of the more notable features include Export All CSS functionality, an advanced (photoshop-style) color picker, inclusion of additional components, support for styleName styles, and improved navigation.

preview.jpg

A complete list of the new features are as follows:


1. Advanced Color Picker

No longer are you either limited to to the web-safe palette, or figuring out the right hex value in some other design program, as the Style Explorer now includes an advanced color picker (Thanks to Tinic, of the Flash Player team for the Advanced Color Picker Example). Rollover any form element for a color, and a color wheel appears as shown below. Click the color wheel and a popup appears, allowing you to select from millions of colors.

cp1.gif
cp2.jpg

2. Export All CSS

Probably the most asked for feature, the Style Explorer now allows you to export all the CSS that you’ve generated for all components. I went back and forth on the best way to implement this, but landed on the following. At any time, click the “Export All CSS” button, and all of the CSS is copied to your computers clipboard. Switch to flex builder or any text editing program and paste the code into your CSS file. The reason for simply copying rather than generating a file include the need for the Style Explorer to be usable in both online and offline environments (many solutions for generating a file required connection to a server), and more importantly, the common use case where a person is merely appending styles to an existing style sheet. Copy-and-paste seemed to be the simplest solution. Thanks to Derek Wischusen for the inspiration in getting this implemented.

export1.gif
export2.gif

3. Support for StyleName Styles

Many components have styleName styles, which allow even greater customization of component, as well as cleaner code. For example, TabNavigator has tabStyleName and selectedTabTextStyleName properties. The TabStyleName style allows you to style the individual tabs and their text, without having the TabNavigator’s children inherit those styles. The SelectedTabTextStyleName allows you to style the text of a selectedTab differently from the text on all other tabs, useful for example if your selectedTab is a lighter color than the other tabs, as shown below. In addition to allowing customization at this level, the CSS generated also includes the appropriate styleName definitions for clean code.

styleName.jpg

4. Text Formatting Styles

Text formatting styles have been included for all components that support those styles, including fontFamily, fontSize, textAlign, fontWeight, fontStyle, textDecoration, leading, and letterSpacing.

textFormat.jpg

5. Text-Entry for Slider Controls

Ever tried to get that little slider at exactly 0.40 for an alpha value? It can be a difficult task. Sliders are great for quickly adjusting a value and seeing the effect instantaneously, but if you know the value that you’d like, it’s hard to pinpoint. A text field has been added to each slider that allows you to alternatively enter a text value.

textEntry.gif

6. Inclusion on New Components

Several components were missing from the original style explorer, and they have been added. These components include:

  • ToggleButtonBar
  • HDividedBox
  • VDividedBox
  • TextArea
  • VRule
  • VSlider
  • ColorPicker
  • ToolTip

7. Improved Navigation

Something that’s always troubled me is that the previous navigation involved a bit of “click-and-wonder”, that is, if you didn’t know that “LinkButton” as in the “Other” category, you’d have to go around searching for it. But, as John Maeda affirms in “Laws of Simplicity”, sorting elements does make the interface appear simpler, so if I were to make a flat alphabetical list of all the components, it the list of 32 elements would appear somewhat overwhelming. I went back and forth trying to decide on the best approach.

Looking at my iTunes library one day, I had a “duh” moment. (Some people have “a-ha” moments, I have “duh” moments). Seeing the different layout options for my library in iTunes… list, artwork, coverflow … I realized, why not include both options.

So, the navigation options are as follows:

  • By Category. This allows you to scan through items if like category.
  • Alphabetical List. This includes an alphabetical list of the components.
  • Mini-List. Knowing that I’ve just stolen some of your horizontal real-estate by adding this navigation, you can collapse either list at anytime to regain that real-estate, but still be able to switch components by component icon.

nav.jpg

8. Indication of Components Edited.

When it list view, a check-mark is added to those components that have been edited. If “Restore Defaults” is selected, the check-mark disappears.

checked.gif

9. Progressive Disclosure of Controls

Not all styles are applicable to a component at all times. For example, if the dropShadowEnabled is false, then properties such as shadowDistance, shadowColor, and shadowDirection will have no effect. Therefore, in an effort to include some education as to those connections, and to simplify the interface, if components are not applicable, they will not be visible. As shown below, once dropShadowEnabled is selected as true, the three subsequent styles appear.

dropShad.gif

10. Improved Graphic Representation of Styles

Where possible, instead of simply using radio-buttons to represent the possible options, a button bar with icons representing the various options is being used to both clean up the interface, and as a visual representation of the option.

grapRep.gif

11. Improved Scrollbar management

On of the biggest things that bugged me personally about previous versions of the Style Explorer was the scrollbar management. As list options exceeded the vertical real-estate, the entire application would grow and a scrollbar appear on the far right as shown below. Not very useful if the control your editing is at the bottom, and the component whose styles are being updates is off the screen up above. This version includes an improved scrollbar system, where the scrollbar appears only in the list of controls. Compare the screenshot of the previous behavior at top, with the improved scrolling of the image below that.

oldScroll.jpg

newScroll.jpg

12. Skinning for a “Transparent” App

Finally, additional skinning work was done to make the app more “transparent”. Since you the user can set the background color or image to anything you want, I needed to make the entire UI event more transparent than the default flex. So, you’ll notice some skinned components lying around, and hopefully the application is just as usable with a dark background as it is with a light background.

dark.jpg

light.jpg

Known Issues:

Will all those updates, there are a few small, known issues with the application, that shouldn’t get in the way, but you should know.

  • Weird Text Controls Bug: For just a few components, selecting the text formatting options for a style name, such as selectedTabStyle will bump in the controls to the right. This doesn’t affect usability, but as a designer, it bugs me to death.
  • Can’t Clear Style on AlternatingItemColors. This relates to a known bug in Flex as a whole. The function clearStyle(‘alternatingItemColors’) has no effect. So, if you set those styles on a component (list, tree, dataGrid), “Restore Defaults” will have no effect on the component.

With all that said…

DOWLOAD THE FLEX STYLE EXPLORER

EXPERIENCE THE APPLICATION ONLINE (View Source Enabled)

_uacct = “UA-1465179-1″;
urchinTracker();