Flex Builder 3 Beta 2 : Styling Tools
With the announcement of the Flex Builder 3 Beta 2 being now available, I though I’d share some of the styling tools that will make styling your application a bit easier.
Additional Style and Skin Options
Now, in the Flex Properties panel in CSS Design View, you can access a variety of options for Styling and Skinning. The Styling portion adds more visual indicators to things like alpha, fillColors and there are inputs for things like padding, icon specifications, rollOver text colors, selected text colors, etc. The Skinning portion allows for easy selection of a skin. Once selected the CSS embed code is dropped into your CSS file.
Scale Grid Guides
You can now set/edit the scale9 grids right inside of the CSS design view. Whenever you change the values, your CSS file is updated. No more having to guess on the values or using another application to get the exact pixel perfect values.
Auto-Embed of Fonts
I’ve heard of a number of issues people have had embedding fonts for use in an application. Either a font weight wasn’t available, a wrong guess for a fontFamily name was made, etc. Now, when you creating a style you can select a local font from a drop down and, once a font is selected, you can click an option to embed the font. The proper CSS code is written to your CSS file and you’re ready to go.
One thing I did notice is that if you select a font and then select a different font, the former font embed code stays in your CSS file. When changing fonts in Design View to find one you like, make sure when you do find one that you go back to CSS file and remove the unnecessary font embed code.
Auto-Embed of Icons
Just like fonts, you can select an icon to be used from two options: Flash symbols and image files. When you select either Flash or image files you can browse for a SWC, SWF or image file and select your icon. Then, like the fonts, the embed code is written for you.
Additional Styling Navigation
In the CSS Design View there are additional features to help navigate through your styling. Rather than using the Outline panel to navigate through your styles, there is now style selector combo box next to the Source/Design toggle buttons. This is great for quickly switching between styles.
Also, there now some buttons for adding a new style or deleting the currently selected style. There’s also a color picker for selecting the background color that your skins sit on while you’re editing a style.
These are some of the immediate features I noticed and they’re all great for productivity. I think these additions will definitely help people get through skinning/styling their applications with fewer headaches. Nice!