Supported Styles for Spark in Flex 4 – New Spec Posted

Once people got their hands dirty in Flex 4, one of the first road blocks that they hit was in styling. Our philosophy was that Flex 4 and its new Spark theme would provide people a much more flexible (no pun intended) way of skinning. Out of the box, we only provided a couple of global styles including baseColor, focusColor, color, symbolColor, contentBackgroundColor, rollOver, selectionColor and the text supported styles.  These knobs were supposed to allow you to change the overall look of your entire application very quickly. However, if you wanted to do anything else, you had to create a custom skin using our new mxml graphics and states syntax.

People coming from Flex 3 were wondering… “How do I change a border?”, “Can I change a background?”, “What about cornerRadius?”… “Why didn’t fillColors work anymore?”. All of the these styles that made making small tweaks easy, were now gone in the Spark skins. (They are still all available if you use the Halo skin, btw).

After much thinking, pondering, and looking over schedules, it was decided that we would bring back support for some of the styles (definitely not ALL of them).  Glenn just posted a spec yesterday discussing this upcoming work and is looking for feedback:

http://opensource.adobe.com/wiki/display/flexsdk/More+Styles+for+Spark+Skins

We are trying to find the compromise between keeping the skins flexible and lightweight and providing enough convenience knobs to change appearance easily.  Again…. we are looking to the community to provide some feedback on whether the right styles were chosen to support.

Happy Reading!

3 responses

  1. My vote is for an icon in many of the controls (button, default list item renderer, menus, etc)

    1. Unfortunately, I think that the icon button got cut from our schedule. To do it right, it wasn’t going to fit in. I believe we are going to get in padding styles though.

  2. I would suggest that padding should always be a style, not just on the new BorderContainer.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: