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

下载本文示例代码

输入您的搜索字词 提交搜索表单