Back

Lists

Create List objects using the CreateList method of the app object:

 lst = app.CreateList( list, width, height, options );

Use the SetOnTouch and SetOnLongTouch methods of the List object to set the name of 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 every time an item is selected or long touched.

Example - Simple

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

    lst = app.CreateList( "Fred,Bill,Jim", 0.8, 0.4 );
    lst.SetOnTouch( lst_OnTouch );
    lst.SetOnLongTouch( lst_OnLongTouch );
    lay.AddChild( lst );

    app.AddLayout( lay );
}

function lst_OnTouch( title, body, type, index )
{
    app.ShowPopup( "Item = " + title + ", Index = " + index, "Short" );
}
function lst_OnLongTouch( title, body, type, index )
{
    app.ShowPopup( "Long Touch Item = " + title + ", Index = " + index, "Short" );
}
    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

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     

The List object also 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 : icon
title : body : icon

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:

"folder", "audiofolder", "photofolder", "videofolder", "audio", "photo", "video" and "playlist".

Example - Title + Icon

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

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 also create lists items that look like buttons by using one of the following options: "AlumButton", "GreenButton", "OrangeButton".

Example - Orange Buttons

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:-

Example - Gradient Background

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

    var data = "";
    for( var i=1; i<=30; i++)
    {
        if( i>1 ) data += ",";
        data += "Item "+i+":Details for item "+i+":null";
    }
    lst = app.CreateList( data, 1, 1, "WhiteGrad" );
    lst.SetTextColor1( "#ff555558");
    lst.SetTextColor2( "#ff555558" );
    lst.SetTextMargins( 0.04, 0, 0, 0 );
    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     

See 'CreateList for more informations and a complete function list