Newbie to ActiveWidgets

Hello All,

I just want to say that, this is the most amazing library that I have ever worked with. I belive it will changes the future of the web pages.

I must say, on a scale of 1-10, I have 4-html, 2-java script, -1 - CSS. So you can imagine the kind of pain I went through (without a good documentation) to understand how to use some of the components, and how every thing work. I've been so far experiementing with the free version of the library. However, I got my manager approval to purchase the library, so I will be purchasing a developer license tomorrow.

After some hard work, I managed to put together a demo to show to a customer. However, before I do that, I'd like to get some input/suggesions from the experts here. I also have couple of questions that I am hoping to get some answers.

1) I am using AW.XML.Table to populate the data in the grid, and to refresh this data, I am using XMLHTTPRequest to fetch the XML document and repopulate the table. This works very well, however I have a feeling that a combination of table.setURL(), and table.request() pretty much do the same thing. Am I correct in that assumption? If so, which way is better, using XMLHTTPRequest or table?

2) Does the AW.XML.Table.setTimeout(method, timeout) works same as javascript timeout?

3) Finally, the biggest question that I have is, would the html/javascript that I wrote works as it is on IE once I purchase the developer license? or Do I need to make any changes? I've been so far testing on firefox, and works like a charm.

Following is my html code. I'm sure that html that I have is probably not the most efficient code, so please feel free to make any suggessions on improving the code.

One final note, is there a tentative deadline on the documentation for the ActiveWidgets 2.0?
<html>
<head>
<link href="./runtime/styles/xp/aw.css" rel="stylesheet"></link>
<script src="./runtime/lib/aw.js"></script>
<style>
.aw-system-control {position: absolute}

#label {left: 6px; top: 6px; width: 30px; height: 10px;}
#tabs {left: 12px; top: 20px; width: 800px; height: 22px;}
#frame {left: 12px; top: 32px; width: 900px; height: 630px; border: 1px solid #999; background: #f9f8f4; position: absolute;}

#group1 {left: 20px; top: 45px; width: 880px; height: 330px;}
#grid1 {left: 25px; top: 60px; width: 870px; height: 310px;}
#group2 {left: 20px; top: 380px; width: 880px; height: 280px;}
#grid2 {left: 25px; top: 395px; width: 870px; height: 260px;}

.aw-column-0 {text-align: left;}
.aw-column-1 {text-align: left;}
.aw-column-2 {text-align: left;}
.aw-column-3 {text-align: left;}
.aw-column-4 {text-align: left;}
.aw-column-5 {text-align: left;}
.aw-column-6 {text-align: left;}

.aw-grid-cell {border-right: 1px solid threedshadow;}
.aw-grid-row {border-bottom: 1px solid threedlightshadow;}
</style>
</head>
<body>

<script>

var holdurl = "../cgi-bin/vxml/inbound_hold/DisplayHoldQueueXML.cgi?";
var opurl = "../cgi-bin/vxml/inbound_hold/DisplayOperatorQueueXML.cgi?";
var operator_phone = "1234567890";

var label = new AW.UI.Label;
label.setId("label");
label.setControlText("Queues");
label.setControlImage("favorites");
document.write(label);

var tabs = new AW.UI.Tabs;
tabs.setId("tabs");
tabs.setItemText(["4082307171", "9402397348"]);
tabs.setItemCount(2);
tabs.setSelectedItems([0]);
document.write(tabs);

var frame = new AW.HTML.DIV;
frame.setId("frame");
document.write(frame);

var container = new AW.HTML.SPAN;
document.write(container);

//--

var group1 = new AW.UI.Group;
group1.setId("group1");
group1.setControlText("Hold Queue");

var table1 = new AW.XML.Table;
table1.setURL(holdurl + 'operator_phone=' + operator_phone);
table1.request();

var columns1 = ["TXNID", "ACCOUNT", "FIRST", "LAST", "BALANCE","REASON","HOLD TIME [hh:mm:ss]"];

var grid1 = new AW.UI.Grid;
grid1.setId("grid1");
grid1.setHeaderText(columns1);

grid1.setColumnCount(7);
grid1.setColumnWidth(70,0);
grid1.setColumnWidth(80,1);
grid1.setColumnWidth(110,2);
grid1.setColumnWidth(110,3);
grid1.setColumnWidth(60,4);
grid1.setColumnWidth(160,5);
grid1.setColumnWidth(120,6);

grid1.setSelectorVisible(true);
grid1.setSelectorText(function(i){return this.getRowPosition(i)+1});
grid1.setSelectorWidth(15);
grid1.setSelectionMode("single-row");

var str = new AW.Formats.String;
var num = new AW.Formats.Number;
grid1.setCellFormat([num, num, str, str, num, str, str]);
grid1.onHeaderClicked = function(event,index){return 'disabled'};
grid1.setCellModel(table1);

//--

var group2 = new AW.UI.Group;
group2.setId("group2");
group2.setControlText("Operator Queue");

var table2 = new AW.XML.Table;
//table2.setURL(opurl + 'operator_phone=' + operator_phone);
//table2.request();

var columns2 = ["TXNID", "ACCOUNT", "FIRST", "LAST", "BALANCE","TRANSFER TIME [hh:mm:ss]"];

var grid2 = new AW.UI.Grid;
grid2.setId("grid2");

grid2.setHeaderText(columns2);

grid2.setColumnCount(6);
grid2.setColumnWidth(70,0);
grid2.setColumnWidth(80,1);
grid2.setColumnWidth(110,2);
grid2.setColumnWidth(110,3);
grid2.setColumnWidth(60,4);
grid2.setColumnWidth(150,5);
//grid2.setColumnWidth(90,6);

grid2.setSelectorVisible(true);
grid2.setSelectorText(function(i){return this.getRowPosition(i)+1});
grid2.setSelectorWidth(15);
grid2.setSelectionMode("single-row");

var str = new AW.Formats.String;
var num = new AW.Formats.Number;
grid2.setCellFormat([num, num, str, str, num, str, str]);
grid2.onHeaderClicked = function(event,index){return 'disabled'};
grid2.setCellModel(table2);

//--

var page1 = [group1, grid1, group2, grid2];

var page2 = [group1, grid1, group2, grid2];

var pages = [page1, page2];

var grids = [grid1, grid2];

var tabIndex = 0;

container.element().innerHTML = page1.join("");

tabs.onCurrentItemChanged = function(i) {

container.element().innerHTML = pages[i].join("");

if (container.$browser=="opera"){document.body.className += ""}

operator_phone = tabs.getItemText(i);
tabIndex = i;

//alert(tabs.getItemText(i));
}

//--

var httpReq1;

window.onload = function() {
httpReq1 = false;

// branch for native XMLHttpRequest object
if(window.XMLHttpRequest) {
try {
httpReq1 = new XMLHttpRequest();
} catch(e) {
httpReq1 = false;
}
// branch for IE/Windows ActiveX version
} else if(window.ActiveXObject) {
try {
httpReq1 = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try {
httpReq1 = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
httpReq1 = false;
}
}
}

if (httpReq1) {
setTimeout("updateHoldTable()", 1000);
}
}

var reqIndex = 0;
var url;
function updateHoldTable() {
//alert('reqIndex='+reqIndex + '<BR>' + 'tabIndex='+tabIndex);
reqIndex = tabIndex;
url = holdurl + 'operator_phone=' + operator_phone;
httpReq1.onreadystatechange = processHoldReqChange;
httpReq1.open("GET", url, true);
httpReq1.send("");
}

