Delicious Facebook Google Bookmarks Twitter

›Blog›Announcement: Layouts

Announcement: Layouts

Article | Published: 18. Februar 2011 | Changed: 13. April 2011 | Category: UI
  1. HLayout
  2. VLayout
  3. Nested Layouts
  4. Excluding from Layouts
  5. Retrieving Layout Information
  6. Old School API
  7. Leave a Comment

Note: Layouts already has been released. The code examples are not longer entirely valid. The API has been refined and improved. See the Layouts documentation for detailed information and more up to date examples.

Layouts is a small layout framework containing solely a horizontal and a vertical layout. Nevertheless, both are more than simple to handle and have a great number of properties to adjust. Besides the usual layout algorithms Layouts provides a fluent interface to create runtime layouts as easy as it could be. Coming soon. Here a showcase in advance.

HLayout

4 different setups for a horizontal layout. The example shows a number of the config properties of the HLayout.

HLayoutExample.swf
package layout.showcase {
  import com.sibirjak.ui.layout.HLayout;
  import com.sibirjak.ui.layout.shortcut.*;
  import flash.display.Sprite;
  import flash.geom.Rectangle;

  public class HLayoutExample extends Sprite {
    public function HLayoutExample() {
      // layout 1
      var layout : HLayout = hlayout(
        config(
          "x", 10, "y", 10,
          "hGap", 10, "vGap", 10,
          "maxContentWidth", 230
        ),

        getBoxes(16, false)
      );
      layout.layout(this);
      drawRect(layout.contentArea);

      // layout 2
      layout = hlayout(
        config(
          "x", 10, "y", 150,
          "width", 230, "minHeight", 110,
          "hGap", 3, "vGap", 3,
          "vRowAlign", "justify",
          "hAlign", "justify", "vAlign", "justify"
        ),

        getBoxes(20, true)
      );
      layout.layout(this);
      drawRect(layout.contentArea);

      // layout 3
      layout = hlayout(
        config(
          "x", 270, "y", 10,
          "width", 230, "minHeight", 110,
          "hGap", 5, "vGap", 5,
          "vRowAlign", "middle",
          "hAlign", "center", "vAlign", "middle"
        ),

        getBoxes(12, true)
      );
      layout.layout(this);
      drawRect(layout.contentArea);

      // layout 4
      layout = hlayout(
        config(
          "x", 270, "y", 150,
          "width", 230, "minHeight", 110,
          "hGap", 5, "vGap", 5,
          "maxItemsPerRow", 5,
          "vRowAlign", "bottom",
          "hAlign", "right", "vAlign", "bottom"
        ),

        getBoxes(12, true)
      );
      layout.layout(this);
      drawRect(layout.contentArea);
    }

    private function getBoxes(numBoxes : uint, random : Boolean) : Array {
      var boxes : Array = new Array();
      for (var i : uint = 0; i < numBoxes; i++) {
        boxes.push(new Box(random));
      }
      return boxes;
    }

    private function drawRect(rect : Rectangle) : void {
      if (rect.width) rect.inflate(10, 10);
      with (graphics) {
        beginFill(0x333333);
        drawRect(rect.x, rect.y, rect.width, rect.height);
      }
    }
  }
}

VLayout

This is actually the mirrored HLayout example from above.

