CustomersList.html 

<html> 
<head> 
<TITLE>Customer Listview</TITLE> 
<META name="HandheldFriendly" content="True">
 
<!-- 
Demonstration of data driven master-detail page 
development with M-Business Client.
 
Originally authored by John Karabaic and extended by 
Yadong Liu of iAnywhere Solutions.
 
Copyright, 2007. iAnywhere Solutions. 
-->
 
<script>
 
var dbmgr; 
var accountDb; 
var accountSortOrderArray = new Array(3); 
var accountCols = new Array(3);
 
function initPage() 
{
 
    var list; 
    var dbname = "Customers";
 
    // Open database
 
    if (undefined == dbmgr) { 
        dbmgr = CreateObject('avantgo.db'); 
    }
 
    if (null == dbmgr) { 
        alert('Error: unable to create avantgo.db'); 
        return false; 
    }
 
    accountDb = dbmgr.open(dbname, "r");
 
    if (null == accountDb) { 
        alert("failed to open db"); 
        return; 
    }
 
    // Save dbname as session info in avantgo preferences object.
 
    avantgo.preferences.setStringValueForKey("ListPage_dbname", dbname)
 
    // Set attributes, and create event handler for accountTable
 
    list = document.getElementById("accountTable"); 
    list.setDbSet(accountDb);
    list.onclick = onClickHandler;
 
    // Initialize vars
 
    accountCols[0] = "ContactName"; 
    accountCols[1] = "CompanyName"; 
    accountCols[2] = "PostalCode";
 
    accountSortOrderArray[0] = 0; 
    accountSortOrderArray[1] = 0; 
    accountSortOrderArray[2] = 0;
 
    // Set attributes
 
    list.setColumnCount(3);
 
    list.setColumnTitle(0, "Customer"); 
    list.setColumnWidth(0, 60); 
    list.setColumnDSName(0, "ContactName"); 
    list.setColumnHeaderImage(0, 1);
 
    list.setColumnTitle(1, "Company"); 
    list.setColumnWidth(1, 60); 
    list.setColumnDSName(1, "CompanyName"); 
    list.setColumnHeaderImage(1, 1);
 
    list.setColumnTitle(2, "Postal Code"); 
    list.setColumnWidth(2, 40); 
    list.setColumnDSName(2, "PostalCode");
 
}
 
function exitPage() 
{ 
    if(accountDb) accountDb.close(); 
}
 
function onClickHandler(e) 
{
 
    var list; 
    var component; 
    var i; 
    var index; 
    var data; 
    var colId;
 
    list = document.getElementById("accountTable");
 
    // Figure out where the click happened 
    // Passing (x, y) in document coordinate system
 
    component = list.getComponent(e.clientX, e.clientY)
 
    // Possible component values: 
    //  TARGET_NONE = 0, 
    //  TARGET_PREV_PAGE_BTN = 1, 
    //  TARGET_NEXT_PAGE_BTN = 2, 
    //  TARGET_HEADER = 3, 
    //  TARGET_ITEM = 4, 
    //  TARGET_SCROLL_UP_BTN = 5, 
    //  TARGET_SCROLL_DOWN_BTN = 6, 
    //  TARGET_SCROLLBAR_BUBBLE = 7,
 
    if (4 == component) { 
        index = list.getSelectionDbSetIndex();
 
        //check if the user hits just the pixel between 
        //rows which gives me a hit results, but no selected row.
 
        if(index < 1 || index > accountDb.nrows) { 
            return true; 
        }
 
        accountDb.moveTo(index);
        data = accountDb.getStringField("ContactName");
 
        // You can optionally display the selected ContactName 
        // alert("row selected - " + data);
 
        // Don't call default handler after this since we are done.
 
        gotoDetailPage("Customers", accountDb.CustomerID, 
            "CustomerDetail.html"); 
        return false;
 
    } 
    else if (3 == component) {
        var hasSelection = false; 
        var selectionDbIndex = -1; 
        var selectionId = null;
 
        // save current selection
 
        index = list.getSelectionIndex(); 
        if (-1 != index) { 
            hasSelection = true; 
            selectionDbIndex = list.getSelectionDbSetIndex(); 
            accountDb.moveTo(selectionDbIndex); 
            selectionId = accountDb.getStringField("ContactName"); 
        }
 
    // Figure out which column the user clicked on
 
    colId = list.getColumnId(e.clientX, e.clientY);
 
    //  SORT_NONE = 0, 
    //  SORT_ASCENDING = 1, 
    //  SORT_DESCENDING = 2,
 
    for (i = 0; i < 3; i++) {
 
        if (colId == i) {
            if (1 == accountSortOrderArray[i]) {
                accountSortOrderArray[i] = 2;
            }
 
            else {
                accountSortOrderArray[i] = 1;
            }
        }
 
        else {
            accountSortOrderArray[i] = 0;
        }
    }
 
    // Set sort order for the db set
 
    accountDb.setSort(accountCols[colId], accountSortOrderArray[colId] == 1);
 
    // Set sort order for the column
 
    list.setColumnSortOrder(colId, accountSortOrderArray[colId] == 1);
 
    // Refresh mimelist to use the modified dbset
 
    list.refreshDbSet();
 
    // Set mimelist selection
 
    if (hasSelection) { 
        var filter = "ContactName = " + selectionId; 
        var search = accountDb.createSearch(filter); 
        accountDb.moveFirst();
 
        if (accountDb.find(search)) { 
            var index = accountDb.index; 
            list.setSelectionDbSetIndex(index); 
        }
    }
 
    // Force a redraw of the mimelist
 
    list.refreshScreen();
 
    // Don't call default handler after this since we are done.
 
    return false;
 
    } 
    else { 
        // Call default handler since we haven't handled this event 
        return true; 
    }
 
}
 
function setFilter() 
{
 
    var list; 
    var filterInput; 
    var filter; 
    var search;
 
    list = document.getElementById("accountTable"); 
    filterInput = document.getElementById("filterInput");
 
    if ((null == filterInput.value) || 
            (0 == filterInput.value.length)) { 
        search = accountDb.setFilter(null); 
    } 
    else {
 
        // Set filter for the db set 
        filter = "ContactName ~ " + filterInput.value; 
        accountDb.moveTo(0); 
        search = accountDb.createSearch(filter); 
        accountDb.setFilter(search); 
    }
 
    // Refresh mimelist to use the modified dbset 
    list.refreshDbSet();
 
    // Force a redraw of the mimelist 
    list.refreshScreen();
 
}
 
function gotoDetailPage(dbname, id, pageurl) 
{ 
    avantgo.preferences.setStringValueForKey(
        "detailPage_"+dbname+"Id", id); 
    window.location = pageurl; 
}
 
</script> 
</head>
 
<body onload="initPage()" onUnload="exitPage()">
 
<form> 
<table width="220" cellspacing="0" cellpadding="0" border="0">
 
<tr> 
    <td align="right"> 
        <input style="background-color:#ffffcc;font-family:verdana;
            font-size:9px;padding-top:2px;padding-bottom:1px;" 
            type="text" name="filter" id="filterInput" value="" 
        <input type="button" value="Search" onclick="setFilter()"> 
    </td> 
</tr>
 
</table> 
</form>
 
<form>
 
<object id="accountTable" type="application/avantgo-mime-list" 
    width="220" height="240" style="vertical-align:baseline;
    padding-left:3px;border-color:black;border-width:1;
    background-color:white;color:black;font-size:9px;
    font-family:verdana;">
 
    <param name="numRows" value="10"></param> 
    <param name="rowMargin" value="2"></param> 
    <param name="colMargin" value="4"></param> 
    <param name="headerBgColor" value="#66cc99"></param> 
    <param name="headerBdColor" value="#000000"></param>
 
    <param name="cellBgColor" value="#f9f9f9"></param> 
    <param name="cellBdColor" value="#cecece"></param> 
    <param name="cellSelectBgColor" value="#cecece"></param> 
    <param name="cellSelectBdColor" value="#f9f9f9"></param>
 
    <param name="scrollbarBdColor" value="#000000"></param> 
    <param name="scrollbarBgColor" value="#666666"></param> 
    <param name="scrollbarButtonColor" value="#66cc99"></param> 
    <param name="scrollbarArrowColor" value="#000000"></param> 
    <param name="scrollbarBubbleColor" value="#66cc99"></param>
 
</object>
 
</form> 
    <a href="CustomerDetail.html"></a> 
    <a href="PODS/AG_DEVICEOS/pods.htm"></a>
 
</body> 
</html>
Copyright © 2008, iAnywhere Solutions, Inc.