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
