使用XML和XSL进行高级的Web UI设计（五）
编译：alpha2002
创建进程条指示器
本文要求读者熟悉JScript，MSXML，XSL/XSLT，DOM。
下载例子代码
第一篇：使用XML和XSL进行高级的Web UI设计--创建目录树
第二篇：使用XML和XSL进行高级的Web UI设计--定制目录树的上下文菜单
第三篇：使用XML和XSL进行高级的Web UI设计--目录树的管理
第四篇：使用XML和XSL进行高级的Web UI设计--目录树节点的拖放操作
本文是这一系列文章的第五篇，主要介绍XML/XSLT进程条指示器对象的创建，如图所示：
图一 运行中进程条指示器
简介
Web程序中使用进程条指示器对象的场合非常多，比如：数据绑定、图像的预加载、图表和图形等等。总之只要是要显示某个操作进展状态，一般都可以用进程条指示器的UI界面。
进程条指示器的控制
进程条指示器的主要控制都在客户端进行。并且要求浏览器为IE5.5+。下面是进程条指示器对象的主控函数原型：
function ProgressIndicator()
{
this.xmlDoc = null;
this.xslDoc = null;
this.target = null;
this.init = ProgressIndicator_init;
this.refresh = ProgressIndicator_refresh;
this.update = ProgressIndicator_update;
this.xmlObj = new ActiveXObject(''MSXML2.DOMDocument'');
this.xmlObj.async = false;
this.xslObj = new ActiveXObject(''MSXML2.DOMDocument'');
this.xslObj.async = false;
}
下面是与进程条指示器对象有关的属性和方法调用：
属性：
xmlDoc —— xmlDoc 属性指XML文档对象模型中XML文档的路径。这个文件是一个XML文档。
xslDoc —— xslDoc 属性指XML文档对象模型中XSLT文档的路径。这个文件是一个XSLT文档。
target —— target 属性指对进程条指示器对象的引用。用它进行对象的初始化。
xmlObj —— xmlObj 属性指对XML文档文件解析器的引用，主要对XML结构文件进行解析。
xslObj —— xslObj 属性指对XML文档文件解析器的引用，它是一个式样控制文件。利用它对进程条指示器的显示进行控制。
方法：
init()
定义：
function ProgressIndicator_init()
{
this.xmlObj.load(this.xmlDoc);
this.xslObj.load(this.xslDoc);
this.refresh();
}
此方法用于初始化进程条指示器。
refresh()
定义：
function ProgressIndicator_refresh()
{
this.target.innerHTML = this.xmlObj.documentElement.transformNode(this.xslObj);
}
此方法将XSLT式样页应用到XML结构文件并将利用innerHTML显示转换结果。
update()
定义：
function ProgressIndicator_update(percent)
{
this.percentComplete = percent;
this.xmlObj.documentElement.selectSingleNode("percentComplete").text = this.percentComplete;
this.refresh();
}
此方法接收一个整型数字表示进程条的百分比，然后设置进程条指示器对象的percentComplete属性，从而更新XML文件。XML文件反映这个百分比，调用refresh方法对浏览器实现新的转换和更新。
XML 结构文件
下面是实现进程条指示器的XML结构文件：
此文件定义了进程条指示器的式样和缺省的进程条百分比。
XSLT文件
下面是XSLT式样文件，在进行初始化和更新操作时，应用此文件决定XML文档的输出显示式样。
xmlns:dt="urn:schemas-microsoft-com:datatypes"> border-top: border-left: border-bottom: border-right: height: width: background-color: color: font-family: arial; font-size: 11px; font-weight: bold; width:
background-color: color: font-family: arial; font-size: 11px; font-weight: bold; width:
此式样页创建一个有两个单元的表格（Table）。当百分比从0升到50期间，将百分比标签（包含在一个HTML"SPAN"元素中）的位置从右边单元转换到左边单元。此文件中还包含了进程条从左到右变更的计算公式。
本文提供的进程条指示器范例每秒更新步进为百分之十。在实际应用时，可以用相应的算法将数据绑定到某个表格（table）来控制操作。这就是下一篇文章将要介绍的内容。(待续)