使用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结构文件：

  
    gray
    white
    white
    black
    1px solid black
    1px solid black
    1px solid black
    1px solid black
    25
    200
  
  0
      

此文件定义了进程条指示器的式样和缺省的进程条百分比。

XSLT文件

下面是XSLT式样文件，在进行初始化和更新操作时，应用此文件决定XML文档的输出显示式样。

  
    
        border-top: ;
        border-left: ;
        border-bottom: ;
        border-right: ;
        height: ;
        width: ;
      

      
      

        

          
            background-color: ;
            color: ;
            font-family: arial;
            font-size: 11px;
            font-weight: bold;
            width: px;
          
          
            
              %
            
          
        
        

          
            background-color: ;
            color: ;
            font-family: arial;
            font-size: 11px;
            font-weight: bold;
            width: px;
          
          
            
              %
            
          
        
      
    
  
      

    此式样页创建一个有两个单元的表格（Table）。当百分比从0升到50期间，将百分比标签（包含在一个HTML"SPAN"元素中）的位置从右边单元转换到左边单元。此文件中还包含了进程条从左到右变更的计算公式。 本文提供的进程条指示器范例每秒更新步进为百分之十。在实际应用时，可以用相应的算法将数据绑定到某个表格（table）来控制操作。这就是下一篇文章将要介绍的内容。(待续)

下载本文示例代码

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