CreateList

Hello World

Content:
- Methods

If you want to display many dataset of the same structure you might consider using the List object.

lst = app.CreateList( list, width, height, options, delim ) → app object: List

The List object supports multi-line list items and can show icons. Multi-line items are created by dividing each list item up using the “:” (colon) character. If you need to use a colon character in your item text then use this character sequence: “^c^”.
You can have one icon and some body text using the following formats:

“title”
“title:icon”
“title:body:icon”

Alternatively you can use the AddItem method which accepts title, body and icon as parameters to generically build up your list.

You can specify your own icon file for example “Img/MyIcon.png”, or one of the special built-in icons using the following key words: “audio”, “photo”, “video”, “folder”, “audiofolder”, “photofolder”, “videofolder” and “playlist”.

Example - Title + Icon click to expand contents

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

    var data = "Folder:folder,Audio:audio,Photo:photo,Video:video";
    lst = app.CreateList( data, 0.8, 0.4 );
    lst.SetOnTouch( lst_OnTouch );
    lay.AddChild( lst );

    app.AddLayout( lay );
}

function lst_OnTouch( title, body, type, index )
{
    app.ShowPopup( "Touched Item = " + title );
}

Copy Copy All Run

Example - Title + Body click to expand contents

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

    var data = "The Hobbit:Author^c^ J.R.R. Tolkien:null";
    data += ",Watership Down:Author^c^ Richard Adams:null";
    lst = app.CreateList( data, 0.8, 0.4 );
    lst.SetOnTouch( lst_OnTouch );
    lay.AddChild( lst );

    app.AddLayout( lay );
}

function lst_OnTouch( title, body, type, index )
{
    app.ShowPopup( "Touched Item = " + title );
}

Copy Copy All Run

You can use the SetOnTouch and SetOnLongTouch methods to define a function you want to be called when a list item is selected. The selected item title, body, type and index are passed into your OnTouch callback function as parameters.

Example - Simple click to expand contents

Copy Copy All Run

You can change the look of a List using the SetBackColor and SetTextColor functions on the list object. You can also set a background image/pattern or background gradient for the List using the SetBackground and SetBackGradient functions.

Example - Gray on White click to expand contents

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

    lst = app.CreateList( "Fred,Bill,Jim", 0.8, 0.4 );
    lst.SetTextColor( "#ff666666" );
    lst.SetBackColor( "#ffffffff" );
    lst.SetOnTouch( lst_OnTouch );
    lay.AddChild( lst );

    app.AddLayout( lay );
}

function lst_OnTouch( title, body, type, index )
{
    app.ShowPopup( "Touched Item = " + title );
}

Copy Copy All Run

You can also create lists items that look like buttons by using one of the following options: “AlumButton”, “GreenButton”, “OrangeButton”.

Example - Orange Buttons click to expand contents

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

    var data = "Button 1,Button 2,Button 3,Button 4";
    lst = app.CreateList( data, 0.8, 0.8, "OrangeButton" );
    lst.SetBackColor( "#ffffff" );
    lst.SetPadding( 0.1, 0.1, 0.1, 0.1 );
    lst.SetOnTouch( lst_OnTouch );
    lay.AddChild( lst );

    app.AddLayout( lay );
}

function lst_OnTouch( title, body, type, index )
{
    app.ShowPopup( "Touched Item = " + title );
}

Copy Copy All Run

Or create lists with Gradient backgrounds like this: