User Tools

Site Tools


built_in:lists

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Next revision
Previous revision
Next revision Both sides next revision
built_in:lists [2014/09/17 18:55]
stevegarman created
built_in:lists [2015/04/18 11:15]
octazid [Example - HTML Font Color]
Line 1: Line 1:
 ====== Lists ====== ====== Lists ======
-===== Create ===== + 
-Create List objects using the CreateList method of the app object:+//(Information and examples taken from the DroidScript documentation)// 
 + 
 +===== Description ===== 
 +Create List objects using the **CreateList** method of the **[[built_in:app|app]]** object:
 <code>lst = app.CreateList( list, width, height, options );</code> <code>lst = app.CreateList( list, width, height, options );</code>
-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.+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==== 
 +<code javascript> 
 +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" ); 
 +
 +</code> 
 + 
 +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==== 
 +<code javascript> 
 +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 ); 
 +
 +</code> 
 + 
 +The List object also supports **multi-line** list items and can show certain types of **icon**. 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 up to three lines of text using the following formats: 
 + 
 +  * title : icon 
 +  * title : body : icon 
 +  * title : body : extra : icon 
 + 
 +The available icons types are displayed using the following key words: 
 + 
 +  * "folder" 
 +  * "audiofolder" 
 +  * "photofolder" 
 +  * "videofolder" 
 +  * "audio" 
 +  * "photo" 
 +  * "video" 
 +  * "playlist"  
 + 
 +====Example - Title + Icon==== 
 +<code javascript> 
 +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 ); 
 +
 +</code> 
 + 
 +====Example - Title + Icon==== 
 +<code javascript> 
 +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 ); 
 +
 +</code> 
 + 
 +You can also create lists items that look like **buttons** by using one of the following options:  
 + 
 +  * "AlumButton" 
 +  * "GreenButton" 
 +  * "OrangeButton" 
 + 
 +====Example - Orange Buttons==== 
 +<code javascript> 
 +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 ); 
 +}  
 +</code> 
 + 
 +Or create lists with **Gradient** backgrounds like this: 
 + 
 +====Example - Gradient Background==== 
 +<code javascript> 
 +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 ); 
 +
 +</code> 
 + 
 + 
 +====Example - HTML Font Color==== 
 +<code javascript> 
 +function OnStart() 
 +
 +    //Create a layout with objects vertically centered. 
 +    lay = app.CreateLayout( "linear", "VCenter,FillXY" );     
 + 
 +    //Create a list and add it to layout. 
 +    var data = 
 +    "<font color='#ff0000'>Red</font>,"
 +    "<font color='#00ff00'>Green</font>,"
 +    "<font color='#0000ff'>Blue</font>" 
 +    lst = app.CreateList( data,-1,-1,"html" ); 
 +    lay.AddChild( lst ); 
 +     
 +    //Add layout to app.     
 +    app.AddLayout( lay ); 
 +
 +</code> 
 +---- 
 ===== Methods ===== ===== Methods =====
 +Some controls use the same methods.\\
 +For examples of the **[[same methods]]** look here.
 ^Method ^Description ^ ^Method ^Description ^
