Announcing Flex Style Explorer

Macromedia Consulting is happy to share our initial version of the Flex Style Explorer.

FlexStyleExplorer.gif

This application grew out of our experience working with other visual designers and user-experience professionals who were tasked with creating visual designs for Flex applications, and were often asking for some tool to help them in that pursuit.


Our purpose in creating the Flex Style Explorer was the following:

  1. Create a catalog of the available style controls for flex components
  2. Allow for easy real-time manipulation of the component’s style in order to see the effect of the various controls.
  3. Provide the CSS associated with each style control.

Some Caveats
Use this at your own risk. This is by no means an official Macromedia product and is not supported. You know, the whole “the views expressed here do not represent the views of the parent company”. Same goes here. We haven’t had the opportunity to do much testing so you’re bound to find bugs.

While we’ve tried to catalog every possible style, there are some we’ve knowingly left out. For example, there’s the ability to specify the size, weight, underline, font-family where text appears in components. Rather than include that for every component, we’ve included a view for Text Formatting, and noted that any component that has text can be formatted.

We welcome any comments, ideas, or complaints on the Flex Style Explorer. If you feel that there are any components that are missing, please let us know. Keep in mind that it’s a style App, therefore it focuses on visible components, so don’t go telling me that Tile, Grid, and Canvas are missing.

Also, we would be very interested in ideas for future enhancements. Some of the ideas that we’re hoping to include in future versions are…

  • A selection of predefined themes or examples from which to compare CSS and the ability to bring these into edit mode
  • The ability to have a global custom color palette for the user to select from across components.

To launch the Flex Style Explorer, click here.

You can download the Flex Style Explorer here

28 Responses to Announcing Flex Style Explorer

  1. Tony says:

    Wowsers, that’s great! Does anyone know of an equivalent for Flash MX V2 components?

  2. Steve Ray says:

    This is pretty freaking cool. Makes me wish that I had time to learn Flex! Nice job, guys.

  3. Abdul Qabiz says:

    Guys,

    Are you providing source-code of this application?

    If yes, then please add “View Source” in context menu of this application….

    -abdul

  4. Mark says:

    This helps so much… I also agree with Abdul, having the source would be oh so very helpful.

  5. Peter Baird says:

    A couple of people have asked for the source code for the Style Explorer, and I’m reluctant to do so for one simple reasons (although there are others): the *source code* for the Style Explorer isn’t really an example of best practices. It works, sure, but I don’t claim to be an expert developer (I’m on the UX team), but as a representative of Macromedia Consulting, I’m reluctant to put anything out there that isn’t an example of best practices. But, feel free to ask any question in particular on how something was done, and we’ll be sure to share. Basically, the entire app comes down to the setStyle() function, over and over again.

  6. Omar says:

    Hi how did you made the black Panels have that glosy look? I am talking about the main panels the gray ones of the application.

    Omar

  7. Mike L says:

    This is great, but it has one big problem. The color pallet is really limited for designers. Is there a possibility of using a more advanced color picker such as http://store.jumpeye.com/cpicker/

    This is really the only thing stopping our design team from using this great resource. Also, it seems that you cannot manually enter a color, via hex code, or the object simply turns black.

    Thanks,
    Mike

  8. Kris H says:

    Regarding Mike L’s comments, our design team is having the same problem with the manual hex codes entered turning black.

    Does this carry over when the mxml app is run, or will the colors actually appear according to hex codes entered?

    Thanks,
    Kris

  9. Peter Baird says:

    Yes, the non-websafe hex values turning black in gradients is a known bug (note, this only happens in gradients, such as fillColors, and headerColors). And, no, that won’t carry through on the mxml files. You can use whatever hex value you want. So, when time affords we’re working on fixing that bug.

  10. Kris H says:

    Thanks for the info about the bug.
    Our team is moving forward with specs for our engineers. I will let you know how well the info from the Style Explorer works.

    Thanks,

    Kris

  11. melk moon says:

    thanks for the info about the bug

  12. serrato 1 says:

    Thank you for your sample

  13. melk moon says:

    That’s very handy, thanks!

    One thing though, the style of the three main Panels of the
    application are different than anything you can create with the
    current styles… Are we getting a glimpse of the future here? 😉

  14. Kate says:

    This is great, but it has one big problem. The color pallet is really limited for designers. Is there a possibility of using a more advanced color picker such as http://store.jumpeye.com/cpicker/

    This is really the only thing stopping our design team from using this great resource. Also, it seems that you cannot manually enter a color, via hex code, or the object simply turns black.

  15. Kevin says:

    Going back to Peter’s post, the glossy look on the panels is really neat and is exactly what I am looking forward. Would you be able to post how that is done? I played with the alpha attributes to no success.

    Thanks.

  16. todd says:

    “Yes, the non-websafe hex values turning black in gradients is a known bug”

    This is killing me! Please tell me there is a fix?

  17. Peter Baird says:

    (A month later) … sorry for the delay in response. As to the question about the fix non-websafe colors … this bug has been fixed in Flex 2.0, so a theoritcal Flex 2.0 Style Explorer would have such an item fixed … keeps your eyes posted to this blog. I will say no more.

  18. Rich says:

    I know it is a very simple component but did you forget the label component? I notice the text does not update on the left side of the interface.

  19. Peter Baird says:

    No, I didn’t forget the Label component, I just figured all the styles that you could assign to a label component were covered in “Text Formatting” (although not everything in text formatting applies). Was there’s something in particular you were looking for? I’m not so I understand what you’re referring to in your last sentence.

  20. Rajesh says:

    hi, the sample application is really gooood. Can i have source code of this. I had started learning Flex 1 week back . So looking on things on forum and stuff.I came across this . It rally struck my eye . Can you mail me the source code of this application. Thank you

  21. SX says:

    That’s very handy, thanks!

  22. katalog says:

    Enjoyed browsing through the site

  23. Hello!

    Just a great package guys! I wanted to let you know I came across a minor issue where if you choose a theme color in the button bar section of the buttons panel, it generates CSS that will flag an error in FlexBuilder 2 at compile time.

    Ex:

    ButtonBar {
    themeColor: #00ccff;
    buttonStyleName=”myButtonBar”;
    }

    Instead of:

    ButtonBar {
    themeColor: #00ccff;
    buttonStyleName: “myButtonBar”;
    }

    Nothing major but new users may get confused by the recommendations FB2 gives (mouseover fix suggestions doesn’t specify it’s the equal sign but instead recommends a left parenthesis)if they didn’t know the difference. Keep on with the great work!

    Chris

  24. Aarkid 3D says:

    This is an old post I know – but can anyone tell me where the page has been moved to, for the Flex Style Explorer?

  25. andregiant says:

    This is great!!, while recently I am learning about CSS (…I know!, …I know! I am late behind…! ;)). You guys provide me with this ease….!!

    anyone from located in Indonesia..?!!

  26. Romulo says:

    How can i run this example? I downloaded the Flex2StyleExplorer.zip but i dont`t know step by step how can i do this. =( Please talk can i do in IDE FlexBuilder.

  27. Peter Baird says:

    This version was built in Flex 1.5. You want the Flex 3 Version, which can be found here:

    http://examples.adobe.com/flex3/consulting/styleexplorer/Flex3StyleExplorer.html

  28. Hi Peter.
    I wrote about an alternative implementation to the Flex3StyleExplorer that is based on best practices. You might want to take a look here:
    http://www.awholenewweb.com/?p=51
    There is a small sample with viewSource enabled as well.