Simple Layout Examples

Using the OpenPyro layout engine, you can create some pretty complicated layouts pretty fast. You can read more about the core engine here: Understanding the OpenPyro measurement system
Sizes can be based around % values.

The image below shows two controls sized at 50% width each.

Code

    var uiContainer:UIContainer = new UIContainer();
    uiContainer.skin = new AuroraContainerSkin();
    uiContainer.width = 600;
    uiContainer.height = 400;
    uiContainer.backgroundPainter = new FillPainter(0xdfdfdf);
    uiContainer.layout = new HLayout();
    addChild(uiContainer);

    var control1:UIControl = new UIControl();
    control1.skin = new DimensionMarkerSkin();
    control1.percentUnusedWidth = 50;
    control1.percentUnusedHeight = 100;
    uiContainer.addChild(control1);
    var control2:UIControl = new UIControl();
    control2.skin = new DimensionMarkerSkin();
    control2.percentUnusedWidth = 50;
    control2.percentUnusedHeight = 100;
    uiContainer.addChild(control2);

Left control sized to 100px and the right control to 100% of unused space

Code

    var uiContainer:UIContainer = new UIContainer();
    uiContainer.skin = new AuroraContainerSkin();
    uiContainer.width = 600;
    uiContainer.height = 400;
    uiContainer.backgroundPainter = new FillPainter(0xdfdfdf);
    uiContainer.layout = new HLayout();
    addChild(uiContainer);

    var control1:UIControl = new UIControl();
    control1.skin = new DimensionMarkerSkin();
    control1.width = 100;
    control1.percentUnusedHeight = 100;
    uiContainer.addChild(control1);
			
    var control2:UIControl = new UIControl();
    control2.skin = new DimensionMarkerSkin();
    control2.percentUnusedWidth = 100;
    control2.percentUnusedHeight = 100;
    uiContainer.addChild(control2);

The final example shows how setting two controls’ percentUnusedWidths to 60 each causes the total size of each to add upto 120% of the total container width which causes the Container to need scrollbars. The container then asks the skin (if it implements the IScrollableContainerSkin) for scrollbar instances that it then places.

Code

    var uiContainer:UIContainer = new UIContainer();
    uiContainer.skin = new AuroraContainerSkin();
    uiContainer.width = 600;
    uiContainer.height = 400;
    uiContainer.backgroundPainter = new FillPainter(0xdfdfdf);
    uiContainer.layout = new HLayout();
    addChild(uiContainer);
			
    var control1:UIControl = new UIControl();
    control1.skin = new DimensionMarkerSkin();
    control1.percentUnusedWidth = 60;
    control1.percentUnusedHeight = 100;
    uiContainer.addChild(control1);
			
    var control2:UIControl = new UIControl();
    control2.skin = new DimensionMarkerSkin();
    control2.percentUnusedWidth = 60;
    control2.percentUnusedHeight = 100;
    uiContainer.addChild(control2);

Check this code in action here
The source can be found here

Using the layouts and flexible sizes you can create pretty complicated layouts that maintain their sizes as the browser/application size changes: