|
Introduction
Welcome to Advanced UI Design Using XML and XSL. Each article in my series will demonstrate the creation of a specific user interface (UI) component using eXtensible Markup Language (XML) and eXtensible Stylesheet Language (XSL).
This article discusses a Progress Indicator object. Below is the screenshot of the Progress Indicator demo located deeper within this article. This screenshot captures the progress indicator in 50 percent.
Figure 1. Progress Indicator demo
Progress Indicator Uses
The Progress Indicator object has the following uses for showing progress (but is not limited to):
- Data binding
- Preloading images
- Charting and graphing
Progress Indicator Control
Our progress indicator control exists on the client and is defined as follows:
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;
}
Our control has the following members:
Properties
xmlDoc
The xmlDoc property contains the path to the Progress Indicator configuration file. These XML documents are discussed later in this article.
xslDoc
The xslDoc property contains the path to the Progress Indicator XSLT (eXtensible Stylesheet Language Transformations) file. This XSL document is discussed later in this article.
target
The target property contains a reference to the object that will contain the Progress Indicator upon its initialization.
xmlObj
The xmlObj property contains a reference to the actual XML Parser that contains our Progress Indicator XML configuration document.
xslObj
The xslObj property contains a reference to the actual XML Parser that contains our Progress Indicator XSLT document.
Methods
init()
The init() method is defined as follows:
function ProgressIndicator_init()
{
this.xmlObj.load(this.xmlDoc);
this.xslObj.load(this.xslDoc);
this.refresh();
}
refresh()
The refresh() method is defined as follows:
function ProgressIndicator_refresh()
{
this.target.innerHTML = this.xmlObj.documentElement.transformNode(this.xslObj);
}
This method applies our XSLT style sheet to our configuration file and places the resulting transformation within the innerHTML property of our target element.
update()
The update() method is defined as follows:
function ProgressIndicator_update(percent)
{
this.percentComplete = percent;
this.xmlObj.documentElement.selectSingleNode("percentComplete").text = this.percentComplete;
this.refresh();
}
This method receives an integer representing a percent, which for practical purposes is normally a range of 0 through 100. The method then proceeds to set the percentComplete property of the Progress Indicator object, after which it updates the XML configuration file. After the XML configuration file mirrors this percent, the refresh method is called to perform a new transformation and update the client browser.
XML Configuration File
Below is a valid Progress Indicator configuration file.
<?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>
This file defines your styles and default percent of your Progress Indicator.
XSLT File
Below is the XSLT document that is applied to a Progress Indicators XML during initialization and updating.
<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>
This style sheet creates a table with two cells. As the percent grows from 0 to 50, the placement of the percentage label (contained in an HTML "SPAN" element) is switched from the right cell to the left. The formula for calculating the left and right cells varies. These formulas are displayed above.
Demo
The demo Progress Indicator provided within this article is set to update in tens of percents every second. When attaching the Progress Indicator included in this article to a data-bound table and updating it with a simple record/row formula you can achieve a real-time update of the progress of any client-side Data--Binding process.
Click to view the demo.
Download the source code.
Future Articles
In an upcoming article I will explain how to use this Progress Indicator on a data-bound table. Below is a sneak peak from this article.
Figure 2. Preview of future article
Closing
I hope the contents of this article will help increase the quality of your Web applications. If you have any questions, comments, suggestions, or requests, please feel free to email me at the address listed in the author section.
On a side note I would like to thank Barry Carter for the use of his facilities during my stay here in Nashville!
Other Articles in the Series
Advanced UI Design Using XML and XSL
Part 1 -- Folder Tree Creation
http://www.15seconds.com/issue/010921.htm
Part 2 -- Custom Context Menu Creation
http://www.15seconds.com/issue/010927.htm
Part 3 -- Folder Tree Administration
http://www.15seconds.com/issue/011113.htm
Part 4 - Folder Tree Drag and Drop
http://www.15seconds.com/issue/011129.htm
Part 6 -- Progress Indicator Usage
http://www.15seconds.com/issue/020109.htm
Part 7 -- Relational Folder Tree Lines
http://www.15seconds.com/issue/020424.htm
About the Author
Joe Slovinski has been programming Web applications since 1993. For more information on the code in this article, contact the Joe Slovinski.
|
