|
Introduction
Welcome to Advanced UI Design Using XML and XSL. Each article in my series will demonstrate the creation of a specific user interface (UI) component using eXtensible Markup Language (XML) and eXtensible Stylesheet Language (XSL).
This article expands on a previous article in this series, Folder Tree Creation (see http://www.15seconds.com/issue/010921.htm). The Folder Tree discussed in this article displays commonly found relational lines from parent to child entities.
Changes to the tree
Overview
Relational lines make a tree structure easier to read by clearly specifying the relationship between parent and child. While potential drawbacks of having many images and objects on the page exist, there should be no real concern with medium loads. Figure 1 shows these new lines in the folder tree.
Figure 1. Relational Folder Tree Lines.
All changes to accommodate relational lines take place within the XSLT style-sheet and client-side JavaScript. For those already using the tree, you need only to update the "tree.js" and "tree.xslt" files found within the first article. The next two sections of this article will outline the major changes.
XSLT Changes
The actual lines are drawn out within the XSL style-sheet. The changes require two additions. The first addition is an extra table cell in front of an entities icon, which will contain a plus or minus image depending on the state of the entity. Figure 2 below this new table cell within the root table.
Figure 2. Additional cell within the entities table.
The second change is the addition of the "hierarchy" template. This template is displayed below.
<xsl:template name="hierarchy">
<xsl:for-each select="ancestor::*[name() != contents]">
<xsl:choose>
<xsl:when test="following-sibling::node()">
<img src="images/I.png"/>
</xsl:when>
<xsl:otherwise>
<img src="images/blank.png"/>
</xsl:otherwise>
</xsl:choose>
</xsl:for-each>
<xsl:choose>
<xsl:when test="count(contents/*) > 0">
<xsl:choose>
<xsl:when test="following-sibling::node()">
<img src="images/Tplus.png" _open="images/Tminus.png" _closed="images/Tplus.png">
<xsl:attribute name="ID">stateImagef<xsl:value-of select="@id"/></xsl:attribute>
</img>
</xsl:when>
<xsl:otherwise>
<img src="images/Lplus.png" _open="images/Lminus.png" _closed="images/Lplus.png">
<xsl:attribute name="ID">stateImagef<xsl:value-of select="@id"/></xsl:attribute>
</img>
</xsl:otherwise>
</xsl:choose>
</xsl:when>
<xsl:otherwise>
<xsl:choose>
<xsl:when test="following-sibling::node()">
<img src="images/T.png"/>
</xsl:when>
<xsl:otherwise>
<img src="images/L.png"/>
</xsl:otherwise>
</xsl:choose>
</xsl:otherwise>
</xsl:choose>
</xsl:template>
This template references the following images, which are discussed in the next few paragraphs.
This template begins a descent through all of the current entities ancestors by calling an "xsl:for-each" that selects all ancestors whose names are not equal to "contents". This means only "entity" elements are processed, excluding their child contents elements. The purpose of this descent is to draw either a "|" straight line image if the entity's ancestor has sibling nodes or a blank image if the ancestor has no sibling nodes.
The template then performs another "xsl:when" that checks the number of child elements within an entity's content element. If the element has children, it then draws either an "L" plus or "T" plus image. These letters indicate the basic shape of the line, "L" is a formation from parent to child flowing from top to bottom, left to right. "T", when rotated 90 degrees counter-clockwise, shows the relationship from parent to current node and to the following sibling of the parent, again reading from top to bottom, left to right.
The style-sheet performs one last "xsl:when" that checks for following siblings. If siblings are found, a "T" image is drawn so that a "|" straight vertical line image will fit perfectly into place. If the entity does not have children, it draws an "L" image, showing that there are no siblings of the immediate parent.
Client Changes
The only changes to the client code take place within the expand and collapse methods. No lines were changed or removed, only added. The lines added are targeted in figure 3 below by breakpoints within InterDev.
Figure 3. Additional lines to "tree.js".
Each method simply creates a reference, called "oImage", to the entity's plus or minus image. Depending on whether a collapse or expand routine is being performed, the tree then applies either an open or closed image,.
Demo & Download
Folder Tree Relational Lines Demo
Folder Tree Relational Lines Code
Conclusion
We can clearly see the benefits of taking advantage of XSLT and XML within an applications client tier by studying the small amount of and precise changes required to implement relational lines within this tree. Prime among these benefits are flexibility, scalability and maintainability.
Closing
I hope the contents of this article will help increase the quality of your Web applications. If you have any questions, comments, suggestions or requests please feel free to email me at the address listed in the author section.
In addition, I'd like to send special thanks Phil Carrillo for doing an excellent job in creating the original "hierarchy" xslt template. Thanks Phil, the logic was concrete, and with very small modifications and a half an hour, I was able to integrate it into this tree.
Other Articles in This Series
Advanced UI Design
Part 1 - Folder Tree Creation
http://www.15seconds.com/issue/010921.htm
Part 2 -- Custom Context Menu Creation
http://www.15seconds.com/issue/010927.htm
Part 3 -- Folder Tree Administration
http://www.15seconds.com/issue/011113.htm
Part 4 - Folder Tree Drag and Drop
http://www.15seconds.com/issue/011129.htm
Part 5 - Progress Indicator Creation
http://www.15seconds.com/issue/011212.htm
Part 6 -- Progress Indicator Usage
http://www.15seconds.com/issue/020109.htm
About the Author
Joe Slovinski has been programming Web applications since 1993. For more information on the code in this article, contact the Joe Slovinski.
|
