使用XML和XSL进行高级的Web UI设计（七）
编译：alpha2002
创建具有相关层次线条的树形目录
本文要求读者熟悉JScript，MSXML，XSL/XSLT，DOM。
本文的实例代码下载 xmldtree_7.zip
第一篇：使用XML和XSL进行高级的Web UI设计--创建目录树
第二篇：使用XML和XSL进行高级的Web UI设计--定制目录树的上下文菜单
第三篇：使用XML和XSL进行高级的Web UI设计--目录树的管理
第四篇：使用XML和XSL进行高级的Web UI设计--目录树节点的拖放操作
第五篇：使用XML和XSL进行高级的Web UI设计--创建进程条指示器
第六篇：使用XML和XSL进行高级的Web UI设计--创建进程条指示器的实际应用
概述
本文是这一系列文章的第七篇，主要介绍如何在树形目录中添加表示层次关系的线条。使得树形目录界面可读性更好，父子节点的关系也更加清晰。主要缺点是需要处理更多的对象，同时页面上需要显示更多的图像。所幸的是浏览器加载页面文件的时间开销没有多大的变化。如图一所示，这是本文代码例子的运行画面：
图一 目录树的关系层次
目录树的整体结构还是与前面文章中的一样，需要修改的只是树形结构的XSLT式样文件以及客户端的脚本。也就是第一篇文章中的tree.xslt和tree.js两个文件。下面就让我们来看看需要做什么样的修改。
修改 XSLT 式样文件
实际上，表示层次关系的线条是在XSL绘制的。在式样文件中有两个地方需要修改，首先是要在节点图标的前面多加一个表格单元，这个表格单元专门用来根据展开和收缩节点的状态显示"+/-"小图像。如图二所示：
图二 在节点表格添加表格单元
其次是在所添加的表格单元中绑定"hierarchy"模板，此模板的脚本代码如下：
<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>
这个模板的关键部分是处理父子关系节点的图像显示。用"xsl:for-each"遍历所有其祖先不是"contents"的节点，也就是说只处理entity元素，排除其子contents元素。目的是如果entity元素的祖先有子节点，则显示图像"|"，否则显示图像空图像（blank）。
此模板接着实现一个"xsl:when"检查某个entity的contents元素中的子节点数，如果有子节点，则显示"L plus"图像，或者"Tplus"图像。其它的几种表示线条层次关系的图像还有"T"、"L"、"L minus"、"T minus"。它们分别在不同的"xsl:when"控制中处理。细节请参考例子代码。
修改客户端
客户端的脚本代码只有一个地方需要修改，既展开（expand）和收缩（collapse）方法的代码。如图三所示：
图三 断点表示的是在tree.js中新添加的脚本代码
从图中可以看出，客户端的改动不大，无非就是判断收缩或者展开状态来引用entity的"+"或者"-"。
尾声
从这篇系列文章所讨论的内容可以看出，XSLT 和XML绝对是一个很吸引人的技术，只要花不太多的时间便可以实现一些很有实用价值的应用。其主要特点表现在使用这个技术设计的Web UI具有良好的灵活性、伸缩性和可维护性。当然XML/XSLT不仅仅应用于用户界面的设计，众所周知，其最重要的应用是目前正红火的Web Service，还有大型系统集成中的数据交换领域。希望这一系列文章能够抛砖引玉，引领有兴趣的朋友踏入XML/XSLT的应用天地。由于本人
的英文水平以及文字表达能力所限，加之时间仓促，文中出现的谬误肯定不少，为此敬请读者多加批评指正。谢谢！
（全文完）
