Flex Builder Feature Creeping
With the release of Adobe’s CS3 Suite the workflow for getting graphics from Illustrator into Flex sounds like it’s going to get more streamlined and easier to deal with.
One thing I’d like to see has to do with the management of styles created for a Flex Project with a lot of graphic assets. Currently, after creating SWFs containing all my graphic assets, I create a CSS file which styles all my app’s components.
With larger apps there can be a lot of styled components and a lot of style names to remember. As a time saver I create an MXML file and use it as a “paste board” for all the styled components and icons I’ve made. These components are all stripped down and have styling attributes and a name attribute applied to it. That’s it.
The time saving comes in when I need a styled component. I go to my “paste board” MXML file and just copy and paste the styled component wherever I need it in my app. Then I’ll apply sizing and other attributes. It makes for a lot less things to remember and less keystrokes.
I know there is a style drop down in the “Flex Properties” panel of the Design View, but it only gets populated when your viewing an Application MXML file.
This tactic got me thinking. Wouldn’t it be great if there was a “Styles” palette like there is in Photoshop? It would load in visual representations of your created styles from CSS files inside your Flex Project. Then, when you need to style a component, just select a component and then click on a style inside the “Styles Palette” and your component gets styled. Or drag a style onto the component you want to style.
The other option would be a text based list of your created styles. You could expand each item to reveal the CSS attributes and edit them if necessary or apply a selected style to a component. I think there was something like this in Flex Builder 1.
I think this could help more designers warm up to Flex. There wouldn’t be a need to even look at the MXML, worry about where that component is in the MXML, or where to put that “roundedCorners” attribute. It’s all visual.
This might be wishful thinking and a bit overkill, but I know it would be a feature that could save me tons of time. Until then, I’ll keep using my “paste board” tactics.
March 2nd, 2007 at 7:22 pm
Juan,
This is a awesome idea… if Flex has a JS API like flash, it could be possible to create something like this, wouldn’t it? Time to call FlashGuru, he makes some great commands and components.
March 5th, 2007 at 3:31 am
I have created a Style Explorer similar to the Adobe verssion where example styles can be shown and the CSS names given. The key to this is that the CSS file we use is in source control so the same file is used in the explorer as in our projects. No adjustments are available within the my explorer as they are styled as per the company brand guidelines.
Do agree though to be able to have a pallete you could use in Flex builder would open up a better workflow for the Flex desginer, working with a pre defined CSS file.
March 5th, 2007 at 7:59 am
James,
Is the purpose of the Style Explorer you created just to view, name and possibly approve the styles that have been created in the source?
I think having the style explorer export a CSS file directly into the Flex source location might be kind of nice to. You could have a drop down of projects to select the relevant CSS file, make changes and hit export for it to save and go right into that Flex projects folder.
Then a designer doesn’t even need to open Flex Builder to do CSS styling.