Creating a Custom Layout Class in Flex 4 « SmartLogic Solutions Blog

Creating a Custom Layout Class in Flex 4

July 16th, 2008 by Greg Jastrab

So apparently I’m giving a week long series on getting started with Flex 4. I would have titled my content as such, but I guess I wasn’t sure if I would have learned enough to provide a week’s worth of content. Let’s give it a shot anyway.

As I briefly touched upon in yesterday’s post, layout is handled in new layout classes in Flex 4. Let’s dive in to making a simple, custom layout manager.

I’m just going to go through a simple example. All layouts need to implement the flex.intf.ILayout interface, which only needs to implement a getter and setter called target and two functions: measure and updateDisplayList.

Here is a simple layout we’ll call DumbDiagonalLayout:

com.smartlogicsolutions.flex.layout.DumbDiagonalLayout.as

package com.smartlogicsolutions.flex.layout {
 
    import flex.core.Group;
    import flex.intf.ILayout;
    import flex.intf.ILayoutItem;
    import flex.layout.LayoutItemFactory;
 
    public class DumbDiagonalLayout implements ILayout {
 
        /* --- Variables --- */
 
        private var _target:Group;
        private var _hGap:Number;
        private var _vGap:Number;
 
        /* === Variables === */
 
        /* --- Constructor --- */
 
        public function DumbDiagonalLayout() {
            _hGap = 20;
            _vGap = 30;
        }
 
        /* === Constructor === */
 
        /* --- Functions --- */
 
        public function measure():void {}
 
        public function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
            var layoutTarget:Group = target;
            if(!layoutTarget)
                return;
 
            var layoutItemArray:Array = new Array();
            var count:uint = layoutTarget.numLayoutItems;
            var nextX:Number = 0, nextY:Number = 0;
            for(var i:uint = 0; i < count; i++) {
                var layoutItem:ILayoutItem = LayoutItemFactory.getLayoutItemFor(layoutTarget.getLayoutItemAt(i));
                if(!layoutItem || !layoutItem.includeInLayout)
                    continue;
                layoutItem.setActualPosition(nextX, nextY);
                nextX += _hGap;
                nextY += _vGap;
            }
        }
 
        /* === Functions === */
 
        /* --- Public Accessors --- */
 
        public function get target():Group { return _target; }
 
        public function set target(value:Group):void { _target = value; }
 
        /* === Public Accessors === */
 
    }
 
}

This will simply layout subsequent children spaced _hGap in the horizontal direction and _vGap in the vertical direction. To use this layout we just need to set an attribute in our container class. Since our layout class is dumb, we also need to explicitly set the width and height on each component in the container.

DiagonalButtons.mxml

<?xml version="1.0" encoding="utf-8"?>
<Application xmlns="http://ns.adobe.com/mxml/2009"
             layout="com.smartlogicsolutions.flex.layout.DumbDiagonalLayout"
             backgroundColor="blue">
 
    <Button label="Button 1" width="80" height="20" />
    <Button label="Button 2" width="80" height="20" />
    <Button label="Button 3" width="80" height="20" />
    <Button label="Button 4" width="80" height="20" />
    <Button label="Button 5" width="80" height="20" />
    <Button label="Button 6" width="80" height="20" />
    <Button label="Button 7" width="80" height="20" />
 
</Application>

Compile this and you should see:

Diagonal Layout Screenshot

No promises whether I’ll get to another example tomorrow, but we’ll see…

This entry was posted on Wednesday, July 16th, 2008 at 9:38 pm by Greg Jastrab. Greg Jastrab joined SmartLogic Solutions in June 2006. He is now the Technical Project Manager and oversees all Flash/Flex/AIR development. Follow @gjastrab on twitter

This post is filed under Flex 4, Greg Jastrab, Gumbo. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

5 Responses to “Creating a Custom Layout Class in Flex 4”

Shan says:

July 16, 2008 at 11:18 pm

You’d better have a new example tomorrow, you just got added to my RSS reader :)
Deepa Subramaniam says:

July 17, 2008 at 4:10 pm

Dude, you’re on FIRE! Its thrilling to see the community poking into the Gumbo architecture and building examples. Bravo!
Greg Jastrab says:

July 17, 2008 at 4:14 pm

Haha, thanks Deepa, but you guys are on fire for making this! Awesome work, keep it up!
John Trupiano says:

July 17, 2008 at 5:19 pm

Yes, this is excellent work Greg! Keep it up.
Greg Lafrance says:

May 25, 2009 at 12:30 am

The Flex 4 sample apps I have tried in this blog have not compiled for me thus far. Would it be possible for you to bring them up to speed with the current SDK so they work without having to change anything?

SmartLogic Solutions Blog