GUI Components JavaScript DHTML

  1. Home
  2. JavaScript DHTML
  3. GUI Components
  4. XML Tree
/*
Mastering JavaScript, Premium Edition
by James Jaworski 
ISBN:078212819X
Publisher Sybex CopyRight 2001
*/

      
   Tree Component
   
BLOCKQUOTE {
margin-top: -5;
margin-bottom: -5;
}
TABLE {
margin-top: 0;
margin-bottom: 0;
}
A:link, A:visited {
  color: black;
  text-decoration: none;
}   
   
   
var nodes = new Array("XML, XSLT, and JavaScript Tree Component",
"Features",
"The nodes and structure of the tree are specified in XML.",
"An XSLT stylesheet enables the tree to be rendered in HTML.",
"The display and operation of the tree is handled in JavaScript.",
"Design", "The tree component consists of the following files:",
"tree.xml", "Defines the tree's text and structure.",
"tree.dtd", "Provides a DTD for tree.xml.",
"tree.xsl", "Transforms the tree into HTML and JavaScript.",
"tree.js", "Defines the Tree object.",
"tree.css", "Styles the transformed tree."
)
var branches = new Array(new Array(0,1),new Array(1,2),
new Array(1,3),new Array(1,4),new Array(0,5),new Array(5,6),
new Array(6,7),new Array(7,8),new Array(6,9),new Array(9,10),
new Array(6,11),new Array(11,12),new Array(6,13),new Array(13,14),
new Array(6,15),new Array(15,16),new Array(-1,-1))


   
var tree = createTree()
   
function createTree() {
 branchID = 0
 var subtrees = new Array()
 for(var i=0; i  subtrees[i] = new Tree(nodes[i])
 for(var i=0; i  subtrees[branches[i][0]].addBranch(subtrees[branches[i][1]])
 return subtrees[0]
}
function Tree(root) {
 this.text = root
 this.id = branchID
 ++branchID
 this.expanded = true
 this.branches = new Array()
 this.addBranch = Tree_addBranch
 this.changeState = Tree_changeState
 this.handleClick = Tree_handleClick
 this.processClick = Tree_processClick
 this.display = Tree_display
 this.getTreeString = Tree_getTreeString
}
function Tree_addBranch(tree) {
 this.branches[this.branches.length] = tree
}
function Tree_changeState() {
 this.expanded = !this.expanded
}
function Tree_handleClick(branch) {
 this.processClick(branch)
 var d = document.getElementById("tree")
 if(d != null) d.innerHTML = this.getTreeString()
}
function Tree_processClick(branch) {
 if(this.id == branch) this.changeState()
 else {
  for(var i=0; i   this.branches[i].processClick(branch)
 }
}
function Tree_getTreeString() {
 var s = "
"
 s += ''
 s += ""
 s += ""
 if(this.branches.length > 0)
  s += '+'
 else s += "-"
 s += ""
 s += ""
 s += this.text
 s += ""
 s += ""
 s += ""
 if((this.branches.length > 0) && (this.expanded == true)) {
  for(var i=0; i   s += this.branches[i].getTreeString()
 }
 s += "
"
 return s
}
function Tree_display() {
 document.writeln(this.getTreeString())
}





tree.display()