<html> <head> <TITLE>Customer Listview</TITLE> <META name="HandheldFriendly" CONTENT="true"> <META HTTP-EQUIV="content-type" CONTENT="text/html; charset=UTF-8"> <!-- 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. Extended by Doug Lowder to add key press handler and enable Smartphone usage, 2006 Copyright, 2004, 2005, 2006. iAnywhere Solutions. --> |
<script> var dbmgr; var accountDb; var accountSortOrderArray = new Array(3); var accountCols = new Array(3); |
function initPage()
{
var list;
var dbname = "Customers";
// Initialize vars
accountCols[0] = "ContactName";
accountCols[1] = "CompanyName";
accountCols[2] = "PostalCode";
accountSortOrderArray[0] = 0;
accountSortOrderArray[1] = 0;
accountSortOrderArray[2] = 0; |
// Set attributes, and create event handler for accountTable
list = document.getElementById("accountTable");
list.onclick = onClickHandler;
// Here we register the key press handler that allows Smartphone to work
list.onkeypress = onKeyPressHandler; |
// 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"); |
// 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 false;
} |
// Save dbname as session info in AvantGo preferences object.
avantgo.preferences.setStringValueForKey("ListPage_dbname", dbname)
list.setDbSet(accountDb);
} |
function exitPage()
{
if(accountDb) accountDb.close();
}
// This key press handler allows the user to use arrow keys to navigate into
// and out of the mimelist.
// Up and down arrow keys and the numbers 2 and 8 on the keypad scroll up and
// down the list.
// Numbers 3 and 9 on the keypad page up and down the mimelist.
// Pressing 5, or the center button of the Dpad, selects the highlighted row
// and opens the CustomerDetail.html page.
// Pressing 0 sorts the mimelist; pressing 0 repeated cycles through ascending
// and descending sorts on different columns. |
function onKeyPressHandler(e)
{
var list;
var component;
var i;
var index;
var data;
var colId;
var j; |
// alert("e.keyVal = " + e.keyVal);
list = document.getElementById("accountTable"); |
if (50 == e.keyVal || 101 == e.keyVal || 69 == e.keyVal) { // scroll up when key pressed is 2, up arrow, or 'E'
index = list.getSelectionDbSetIndex();
if(index == 1) // we are at the top of the list, so return true and allow us to navigate out of the mimelist
return true;
list.scrollUp();
// Dont call default handler after this since we are done.
return false;
} |
else if (56 == e.keyVal || 120 == e.keyVal || 88 == e.keyVal ) { // scroll down when key pressed is 8, down arrow, or 'X'
index = list.getSelectionDbSetIndex();
if(index == accountDb.nrows) // we are at the bottom of the list, so return true and allow us to navigate out of the mimelist
return true;
list.scrollDown();
// Dont call default handler after this since we are done.
return false;
} |
else if (51 == e.keyVal || 114 == e.keyVal || 82 == e.keyVal) { // page up when '3' or 'R' is pressed
list.pageUp();
// Dont call default handler after this since we are done.
return false;
}
else if (57 == e.keyVal || 99 == e.keyVal || 67 == e.keyVal) { // page down when '9' or 'C' is pressed
list.pageDown();
// Dont call default handler after this since we are done.
return false;
} |
else if (53 == e.keyVal || 13 == e.keyVal || 68 == e.keyVal) { // hit '5' or return or 'D', we selected a row, go to Customer detail page
index = list.getSelectionDbSetIndex();
if(index < 1 || index > accountDb.nrows) {
index = 1;
}
|
accountDb.moveTo(index);
data = accountDb.getStringField("ContactName");
// You can optionally display the selected ContactName
// alert("row selected - " + data);
gotoDetailPage("Customers", accountDb.CustomerID, "CustomerDetail.html");
// Dont call default handler after this since we are done.
return false;
} |
else if (48 == e.keyVal) { // hit '0', rotate through possible column sorts
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");
} |
// SORT_NONE = 0,
// SORT_ASCENDING = 1,
// SORT_DESCENDING = 2, |
for (i=0; i<3; i++) {
if (1 == accountSortOrderArray[i]) {
accountSortOrderArray[i] = 2;
colId = i;
i=3;
} |
else if (2 == accountSortOrderArray[i]) {
j = i + 1;
if(j==3) j=0;
accountSortOrderArray[i] = 0;
accountSortOrderArray[j] = 1;
colId = j;
i=3;
}
} |
if ( (accountSortOrderArray[0] == 0)
&& (accountSortOrderArray[1] == 0)
&& (accountSortOrderArray[2] == 0) ) {
accountSortOrderArray[0] = 1;
}
|
// alert("sortorderarray = " + accountSortOrderArray[0] + " " +
// accountSortOrderArray[1] + " " + accountSortOrderArray[2] );
// 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 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="" size="8">
<input type="button" value="Search" onclick="setFilter()">
</td>
</tr>
</table>
</form>
<form>
|
<object id="accountTable" type="application/avantgo-mime-list"
width="220" height="180" style="vertical-align:baseline;padding-left:3px;
border-color:black;border-width:1;background-color:white;color:black;
font-size:9px;font-family:verdana;" onKeyPress="onKeyPressHandler()"> |
<param name="numRows" value="6"></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> <!-- Link to XMLDB PODS --> <!-- For PalmOS devices, use href="PODS/AG_DEVICEOS/dbpod_qual.prc" instead --> <a href="PODS/AG_DEVICEOS/dbpod_quad.dll"></a> <a href="PODS/AG_DEVICEOS/mimelist.dll"></a> <a href="PODS/AG_DEVICEOS/dbpod_quad.prc"></a> <a href="PODS/AG_DEVICEOS/mimelist.prc"></a> </body> </html> |
| Send feedback about this page using email. | Copyright © 2008, iAnywhere Solutions, Inc. |