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” class=”listClass” 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> |
Step 3: In scene assistant:
| ListAssistant.prototype.setup = function() {
this.controller.setupWidget(“listId”, this.attributes = { itemTemplate: ‘List/myRowTemplate’, swipeToDelete: true, }, this.model = { listTitle: ‘Servers’, items : [ {data:”Value1″}, {data:”Value2″}, ] }); }; |
OutPut
Modifying myRowTemplate a little bit
| <div class=”palm-row” x-mojo-tap-highlight=”momentary”> <div style=”float:left”><img src=”images/RightArrow.png” /></div><div style=”float:left”>#{data}</div> </div> |
Output 2
