Back

CreateLayout

Layout creates a Layout object which is used to visually organise graphical controls such as text, buttons and images on the screen.

app.CreateLayout( type, options ) -> app object - Layout

Example - Vertical



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



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      

Example - Combined



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      

Example - Image Swap



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      

The following methods are avaiable on the Layout object:

  Destroy()
  Explode()
  Focus()
  GetAbsHeight() -> number - integer
  GetAbsWidth() -> number - integer
  GetChildOrder( child ) -> number - integer
  GetHeight( options ) -> number - fraction of screen height
  GetLeft( options ) -> number - fraction of screen width
  GetPosition( options ) -> object - { left: fraction of parent width, top: fraction of parent height, right: fraction of parent width, bottom: fraction of parent height }
  GetTop( options ) -> number - fraction of screen height
  GetType() -> string - "Layout"
  GetVisibility() -> string - "Show" or "Hide" or "Gone"
  GetWidth( options ) -> number - fraction of screen width
  Gone()
  Hide()
  IsEnabled() -> boolean
  IsOverlap( obj, depth ) -> boolean
  IsVisible() -> boolean
  SetScale( x, y )
  Show()
  id -> string - "#id"

string - "Linear" or "Absolute" or "Frame"
string - "TouchThrough", "TouchSpy", "Left" or "Top" or "Right" or "Bottom" or "Center" or "VCenter", "Horizontal" or "Vertical", "FillX", "FillY", "FillXY"
app object
unknown
adds a DS control to the layout
number
set color effects
string - "Flip" or "FadeIn" or "FadeOut" or "SlideFromLeft" or "ScaleFromLeft" or "SlideToLeft" or "ScaleToLeft" or "SlideFromRight" or "ScaleFromRight" or "SlideToRight" or "ScaleToRight" or "SlideFromTop" or "ScaleFromTop" or "SlideToTop" or "ScaleToTop" or "SlideFromBottom" or "ScaleFromBottom" or "SlideToBottom" or "ScaleToBottom"
function()
number - milliseconds
animates the layout
brings a child to front before all other
?
destroys object
DestroyChild
destroys object with explode animation and sound
?
get height in pixels
get width in pixels
get screen relative height
get distance to left parent border
get distance to upper parent border
GetVisibility
get screen relative width
Set visibility "Gone"
Set visibility "Hide"
IsEnabled
number - fraction of screen width
return wether obj overlap with an other
IsVisible
?
RemoveChild
string -
  hexadecimal: "#rrggbb", "#aarrggbb"
  colourName: "red", "green", ...
SetBackColor
number - fraction of screen height
SetBackColorRadial
string - path to file or folder ( "/absolute/..." or "relative/..." )
changes the background image
string - "Add" or "Multiply" or "?"
adjust color
boolean
en/disable object
?
move object from current position
function()
?
function( self )
callen when object long pressed
function( event )
called when user touches object
function( event )
called when finger comes down
function( event )
called when finger was moved over screen
function( event )
called when finger leaves screen
string - "Default" or "Portrait" or "Landscape"
change layout orientation
set surrounding borders
SetPosition
number - factor
SetScale
change object size
SetTouchable
string - "Show" or "Hide" or "Gone"
change visibility mode
Set visibility "Show"
?
object id
{
    source: app object,
    action: string - "Down" or "Move" or "Up",
    count: number - integer,
    X: number - fraction of screen width,
    Y: number - fraction of screen height,
    x: list - [ x1, x2, x3 ],
    y: list - [ y1, y2, y3 ]
}