📄 implementation.html
字号:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><title>XLoadTree Implementation (WebFX)</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="text/javascript" src="webfxlayout.local.js"></script></head><body><!-- WebFX Layout Include --><script type="text/javascript">var articleMenu= new WebFXMenu;articleMenu.left = 384;articleMenu.top = 86;articleMenu.width = 140;articleMenu.add(new WebFXMenuItem("Introduction", "xloadtree.html"));articleMenu.add(new WebFXMenuItem("Usage", "usage.html"));articleMenu.add(new WebFXMenuItem("API", "api.html"));articleMenu.add(new WebFXMenuItem("Implementation", "implementation.html"));articleMenu.add(new WebFXMenuItem("Demo", "demo.html"));articleMenu.add(new WebFXMenuSeparator);articleMenu.add(new WebFXMenuItem("Download", "http://webfx.eae.net/download/xloadtree111.zip"));webfxMenuBar.add(new WebFXMenuButton("Article Menu", null, null, articleMenu));webfxLayout.writeTitle("XLoadTree");webfxLayout.writeMenu();webfxLayout.writeDesignedByEdger();</script><div class="webfx-main-body"><!-- end WebFX Layout Includes --><h2>Implementation</h2><p>The main idea is to create sub classes to <code>WebFXTree</code> and<code>WebFXTreeItem</code> and overload the <code>expand</code> methodsto start the loading of an xml file. Once the loading is done the xml fileis tranformed into <code>WebFXTreeItem</code>s and <code>WebFXLoadTreeItem</code>sand inserted.</p><h2>WebFXLoadTree</h2><p>First we create a new constructor and inside this we call the super constructorto make sure that the instance will be correctly initiated. After that we set someproperty values and finally we check whether the tree is open, if it is we start toload the sub trees. If not, we add a dummy tree item that displays the loadingtext.</p><p>After the constructor is created we set the protype to a new<code>WebFXTree</code>.</p><pre>function WebFXLoadTree(sText, sXmlSrc, sAction, sBehavior, sIcon, sOpenIcon) { // call super this.WebFXTree = WebFXTree; this.WebFXTree(sText, sAction, sBehavior, sIcon, sOpenIcon); // setup default property values this.src = sXmlSrc; this.loading = false; this.loaded = false; this.errorText = ""; // check start state and load if open if (this.open) _startLoadXmlTree(this.src, this); else { // and create loading item if not this._loadingItem = new WebFXTreeItem(webFXTreeConfig.loadingText); this.add(this._loadingItem); }}WebFXLoadTree.prototype = new WebFXTree;</pre><p>The constructor is fairly straight forward and does not do much. Notice howeverhow super is called by binding <code>WebFXTree</code> as a method and thencalling it.</p><p>Next we need to override the <code>expand</code> method but since we still needto be able to call the original <code>expand</code> method we create a new methodcalled <code>_webfxtree_expand</code> that points to the function object usedby <code>WebFXTree</code> objects. This is the standard way to access super methodsbut the first few times it might look a bit odd.</p><p>The logic in the <code>expand</code> method is really simple. We just check ifwe should start loading the xml file and then we expand it using the superexpand (<code>_webfxtree_expand</code>) method.</p><pre>// override the expand method to load the xml fileWebFXLoadTree.prototype._webfxtree_expand = WebFXTree.prototype.expand;WebFXLoadTree.prototype.expand = function() { if (!this.loaded && !this.loading) { // load _startLoadXmlTree(this.src, this); } this._webfxtree_expand();};</pre><h2>WebFXLoadTreeItem</h2><p>This class is too similar to <code>WebFXLoadTree</code> for me to be entirelycomfortable. Since JavaScript does not support multiple inheritance, and I didnot want to fake it using expandos, we just have to repeat the code. For everyonethat are interested, the code for this can be found in<a href="xloadtree.js">xloadtree.js</a>.</p><h2>Loading the Tree</h2><p>As you can see in the code above there is a function called<code>_startLoadXmlTree</code> that is called to load the actual xml file. This function usesan <code>XmlHttp</code> object to do the actual loading. The loading of the xmlfile is done asynchronously to prevent the UI to lock up while the file isbeing loaded and therefore we wait for the <code>onreadystatechange</code>event to fire before we continue. See the<a href="/dhtml/xmlextras/xmlextras.html">Xml Extras article</a> for a more detaileddescription about the <code>XmlHttp</code> object.</p><pre>// creates the xmlhttp object and starts the load of the xml documentfunction _startLoadXmlTree(sSrc, jsNode) { jsNode.loading = true; var xmlHttp = XmlHttp.create(); xmlHttp.open("GET", sSrc, true); // async xmlHttp.onreadystatechange = function () { if (xmlHttp.readyState == 4) _xmlFileLoaded(xmlHttp.responseXML, jsNode); }; // call in new thread to allow ui to update window.setTimeout(function () { xmlHttp.send(null); }, 10);}</pre><p>Once the xml file has finished loading we call the function <code>_xmlFileLoaded</code>.This function checks that we got an xml document back and if we did it goes through thedocument and recursively converts the xml elements to js <code>WebFXTreeItem</code> andinserts them. Once the xml elements have been converted and inserted we remove thedummy tree item that was only used to show that we were loading the contents.</p><pre>// Inserts an xml document as a subtree to the provided nodefunction _xmlFileLoaded(oXmlDoc, jsParentNode) { var bIndent = false; var bAnyChildren = false; jsParentNode.loaded = true; jsParentNode.loading = false; // check that the load of the xml file went well if( oXmlDoc == null || oXmlDoc.documentElement == null) { jsParentNode.errorText = parseTemplateString(webFXTreeConfig.loadErrorTextTemplate, jsParentNode.src); } else { // there is one extra level of tree elements var root = oXmlDoc.documentElement; // loop through all tree children var cs = root.childNodes; var l = cs.length; for (var i = 0; i < l; i++) { if (cs[i].tagName == "tree") { bAnyChildren = true; bIndent = true; jsParentNode.add( _xmlTreeToJsTree(cs[i]), true); } } // if no children we got an error if (!bAnyChildren) jsParentNode.errorText = parseTemplateString(webFXTreeConfig.emptyErrorTextTemplate, jsParentNode.src); } // remove dummy if (jsParentNode._loadingItem != null) { jsParentNode._loadingItem.remove(); bIndent = true; } if (bIndent) { // indent now that all items are added jsParentNode.indent(); } // show error in status bar if (jsParentNode.errorText != "") window.status = jsParentNode.errorText;}</pre><p>A few more things happen in this function but nothing really important. There is somecode that checks the errors and a few properties are set to reflect the state of the<code>WebFXLoadTree</code> or <code>WebFXLoadTreeItem</code> object.</p><h2>Converting the Xml</h2><p>The only important thing left to do is to convert the xml tree item to a js<code>WebFXTreeItem</code>. This is done in the function <code>_xmlTreeToJsTree</code>.Here we retreive the xml attributes and if there was a <code>src</code> attributedefined we create a new <code>WebFXLoadTreeItem</code> and otherwise a<code>WebFXTreeItem</code>. Once that is created we go through all the<code>childNodes</code> of the xml node and convert and add those as well.</p><pre>// Converts an xml tree to a js tree. See article about xml tree formatfunction _xmlTreeToJsTree(oNode) { // retreive attributes var text = oNode.getAttribute("text"); var action = oNode.getAttribute("action"); var parent = null; var icon = oNode.getAttribute("icon"); var openIcon = oNode.getAttribute("openIcon"); var src = oNode.getAttribute("src"); // create jsNode var jsNode; if (src != null && src != "") jsNode = new WebFXLoadTreeItem(text, src, action, parent, icon, openIcon); else jsNode = new WebFXTreeItem(text, action, parent, icon, openIcon); // go through childNOdes var cs = oNode.childNodes; var l = cs.length; for (var i = 0; i < l; i++) { if (cs[i].tagName == "tree") jsNode.add( _xmlTreeToJsTree(cs[i]), true ); } return jsNode;}</pre><p><a href="xloadtree.html">Introduction</a><br /><a href="usage.html">Usage</a><br /><a href="api.html">API</a><br /><a href="implementation.html">Implementation</a><br /><a href="demo.html">Demo</a><br /><a href="http://webfx.eae.net/download/xloadtree111.zip">Download</a></p><p class="author">Author: Erik Arvidsson</p><!-- end webfx-main-body --></div></body></html>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -