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

Load XML in webOS

Read XML in webOS

Refer Palm App :Basic App for Creating a basic App

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

Test.XML

<l>
<citem>
<id>1</id>
<userId>rrrtttt1111117779999999999999</userId>
<pwd>adsdasdasd</pwd>
</citem>
<citem>
<id>2</id>
<userId>111111aaa</userId>
<pwd>adsdasdasd</pwd>
</citem>
<citem>
<id>3</id>
<userId>333333333</userId>
<pwd>adsdasdasd</pwd>
</citem>
<citem>
<id>4</id>
<userId>33333333311111111</userId>
<pwd>adsdasdasd</pwd>
</citem>
<citem>
<id>5</id>
<userId>Laaaaa222222</userId>
<pwd>adsdasdasd</pwd>
</citem>
<citem>
<id>6</id>
<userId>11111111qqqqq333333333</userId>
<pwd>adsdasdasd</pwd>
</citem>
<citem>
<id>7</id>
<userId>456</userId>
<pwd/>
</citem>
<citem>
<id>8</id>
<userId>tyrrr</userId>
<pwd></pwd>
</citem>
</l>

Step 2: In Scene1-scene.html , Include another <div> tag to load the XML data

<div id=”XMLData”></div>

Entire Code of Scene1-scene.html will look like below

<div id=”main” class=”palm-hasheader”>

<div class=”palm-header”>Header</div>

<div id=”count” class=”palm-body-text”>Hello World</div>

<div id=”XMLData”></div>

</div>

Step 3: Scene1-scene.html corresponding javascript file is
Scene1.assistant.js. Whatever javascript related to this scene can go in to this
javascript

Each javascript file has four events (Setup / Activate /cleanUp /deactivate)
related to the scene

1. Scene1-assistant.js

2. Edit the setup function to contain the following:

Scene1Assistant.prototype.setup = function() {

xmlhttp=new XMLHttpRequest();

xmlhttp.onreadystatechange=handler

xmlhttp.open(“GET”,”Data/test.xml”);

xmlhttp.send();

};

3. Add the following funtion

function handler()
{
if(this.readyState == 4 && (this.status == 200 || this.status == 304))
{
if(this.responseXML != null)
{
xmlDoc=this.responseXML
document.getElementById(“XMLData”).innerText=this.responseText  //It loads the XML content and writes into the DIV tag with ID XMLData}
}
}

Output

Palm App : Basic App

Multi Level Dropdowns in NewForm

Step 1: In Eclipse, New -> Project -> Select Basic Application

Step 2: Provide the Project /App Name [Id for the app name wil be
com.<vendorname>.<appname>]
for the below application [com.mycompany.firstapp] is the ID. Version no: 1.0.0


Folder Contents

app folder—Contains the assistants, models, and views that make
up the application. Later in the tutorial, you add files to this
directory.
images folder—Any other images the application uses.
stylesheets folder—Contains the cascading style sheet file for
the application.
appinfo.json—The Application Information file.
icon.png—The image that the application presents in the Launcher
on the emulator or device.
index.html—The main stage on which the application’s scenes
appear.
sources.json—A list of the source files for each scene.

Application Information

{
  "id": "com.mycompany.firstapp",
  "version": "1.0.0",
  "vendor": "My Company",
  "type": "web",
  "main": "index.html",
  "title": "First App",
  "icon": "icon.png"
}

Step 3: Creating a scene for app
A scene is a formatted screen for presenting information or a task to the user.
Each scene has a view and an assistant. The view determines the layout and
appearance of the scene. The assistant determines the behavior(Like Event
Listener for any buttons or Checkboxes].


/app/assistants/Scene1-assistant.js —This is the assistant.
/app/views/first/Scene1-scene.html —This is the view.
sources.json —This file now includes JSON information that binds
Scene1-assistant.js to the Scene1 scene.

Step 4: Open palm web OS Emulator before debugging any app.

Step 5: Open Scene1-scene.html and replace the content with the following

<div id="main" class="palm-hasheader">
<div class="palm-header">Header</div>
<div id="count" class="palm-body-text">Hello World</div>
</div>

Step6 : Debug as Mojo Application – It detects the emulator
automatically and opens the debugged version of App.


Now you can see the Blank app though the codes have put in to show hello world.

Step7: To Show the scene, you must tell the stage to push the "scene1".
So need to add a code to push scene1 to the stage. Stage-assistant.js is the
file manages the entire stage of app.

1. Open stage-assistant.js.
2. Edit the StageAssistant.prototype.setup call to look like below:

Step8: Debug the App again.