List Viewer examples

The following sample code contains examples of how to use the APIs documented in this section.

<html> 
<head> 
<meta name='handheldfriendly' content='true'> 
<title>account</title>

<script>

var dbmgr; 
var accountDb; 
var extendedAccountDb; 
var accountSortOrderArray = new Array(6); 
var accountCols = new Array(6);

function initPage() 
{ 
    var list;

    // Open database
    if (undefined == dbmgr) { 
        dbmgr = CreateObject('avantgo.db'); 
    }

    if (null == dbmgr) { 
        alert('error: unable to create avantgo.db'); 
        return; 
    }

    accountDb = dbmgr.open("AvGoAccount", "r"); 
    if (null == accountDb) { 
        alert("failed to open db"); 
        return; 
    }

    // Create extended dbset for accountDb

    extendedAccountDb = CreateObject("ExtendedDBSet"); 
    if (null == extendedAccountDb) { 
        alert('error: unable to create ExtendedDBSet'); 
        return; 
    } 
    extendedAccountDb.setDBSet(accountDb);

    // Set attributes, and create event handler for accountTable

    list = document.getElementById("accountTable"); 
    list.setDbSet(extendedAccountDb);

    list.onclick = onClickHandler;

    // Initialize vars

    accountCols[0] = "name"; 
    accountCols[1] = "revenue"; 
    accountCols[2] = "boolean"; 
    accountCols[3] = "created"; 
    accountCols[4] = "int16"; 
    accountCols[5] = "uint16";

    accountSortOrderArray[0] = 0; 
    accountSortOrderArray[1] = 0; 
    accountSortOrderArray[2] = 0; 
    accountSortOrderArray[3] = 0; 
    accountSortOrderArray[4] = 0; 
    accountSortOrderArray[5] = 0;

    // Set attributes

    list.setColumnCount(6);

    list.setColumnTitle(0, "Account Name"); 
    list.setColumnWidth(0, 40); 
    list.setColumnDSName(0, "name");

    list.setColumnTitle(1, "Revenue"); 
    list.setColumnWidth(1, 70); 
    list.setColumnDSName(1, "revenue"); 
    list.setColumnFormat(1, "$#,###");
    list.setColumnAlignment(1, 1);  // align_right

list.setColumnTitle(2, "Flag");
    list.setColumnWidth(2, 40); 
    list.setColumnDSName(2, "boolean"); 
    list.setColumnAlignment(2, 2);  // align_center

    list.setColumnTitle(3, "Created"); 
    list.setColumnWidth(3, 100); 
    list.setColumnDSName(3, "created"); 
    list.setColumnFormat(3, "%c");

    list.setColumnTitle(4, "Int16"); 
    list.setColumnWidth(4, 60); 
    list.setColumnDSName(4, "int16");

    list.setColumnTitle(5, "UInt16"); 
    list.setColumnWidth(5, 60); 
    list.setColumnDSName(5, "uint16"); 
}

function exitPage() 
{ 
    extendedAccountDb.close(); 
}

function onClickHandler(e) 
{ 
    var list; 
    var component; 
    var I; 
    var n; 
    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) {

        n = list.getSelectionDbSetIndex(); 
        extendedAccountDb.moveTo(n); 
        data = extendedAccountDb.getStringField("name");

        alert("row selected - " + data);

        // Don't call default handler after this since we are done. 
        return false; 
    }
    else if (3 == component) {

        var hasSelection = false; 
        var selectionDbIndex = -1; 
        var selectionId = null;

        // save current selection 
        n = list.getSelectionIndex(); 
        if (-1 != n) { 
            hasSelection = true; 
            selectionDbIndex = list.getSelectionDbSetIndex(); 
            extendedAccountDb.moveTo(selectionDbIndex); 
            selectionId = extendedAccountDb.getStringField("name"); 
        }

        // 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 < 6; 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 
        extendedAccountDb.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 = "name = " + selectionId; 
            var search = extendedAccountDb.createSearch(filter); 
            extendedAccountDb.moveTo(0); 
            if (extendedAccountDb.find(search)) { 
                var index = extendedAccountDb.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 = extendedAccountDb.setFilter(null); 
    } 
    else { 
        // Set filter for the db set 
        filter = "lastName ~ " + filterInput.value; 
        extendedAccountDb.moveTo(0); 
        search = extendedAccountDb.createSearch(filter); 
        extendedAccountDb.setFilter(search); 
    }

    // Refresh mimelist to use the modified dbset 
    list.refreshDbSet();
    // Force a redraw of the mimelist 
    list.refreshScreen(); 
}

</script> 
</head>

<body onload="initPage()" onUnload="exitPage()">


<form> 
<table width="350" 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="" 
            size="8">

        <input type="button" value="Set Filter" onclick="setFilter()"> 
    </td> 
</tr> 
</table> 
</form>

<form>

<object id="accountTable" type="application/avantgo-mime-list" 
    width="250" height="100" 
    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="5"></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>

</body> 
</html>

Send feedback about this page using email.