-|lst.GetHeight| | +|ListView.AddItem( title,body,image ) | | 
-|lst.GetList| | +|ListView.GetAbsHeight() | | 
-|lst.GetVisibility| | +|ListView.GetAbsWidth() | | 
-|lst.GetWidth| | +|ListView.GetHeight() | | 
-|lst.Release| | +|ListView.GetItemByIndex( index ) | | 
-|lst.ScrollToItem| | +|ListView.GetList( delimeter ) | string = list.GetList(","); \\ List.GetList() with no params returns object list| 
-|lst.SelectItem| | +|ListView.GetPosition() | | 
-|lst.SetBackColor| | +|ListView.GetTextSize( mode ) | | 
-|lst.SetBackGradient| | +|ListView.GetType() | | 
-|lst.SetBackGradientRadial| | +|ListView.GetVisibility() | | 
-|lst.SetBackground| | +|ListView.GetWidth() | | 
-|lst.SetHiTextColor1| | +|ListView.RemoveItem( title ) | | 
-|lst.SetHiTextColor2| | +|ListView.RemoveItemByIndex( index ) | | 
-|lst.SetList| | +|ListView.ScrollToItem( name,body ) | | 
-|lst.SetMargins| | +|ListView.ScrollToItemByIndex( index ) | | 
-|lst.SetOnLongTouch| | +|ListView.SelectItem( title,body,scrollTo ) | | 
-|lst.SetOnTouch| | +|ListView.SelectItemByIndex( index,scroll ) | index is a number, \\ scroll could be true or false | 
-|lst.SetPadding| | +|ListView.SetBackColor( colorCode ) | | 
-|lst.SetPosition| | +|ListView.SetBackGradient( color1,color2,color3,p4,p5,p6,p7 ) | | 
-|lst.SetSize| | +|ListView.SetBackGradientRadial( x,y,r,color1,color2,color3,p7 ) | | 
-|lst.SetTextColor| | +|ListView.SetBackground( imagefile,options ) | | 
-|lst.SetTextColor1| | +|ListView.SetDivider( height,color ) | | 
-|lst.SetTextColor2| | +|ListView.SetEllipsize( mode ) | | 
-|lst.SetTextMargins| | +|ListView.SetEllipsize1( mode ) | | 
-|lst.SetTextSize| | +|ListView.SetEllipsize2( mode ) | | 
-|lst.SetVisibility! !+|ListView.SetFontFile( file ) | | 
 +|ListView.SetHiTextColor1( colorCode ) | | 
 +|ListView.SetHiTextColor2( colorCode ) | | 
 +|ListView.SetItem( title,newTitle,newBody,newImage ) | | 
 +|ListView.SetItemByIndex( index,newTitle,newBody,newImage ) | | 
 +|ListView.SetList( list,delimeter ) | | 
 +|ListView.SetMargins( left,top,right,bottom ) | | 
 +|ListView.SetOnLongTouch( callback ) |sets the function called when list is long-touched 
 +|ListView.SetOnTouch( callback ) |sets the function called when list is touched 
 +|ListView.SetPadding( left,top,right,bottom ) | | 
 +|ListView.SetPosition( left,top,width,height ) | | 
 +|ListView.SetScale( x,y ) | | 
 +|ListView.SetSize( width,height ) | | 
 +|ListView.SetTextColor( colorCode ) | | 
 +|ListView.SetTextColor1( colorCode ) | | 
 +|ListView.SetTextColor2( colorCode ) | | 
 +|ListView.SetTextMargins( left,top,right,bottom ) | | 
 +|ListView.SetTextShadow( radius,dx,dy,color ) | | 
 +|ListView.SetTextShadow1( radius,dx,dy,color ) | | 
 +|ListView.SetTextShadow2( radius,dx,dy,color ) | | 
 +|ListView.SetTextSize( size,mode ) | | 
 +|ListView.SetVisibility( ShowHide ) | |  
 + 
 +===== Available Options ===== 
 + 
 +^ Option        ^ Description                                                 ^ 
 +| AlumButton    | Use this to display the list \\ as buttons                  | 
 +| FontAwesome   | Use this to display Icons \\ from this inbuilt font         | 
 +| GreenButton   | Use this to display the list \\ as buttons                  | 
 +| Html          | Use this option to display html formated code               | 
 +| OrangeButton  | Use this to display the list \\ as buttons                  | 
 +| WhiteGrad     | Use this to display the list \\ with a gradient background 
 + 
 +===== Sample callbacks ===== 
 + 
 +<code javascript> 
 +function lst_OnTouch( title, body, type, index )  
 +{  
 +  app.ShowPopup( "id: " + title + " nick: " + body );  
 +}  
 +</code> 
 + 
 +<code javascript> 
 +function lst_OnLongTouch( title, body, type, index )  
 +{  
 +  app.ShowPopup( "id: " + title + " nick: " + body );  
 +
 +</code> 
 + 
 +<code javascript> 
 +function lst_OnTouch( title, body, type, index ) 
 +
 +    //Shows the index of the touched item 
 +    app.ShowPopup(index)   
 +
 +</code> 
 + 
 +<code javascript> 
 +function lst_OnTouch( item ) 
 +
 +    //Shows the touched item 
 +    app.ShowPopup(item)   
 +
 +</code> 
 + 
 +---- 
built_in/lists.txt · Last modified: 2019/09/01 00:10 (external edit)