Source code for /src/od_tree.jsp.txt
//======================================================================//
// Author: Mark Qian <markqian@hotmail.com> //
// WWW: http://www.coolshare.com //
// Copyright (c) 2006, Mark Qian //
// //
// You must contact Mark Qian to get a permission of use //
// in case you want to make any use of the codes except viewing it //
// on Mark's site. //
//======================================================================//
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=23)">
<head>
<%
String approachStr = request.getParameter("a");
if (approachStr==null)
approachStr = (String)request.getAttribute("a");
%>
</head>
<script language="javascript" src="/RemoteScriptGuru/html/coolshare/html/js/cross_browser.js"></script>
<SCRIPT src="/RemoteScriptGuru/html/coolshare/javascriptlab/html/js/dhtmlXCommon.js" type=text/javascript></SCRIPT>
<SCRIPT src="/RemoteScriptGuru/html/coolshare/javascriptlab/html/js/dhtmlXTree.js" type=text/javascript></SCRIPT>
<script language="javascript" src="/RemoteScriptGuru/js/ajax.js"></script>
<script language="javascript" src="/RemoteScriptGuru/js/communicator.js"></script>
<script language="javascript" src="/RemoteScriptGuru/js/CManager.js"></script>
<script language="javascript" src="/RemoteScriptGuru/js/AJAXCommunicator.js"></script>
<script language="javascript" src="/RemoteScriptGuru/js/rslite.js"></script>
<script language="javascript" src="/RemoteScriptGuru/js/IframeCommunicator.js"></script>
<script language="javascript" src="/RemoteScriptGuru/js/DSCommunicator.js"></script>
<script language="javascript" src="/RemoteScriptGuru/js/FrameCommunicator.js"></script>
<script language="javascript" src="/RemoteScriptGuru/js/CookieCommunicator.js"></script>
<script language="javascript" src="/RemoteScriptGuru/html/coolshare/html/js/common.js"></script>
<script language="javascript" src="/RemoteScriptGuru/html/coolshare/html/js/expand.js"></script>
<SCRIPT type=text/javascript>
var cm;
function onNodeSelect(pId, state) {
var node = tree.a0Find(pId);
if (state>0) {
tree.closeItem(pId);//
return;
} else if (node.exp>0) {
tree.openItem(pId);//
return;
}
var approach = document.getElementById("a").value;
if (!cm || cm.a!=approach)
cm = eval("new CManager(\""+approach+"\", 2)");
//Polymorphism is applied here: late/dynamic bound
var comm = cm.getCommunicator();
comm.errHandler = doError;
var url = node.url;
var type = document.getElementById("showType").value;
//////////////////////////// Closure 1 /////////////////////////////////
//
// Forming a closure to preserve comm, c, d and kc. We need them when
// the callback is invoked otherwise they may be garbag collocted
// when doKeyUp is exited.
//
///////////////////////////////////////////////////////////////
var handler = (function() {
function updateTree() {
/***********************************************************************/
/* The task in the concrete handler, updateDiv, is so simple: */
/* */
/* 1. get the server return from comm.res (Note: this is the */
/* same over all the Concrete Communicators and all the */
/* details about how to obtain the res, such as readyState, */
/* is transparnt) */
/* 2. parse the urls */
/* 3. insert tree nodes */
/***********************************************************************/
var node = tree.a0Find(pId);
if (comm.res.indexOf(",")<0) {
tree.setItemImage2(pId,"leaf_bad.gif","leaf_bad.gif","leaf_bad.gif");
} else {
var urls = comm.res.split(",");
for (var i=0; i<urls.length; i++) {
var nId = pId*10+i;
var ss = urls[i].split("|");
var name = unescape(ss[1]);
if (name.length>30)
name = name.substring(0, 30)+"...";
var nn = tree.insertNewItem(pId,nId,name,aFunc,0,0,0,"CHILD", null, ss[0], "_blank");
var nId2 = nId*10+i;
nn.dummy = tree.insertNewItem(nId,nId2,"dummy",aFunc,0,0,0,"", null, ss[0], "_blank");
nn.dummy.htmlNode.style.display = "none";
tree.closeItem(nId);//
}
var ppp = tree.a0Find(pId);
try {
ppp.removeChild(ppp.dummy);
} catch (e) {
}
}
node.exp = 1;
showProgress(false);
}
return updateTree;
})();
comm.init(window, "/RemoteScriptGuru/javascriptlab.ajax.on_demand_tree.do?url="+escape(url)+"&type="+escape(type)+"&a="+approach+"&cId="+comm.id, null, handler);
showProgress(true);
//Polymorphism is applied here: late/dynamic bound
comm.send();
}
function doError(e) {
alert(e.description?e.description:e);
this.w.showProgress(false);
}
function aFunc(url, tar) {
var f =document.getElementById("__fff__");
if (!f) {
f = document.createElement("form");
f.id = "__fff__";
document.body.appendChild(f);
}
f.action = url;
f.target = tar;
f.submit();
}
var tree;
var pg;
function doLoad() {
pg = document.getElementById("progress");
}
function showProgress(t) {
if (t)
pg.style.display = "block";
else
pg.style.display = "none";
}
var ddd;
function startSearch() {
ddd = document.getElementById("treeboxbox_tree");
ddd.innerHTML = "";
tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
tree.setImagePath("/RemoteScriptGuru/html/coolshare/javascriptlab/html/images/");
tree.setOnOpenHandler(onNodeSelect);//
var url = document.getElementById("url").value;
tree.insertNewItem(0,10,url,aFunc,0,0,0,"", null, url, "_blank", true);
onNodeSelect(10);
}
function doEnter(e) {
if (checkEnter(e))
startSearch();
return false;
}
</SCRIPT>
<body background="/RemoteScriptGuru/html/coolshare/remotescriptguru/images/rulebk.jpg" onload="doLoad()">
<table><tr><td><table width=70><tr><td></td></tr></table></td><td><table><tr><td>
<h3>Building an AJAX Application (5): The running On-demand Tree:</h3>
(By Mark Qian on 8/25/2006)
<pre>
<h3>Introduction</h3>
Trees are commonly used components to represent Hierarchies. Traditionally, on-demand trees
are reloaded entirely when new content needs to be added. <b>Remote Scripting</b> allows
trees to be updated "silently" without reloading. The goal of this demostration is to show
how <b>Remote Scripting</b> can be used to build on-demand trees <b>in a variety of ways</b>
using Mark's Communicator...
This is not a solid product so there may be some bugs like it may not be able to find all the links and
some functionality like "image search" shown is not implemented yet.
<b>Try it to see how far you can reach and how big the web is;=)</b>.
And <a id="Bb1" href="javascript:void(0)" onclick="divExpand(this);return false;" onMouseover="showtip()" onMouseout="hidetip()" style="text-decoration:none"> here are some stuff <span style="margin-left:10px;margin-right:10px;width:120px;height:20px;background-color:lightgrey;text-align:center;text-valign:middle;border:2px buttonhighlight outset;cursor:hand;font-size:9pt;font-weight:bold">Show details</span><img src="/RemoteScriptGuru/html/coolshare/html/images/ball.gif" border=0></a> you want to try.
<div id="d_Bb1" style="display:none;background-color:#CCFFFF;border-style: inset;width:1200"><pre>
<b>Issues to look into</b>:
<ul>
<li>Prove AJAX can be turn off</li>
- using IE6.x and go to "Tool|Internet Options...|security|internet (icon)|Custom Level;
- click at Reset if you can/want
- select "Disable" on "Run Active Controls and plug-ins" under "Active Controls and plug-ins"
- now go back to the tree page and search "using AJAX". You will can an error saying
"Automation server can't create object" meaning creating XMLHttpRequest object failed.
- then, change the "using" field to anyone other than AJAX, say "Dynamic Hidden Iframe",
it should work.
<li>Prove Cookie approach relies on cookie on</li>
- turn your browser Cookie off
- try the serach using "Cookie"
- then, change the "using" field to anyone other than AJAX, say "Dynamic Hidden Iframe",
it should work.
<li>Prove Cookie approach is limited by the size limitation of cookie</li>
- Use AJAX to open the seed url, "bamboogarden.com"
- Change "using" field to "Cookie"
- Try to expand a tree node containing a lot of links, say "Price List", and it will fail.
- Change "using" field to "AJAX"
- Try to open the same link and it should work
- Change "using" back to Cookie"
- Try to open a node with a few links like 4 or 5 links, "say pests.htm" below "Price List", and it should work
</ul></pre></div>
<b>Compatibility</b>: IE (6.x, 7.x), FireFox (1.5.0.4), Mozilla/Netscape(7.2), Opera(9.0)
were fully tested and worked in XP (v2002. sp2).
<table><tr><td>Starting(Seed) Url:</td><td><input id="url" type=text value="http://www.bamboogarden.com" style="width:400" onKeyPress="doEnter(event)"></td><td><input type=button value="Search" onclick="startSearch()"></td><td> for </td><td><select name="showType" id="showType"><option value="link">Links</option><option value="image">Pictures</option><option value="video">Video</option></select></td><td> using </td><td><select id="a" name="a"><option value="AJAX" <%=approachStr.equals("AJAX")?"selected":"" %>>AJAX</option><option value="Iframe" <%=approachStr.equals("Iframe")?"selected":"" %>>Dynamic Hidden Iframe</option><option value="DS" <%=approachStr.equals("DS")?"selected":"" %>>Dynamic Scripting</option><option value="Cookie" <%=approachStr.equals("Cookie")?"selected":"" %>>Cookies</option><option value="Frame" <%=approachStr.equals("Frame")?"selected":"" %>>Traditional Frame</option></select></td></tr></table>
<div id="treeboxbox_tree" style="width:750;height:450;background-color:#F5F5F5;overflow:auto"></div>
<div id="progress" style="display:none;width:300;height:35;top:200;left:100;position:absolute;z-index:999;background-color:#EFECA0;border-style: outset;"><center><b>Processing ...Please wait.</b></center></div>
</pre>
<script language="javascript" src="/RemoteScriptGuru/html/coolshare/html/js/include_ajax.js"></script>
<script id="__include__">
include.load("/RemoteScriptGuru/html/coolshare/html/common/contact.htm");
</script>
</BODY></HTML>