Skinning Flex Applications

Comparative between Flex 2 Style Explorer and Style Creator

After working for a while with these application websites, I wrote something about it.

Flex 2 Style Explorer has been developed by Adobe Consulting, you can access there directly from the link above. It has all the components menus on the left. It reminds me of old frame websites, this is a personal opinion but I´d rather the presentation as it is in Style Creator

Style Creator has been developed by the team of FlexOnRails, once in their website go to the right and click on myApps where it says Flex CSS Editor, it opens in a blank window.

What can I tell about them?
I tend to think both have been developed for designers or for creative programmers as we lastly hear. None of them can save your parameters while you are working, unless you export the CSS. So if you´ve been working half ana hour with colors and sytles and your browser hungs up, you will lose everything cos Firefox does not recovers the parameters.

To tell the truth, the best funcionality I find on these applications is the color. But, if this is thought for designers there should be a ColorPicker to take any color of the browser, in the way Photoshop does, specially because we are working with gradients.

There are some things we miss in one and the contrary. For example Style Creator forgets about the toolTip and Style Explorer about Text. That´s why I strongly recommend to use both at the same time and them cut and paste to make one stylesheet. Style Explorer will create the class myTitleStyle. I prefer to do it on my own, but this is personal.

One of the critics that Flex had in its first version was thas every application looked the same, same look & feel for all, specially because no skinning was donde. In the while for Adobe Thermo what seems to be more interesting is playing with the Application backgroundColor and the Components backGroundColor. This is desperating in this apps cos you have to enter component by component if you want to change all the components backgroundColor at one time. Not the way a designer would do it.

When exporting to CSS, Flex 2 Style Explorer copies the content in the notepad while Style Creator creates the .css directly. In both you can edit it while skinning components, but not the whole .css.

Your .css will have an aspect like this (a fragment):

Application {
backgroundColor: #5795c6;
backgroundGradientAlphas: 0.1, 1;
}

Accordion, ApplicationControlBar, DataGrid, DateChooser, List, MenuBar, NumericStepper, Panel, TextArea, TextInput, ToolTip, Tree{
backgroundColor: #d4f4ff;
}

Lastlty, I miss a preload skinning that could be here perfectly.

Flex 2 Style Explorer

Style Creator