使用XML和XSL进行高级的Web UI设计（六）
编译：alpha2002
创建进程条指示器的实际应用
本文要求读者熟悉JScript，MSXML，XSL/XSLT，DOM。
本文的实例代码下载 xmldtree_6.zip
第一篇：使用XML和XSL进行高级的Web UI设计--创建目录树
第二篇：使用XML和XSL进行高级的Web UI设计--定制目录树的上下文菜单
第三篇：使用XML和XSL进行高级的Web UI设计--目录树的管理
第四篇：使用XML和XSL进行高级的Web UI设计--目录树节点的拖放操作
第五篇：使用XML和XSL进行高级的Web UI设计--创建进程条指示器
概述
本文是这一系列文章的第六篇，主要介绍一个实际的XML/XSLT进程条指示器的应用例子--在数据绑定表格（Data-Bound Table）中使用Progress
Indicator。如图所示：
图一 用进程条指示器显示数据绑定状态
如上图所示，进程条指示器被用于显示数据被绑定到Table的状态过程。这些数据来自一个XML文件，而XML文件是从数据库生成的。
设置进程条指示器
进程条指示器的设置是在客户端的脚本中进行的，具体代码如下：
var progressIndicator1;
function init()
{
progressIndicator1 = new ProgressIndicator();
progressIndicator1.xmlDoc = "ProgressIndicator/ProgressIndicator.xml";
progressIndicator1.xslDoc = "ProgressIndicator/ProgressIndicator.xslt";
progressIndicator1.target = progressIndicator;
progressIndicator1.init();
dataTable.dataSrc = "#SourcesData";
updateDataBindProgress();
}
function updateDataBindProgress()
{
var percent;
percent=Math.round((dataTable.rows.length-1)/SourcesData.documentElement.childNodes.length * 100 );
progressIndicator1.update(percent);
if(percent != 100)
{
setTimeout("updateDataBindProgress()", 100);
dataTableCount.innerText = dataTable.rows.length-1 + " rows";
}
else
{
dataTableStatus.innerText = "完成.";
dataTableCount.innerText = dataTable.rows.length-1 + " rows";
}
}
从上面的脚本代码中可以看出，首先要在init()函数中创建进程条指示器实例，然后再调用进程条指示器实例初始化方法init()。其次，不要忘了设置table元素的属性dataSrc，设置了这个属性后便开始了数据绑定的处理过程，接着马上调用updateDataBindProgress()方法更新绑定状态。这个方法每100毫秒进行一次回归调用并更新客户端，直到所有的记录被加载。
关于XML数据文件
本文显示的数据是从数据库中吸取，生成XML数据文件，以数据岛的形式嵌入HTML文件。然后利用XSLT式样定制输出。下面是本文所用的XML数据文件：
XML数据文件source.xml
Source.xml文件中的每一个元素都可以作为绑定数据的列。但一般在进行实际的显示处理时只选择择部分元素灌入页面的table表格中。下面是容纳数据的table表格设计：
|
End |
注意DIV 标记的DATAFLD属性的作用是指定在每一列中显示哪个元素。在设置DATAFLD属性时，名称和大小写必须要与数据岛中相应的字段名一致。
另外，进程条指示器还可以用来对调查结果进行图形/图表显示，例如：
图二 显示调查结果
利用进程条指示器显示调查结果时，在客户端用如下的脚本便可以完成进程条指示器的设置：
var percentYes;
var percentNo;
function init()
{
percentYes = new ProgressIndicator();
percentNo = new ProgressIndicator();
percentYes.xmlDoc = "ProgressIndicator/ProgressIndicatorGreen.xml";
percentNo.xmlDoc = "ProgressIndicator/ProgressIndicatorRed.xml";
percentYes.xslDoc = "ProgressIndicator/ProgressIndicator.xslt";
percentNo.xslDoc = "ProgressIndicator/ProgressIndicator.xslt";
percentYes.target = percentYesContainer;
percentNo.target = percentNoContainer;
percentYes.init();
percentNo.init();
percentYes.update(99);
percentNo.update(1);
}
从上面的脚本代码可以看出，创建一个简单的"Yes/No"调查，只要声明两个变量：这里为percentYes和percentNo，它们被初始化为ProgressIndicator()对象。然后设置进程条指示器使用的XML和XSLT文件。你会注意到percentYes对象指向的文件是ProgressIndicatorGreen.xml，而percentNo对象指向的文件是ProgressIndicatorRed.xml。正是利用这两个文件，进程条指示器才能初始化颜色显示的百分比并处理两个颜色指示棒。其它处理细节与前面所讲的基本上相同。详情请考源代码。
我想，通过上面的例子和说明，进程条指示器的优点不言而喻，用进程条指示器可以增强程序的可用性。使程序的运行状态一目了然，对于需要长时间处理的运算程序来说，它不断反映运行状态，从而增强了用户界面的友好性。因此在Web UI编程领域，进程条指示器不失为一种非常可取的实用技术。（待续）