Thursday, January 15, 2009

Painless CSS support for Flex components

As I'm sure you can tell, I've been doing a lot with Degrafa and custom components recently. One thing I've found frustrating while doing so is supporting styles, both custom and built-in. To combat this, I've cooked up a little something I call the StyleProxy.

Usage is simple. First, you'll need an instance of StyleProxy for your component:

<utils:StyleProxy id="styleProxy"/>

Second, make sure you have a <mx:Script> section in your MXML file and add this function:

override public function styleChanged(styleProp : String) : void
{
    super.styleChanged(styleProp);
    styleProxy.handleStyleChange(styleProp);
}

And you're done! Now, all you need to do is bind to properties on styleProxy using the style name. StyleProxy will take care of the rest.

Bonus: I've uploaded the source code for a simple button skin combining Degrafa and StyleProxy: View the example code.

StyleProxy is available for download from Google Code.

1 comment:

Julien E said...

Hey josh,
Exactly what I've been looking for.

I've been trying to listen to changes to inheritingStyles and nonInheritingStyles via proxy but no luck.

Overriding UIComponent.styleChanged seems to be the only way to detect style changes...

cheers,
Julien

This is

  • Tales of Flex
  • From Brisbane, Australia
  • Opinions on Flex development
  • Tips and FAQs
  • Shameless self-promotion

I am

  • Twitterer
  • Flexcoder
  • Maroon
  • Designer
  • Java lover
  • That loud-mouthed Aussie yob
  • Blogger
  • Problem solver
  • Contributor
  • Cricket Fan
  • Lousy photographer
  • Great cook

I read



Subscribe via RSS to receive updates!