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

一起学习

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


编译：alpha2002

创建进程条指示器

本文要求读者熟悉JScript，MSXML，XSL/XSLT，DOM。

下载例子代码

第一篇：使用XML和XSL进行高级的Web UI设计--创建目录树
第二篇：使用XML和XSL进行高级的Web UI设计--定制目录树的上下文菜单
第三篇：使用XML和XSL进行高级的Web UI设计--目录树的管理
第四篇：使用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）来控制操作。这就是下一篇文章将要介绍的内容。(待续) 下载本文示例代码


使用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设计（五）