teotigraphix.blog.show()

Flex2 :: Layout Class gems

Hello,

Well this post might actualy help someone…

If anybody has been following me in the past year and a half, you would have seen me creating a container framework for Flash. If you don’t believe me, go to my main site www.teotigraphix.com and hit the blog button(my old blog) and I talk plenty about it with screen shots.

Basically, when I created that extension to the v2 Flash8 framework, I said I don’t want the layout classes IN the view classes. This means take the layout alogrithm out of the Box class.

Well, I did just that and I was very successfull in creating the containers. I have to code. Well, come to find out that was my thesis and now I got a job with Flex2.

Now that we have reached Beta3, the doors of the source code fly open and what does Mike find!? Abstracted layout classes except for the Tile. Which if I was to bet, will be abstracted by the final release! If this doesn’t happen, I will do it myself.

So what am I talking about?

Well it’s this easy.

We start with the class Layout(which ironically I called my class also ;-) ).

The class contains a target property, measure() method and updateDisplayList() method.

Here is the steps to implementation in your class;

  1. import mx.containers.utilityClasses.BoxLayout;
  2. protected var layoutObject:BoxLayout = new BoxLayout();
  3. (in Constructor) layoutObject.target = this;
  4. (in direction setter) layoutObject.direction = value;

Then you override measure()

override protected function measure():void
{
super.measure();

layoutObject.measure();
}

Then you override updateDisplayList()

override protected function updateDisplayList(unscaledWidth:Number,
unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);

layoutObject.updateDisplayList(unscaledWidth, unscaledHeight);
}

This is polymorphic behavior at it’s best! I love this stuff, this is what made OOP, OOP. As you can see, as long as you implement the implied Layout interface, override in a Container class, your ready to Box Layout!

Some things to remember;

  • The Layout knows about target.getStyle()
  • The Layout knows about target.[property]
  • The Layout knows about IUIComponent

With the three ‘interfaces’ above, you can keep things still loosely coupled in your layout designs. What does this mean for component developers?!

We can finally easily swap layout algorithms at runtime and keep our layout algorithms to themselves where they belong.

Layout and Container always hated each other after the incedent when Layout cheated on Container with another Container.

Well, this is hacked but, maybe in the future I will put up a real kewl example of an applied use for this.

Peace, Mike

Leave a Reply