使用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数据文件：
<sourcecode>
<pathname>network</pathname>
<filename>php-4-0RC2.tar.gz</filename>
<title>PHP4.0脚本语言源代码</title>
<keyword>php4,sourcecode,源代码,原代码,脚本语言</keyword>
<introduce>PHP是一种HTML内嵌式脚本语言,类似于IIS上运行的ASP，本源代码包含CGI ISAPI模块，提供MySQL支持。</introduce>
<lastdate>2000-5-20 0:51:12</lastdate>
<classname>sourcecode</classname>
<id>1</id>
</sourcecode>
<sourcecode>
<pathname>network</pathname>
<filename>HTTPSVR.zip</filename>
<title>HTTP服务器源代码</title>
<keyword>http server,www服务器,源代码,sourcecode</keyword>
<introduce>MSDN中的HTTP服务器程序非常具有参考价值。</introduce>
<lastdate>2000-5-28 20:03:59</lastdate>
<classname>sourcecode</classname>
<id>2</id>
</sourcecode>
<sourcecode>
<pathname>multimedia</pathname>
<filename>microsecond_delay.zip</filename>
<title>产生毫秒级延时</title>
<keyword>毫秒级时钟,millisecond clock</keyword>
<introduce>这是一个产生产生毫秒级时钟延时的程序.</introduce>
<lastdate>2000-5-31 13:11:04</lastdate>
<classname>sourcecode</classname>
<id>4</id>
</sourcecode>
XML数据文件source.xml
Source.xml文件中的每一个元素都可以作为绑定数据的列。但一般在进行实际的显示处理时只选择择部分元素灌入页面的table表格中。下面是容纳数据的table表格设计：
<TABLE ID="dataTable" BORDER="0" CELLSPACING="0" CELLPADDING="2">
<TBODY>
<TR>
<TD CLASS="dataValue">
<DIV DATAFLD="id" STYLE="width: 30px; overflow: hidden;" NOWRAP="true" />
</TD>
<TD CLASS="dataValue">
<DIV DATAFLD="company" STYLE="width: 120px; overflow: hidden;" NOWRAP="true" />
</TD>
<TD CLASS="dataValue">
<DIV DATAFLD="address" STYLE="width: 120px; overflow: hidden;" NOWRAP="true" />
</TD>
<TD CLASS="dataValue">
<DIV DATAFLD="city" STYLE="width: 100px; overflow: hidden;" NOWRAP="true" />
</TD>
<TD CLASS="dataValue">
<DIV DATAFLD="state" STYLE="width: 40px; overflow: hidden;" NOWRAP="true" />
</TD>
<TD CLASS="dataValue">
<DIV DATAFLD="zip" STYLE="width: 30px; overflow: hidden;" NOWRAP="true" />
</TD>
</TR>
</TBODY>
<TFOOT>
<TR>
<TD CLASS="dataLabel" STYLE="border-bottom: 0px solid black;" ALIGN="center" COLSPAN="100%">
<b>End</b>
</TD>
</TR>
</TFOOT>
</TABLE>
注意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编程领域，进程条指示器不失为一种非常可取的实用技术。（待续）
