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 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" );
}
  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( item )
{
  app.ShowPopup( "Touched Item = " + item );
}
  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( item )
{
  app.ShowPopup( "Touched Item = " + item );
}
  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( item )
{
  app.ShowPopup( "Touched Item = " + item );
}
  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( item )
{
  app.ShowPopup( "Touched Item = " + item );
}
  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( item )
{
  app.ShowPopup( "Touched Item = " + item );
}
  Copy   Copy All    Run   

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 )