Flex Style Explorer Update: Advanced Color Spaces and Add Swatches

With much thanks to Matt MacLean for his contribution of code to the Advanced Color Picker, the Flex Style Explorer just got a little more useful. Two new features have been added that should make your life a little easier.

First, the advanced color picker is even more advanced, with color spaces for Hue, Saturation, and Brightness, as well as R, G, and B color spaces. Additionally added was support for text entry for all those values, as well as the web hex value. Thanks very much for your contribution Matt.

Also, I’ve added support for adding swatches to the basic color pickers from the advanced color picker. In advanced color picker, select “add swatch”, and that color swatch will appear in all color pickers throughout the application, as shown below.


As always, the source code is included, so if anyone out there has the initiative, and more importantly, the time to contribute your own ideas and code to the Style Explorer to help make it an even more useful application, send your code my way and we’ll consider integrating it. (Kuler integration perhaps?)

CLICK HERE TO EXPERIENCE THE APPLICATION (and remember, view source to download)

16 Responses to Flex Style Explorer Update: Advanced Color Spaces and Add Swatches

  1. David says:

    Hi Peter,

    Would be cool to add support for viewing/importing swatches from Kuler. 🙂


  2. Matt MacLean says:

    Glad to see you got the swatches working 🙂

  3. Matt MacLean says:

    Great Kuler idea, its actually a very simple implementation and I managed to get it working in about 15 minutes. See Here: http://www.maclema.com/content/sek/

  4. stef says:

    Thanks a lot, man ! It’s really usefull (and well done).

    But I don’t understand how to use the dataChange event. I can’t call it. I tried change, which is used in the standard colorPicker, in vain.

  5. milan says:

    hi, kuler import is great. There is only one small problem, that if you add more kuler swatches (that fit in more than one line of swatches), color selector doesn’t get resized, so colors in overlapping lines can’t be selected. Anyway, thanks for this update!!!

  6. chris b says:

    I have been using the style explorer 2.0.1 and have noticed in the tree component , the background of the tree turns black when you select a depth color. This was not was happened in 2.0 this is happening in my own css styling of the tree element. I have been trying to find a answer or fix for this for 2 weeks and have not had any luck.

    Please help

  7. aYo says:

    Its a great tool but, there are a few things I feel have been overlooked. One obvious, is the ability to apply alpha values to control or container titles or labels. The Panel container title is a particular pain in the neck.

    [a /]

  8. Anthony says:

    Very great tool this style explorer.

    Just a question, how do you generate this pop-up (the color picker) in flex ? I can’t find any tutorial.

    And can we place images instead of text in the title panel for example ?


  9. Peter Baird says:

    Anthony. I’m not sure if you’re asking how to generate a popup, or how to implement the advanced color picker in flex, but just to let you know, the source code for the entire application is included. Right-click and select “view source” to view and download the source code. The code for the color picker is in the file components/AdvancedColorPicker.mxml.

  10. Lycan says:

    Hi Peter,

    I cant download the source code. I there any way where can I download the source code?


  11. sascha/hdrs says:

    I really like the theme that the Style Explorer uses and was wondering if it could be obtained somehow? I like the thin scroll bars!

  12. Peter Baird says:

    It’s all in the source. Right-click anywhere on the app and select “View Source” to download the source code.

  13. sascha/hdrs says:

    Duh! *slap hand on forehead* You’re right! how could I forget the source feature?!

    Lets see how you made the Tree inset with round corners … 🙂

  14. Randy Martin says:

    I downloaded the source for the style explorer and compiled in in flexBuilder 2.01 with hotfixes 2 & 3 applied. I get the following warnings:

    Data binding will not be able to detect changes when using square bracket operator; for Array, please use ArrayCollection.getItemAt() instead.
    doubleTextSliders.mxml flex2StyleExplorer/components line 12
    doubleTextSliders.mxml flex2StyleExplorer/components line 24
    quadTextSliders.mxml flex2StyleExplorer/components line 12
    quadTextSliders.mxml flex2StyleExplorer/components line 24
    quadTextSliders.mxml flex2StyleExplorer/components line 36
    quadTextSliders.mxml flex2StyleExplorer/components line 48

    The application seems to run fine, however. Just fyi…

    Great application, BTW! I use it almost everyday. 🙂

  15. Darren says:

    Great tool – I use it all the time. Love the new colour picker.

    One thing that seems to be missing from v2.0 and v3.0b is the dropdownStyles tab for a PopUpButton.

  16. Steve says:

    Great component.

    If anyones interested i’ve added a color dropper button that basically pops up an overlay over the application (behind the color picker) that allows clicking to select a color from anywhere in the app.

    Works pretty well apart from i can’t get flex to set focus back to the color picker window after a color is selected so the colorChanged event doesnt get broadcast until you’ve clicked back on the color picker window.