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

一起学习

使用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数据文件：

 network 

 php-4-0RC2.tar.gz 

  

 php4,sourcecode,源代码,原代码,脚本语言 

 PHP是一种HTML内嵌式脚本语言,类似于IIS上运行的ASP，本源代码包含CGI ISAPI模块，提供MySQL支持。 

 2000-5-20 0:51:12 

 sourcecode 

 1 

 

 

 network 

 HTTPSVR.zip 

  

 http server,www服务器,源代码,sourcecode 

 MSDN中的HTTP服务器程序非常具有参考价值。 

 2000-5-28 20:03:59 

 sourcecode 

 2 

 

 

 multimedia 

 microsecond_delay.zip 

  

 毫秒级时钟,millisecond clock 

 这是一个产生产生毫秒级时钟延时的程序. 

 2000-5-31 13:11:04 

 sourcecode 

 4 

       

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编程领域，进程条指示器不失为一种非常可取的实用技术。（待续） 下载本文示例代码


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