The HTML for creating the list page requires the following simple elements:

The onLoad function buildEmployeeList builds an ordered list that contains the data from the avgoEmpDir database.

To create the list page

1. Initialize the M-Business XML POD.

2. Open the avgoEmpDir database with the read flag set.

3. Check for error.

   Code for steps 1 – 3:

   dbMgr = CreateObject("avantgo.db"); dbSet = dbMgr.open("avgoEmpDir", "r"); if(!dbSet) { //return an error }

4. Find the span element using the built-in document object in JavaScript.

5. Create an ordered list <ol> element and make it a child of the span element.

   Code for steps 4 and 5:

   span = document.getElementById("listSpan"); list = document.createElement("ol"); span.appendChild(list);

6. Loop until the end of the data set is reached.

7. Create a list element and make it a child of the list

8. Create an anchor element.

9. Set the id of the anchor tag to the id of the record, since it is the primary key to retrieve database record. This passes the id into the onclick event.

10. Set the onclick event to the JavaScript function switchToDetail.

11. Create a string comprised of the first name, last name and phone number, then make the string a child of the anchor element.

12. Make the anchor element a child of the list element.

13. Move the data set pointer to the next record.

    Code for steps 6 – 13:

    while(!dbSet.ateof()) { var linktext; listelement = document.createElement("li"); list.appendChild(listelement); anchor = document.createElement("a"); anchor.id = dbSet.id; anchor.onclick = switchToDetail;

    var description = dbSet.firstname + " " + dbSet.lastname + " " + dbSet.phonenumber linktext = document.createTextNode(description);

    anchor.appendChild(linktext); listelement.appendChild(anchor); dbSet.moveNext(); }

The switchToDetail function shown above, creates a list where each list element is comprised of the data from a row in the avgoEmpDir data set. The row data is represented as a link. When clicked, each link calls the switchToDetail JavaScript function, to be discussed in more detail later. First, however, it is important to understand how information is passed from one page to another in offline mobile applications.

The switchToDetail function

function switchToDetail() {
    // the id of the anchor has the record id 
    PropertiesDBSetValue("sessiondb", "currentid", this.id); 

    // send the broswer to the detail page 
    window.location = "/EmpDir/update_employee.html"; 
}

You can use the M-Business XML POD to save the state between pages. In the Employee Directory example, you can save the key/value pair that tells the detail page which employee information to display. The switchToDetail function shown in the figure above, shows an example of saving the value of the anchor's ID (which was set to the record id of the employee) in an on-device database called sessiondb and associating it with the key currentid. After determining which employee's information you want to display, you call window.location to switch M-Business Client to that detail page.

The code for the PropertiesDBSetValue is included with the code for this example.