用XML和XSLT进行高级的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结构文件：

<?xml version="1.0"?>

<leftFontColor>white</leftFontColor>

<rightBackgroundColor>white</rightBackgroundColor>

<rightFontColor>black</rightFontColor>

<borderTop>1px solid black</borderTop>

<borderLeft>1px solid black</borderLeft>

<borderBottom>1px solid black</borderBottom>

<borderRight>1px solid black</borderRight>

</styles>

</ProgressIndicator>

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

XSLT文件

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

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"

xmlns:dt="urn:schemas-microsoft-com:datatypes">

<xsl:template match="ProgressIndicator">

<xsl:attribute name="STYLE">

border-top: <xsl:value-of select="styles/borderTop"/>;

border-left: <xsl:value-of select="styles/borderLeft"/>;

border-bottom: <xsl:value-of select="styles/borderBottom"/>;

border-right: <xsl:value-of select="styles/borderRight"/>;

height: <xsl:value-of select="styles/height"/>;

width: <xsl:value-of select="styles/width"/>;

</xsl:attribute>

<TR>

<xsl:attribute name="STYLE">

background-color: <xsl:value-of select="styles/leftBackgroundColor" />;

color: <xsl:value-of select="styles/leftFontColor" />;

font-family: arial;

font-size: 11px;

font-weight: bold;

width: <xsl:value-of select="styles/width div 100 * percentComplete" />px;

</xsl:attribute>

<xsl:if test="percentComplete > 50">

<xsl:value-of select="percentComplete" />%

</span>

</xsl:if>

</TD>

<xsl:attribute name="STYLE">

background-color: <xsl:value-of select="styles/rightBackgroundColor" />;

color: <xsl:value-of select="styles/rightFontColor" />;

font-family: arial;

font-size: 11px;

font-weight: bold;

width: <xsl:value-of select="styles/width - (styles/width div 100 * percentComplete)" />px;

</xsl:attribute>

<xsl:if test="percentComplete <= 50">

<xsl:value-of select="percentComplete" />%

</span>

</xsl:if>

</TD>

</TR>

</TABLE>

</xsl:template>

</xsl:stylesheet>

此式样页创建一个有两个单元的表格（Table）。当百分比从0升到50期间，将百分比标签（包含在一个HTML"SPAN"元素中）的位置从右边单元转换到左边单元。此文件中还包含了进程条从左到右变更的计算公式。

本文提供的进程条指示器范例每秒更新步进为百分之十。在实际应用时，可以用相应的算法将数据绑定到某个表格（table）来控制操作。这就是下一篇文章将要介绍的内容。(待续)