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.
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.
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.
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.
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.
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.
6. Inclusion on New Components
Several components were missing from the original style explorer, and they have been added. These components include:
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.
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.
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.
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.
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.
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.
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…
EXPERIENCE THE APPLICATION ONLINE (View Source Enabled)
_uacct = “UA-1465179-1″;