Complete Tree Contol with Ajax implementation example

Hi Folks,
Finally found some time to post the example here. Please dont be initimidated by the array lengths in the example. These were programatically generated...Hope this examples helps u all.
-----------------------------------------------------------------
How it works
Initially the tree is rendered in the browser. When the user drills down to the lowest level of a node that is the leaf node and clicks on the leaf node.....A request (AJAX call) is made to the database through a jsp file and response is returned in the form of ^ delimited string.Using javascript split function, the nodes are shown under the leaf node. This is done synchronously. For asynchronous fetching of data, set the setAsync method to true. The layersMap in the example constitutes all the leaf nodes in the example...

There will be 2 components...one jsp will contain the tree control implementation while the other jsp will fetch the data when an Ajax call is made.

Tree Control JSP
<script>
var layersMap = new Array();
layersMap[28] = new Array("04/30/2006^49^FP00000037^01/31/2004");
layersMap[70] = new Array("04/30/2006^49^FP00000037^05/31/2004");
layersMap[58] = new Array("04/30/2006^49^FP00000037^03/31/2004");
layersMap[60] = new Array("04/30/2006^48^FP00000037^03/31/2004");
layersMap[82] = new Array("04/30/2006^49^FP00000037^11/30/2004");
layersMap[36] = new Array("04/30/2006^48^FP00000037^04/30/2004");
layersMap[6] = new Array("04/30/2006^48^FP00000037^07/31/2004");
layersMap[72] = new Array("04/30/2006^48^FP00000037^05/31/2004");
layersMap[24] = new Array("04/30/2006^48^FP00000037^12/31/2004");
layersMap[16] = new Array("04/30/2006^49^FP00000037^02/29/2004");
layersMap[46] = new Array("04/30/2006^49^FP00000037^08/31/2004");
layersMap[40] = new Array("04/30/2006^49^FP00000037^09/30/2004");
layersMap[4] = new Array("04/30/2006^49^FP00000037^07/31/2004");
layersMap[84] = new Array("04/30/2006^48^FP00000037^11/30/2004");
layersMap[78] = new Array("04/30/2006^48^FP00000037^03/31/2005");
layersMap[12] = new Array("04/30/2006^48^FP00000037^06/30/2004");
layersMap[34] = new Array("04/30/2006^49^FP00000037^04/30/2004");
layersMap[52] = new Array("04/30/2006^49^FP00000037^10/31/2004");
layersMap[30] = new Array("04/30/2006^48^FP00000037^01/31/2004");
layersMap[18] = new Array("04/30/2006^48^FP00000037^02/29/2004");
layersMap[42] = new Array("04/30/2006^48^FP00000037^09/30/2004");
layersMap[64] = new Array("04/30/2006^49^FP00000037^02/28/2005");
layersMap[54] = new Array("04/30/2006^48^FP00000037^10/31/2004");
layersMap[48] = new Array("04/30/2006^48^FP00000037^08/31/2004");
layersMap[76] = new Array("04/30/2006^49^FP00000037^03/31/2005");
layersMap[10] = new Array("04/30/2006^49^FP00000037^06/30/2004");
layersMap[22] = new Array("04/30/2006^49^FP00000037^12/31/2004");
layersMap[90] = new Array("04/30/2006^48^FP00000037^01/31/2005");
layersMap[88] = new Array("04/30/2006^49^FP00000037^01/31/2005");
layersMap[66] = new Array("04/30/2006^48^FP00000037^02/28/2005");

var tree = {
63: [64],
29: [30],
0: [1,7,13,19,25,31,37,43,49,55,61,67,73,79,85],
39: [40],
49: [50],
83: [84],
61: [62],
50: [51,53],
68: [69,71],
23: [24],
67: [68],
74: [75,77],
86: [87,89],
20: [21,23],
69: [70],
25: [26],
32: [33,35],
57: [58],
43: [44],
87: [88],
79: [80],
35: [36],
13: [14],
26: [27,29],
44: [45,47],
9: [10],
19: [20],
51: [52],
85: [86],
3: [4],
41: [42],
27: [28],
14: [15,17],
17: [18],
1: [2],
80: [81,83],
59: [60],
5: [6],
37: [38],
55: [56],
56: [57,59],
33: [34],
11: [12],
15: [16],
77: [78],
62: [63,65],
89: [90],
45: [46],
7: [8],
81: [82],
2: [3,5],
38: [39,41],
75: [76],
53: [54],
31: [32],
47: [48],
65: [66],
71: [72],
21: [22],
73: [74],
8: [9,11]
}

