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();

25 Responses to New Flex Style Explorer: Jam-Packed with New Features

  1. Dan Nall says:

    Wow, very very nice. I use (used) the old version for all my CSS needs. This is beautiful work, thank you.

  2. Great job Peter.

    The more we can get styling down, the rest of the pie will follow.

    This is another good jump start for those wanting to try and see if Flex can ‘look different then out of the box’.

    Peace, Mike

  3. Rob says:

    Will the source be made available for this one?

  4. Peter Baird says:

    Yes, apologies. I should have also mentioned the online version, when view-source is enabled. If you’ve got Flex Builder, the link on the start page of Flex Builder now directs to the updated version of the style explorer, which is at http://examples.adobe.com/flex2/consulting/styleexplorer/Flex2StyleExplorer.html

  5. Eric Cancil says:

    Very nice, good additions from the last one.
    Now how about you guys release the color picker component? hmmm?

    Eric

  6. Peter Baird says:

    Eric, sure thing. The color picker component was originally developed by Tinic as referenced by the link above. Also, you can view source for the app, and glean the appropriate pieces of the color picker component.

  7. Tim Hoff says:

    Excellent Job Peter,

    I don’t know if you remember or not, but I had suggested that you add the ability to include sub styleNames and to export all of the CSS, about a year ago. I’m glad that you were able to get these two features working. Kudos. Also, the new layout rocks!

    Cheers,
    -TH

  8. Phillip Kerman says:

    Very well done–works well. Not sure if you need the history support in the web version.

  9. Juan Sanchez says:

    Congrats on the the new version Peter. I love all the new features, especially the export all CSS. This is going to make my series of pure-CSS themes all the more easier to create.

    Great job!

    Juan

  10. Marcus says:

    Really, really nice work, Peter. Dare I say ‘a really well designed RIA’ 😉

    Cheers,

    Marcus.

  11. Looks great Peter. I had complete faith you would make our jaws drop with the new version 🙂

  12. Sorry for the double post. I recently finished a Flex forum system that uses the runtime CSS and ended up going back and having to redo all the CSS after the fact because one thing had slipped my mind since none had fired until well after the fact when I began live tests with the database….Alert windows.

    Might want to add that to version 3 🙂

  13. Erki Esken says:

    Peter, is there a adobe.com/go url for style explorer in place yet? If not can you get one created? It would be nice to have short URL for it that is easy to remember.

  14. Brad Becker says:

    Peter,
    nice work from you–as always. 🙂

  15. Chad Udell says:

    Really great. Is there a way to save an in process design so you could work on styling some components and then come back later and pickup where you left off?

  16. Rober says:

    Sorry for posting here, but I was hoping to get information on the windows xp skin for flex 1.5. Is there any chance this will be updated for flex 2?

  17. Yup, very well done update.

  18. Eternal says:

    Amazing!!!

  19. 搬屋公司 says:

    Looks great Peter. I had complete faith you would make our jaws drop with the new version 🙂

  20. Josephine says:

    I love the Flex 2 Style Explorer. It has helped me out alot. The one thing it is missing, in my opinion, is the ability to upload/use icons/images/png/jpg. So, for example, in the ButtonBar section, it would be great to be able to upload an image and then see that on the page and in the button and in the css. Just a thought.

    Josephine

  21. Paul says:

    First let me say that this is a good tool.

    Interested in suggestion for new features?

    In my Flex apps. I use the feature that allows the user to select a theme from a list of CSS files. One problem is that every CSS file I have created, and downloaded have some tags missing. This means that when the user switches from theme to theme, things will be left over from the previous theme that the current theme doesn’t style.

    What I am interested in is the ability to style entire sites at a time, instead of piece meal. Towards that end I would like to see the following three features;

    1) A “Generate full CSS” button that would write every css tag needed to style every component using the current (including implied) tags.

    2) Propagation – The ability to click a button, and have the settings for the current component propagate to children and/or sibling components.

    3) Import an existing CSS file, or save an XML representation of “Flex Style Explorer” generated CSS file so that one could easily enhance/change an existing CSS.

    Of the three items above, my list of priorities would be 2,1,3.

    BTW If item 2 and 1 were a reality, I envision starting at the application level, enter a few styles, click propagate, then go into each of the component categories such as buttons, Containers… and add/change what needs to be changed and using the propagate button to modify their chldren. I would then go into each component and tweak any styles that need tweaking. When I was all done I would click the “Generate full CSS” button to create a complete css file that wouldn’t allow bleed through from another CSS.

    Paul

  22. TJ Downes says:

    Looking better all the time. There’s a typo on the button styles. Leter Spacing should be Letter Spacing. Thanks for the great tool!

  23. vasily says:

    how did you make the scrollbars look so neat? Is there a setting for this or did you use a custom control for this?

  24. Adam says:

    This is a fantastic Tool!

    Great job!

    Adam