return undefined;


Hidden gem of the Flex framework: LayoutContainer

Posted in AS3, Flex by Ben Clinkinbeard on the January 8th, 2008

Every now and then I stumble across something in the Flex framework that I am both surprised and sorry I didn't know about sooner. Like the fact that CheckBox has a built-in clickHandler method. Duh. LayoutContainer just may be one of the most useful classes around, especially if you're creating components you want to be reusable and flexible. First, a little background.

Its fairly common knowledge that VBox and HBox both extend Box and do nothing more than set a direction property. What may be a bit less obvious is the fact that the direction property is actually applied to an internal layoutObject property. In the case of Box (and by extension VBox and HBox), layoutObject is of type BoxLayout. As it turns out, Canvas uses an internal layoutObject as well, but in that case its an instance of CanvasLayout. Now notice that my references to both BoxLayout and CanvasLayout are not linked to the corresponding documentation. This is because Adobe has specifically excluded them from the documentation because, for whatever reason, Joe Developer isn't supposed to directly use them.

When I first discovered this I set about using them anyways because I had been struggling to find an optimal solution to a problem for a couple of days. Sure they always say things "may not be supported in future versions" but when was the last time they actually pulled something out and besides, where's your sense of adventure? I was on my way to creating a base class that could act like a Canvas, VBox or HBox using some intelligent switching between what type of layoutObject (and direction) it used. I was happy. Well, I didn't get far before I started hitting errors due to not implementing some deeply nested interface or some other nonsense. I was no longer happy. Thankfully, while digging through source and documentation I stumbled onto LayoutContainer. Lo and behold it does exactly what I was trying to accomplish! By changing the layout property between "absolute", "vertical" and "horizontal" (defined as constants on ContainerLayout), you can have your container lay its children out like a Canvas would (direction = ContainerLayout.ABSOLUTE) or like a Box would (direction = ContainerLayout.VERTICAL | ContainerLayout.HORIZONTAL). I suppose this is only exciting if you have a need for this kind of functionality, which, who knows how common that is but it was an absolute life saver on my recent task.

Stay tuned for where this technique is getting applied but I will leave you with the chunk of code from LayoutContainer that does the magic referenced in this post.

Actionscript:
  1. public function set layout(value:String):void
  2. {
  3.     if (_layout != value)
  4.     {
  5.         _layout = value;
  6.  
  7.         if (layoutObject)
  8.             // Set target to null for cleanup.
  9.             layoutObject.target = null;
  10.  
  11.         if (_layout == ContainerLayout.ABSOLUTE)
  12.             layoutObject = new canvasLayoutClass();
  13.         else
  14.         {
  15.             layoutObject = new boxLayoutClass();
  16.  
  17.             if (_layout == ContainerLayout.VERTICAL)
  18.             {
  19.                 BoxLayout(layoutObject).direction =
  20.                     BoxDirection.VERTICAL;
  21.             }
  22.             else
  23.             {
  24.                 BoxLayout(layoutObject).direction =
  25.                     BoxDirection.HORIZONTAL;
  26.             }
  27.         }
  28.  
  29.         if (layoutObject)
  30.             layoutObject.target = this;
  31.  
  32.         invalidateSize();
  33.         invalidateDisplayList();
  34.  
  35.         dispatchEvent(new Event("layoutChanged"));
  36.     }
  37. }

While the implementation may not be rocket surgery it is extremely useful at times. In fact, you may have even used one of LayoutContainer's subclasses before, its a little class called Application.

3 Responses to 'Hidden gem of the Flex framework: LayoutContainer'

Subscribe to comments with RSS or TrackBack to 'Hidden gem of the Flex framework: LayoutContainer'.


  1. on January 8th, 2008 at 12:50 pm

    I was the one who wrote that code. We decided to make those layout classes private because, right, they were an "implementation detail". The idea was to factor out the layout code into separate layout classes for internal use in Flex 2 and then, perhaps for a future release, work on the design thoroughly and then make them public.

    I've mentioned that and a few enhancements in my post here:

    http://mannu.livejournal.com/359634.html

  2. Ben said,

    on January 8th, 2008 at 1:28 pm

    Thanks Manish, for the comment and the code :) As I wrote the post I was also wondering in the back of my head about the projects Doug mentioned at http://dougmccune.com/blog/2008/01/07/were-not-waiting-for-flex-4/ and how they might progress and be implemented. Seems to me that we'll see some very powerful developments down the road if this many smart people are thinking on the topic, including Adobe so long ago. Thanks for stopping by!


  3. on January 12th, 2008 at 11:29 pm

    [...] As I’m doing some writing for the Flex for Dummies book I was digging into the source code for Panel and the other containers. I was writing about how Panel allows you to set the layout property to either absolute, vertical, or horizontal, just like LayoutContainer (or Application, which extends LayoutContainer). My initial thought was that Panel probably just extends LayoutContainer and that’s where we get the layout property from. But then digging in I saw that both LayoutContainer and Panel independently implement the layout property (in basically a cut and paste exact same way). Unless I’m missing something there’s no reason why Panel shouldn’t just extend LayoutContainer. (BTW, for a recent writeup of the LayoutContainer class see Ben Clinkinbeard’s post here). [...]

Leave a Reply