|
使用XML和XSL进行高级的Web UI设计（五）
编译：alpha2002
创建进程条指示器
本文要求读者熟悉JScript，MSXML，XSL/XSLT，DOM。
下载例子代码
本文是这一系列文章的第五篇，主要介绍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"?>
<ProgressIndicator>
<styles>
<leftBackgroundColor>gray</leftBackgroundColor>
<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>
<height>25</height>
<width>200</width>
</styles>
<percentComplete>0</percentComplete>
</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">
<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0">
<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>
<TD ALIGN="right">
<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">
<span style="padding-left: 5px; padding-right: 5px;">
<xsl:value-of select="percentComplete" />%
</span>
</xsl:if>
</TD>
<TD ALIGN="left">
<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">
<span style="padding-left: 5px; padding-right: 5px;">
<xsl:value-of select="percentComplete" />%
</span>
</xsl:if>
</TD>
</TR>
</TABLE>
</xsl:template>
</xsl:stylesheet>
此式样页创建一个有两个单元的表格（Table）。当百分比从0升到50期间，将百分比标签（包含在一个HTML"SPAN"元素中）的位置从右边单元转换到左边单元。此文件中还包含了进程条从左到右变更的计算公式。
本文提供的进程条指示器范例每秒更新步进为百分之十。在实际应用时，可以用相应的算法将数据绑定到某个表格（table）来控制操作。这就是下一篇文章将要介绍的内容。(待续)
|