VLayoutExample.swf
package layout.showcase {
  import com.sibirjak.ui.layout.VLayout;
  import com.sibirjak.ui.layout.shortcut.*;
  import flash.display.Sprite;
  import flash.geom.Rectangle;

  public class VLayoutExample extends Sprite {
    public function VLayoutExample() {
      // layout 1
      var layout : VLayout = vlayout(
        config(
          "x", 10, "y", 10,
          "hGap", 10, "vGap", 10,
          "maxContentHeight", 230
        ),

        getBoxes(16, false)
      );
      layout.layout(this);
      drawRect(layout.contentArea);

      // layout 2
      layout = vlayout(
        config(
          "x", 150, "y", 10,
          "height", 230, "minWidth", 110,
          "hGap", 3, "vGap", 3,
          "hColumnAlign", "justify",
          "hAlign", "justify", "vAlign", "justify"
        ),

        getBoxes(20, true)
      );
      layout.layout(this);
      drawRect(layout.contentArea);

      // layout 3
      layout = vlayout(
        config(
          "x", 10, "y", 270,
          "height", 230, "minWidth", 110,
          "hGap", 5, "vGap", 5,
          "hColumnAlign", "center",
          "hAlign", "center", "vAlign", "middle"
        ),

        getBoxes(12, true)
      );
      layout.layout(this);
      drawRect(layout.contentArea);

      // layout 4
      layout = vlayout(
        config(
          "x", 150, "y", 270,
          "height", 230, "minWidth", 110,
          "hGap", 5, "vGap", 5,
          "maxItemsPerColumn", 5,
          "hColumnAlign", "right",
          "hAlign", "right", "vAlign", "bottom"
        ),

        getBoxes(12, true)
      );
      layout.layout(this);
      drawRect(layout.contentArea);
    }

    private function getBoxes(numBoxes : uint, random : Boolean) : Array {
      var boxes : Array = new Array();
      for (var i : uint = 0; i < numBoxes; i++) {
        boxes.push(new Box(random));
      }
      return boxes;
    }

    private function drawRect(rect : Rectangle) : void {
      if (rect.width) rect.inflate(10, 10);
      with (graphics) {
        beginFill(0x333333);
        drawRect(rect.x, rect.y, rect.width, rect.height);
      }
    }
  }
}

Nested Layouts

Creating nested layouts with the fluent interface is fun.

package layout.showcase {
  import com.sibirjak.ui.layout.shortcut.*;
  import flash.display.Sprite;

  public class NestedLayoutExample extends Sprite {
    public function NestedLayoutExample() {
      hlayout(
        vlayout(
          new Box(), // 1
          new Box(), // 2
          hlayout(
            new Box(), // 3
            new Box() // 4
          )
        ),
        new Box(), // 5
        hlayout(
          vlayout( 
            new Box(), // 6
            new Box(), // 7
            new Box() // 8
          ),
          new Box() // 9
        ),
        new Box() // 10
      ).layout(this);
    }
  }
}
NestedLayoutExample.swf

The same layout using the getter/setter API.

package layout.showcase {
  import com.sibirjak.ui.layout.*;
  import flash.display.Sprite;

  public class NestedLayoutOldSchoolExample extends Sprite {
    public function NestedLayoutOldSchoolExample() {
      var h1 : HLayout = new HLayout();
      var v1 : VLayout = new VLayout();
      v1.add(
        new Box(), // 1
        new Box() // 2
      );
      var h2 : HLayout = new HLayout();
      h2.add(
        new Box(), // 3
        new Box() // 4
      );
      v1.add(h2);
      h1.add(
        v1,
        new Box() // 5
      );
      var h3 : HLayout = new HLayout();
      var v2 : VLayout = new VLayout();
      v2.add(
        new Box(), // 6
        new Box(), // 7
        new Box() // 8
      );
      h3.add(
        v2,
        new Box() // 9
      );
      h1.add(
        h3,
        new Box() // 10
      );
      h1.layout(this);
      return;
    }
  }
}

Excluding from Layouts

Items may be excluded from being considered in layout algorithms. They still are member of their layout but do not consume space. The example shows additionally ways to identify and retrieve items from a layout.

ExcludeFromLayoutTest.swf

Click a box to exclude it from or to include it in the layout.

package layout.showcase {
  import com.sibirjak.ui.layout.*;
  import com.sibirjak.ui.layout.shortcut.*;
  import flash.display.Sprite;
  import flash.events.MouseEvent;
  import flash.geom.Rectangle;

  public class ExcludeFromLayoutTest extends Sprite {
    private var _layout : VLayout;
    private var _top : VLayout;
    private var _bottom : HLayout;

    public function ExcludeFromLayoutTest() {
      _layout = vlayout(
        config("x", 10, "y", 10, "vGap", 30),

        meta("top"),
        vlayout(
          config("vGap", 10),
          h1, h1
        ),

        meta("bottom"),
        hlayout(
          config("maxItemsPerRow", 9)
        )
      );
      _top =_layout.getItemById("top");
      _bottom =_layout.getItemById("bottom");
      layout();

      addEventListener(MouseEvent.CLICK, clickHandler);
    }

    private function get h1() : HLayout {
      return hlayout(
        config("hGap", 10),
        h2, h2, h2, h2
      );
    }
   
    private function get h2() : HLayout {
      return hlayout(
        config("maxItemsPerRow", 2),
        new Box(), new Box(), new Box(), new Box()
      );
    }

    private function clickHandler(event : MouseEvent) : void {
      var box : Box = event.target as Box;
      if (box.data != "removed") {
        _top.excludeFromLayout(box, false);
        _bottom.add(box);
        box.data = "removed";
      } else {
        _bottom.remove(box);
        _top.includeInLayout(box);
        box.data = null;
      }
      layout();
    }
   
    private function layout() : void {
      _layout.layout(this);
      graphics.clear();
      drawRect(_top.visibleArea);
      drawRect(_bottom.visibleArea);
    }

    private function drawRect(rect : Rectangle) : void {
      if (rect.width) rect.inflate(10, 10);
      with (graphics) {
        beginFill(0x333333);
        drawRect(rect.x, rect.y, rect.width, rect.height);
      }
    }
  }
}

