1349Chapter 52 .Application: Outline-Style Table of Contents One of the fine points of the design of this outline is the way space to the left of each entry is assembled. Unlike the earlier outlines in this chapter, this one displays vertical dotted lines connecting nodes at the same level. There isn t a vertical line for every clickable node appearing above the item, because a clickable node may have no additional siblings, meaning that the space is blank. To see what I mean, open the OPML example, and expand the Peas and Canned nodes (or see Figure 52-2). The Canned node is the end of the second column, so the space beneath the icon is blank. That s what some of the code in makeHTML()named prefix is dealing with: Accumulating just the right combination of dotted line (chain.gif) and blank (empty.gif) images in sequence before the outline entry. Another frequent construction throughout this function is a three-level conditional expression. This construction is used to determine whether the image just to the left of the item s text should be a start, middle, or end version of the image. The differences among them are subtle (having to do with how the vertical dotted line extends above or below the widgets). All of these decisions are made from information revealed by the inherent structure of the OPML element nesting. The listing in the book looks longer than it truly is because so many long or deeply nested lines must be wrapped to the next line. Viewing the actual file in your text editor should calm your fears a bit. // counters for reflexive calls to makeHTML() var currID = 0 var blockID = 0 // generate HTML for outline function makeHTML(outlineID, ol, prefix) { var output = var nestCount, link, nestPrefix prefix = (prefix) ? prefix : for (var i = 0; i < ol.childNodes.length ; i++) { nestCount = ol.childNodes[i].childNodes.length output +=
Wednesday, January 16th, 2008
1348 Part V . Putting JavaScript to Work the entire outline HTML to be assigned to the innerHTML property of the empty DIV element delivered with the document. // initialize first time function init(outlineID) { if (supportVerified(outlineID)) { // demo how to get outline head elements var hdr = document.getElementById(outlineID).getElementsByTagName( head )[0] // get outline body elements for iterative conversion to HTML var ol = document.getElementById(outlineID).getElementsByTagName( body )[0] // wrap whole outline HTML in a span var olHTML = + makeHTML(outlineID, ol) + // throw HTML into content DIV for display document.getElementById( content ).innerHTML = olHTML initExpand(outlineID) } } Validation of browser support is handled by the supportVerified() function. This function is in search of the XMLDocumentproperty of the XML element object. The property s presence indicates that the browser has what it takes to treat embedded XML as a data island. Incremental tests are needed so that earlier browsers don t choke on the reference to the property. // verify that browser supports XML islands function supportVerified(testID) { if (document.getElementById && document.getElementById(testID) && document.getElementById(testID).XMLDocument) { return true } else { var reply = confirm( This example requires a browser with XML data island support, such as IE5+/Windows. Go back to previous page? ) if (reply) { history.back() } else { return false } } return false } Accumulating the HTML From the init()function, a call to the makeHTML() function starts the most complex actions of the scripts on this page. This function walks the node hierarchy of the outline s BODY elements, deciphering which ones are containers and which ones are end points. Two global variables are used to keep track of how far the node walk progresses because this function calls itself from time to time to handle nested branches of the node tree. Because a reflexive call to a function starts out with new values for local variables, the globals operate as pointers to let statements in the function know which node is being accessed. The numbers get applied to an ID attribute assigned to the DIV elements holding the content.
You need excellent and relaible webhost company to host your web applications? Then pay a visit to Inexpensive Web Hosting services.
Tuesday, January 15th, 2008
1347Chapter 52 .Application: Outline-Style Table of Contents Also, go back to the top of the document to see the style sheets, which have an important place in delivering an XML island:
To prevent the XML block from rendering on the page, the displaystyle property is set to nonefor the XML tag selector. This keeps the page clear for insertion of script-generated HTML. The other style sheet rules apply to content created by the scripts. Setting the scripted stage All scripts for this page are in the HEAD (although they could also be linked in from an external .js file). First on the docket is establishing several global variables that get used a lot within the rest of the code and make it easy to customize important visible properties, especially widget art. Due to the art choices made for this version, there are separate versions for items that appear as first, middle, and end items for different nesting states.