function processHoldReqChange() {
// only if httpReq1 shows "loaded"
if (httpReq1.readyState == 4 && reqIndex == tabIndex) {
// alert('reqIndex='+reqIndex);
// alert(httpReq1.responseText);
table1.setXML(httpReq1.responseXML);
grid1.setRowCount(table1.getCount());
grid1.refresh();
setTimeout("updateHoldTable()", 1000);
if (httpReq1.status == 200) {
} else {
alert("There was a problem retrieving the XML data:\n" +
httpReq1.statusText);
}
}
}
</script>
</body>
</html

-Kris

March 3,

Kris,

the code looks cool and should work in IE without changes - AW API is exactly the same on all browsers. Some suggestions -

- table.setURL() + table.request() will load new data and refresh the grid, so your XMLHTTPRequest code probably is not necessary.

- instead of table.setURL(url + "paramName=" + "paramValue") you can use

table.setURL(url);
table.setParameter(name, value);

- setTimeout(function, delay) works the same way in AW objects as native window.setTimeout() except the function is called as method of the AW object, so you can use keyword this to refer to the calling object.

Alex (ActiveWidgets)

March 3,

Alex,

Thanks for your prompt reply, and your suggessions. I am guessing you're doing XMLHTTPRequest underneath with table.request(), if so, its pretty much useless for me to redo all that.

However, with the code that I have I did ran into a problem on IE caching. After the first request(XMLHTTP), its caching the request, and the subsequent requests are not updating table. Fortunately, I found a library on the internet to fix the caching problem. It pretty much uses the XMLHTTPRequest, but does some stuff to prevent IE caching (It allows caching as well, it's all flag driven). Let me know if using table.setURL() and table.request() would solve the IE caching problem. Otherwise, I can email you the library code, and perhaps you could some how try to include that in your library :-) I think its' pretty useful to have that included.

Also thanks for the tip on table.setParameter(), it will definitly be useful.

I am still not quite sure about using your setTimeout method. If I want to set a timeout on a specific table, should i do this, table1.setTimeout(function, timeout)? Please clarify :)

-Kris

March 3,

Hi Kris,

For the problem of the browser caching data I use the following header. In my case it is a php program on the server.

<?php

header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); // Date in the past

// code to gather new data here

echo $myreturndata;
?>

Rob Francis

March 3,

Kris,

yes, thats correct - AW.XML.Table uses XMLHTTPRequest internally, the same way as in your XMLHTTPRequest code.

if you are stuck with IE HTTPRequest caching and cannot fix it with proper headers - the easy workaround is to include random parameter -

table.setParameter("random", Math.rand());

setTimeout method is inherited from a generic AW.System.Object and has nothing to do with setting request timeout. The method is doing the same as window.setTimeout(function, delay) - calling the function after the specified delay.

Alex (ActiveWidgets)

March 3,

Rob,

Thanks for the suggesion, I think it did the trick.

-Kris

March 3,

Alex,

Thanks for your suggessions, I've tried your's as well as what Rob suggested, and both seems to work. However, I have a question, when I was using XMLHTTPRequest, I had a callbakc method where I could update the data, and set a timer again. I noticed that table also has a callback method called "response" that I can override, however, when I override this function, and inserted the same code that I have in processHoldReqChange(), the process seems slow. So in otherwords, when I use XMLHTTPRequest, I could see the time in the "HOLD TIME" column being updated every second. However when I use table.request(), the time value is being updated in 1-2 seconds.

-Kris

March 3,

AW uses 0.2 sec polling instead of XMLHTTPRequest callback. For very small time intervals it can give slightly different delays. If you need subsecond response it is better using XMLHTTPRequest object directly.

Alex (ActiveWidgets)

March 6,

Thanks Alex,

Will do.

I have another question, is there a way for the columns to auto-resize to the width of the grid? In otherwords, I like to have the colmuns generated dynamically, and give the user an ability to choose which columns to be displayed. So the number of columsn displayed can be 4, 5, or more. I designed the table to fit 7 columns, so if the user selects only 5 columns, can they automatically resize to a specific width to occupu the entire grid?

-Kris

March 6,

This topic is archived.

Newbie to ActiveWidgets

See also:

Search

New Data Grid

Version 2