Dynamic List in webOS

Refer Palm App :Basic App for Creating a basic App

The list is the most common component. In Webos, list objects are rendered into
the provided HTML templates.

Two HTML templates are necessary to render the list objects. listTemplate and
itemTemplate

List has many attributes to define among which

1. listTemplate – declaration to refer listTemplate

2. itemTemplate – declaration to refer itemTemplate

3. emptyTemplate – declaration to refer is values are empty

Step1 : Create a basic scene “List”

List-Scene.html

List Declaration

<div x-mojo-element=”List” id=”listId” name=”listName”></div>

Step 2: Defining the List itemTemplate, create a new HTML file in the same folder
of List named “myRowTemplate”. This template name to be referenced in “itemTemplate”
attribute property.

myRowTemplate.html

<div class=”palm-row” x-mojo-tap-highlight=”momentary”>
//x-mojo-tab-highlight to highlight the list item when the user taps,
palm-row is an inbuilt class.#{data} // is the Object Name from the declaration</div>


Create a folder named “Data” and paste test.xml

Test.XML

<l>
  <citem>
    <id>1</id>
    <userId>UserID1</userId>
    <pwd>adsdasdasd</pwd>
  </citem>
  <citem>
    <id>2</id>
    <userId>UserID2</userId>
    <pwd>adsdasdasd</pwd>
  </citem>
  <citem>
    <id>3</id>
    <userId>UserID3</userId>
    <pwd>adsdasdasd</pwd>
  </citem>
  <citem>
    <id>4</id>
    <userId>UserID4</userId>
    <pwd>adsdasdasd</pwd>
  </citem>
  <citem>
    <id>6</id>
    <userId>UserID5</userId>
    <pwd>adsdasdasd</pwd>
  </citem>
  <citem>
    <id>7</id>
    <userId>UserID6</userId>
    <pwd/>
  </citem>
  <citem>
    <id>8</id>
    <userId>UserID7</userId>
    <pwd></pwd>
  </citem>
</l>

List Widget Declaration
There are two ways to set the List Widget Properties, here i am not assigning any data items to list as we are going to populate dynamically from XML file.

one Way

ListAssistant.prototype.setup = function() {

this.controller.setupWidget(“listId”,

this.attributes = {

itemTemplate: ‘List/myRowTemplate’,

swipeToDelete: true,

});

};

 

Alternate Way

ListAssistant.prototype.setup = function() {

var attributes = {
             itemTemplate: 'List/myRowTemplate',
             swipeToDelete: true,
         }
this.controller.setupWidget('listId', attributes);
};

 

Final code will look like below with loading XML.
Step 3: In scene assistant

 

ListAssistant.prototype.setup = function() {
xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=handler
xmlhttp.open("GET","Data/test.xml");
xmlhttp.send();

var attributes = {
             itemTemplate: 'List/myRowTemplate',
             swipeToDelete: true,
         }
this.controller.setupWidget('listId', attributes);
};

 

Step 4: Add below function

function handler()
{	
	if(this.readyState == 4 && (this.status == 200 || this.status == 304))
    {
		  if(this.responseXML != null)
		  {
		  xmlDoc=this.responseXML.getElementsByTagName("userId")
		  var Ar1=[]
		  for(i=0;i<xmlDoc.length;i++)
		  {
		  Ar1.push({data: xmlDoc[i].firstChild.nodeValue})
		  }
		  $("listId").mojo.noticeUpdatedItems(0, Ar1); 
		  }
	} 
	else if(this.readyState == 4)
	{
	alert("Error Reading List")
	}
};


listWidget.mojo.noticeUpdatedItems(offset, items)
, where:

Argument Type Description
offset Integer Index in the list of the first object in ‘items’; usually the same as ‘offset’ passed to the itemsCallback
items Array An array of the list item model objects that have been loaded for the list

Notes

$("listId").mojo.noticeUpdatedItems(0, Ar1);  //$ is quite equivalent 
to document.getElementById in Ajax way. noticeUpdatedItems is the property of 
list to populate list with an array.


OutPut

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.