Macromedia Consulting is happy to share our initial version of the Flex Style Explorer.
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:
- Create a catalog of the available style controls for flex components
- Allow for easy real-time manipulation of the component’s style in order to see the effect of the various controls.
- 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
Comments
Wowsers, that’s great! Does anyone know of an equivalent for Flash MX V2 components?
This is pretty freaking cool. Makes me wish that I had time to learn Flex! Nice job, guys.
Guys,
Are you providing source-code of this application?
If yes, then please add “View Source” in context menu of this application….
-abdul
This helps so much… I also agree with Abdul, having the source would be oh so very helpful.
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.
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
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
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
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.
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
thanks for the info about the bug
Thank you for your sample
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?
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.
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.
“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?
(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.
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.
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.
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
That’s very handy, thanks!
Enjoyed browsing through the site
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
This is an old post I know – but can anyone tell me where the page has been moved to, for the Flex Style Explorer?
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..?!!
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.
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
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.