SmartLogic Logo (443) 451-3001

The SmartLogic Blog

SmartLogic is a web and mobile product development studio based in Baltimore. Contact us for help building your product or visit our website to learn more about what we do.

Creating a Custom Layout Class in Flex 4

July 16th, 2008 by

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

Diagonal Layout Screenshot

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

  • http://www.iotashan.com/ Shan

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

  • http://www.iamdeepa.com Deepa Subramaniam

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

  • http://www.smartlogicsolutions.com/wiki/Greg_Jastrab Greg Jastrab

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

  • http://www.smartlogicsolutions.com John Trupiano

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

  • http://www.ChikaraDev.com Greg Lafrance

    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?

Greg Jastrab was a developer and project manager at SmartLogic from 2006 to 2011. Follow @gjastrab on twitter

Greg Jastrab's posts