Easy Custom Styles in Flex 4 Spark

I needed to be able to style the width and height (and percentWidth and percentHeight) of a spark group. These styles do not exist, but they are valid properties. After searching for a quick way to do this, and finding nothing about Flex 4 that worked and wasn’t overly complicated, i wrote this little ditty (I am assuming the file is called “ExtStyleGroup” within the package “com.andrewzmmit.flex”:

This component called “ExtStyleGroup” extends a Group which provides the default properties of width, height, percentWidth and percentHeight, but now are configurable as style attributes within an external CSS stylesheet. It also allows the styleMap to be updated in run time by any class that extends ExtStyleGroup on a case-by-case (per instance) basis. Next time you go to create another <s:Group />, if you prefer the flexibility over the performance overhead, just use the custom MXML component:

In that example, I could’ve imported a style sheet instead with <fx:Style source=”style.css” />, but you get the idea…