cwyte
May 6th, 2008, 06:11 PM
Hello Everyone,
I am looking for a bit of advice on some code I am writing.
I have created an explorer tree using input from an XML document. The tree and the links work fine great, thanks to some help from this forum. As you will see in the code and the db file below, this code only works if the xml structure is followed.
The problem I would like to resolve is I may only place "section nodes(LEAVES)" as children of "manual nodes". I would like to have the ability to place a "section (LEAF)" under a group if I wanted. This will make more sense when you review the DB XML code below :)
Try to make this change in the XML doc and you will see the bad results.
I am not exactly sure how to tackle this problem but I have played with the notion of the hasChildNodes() method, but i can't get it to work quite right.
The links are arbitrary at this point and are all dummy links.
As Always help is much Appreciated!!
The Tree
<html>
<head>
<title>Electronic Manuals Tree_1</title>
<style>
body
{
font: 10pt Verdana,sans-serif;
color: navy;
}
.branch
{
cursor: pointer;
cursor: hand;
display: block;
}
.leaf
{
display: none;
margin-left: 16px;
}
a
{
text-decoration: none;
}
a:hover
{
text-decoration: underline;
}
</style>
<script language="JavaScript">
// Class variables For Images
var openImg = new Image();
openImg.src = "images/open.gif";
var closedImg = new Image();
closedImg.src = "closed.gif";
// Constructor Functions
function tree()
{
this.branches = new Array();
this.add = addBranch;
this.write = writeTree;
}
function branch(id, text)
{
this.id = id;
this.text = text;
this.write = writeBranch;
this.add = addLeaf;
this.leaves = new Array();
}
function leaf(text, link)
{
this.text = text;
this.link = link;
this.write = writeLeaf;
}
// Write and Add Functions
function writeTree()
{
var treeString = '';
var numBranches = this.branches.length;
for(var i=0;i<numBranches;i++)
treeString += this.branches[i].write();
document.write(treeString);
}
function addBranch(branch)
{
this.branches[this.branches.length] = branch;
}
function writeBranch()
{
var branchString = '<span class="branch" onClick="showBranch(\'' + this.id + '\')"';
branchString += '><img src="closed.gif" id="I' + this.id + '">' + this.text;
branchString += '</span>';
branchString += '<span class="leaf" id="';
branchString += this.id + '">';
var numLeaves = this.leaves.length;
for(var j=0;j<numLeaves;j++)
branchString += this.leaves[j].write();
branchString += '</span>';
return branchString;
}
function addLeaf(leaf)
{
this.leaves[this.leaves.length] = leaf;
}
function writeLeaf()
{
var leafString = '<a href="' + this.link + '" target="main">';
leafString += '<img src="images/doc.gif" border="0">';
leafString += this.text;
leafString +='</a><br>';
return leafString;
}
function showBranch(branch)
{
var objBranch = document.getElementById(branch).style;
if(objBranch.display=="block")
objBranch.display="none";
else
objBranch.display="block";
swapFolder('I' + branch);
}
function swapFolder(img)
{
objImg = document.getElementById(img);
if(objImg.src.indexOf('closed.gif')>-1)
objImg.src = openImg.src;
else
objImg.src = closedImg.src;
}
function main()
{
// Loads the XMl doc
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.load("db.xml");
xmlDoc.async=false;
if(!xmlDoc.documentElement)alert("Invalid XML Document");
// Variable declarations
// nodelists
var x = xmlDoc.getElementsByTagName('Manual');
var g = xmlDoc.getElementsByTagName('Group');
//var s = xmlDoc.getElementsByTagName('SubManual');
var m = xmlDoc.getElementsByTagName('section');
// initial branch and tree
var myTree = new tree();
var branch1 = new branch('branch1','Navigation Folder');
// branch and leaf id start points
var id = 0;
var m_id = 100;
var s_id = 500;
var sec_id = 750;
// initial node values
var nodeGroup = g[0].firstChild;
var nodeManual = x[0].firstChild;
//var nodeSubManual = s[0].firstChild;
var nodeSection = m[0].firstChild;
// counters
var counter = 1;
var manualCounter = 0;
var groupCounter = 0;
var subManualCounter = 0;
var sectionCounter = 0;
var ml_loop = 0;
var sml_loop = 0;
var sec_loop = 0;
var counter_nm = 0;
var counter_nsm = 0;
var counter_nsec = 0;
// length holders
var gl = g.length;
var ml = x.length -1;
//var sl = s.length -1;
var cl = m.length -1;
var bool = true;
var nodeHolder;
// Group Loop
for (r=0;r<gl;r++)
{
branch2 = new branch(id,nodeGroup.data);
nodeGroup = g[counter].firstChild;
if (counter < gl-1) counter ++;
ml_loop = g[manualCounter].childNodes.length-1;
// Manual Loop
for(j=0;j<ml_loop;j++)
{
branch3 = new branch(m_id,nodeManual.data);
branch2.add(branch3);
m_id++;
if (counter_nm < ml)counter_nm ++;
nodeManual = x[counter_nm].firstChild;
//leaf loop
sec_loop = x[sectionCounter].childNodes.length-1;
if(sec_loop > 0)
{
for(p=0;p<sec_loop;p++)
{
branch3.add( new leaf(nodeSection.data, "http://www.yahoo.com"));
if (counter_nsec < cl)counter_nsec ++;
nodeSection = m[counter_nsec].firstChild;
}
}
if(sectionCounter < ml) sectionCounter ++;
}
branch1.add(branch2);
id ++;
if(manualCounter < gl)
manualCounter ++;
groupCounter ++;
}
myTree.add(branch1);
myTree.write();
}
</script>
</head>
<body bgColor=Red>
<script language="JavaScript">
main();
</script>
</body>
</html>
The XML DB doc:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<Manuals>
<Group>Currency Lists
<Manual>Currency000
<section>Section000
<link>B737_MEL/Section_00.pdf</link>
</section>
</Manual>
<Manual>Currency111
<section>Section111
<link>B737_MEL/Section_00.pdf</link>
</section>
<section>Section222
<link>B737_MEL/Section_00.pdf</link>
</section>
</Manual>
<Manual>Currency222
</Manual>
</Group>
<Group>General
<Manual>Aircraft Loading
</Manual>
<Manual>Compliance Statement
<section>Section_119
<link>B737_MEL/Section_00.pdf</link>
</section>
<section>Section_121
<link>B737_MEL/Section_00.pdf</link>
</section>
<section>Section_830
<link>B737_MEL/Section_00.pdf</link>
</section>
<section>Section_91
<link>B737_MEL/Section_00.pdf</link>
</section>
<section>Section_43
<link>B737_MEL/Section_00.pdf</link>
</section>
<section>Section_39
<link>B737_MEL/Section_00.pdf</link>
</section>
</Manual>
<Manual>Deice
</Manual>
<Manual>Operation Specification
</Manual>
<Manual>Technical Publications
</Manual>
</Group>
<Group>Flight Operations
<Manual>Flight Control
</Manual>
<Manual>General Operations
</Manual>
<Manual>Training
</Manual>
<Manual>B737 Manuals
</Manual>
</Group>
<Group>Maintenance
<Manual>DFDR System Maintenance Program
</Manual>
<Manual>General Maintenance
</Manual>
<Manual>RVSM System Maintenance Program
</Manual>
<Manual>Stockroom Program
</Manual>
<Manual>B 737 Manuals (CAMP)
</Manual>
<Manual>B 737 Manuals (CAMP Master Workcards)
</Manual>
<Manual>B 737 Manuals (Maintenance)
</Manual>
<Manual>Minimum Equipment List
</Manual>
<Manual>CMM
</Manual>
</Group>
<Group>Saftey
<Manual>Emergency Response Plan
</Manual>
<Manual>Internal Evaluation Program
</Manual>
<Manual>Safety
</Manual>
</Group>
<Group>CheckLists
</Group>
<Group>Handbooks
<Manual>Employee
</Manual>
<Manual>Emergency Preparedness
</Manual>
<Manual>Hazmat
</Manual>
</Group>
<Group>Links
<Manual>FAA
</Manual>
<Manual>SAI's
</Manual>
</Group>
<Group>Forms
</Group>
</Manuals>
XML I am trying to implement:
<Group>Currency Lists
<section>TEST
<link>B737_MEL/Section_00.pdf</link>
</section>
<Manual>Currency000
<section>Section000
<link>B737_MEL/Section_00.pdf</link>
</section>
</Manual>
<Manual>Currency111
<section>Section111
<link>B737_MEL/Section_00.pdf</link>
</section>
<section>Section222
<link>B737_MEL/Section_00.pdf</link>
</section>
</Manual>
<Manual>Currency222
</Manual>
</Group>
I am looking for a bit of advice on some code I am writing.
I have created an explorer tree using input from an XML document. The tree and the links work fine great, thanks to some help from this forum. As you will see in the code and the db file below, this code only works if the xml structure is followed.
The problem I would like to resolve is I may only place "section nodes(LEAVES)" as children of "manual nodes". I would like to have the ability to place a "section (LEAF)" under a group if I wanted. This will make more sense when you review the DB XML code below :)
Try to make this change in the XML doc and you will see the bad results.
I am not exactly sure how to tackle this problem but I have played with the notion of the hasChildNodes() method, but i can't get it to work quite right.
The links are arbitrary at this point and are all dummy links.
As Always help is much Appreciated!!
The Tree
<html>
<head>
<title>Electronic Manuals Tree_1</title>
<style>
body
{
font: 10pt Verdana,sans-serif;
color: navy;
}
.branch
{
cursor: pointer;
cursor: hand;
display: block;
}
.leaf
{
display: none;
margin-left: 16px;
}
a
{
text-decoration: none;
}
a:hover
{
text-decoration: underline;
}
</style>
<script language="JavaScript">
// Class variables For Images
var openImg = new Image();
openImg.src = "images/open.gif";
var closedImg = new Image();
closedImg.src = "closed.gif";
// Constructor Functions
function tree()
{
this.branches = new Array();
this.add = addBranch;
this.write = writeTree;
}
function branch(id, text)
{
this.id = id;
this.text = text;
this.write = writeBranch;
this.add = addLeaf;
this.leaves = new Array();
}
function leaf(text, link)
{
this.text = text;
this.link = link;
this.write = writeLeaf;
}
// Write and Add Functions
function writeTree()
{
var treeString = '';
var numBranches = this.branches.length;
for(var i=0;i<numBranches;i++)
treeString += this.branches[i].write();
document.write(treeString);
}
function addBranch(branch)
{
this.branches[this.branches.length] = branch;
}
function writeBranch()
{
var branchString = '<span class="branch" onClick="showBranch(\'' + this.id + '\')"';
branchString += '><img src="closed.gif" id="I' + this.id + '">' + this.text;
branchString += '</span>';
branchString += '<span class="leaf" id="';
branchString += this.id + '">';
var numLeaves = this.leaves.length;
for(var j=0;j<numLeaves;j++)
branchString += this.leaves[j].write();
branchString += '</span>';
return branchString;
}
function addLeaf(leaf)
{
this.leaves[this.leaves.length] = leaf;
}
function writeLeaf()
{
var leafString = '<a href="' + this.link + '" target="main">';
leafString += '<img src="images/doc.gif" border="0">';
leafString += this.text;
leafString +='</a><br>';
return leafString;
}
function showBranch(branch)
{
var objBranch = document.getElementById(branch).style;
if(objBranch.display=="block")
objBranch.display="none";
else
objBranch.display="block";
swapFolder('I' + branch);
}
function swapFolder(img)
{
objImg = document.getElementById(img);
if(objImg.src.indexOf('closed.gif')>-1)
objImg.src = openImg.src;
else
objImg.src = closedImg.src;
}
function main()
{
// Loads the XMl doc
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.load("db.xml");
xmlDoc.async=false;
if(!xmlDoc.documentElement)alert("Invalid XML Document");
// Variable declarations
// nodelists
var x = xmlDoc.getElementsByTagName('Manual');
var g = xmlDoc.getElementsByTagName('Group');
//var s = xmlDoc.getElementsByTagName('SubManual');
var m = xmlDoc.getElementsByTagName('section');
// initial branch and tree
var myTree = new tree();
var branch1 = new branch('branch1','Navigation Folder');
// branch and leaf id start points
var id = 0;
var m_id = 100;
var s_id = 500;
var sec_id = 750;
// initial node values
var nodeGroup = g[0].firstChild;
var nodeManual = x[0].firstChild;
//var nodeSubManual = s[0].firstChild;
var nodeSection = m[0].firstChild;
// counters
var counter = 1;
var manualCounter = 0;
var groupCounter = 0;
var subManualCounter = 0;
var sectionCounter = 0;
var ml_loop = 0;
var sml_loop = 0;
var sec_loop = 0;
var counter_nm = 0;
var counter_nsm = 0;
var counter_nsec = 0;
// length holders
var gl = g.length;
var ml = x.length -1;
//var sl = s.length -1;
var cl = m.length -1;
var bool = true;
var nodeHolder;
// Group Loop
for (r=0;r<gl;r++)
{
branch2 = new branch(id,nodeGroup.data);
nodeGroup = g[counter].firstChild;
if (counter < gl-1) counter ++;
ml_loop = g[manualCounter].childNodes.length-1;
// Manual Loop
for(j=0;j<ml_loop;j++)
{
branch3 = new branch(m_id,nodeManual.data);
branch2.add(branch3);
m_id++;
if (counter_nm < ml)counter_nm ++;
nodeManual = x[counter_nm].firstChild;
//leaf loop
sec_loop = x[sectionCounter].childNodes.length-1;
if(sec_loop > 0)
{
for(p=0;p<sec_loop;p++)
{
branch3.add( new leaf(nodeSection.data, "http://www.yahoo.com"));
if (counter_nsec < cl)counter_nsec ++;
nodeSection = m[counter_nsec].firstChild;
}
}
if(sectionCounter < ml) sectionCounter ++;
}
branch1.add(branch2);
id ++;
if(manualCounter < gl)
manualCounter ++;
groupCounter ++;
}
myTree.add(branch1);
myTree.write();
}
</script>
</head>
<body bgColor=Red>
<script language="JavaScript">
main();
</script>
</body>
</html>
The XML DB doc:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<Manuals>
<Group>Currency Lists
<Manual>Currency000
<section>Section000
<link>B737_MEL/Section_00.pdf</link>
</section>
</Manual>
<Manual>Currency111
<section>Section111
<link>B737_MEL/Section_00.pdf</link>
</section>
<section>Section222
<link>B737_MEL/Section_00.pdf</link>
</section>
</Manual>
<Manual>Currency222
</Manual>
</Group>
<Group>General
<Manual>Aircraft Loading
</Manual>
<Manual>Compliance Statement
<section>Section_119
<link>B737_MEL/Section_00.pdf</link>
</section>
<section>Section_121
<link>B737_MEL/Section_00.pdf</link>
</section>
<section>Section_830
<link>B737_MEL/Section_00.pdf</link>
</section>
<section>Section_91
<link>B737_MEL/Section_00.pdf</link>
</section>
<section>Section_43
<link>B737_MEL/Section_00.pdf</link>
</section>
<section>Section_39
<link>B737_MEL/Section_00.pdf</link>
</section>
</Manual>
<Manual>Deice
</Manual>
<Manual>Operation Specification
</Manual>
<Manual>Technical Publications
</Manual>
</Group>
<Group>Flight Operations
<Manual>Flight Control
</Manual>
<Manual>General Operations
</Manual>
<Manual>Training
</Manual>
<Manual>B737 Manuals
</Manual>
</Group>
<Group>Maintenance
<Manual>DFDR System Maintenance Program
</Manual>
<Manual>General Maintenance
</Manual>
<Manual>RVSM System Maintenance Program
</Manual>
<Manual>Stockroom Program
</Manual>
<Manual>B 737 Manuals (CAMP)
</Manual>
<Manual>B 737 Manuals (CAMP Master Workcards)
</Manual>
<Manual>B 737 Manuals (Maintenance)
</Manual>
<Manual>Minimum Equipment List
</Manual>
<Manual>CMM
</Manual>
</Group>
<Group>Saftey
<Manual>Emergency Response Plan
</Manual>
<Manual>Internal Evaluation Program
</Manual>
<Manual>Safety
</Manual>
</Group>
<Group>CheckLists
</Group>
<Group>Handbooks
<Manual>Employee
</Manual>
<Manual>Emergency Preparedness
</Manual>
<Manual>Hazmat
</Manual>
</Group>
<Group>Links
<Manual>FAA
</Manual>
<Manual>SAI's
</Manual>
</Group>
<Group>Forms
</Group>
</Manuals>
XML I am trying to implement:
<Group>Currency Lists
<section>TEST
<link>B737_MEL/Section_00.pdf</link>
</section>
<Manual>Currency000
<section>Section000
<link>B737_MEL/Section_00.pdf</link>
</section>
</Manual>
<Manual>Currency111
<section>Section111
<link>B737_MEL/Section_00.pdf</link>
</section>
<section>Section222
<link>B737_MEL/Section_00.pdf</link>
</section>
</Manual>
<Manual>Currency222
</Manual>
</Group>