var arrValues = ["",

"07/31/2004",
"Test1",
"Test3",
"04/30/2006",
"Test2",
"04/30/2006",
"06/30/2004",
"Test1",
"Test3",
"04/30/2006",
"Test2",
"04/30/2006",
"02/29/2004",
"Test1",
"Test3",
"04/30/2006",
"Test2",
"04/30/2006",
"12/31/2004",
"Test1",
"Test3",
"04/30/2006",
"Test2",
"04/30/2006",
"01/31/2004",
"Test1",
"Test3",
"04/30/2006",
"Test2",
"04/30/2006",
"04/30/2004",
"Test1",
"Test3",
"04/30/2006",
"Test2",
"04/30/2006",
"09/30/2004",
"Test1",
"Test3",
"04/30/2006",
"Test2",
"04/30/2006",
"08/31/2004",
"Test1",
"Test3",
"04/30/2006",
"Test2",
"04/30/2006",
"10/31/2004",
"Test1",
"Test3",
"04/30/2006",
"Test2",
"04/30/2006",
"03/31/2004",
"Test1",
"Test3",
"04/30/2006",
"Test2",
"04/30/2006",
"02/28/2005",
"Test1",
"Test3",
"04/30/2006",
"Test2",
"04/30/2006",
"05/31/2004",
"Test1",
"Test3",
"04/30/2006",
"Test2",
"04/30/2006",
"03/31/2005",
"Test1",
"Test3",
"04/30/2006",
"Test2",
"04/30/2006",
"11/30/2004",
"Test1",
"Test3",
"04/30/2006",
"Test2",
"04/30/2006",
"01/31/2005",
"Test1",
"Test3",
"04/30/2006",
"Test2",
"04/30/2006"

];

var arrImages = [
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
""
];

var obj = new AW.UI.Tree;
obj.setItemText(arrValues);
obj.setItemImage(arrImages);
obj.setViewCount(function(i)
{
return tree[i] ? tree[i].length : 0;
}
);
obj.setStyle("font", "10px verdana, arial, helvetica, sans-serif");
obj.setViewIndices(
function(i)
{
return tree[i];
}
);

obj.onItemClicked=function(event,index)
{
var str = layersMap[index];
if ( str )
{
var r = new AW.HTTP.Request;
var paramList = str[0].split('^');
url = 'InvestorInfo.jsp';
url = '?param1=' + paramList[0];
url = url + '&param2=' + paramList[1];
url = url + '&param3=' + paramList[2]

r.setURL(url);
r.setRequestMethod("GET");
r.setAsync(false);

r.response = function(data)
{
if ( str )
{
var arrRequestedData = data.split('^');
var i = 0;
var arr = tree[index];
if ( !arr )
{
arr = new Array();
}

for ( ; i < arrRequestedData.length ; i++)
{
var len = arrValues.length;
arr[i] = len;
arrValues[len] = trimAll(arrRequestedData[i]) ;
arrImages[len] = "favorites";
}
tree[index] = arr;
obj.setViewExpanded(true, index);
}
}

r.request();
}
}
obj.setSize(850,450);
document.write(obj);
</script>

The Request data JSP Page<%
String param1 = (String) request.getParameter("param1");
String param2 = (String) request.getParameter("param2");
String param3 = (String) request.getParameter("param3");

//Create a ^ separated string of values
//say param1^param2^param3
//This string will be recieved by r.response method
return param1 + "^" + param2 + "^" + param3;
%>


Hope this example helps!!!!

Regards
Jaydeep Deshmukh

Just a small correction to the Request Data JSP page

Instead of return param1^param2^param3^param4

it should be
out.println("param1^param2^param3^param4");

where out is the outputStream obtained from the response object