Retrieving Layout Information

After being layouted, a layout provides three versions of size information. They might be used to do some drawing depending on the final display object positions. The layout area (grey) starts from the top left point of the layouted display container and includes all space of the layout or any sublayout. The content area (light grey) is the box within the actual items are aligned. The visible area (white) of a layout begins with the first visible display object and ends with the last.

LayoutInformationExample.swf
package layout.showcase {
  import com.sibirjak.ui.layout.HLayout;
  import com.sibirjak.ui.layout.shortcut.*;
  import flash.display.Sprite;
  import flash.geom.Rectangle;

  public class LayoutInformationExample extends Sprite {
    public function LayoutInformationExample() {
      x = y = 10;
     
      var layout : HLayout = hlayout(
        config(
          "x", 40, "y", 40,
          "width", 230, "minHeight", 130,
          "maxItemsPerRow", 5,
          "hGap", 5, "vGap", 5,
          "vRowAlign", "middle",
          "hAlign", "center", "vAlign", "middle"
        ),

        getBoxes(12, true)
      );

      layout.layout(this);
      drawRect(layout.layoutArea, 0x999999);
      drawRect(layout.contentArea, 0xCCCCCC);
      drawRect(layout.visibleArea, 0xFFFFFF);
    }

    private function getBoxes(numBoxes : uint, random : Boolean) : Array {
      var boxes : Array = new Array();
      for (var i : uint = 0; i < numBoxes; i++) {
        boxes.push(new Box(random));
      }
      return boxes;
    }

    private function drawRect(rect : Rectangle, color : uint) : void {
      rect.inflate(10, 10);
      with (graphics) {
        beginFill(color);
        drawRect(rect.x, rect.y, rect.width, rect.height);
      }
    }
  }
}

Old School API

OldSchoolAPIExample.swf
package layout.showcase {
  import com.sibirjak.ui.layout.HLayout;
  import com.sibirjak.ui.layout.shortcut.*;
  import flash.display.Sprite;
  import flash.geom.Rectangle;

  public class OldSchoolAPIExample extends Sprite {
    public function OldSchoolAPIExample() {
      // layout 1
      var layout : HLayout = new HLayout();
      layout.x = 10;
      layout.y = 10;
      layout.minWidth = 220;
      layout.maxContentWidth = 180;
      layout.minHeight = 150;
      layout.hGap = 5;
      layout.vGap = 5;
      layout.vRowAlign = "justify";
      layout.hAlign = "right";
      layout.add(getBoxes(16, true));
      layout.layout(this);
      drawRect(layout.contentArea);
     
      // layout 2
      layout = hlayout(
        config(
          "x", 260, "y", 10,
          "minWidth", 220, "maxContentWidth", 180,
          "minHeight", 150,
          "hGap", 5, "vGap", 5,
          "vRowAlign", "justify",
          "hAlign", "right"
        ),
        getBoxes(16, true)
      );
      layout.layout(this);
      drawRect(layout.contentArea);
    }

    private function getBoxes(numBoxes : uint, random : Boolean) : Array {
      var boxes : Array = new Array();
      for (var i : uint = 0; i < numBoxes; i++) {
        boxes.push(new Box(random));
      }
      return boxes;
    }

    private function drawRect(rect : Rectangle) : void {
      if (rect.width) rect.inflate(10, 10);
      with (graphics) {
        beginFill(0x333333);
        drawRect(rect.x, rect.y, rect.width, rect.height);
      }
    }
  }
}


Leave a Comment

You have a question or have experienced an issue? Please post it in the forum: http://sibirjak.tenderapp.com/ in order to make the discussion available at a more central place.