用XML和XSLT进行高级的Web UI设计（一）

编译:alpha2002创建目录树

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

下载例子代码

简介

XML和XSL/XSLT是当今越来越流行的一种数据处理技术。本文是系列文章的第一篇，介绍如何用XML和XSL/XSLT设计和创建目录树。后续的每一篇文章都将介绍如何用XML和XSL/XSLT设计和创建一个特定的高级Web

应用程序用户界面对象。

本文创建的目录树层次可以是无限制的。其建立机制是通过特定的XSL风格页将定义好的目录树XML文件转换成满足要求的HTML推送给客户端浏览器（IE5.5+）显示。客户端负责处理所有对目录的操作，如展开/收缩、最大化/最小化子目录和整个目录结点。

目录树结构介绍

与建立大多数Web页面对象一样，用XML/XSLT创建目录树的方法有很多，关键是确定目录树的结构，如图一是本文创建的一个目录树例子：

图一

嵌套的目录树结构

目录树中使用线条主要是为了有一个较好的可视化效果。但反过来会影响性能。有100个项的树大概要用300个图像来显示实体间的关系。尽管可以使用缓冲和预先加载，但在DOM中仍然犹如单个对象。不使用线条，而用简单的缩进可以说明父子之间的关系。本文中拟使用不带线条的树结构。

描述目录树结构的XML

文件

目录树的结构根据需要可以是多种多样的。XML为我们提供了无数的可能性来描述树型目录界面的结构。你所选择的格式直接影响XSL风格页的行为和客户的操作。本文所选则的目录树格式比较适用于XSL进行递归处理，它能很好地满足和实现无限深度的目录树的需要。

本文范例构造的XML文档包含一个根元素"tree"，这个根元素下只有一个元素"entity"。可以把它看成是目录树的一个节点，整个树的结构是通过在每一层的entity元素的"contents"子元素中嵌套的entity元素来实现的。下面是"entity"元素中包含的关键所有元素或属性的清单。

名称

类型

描述

id

属性

目录节点元素（entity）的id号，唯一标示一个节点

description

元素

显示给用户的文本，目录节点元素的描述

onClick

元素

客户端触发onClick事件的函数名

image

元素

当目录节点被关闭或出于非选中状态时要显示的图像

imageOpen

元素

当目录节点打开时显示的图像

contents

元素

包含目录节点元素，其内容用以确定目录节点元素是否有子元素