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 is passed into your OnTouch callback function as a parameter 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( item )
{
app.ShowPopup( "Item = " + item, "Short" );
}
function lst_OnLongTouch( item )
{
app.ShowPopup( "Long Touch = " + item, "Short" );
}
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( item )
{
app.ShowPopup( "Touched Item = " + item );
}
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( item )
{
app.ShowPopup( "Touched Item = " + item );
}
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( item )
{
app.ShowPopup( "Touched Item = " + item );
}
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( item )
{
app.ShowPopup( "Touched Item = " + item );
}
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( item )
{
app.ShowPopup( "Touched Item = " + item );
}
The following methods are avaiable on the List object:
SetVisibility( visibility )
GetVisibility()
SetPadding( left, top, right, bottom )
SetMargins( left, top, right, bottom )
SetBackground( imageFile, options )
SetBackColor( colorCode )
SetBackGradient( color1, color2, color3 )
SetBackGradientRadial( x, y, r, color1, color2, color3 )
SetPosition( left, top, width, height )
SetSize( width, height )
GetWidth()
GetHeight()
SetList( list, delimeter )
GetList()
SetItem( title, newTitle, newBody, newImage )
AddItem( title, body, image )
RemoveItem( title )
SelectItem( name, body, scrollTo )
ScrollToItem( name, body )
SetOnTouch( callback )
SetOnLongTouch( callback )
SetTextSize( size )
SetTextColor( colorCode )
SetTextColor1( colorCode )
SetTextColor2( colorCode )
SetHiTextColor1( colorCode )
SetHiTextColor2( colorCode )
SetTextMargins( left, top, right, bottom )