CreateLayout

Hello World

Content:
- Linear Layouts
- Frame Layouts
- Absolute Layouts
- Card Layouts
- Properties
- Methods

Layouts are container objects which are used to visually organize graphical objects (controls), such as text, buttons and images on the screen.

lay = app.CreateLayout( type, options? ) → app object: Layout

There are 4 types of layouts: “Linear”, “Absolute”, “Frame” and “Card”.

Layouts are transparent by default but you can set a background image which can be tiled or stretched to fill the layout. You can also set a background color or background gradient.

You can add child objects to the Layout using the AddChild function: lay.AddChild( object );
The alignment of chlld objects within a layout can be set by adding the options “Left”, “Right”, “Bottom” and “VCenter”, by default objects will be aligned “Top,Center”.

Linear Layouts

Linear layouts are probably the most useful type and are used to organize controls in either the default “Vertical” or “Horizontal” direction on screen.

Example - Vertical click to expand contents

function OnStart()
{
    lay = app.CreateLayout( "Linear", "Vertical" );

    btnA = app.CreateButton( "A", 0.2, 0.1 );
    lay.AddChild( btnA );

    btnB = app.CreateButton( "B", 0.2, 0.1 );
    lay.AddChild( btnB );

    btnC = app.CreateButton( "C", 0.2, 0.1 );
    lay.AddChild( btnC );

    app.AddLayout( lay );
}

Copy Copy All Run

Example - Horizontal click to expand contents

function OnStart()
{
    lay = app.CreateLayout( "Linear", "Horizontal,FillXY" );

    btnA = app.CreateButton( "A", 0.2, 0.1 );
    lay.AddChild( btnA );

    btnB = app.CreateButton( "B", 0.2, 0.1 );
    lay.AddChild( btnB );

    btnC = app.CreateButton( "C", 0.2, 0.1 );
    lay.AddChild( btnC );

    app.AddLayout( lay );
}

Copy Copy All Run

By default Layouts will auto-size to wrap their contents but you have 3 more options as to how a layout sizes within it's parent: “FillX”, “FillY” and “FillXY”.

Example - Combined click to expand contents

function OnStart()
{
    layVert = app.CreateLayout( "Linear", "Vertical,FillXY" );

    btnA = app.CreateButton( "A", 0.6, 0.1 );
    layVert.AddChild( btnA );

    layHoriz = app.CreateLayout( "Linear", "Horizontal" );
    layVert.AddChild( layHoriz );

    btnB1 = app.CreateButton( "B1", 0.2, 0.1 );
    layHoriz.AddChild( btnB1 );
    btnB2 = app.CreateButton( "B2", 0.2, 0.1 );
    layHoriz.AddChild( btnB2 );
    btnB3 = app.CreateButton( "B3", 0.2, 0.1 );
    layHoriz.AddChild( btnB3 );

    btnC = app.CreateButton( "C", 0.6, 0.1 );
    layVert.AddChild( btnC );

    app.AddLayout( layVert );
}

Copy Copy All Run

Frame Layouts

Frame layouts are used to display objects in front or behind each other. Every time the AddChild function is called on a Frame layout, the child object is placed in a new layer in front of the previously added object at the top left of the frame.

Frame Layouts are useful if you wish to do animated Flips or Slides to reveal layers of objects or use transparency.

Example - Image Swap click to expand contents

function OnStart()
{
    lay = app.CreateLayout( "Linear", "VCenter,FillXY" );

    layFrm = app.CreateLayout( "Frame" );
    img1 = app.CreateImage( "/Sys/Img/Droid1.png", 0.5 );
    layFrm.AddChild( img1 );

    img2 = app.CreateImage( "/Sys/Img/Hello.png", 0.5 );
    img2.SetVisibility( "Hide" );
    layFrm.AddChild( img2 );
    lay.AddChild( layFrm );

    btn = app.CreateButton( "Press Me" );
    btn.SetMargins( 0,0.1,0,0 );
    btn.SetOnTouch( btn_OnTouch );
    lay.AddChild( btn );

    app.AddLayout( lay );
}

function btn_OnTouch()
{
    if( img2.GetVisibility() == "Hide" )
        img2.SetVisibility( "Show" );
    else
     img2.SetVisibility( "Hide" );
}

Copy Copy All Run

Absolute Layouts

Absolute layouts ignore all alignment options and allow the absolute positioning of controls by calling the SetPosition and SetSize functions of each of the child objects. However, you are encouraged use linear layouts for most of your programs, unless it is absolutely necessary.

Card Layouts

Card Layouts are just like frame layouts, but with rounded corners and a shadow by default.
They may be used to display offers with an image and optional info text.