使用XML和XSL进行高级的Web UI设计（七）

使用XML和XSL进行高级的Web UI设计（七）


编译：

创建具有相关层次线条的树形目录

本文要求读者熟悉JScript，MSXML，XSL/XSLT，DOM。

本文的实例代码下载

第一篇：使用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"模板，此模板的脚本代码如下：

  

    

      

        

      

      

        

      

    

  

  

    

      

        

          

            stateImagef

          

        

        

          

            stateImagef

          

        

      

    

    

      

        

          

        

        

          

        

      

    

  

     

这个模板的关键部分是处理父子关系节点的图像显示。用"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的应用天地。由于本人 的英文水平以及文字表达能力所限，加之时间仓促，文中出现的谬误肯定不少，为此敬请读者多加批评指正。谢谢！ （全文完）