Friday, January 23, 2009

Excuses - er, I mean, an announcement!

No code this week! But I have been doing some hacking - I'm very happy to say that I've joined the Degrafa team, and I'm hard at work on some new features, starting with bindable filters. What's that mean? Well the short of it is that you'll be able to bind filter parameters to data in MXML, and Degrafa will know about the updates and re-render when appropriate. No more: "var tmp:Array = foo.filters; foo.filters=null; foo.filters = tmp;". I don't know about you guys, but I'm *sick* of doing that :)

It's not much, and the changes aren't ready to go upstream into SVN yet so you can't use the features, but you can see an example of what I'm talking about here. For some reason it's much smoother on Mac than Windows (at least with Player 9), but it's just a work-in-progress.

It's not final, but I'm trying to find a nice way to let you use the Degrafa bindable filters on regular DisplayObjects. No promises, but I'm trying!

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.

Saturday, January 3, 2009

More Degrafa madness - Scrollbars and Illustrator

The holidays are almost over! I've been doing some bludging, some swimming, spent some time at the beach, watched some cricket, ate (too much) pudding and brandy sauce, and finally finished my damned scrollbars to a satisfactory level. To jump right in and see the final product, click the image below:

NB: This works with Degrafa SVN, I haven't tested it against the pre-compiled .swf.

You'll find included in the package the Adobe Illustrator File I created for the artwork, as well as the individual SVG files for the resources.

A few things to note:

  • I had to copy-and-paste each element of the scrollbar into a temporary new document in Illustrator before exporting as SVG, just to keep things simple.
  • The gradients and path data have been a little hand-tweaked for positioning.
  • Illustrator will use commas for all whitespace when exporting path data, but will default to no whitespace at all when it's not needed (negative numbers for example don't need whitespace to separate them from their predecessors). This is valid SVG (and Degrafa path data), but I just prefer to separate coordinate pairs with spaces, and x/y values with commas.

As always, your feedback is appreciated! Please let me know if you've got any questions, corrections, or suggestions!

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!