Browse DevX
Sign up for e-mail newsletters from DevX


Build an XML-based Tree Control with JavaScript : Page 2

Tree controls provide a hierarchical view of data and XML provides a way to structure data hierarchically, so viewing XML data as a tree structure is a natural fit. But browsers don't provide a tree control. Instead, use this mix of XML, XSLT, JavaScript, and CSS to produce an extensible HTML tree control.




Building the Right Environment to Support AI, Machine Learning and Deep Learning

Getting Started
Initially, I set about designing a JavaScript-only solution and immediately ran into problems. While N7 parses XML according to the W3C's DOM, IE uses a proprietary ActiveX-based parser to parse XML documents. It felt like I was traveling backward in time when developers had to support different flavors of the major browsers—each with its own DOM. Rather than build a script for each browser, I decided to attack the problem from a different level.

The problem was really pretty simple. I wanted to take an XML representation of a tree and transform it into an HTML representation. Transformation was the key! One XML technology—XSLT (Extensible Stylesheet Language Transformations)—is perfect for this task. To provide an XSLT implementation you must include a number of different components in the solution:

  • the source XML document
  • an XSLT stylesheet to perform the transformation to HTML
  • a CSS stylesheet to control the look of elements in the browser
  • a JavaScript file to make the rendered control interactive
Although you have more files to manage, the modularity helps to make the code both maintainable and extensible. And both major browsers support XSLT!

Create an XML Grammar
For this solution to work properly, you have to accept some limitations on the content in the XML document. I'll start by writing a Document Type Definition (DTD). DTDs define the content model for instances of the document type. Including a DTD makes it easier to create the XSLT file. Any document that adheres to the DTD can then be transformed by the same stylesheet. That way, should you choose to change the view of the data, you'll only need to modify the stylesheet—not each document instance. Open your favorite text editor and enter the following:

<!ELEMENT tree (branch+)> <!ELEMENT branch (branchText,(branch|leaf)*)> <!ATTLIST branch id CDATA #REQUIRED> <!ELEMENT branchText (#PCDATA)> <!ELEMENT leaf (leafText,link)> <!ELEMENT leafText (#PCDATA)> <!ELEMENT link (#PCDATA)>

Save the file as tree.dtd.

The DTD specifies that <tree> elements must contain 1 or more <branch> elements (the '+' indicates 'one or more'). Each <branch> element must contain a single, required <branchText> element as the first child and then zero or more of either <branch> elements or <leaf> elements (the '*' indicates 'zero or more' and the '|' indicates 'or'). In addition, all <branch> elements must have an id attribute. The DTD defines the <branchText> element as containing PCDATA—parsed character data. PCDATA is plain text that adheres to the rules for writing well-formed XML. The PCDATA also specifies that the element will contain no child elements. <leaf> elements contain one each of <leafText> and <link> elements, in that order (the ',' indicates 'and' and 'in order'). The <leafText> and <link> elements also contain PCDATA, so they can't have any child elements either.

Create an XML Source Document
In most cases, it's easier to understand the XML grammar by looking at a document instance. Grab a new file and enter the following XML:

<?xml version="1.0" ?> <tree> <branch id="html"> <branchText>HTML</branchText> <leaf> <leafText>Tags, Tags, Tags</leafText> <link>#</link> </leaf> <leaf> <leafText>Hyperlinks</leafText> <link>#</link> </leaf> <leaf> <leafText>Images</leafText> <link>#</link> </leaf> <leaf> <leafText>Tables</leafText> <link>#</link> </leaf> <leaf> <leafText>Forms</leafText> <link>#</link> </leaf> </branch> <branch id="css"> <branchText>CSS</branchText> <leaf> <leafText>Inline Styles</leafText> <link>#</link> </leaf> <leaf> <leafText>Document Wide Styles</leafText> <link>#</link> </leaf> <leaf> <leafText>External Style Sheets</leafText> <link>#</link> </leaf> <leaf> <leafText>Formatting Text</leafText> <link>#</link> </leaf> <leaf> <leafText>Positioning Text</leafText> <link>#</link> </leaf> </branch> <branch id="javascript"> <branchText>JavaScript</branchText> <leaf> <leafText>The Basics</leafText> <link>#</link> </leaf> <leaf> <leafText>Working with Images</leafText> <link>#</link> </leaf> <leaf> <leafText>Controlling Frames</leafText> <link>#</link> </leaf> <leaf> <leafText>Browser Windows</leafText> <link>#</link> </leaf> <leaf> <leafText>Form Validation</leafText> <link>#</link> </leaf> <leaf> <leafText>Handling Events</leafText> <link>#</link> </leaf> </branch> <branch id="dhtml"> <branchText>DHTML</branchText> <leaf> <leafText>Object Detection</leafText> <link>#</link> </leaf> <branch id="animation"> <branchText>Animation</branchText> <leaf> <leafText>Path Animation</leafText> <link>#</link> </leaf> <leaf> <leafText> Point To Point Animation</leafText> <link>#</link> </leaf> </branch> <leaf> <leafText>Menus</leafText> <link>#</link> </leaf> <leaf> <leafText>Tabbed User Interface</leafText> <link>#</link> </leaf> <leaf> <leafText>Trees</leafText> <link>#</link> </leaf> </branch> </tree>

Save the file as tree.xml. The preceding file is called an instance of the tree DTD because it adheres to the grammar specified in the DTD. To validate the document—that is, to make sure that it adheres to the grammar—add a DOCTYPE declaration to the document just beneath the <?xml version="1.0"?> prolog:

<!DOCTYPE tree SYSTEM 'tree.dtd'>

You'll need a validating parser to validate the document. I've been working on an XML editor, written in Java, which includes validation services. You can download the editor here.

JXEd is freeware but, be warned; it is a work in progress. To validate documents in JXEd, open the file and choose Validate from the Tools menu.

It's important to validate your XML documents so that no errors will occur when the transformation is applied.

Thanks for your registration, follow us on our social networks to keep up-to-date