|
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 explains several uses for the Progress Indicator object discussed in a previous 15seconds article (see http://www.15seconds.com/issue/011212.htm).
Using with a Data-Bound Table
Overview
The progress indicator can be used to display the status of a data-binding routine. The screenshot (see below) illustrates our progress indicator being used to update the user of a 420-record data-binding routine.
Figure 1. Data-binding status
Progress Indicator Setup
Our progress indicator is set up on the client side via the below script block.
<SCRIPT LANGUAGE="Javascript">
var progressIndicator1;
function init()
{
progressIndicator1 = new ProgressIndicator();
progressIndicator1.xmlDoc = "ProgressIndicator/ProgressIndicator.xml";
progressIndicator1.xslDoc = "ProgressIndicator/ProgressIndicator.xslt";
progressIndicator1.target = progressIndicator;
progressIndicator1.init();
dataTable.dataSrc = "#CustomerData";
updateDataBindProgress();
}
function updateDataBindProgress()
{
var percent;
percent=Math.round((dataTable.rows.length-1)/CustomerData.documentElement.childNodes.length * 100 );
progressIndicator1.update(percent);
if(percent != 100)
{
setTimeout("updateDataBindProgress()", 100);
dataTableCount.innerText = dataTable.rows.length-1 + " rows";
}
else
{
dataTableStatus.innerText = "Complete.";
dataTableCount.innerText = dataTable.rows.length-1 + " rows";
}
}
</SCRIPT>
As illustrated above, we first create and configure an instance of our progress indicator within a general init() method. After calling the progress indicator's init() method, we set our tables' dataSrc property. Setting the dataSrc property begins the data-binding process, and immediately after this we make a call to our updateDataBindProgress() method. This method calls itself every 100 milliseconds and updates the client until all rows have been loaded.
Data-Bound XML
For illustration purposes, below is a screenshot of the XML feed that is used in this article.
Figure 2. Data file customers.xml
Every element under the customer element is represented as a column in our data-bound table. You may choose which elements are displayed when configuring your data-bound table.
The Data-Bound Table
Below is the data-bound table used in our article.
<TABLE ID="dataTable" BORDER="0" CELLSPACING="0" CELLPADDING="2">
<TBODY>
<TR>
<TD CLASS="dataValue">
<DIV DATAFLD="id" STYLE="width: 30px; overflow: hidden;" NOWRAP="true" />
</TD>
<TD CLASS="dataValue">
<DIV DATAFLD="company" STYLE="width: 120px; overflow: hidden;" NOWRAP="true" />
</TD>
<TD CLASS="dataValue">
<DIV DATAFLD="address" STYLE="width: 120px; overflow: hidden;" NOWRAP="true" />
</TD>
<TD CLASS="dataValue">
<DIV DATAFLD="city" STYLE="width: 100px; overflow: hidden;" NOWRAP="true" />
</TD>
<TD CLASS="dataValue">
<DIV DATAFLD="state" STYLE="width: 40px; overflow: hidden;" NOWRAP="true" />
</TD>
<TD CLASS="dataValue">
<DIV DATAFLD="zip" STYLE="width: 30px; overflow: hidden;" NOWRAP="true" />
</TD>
</TR>
</TBODY>
<TFOOT>
<TR>
<TD CLASS="dataLabel" STYLE="border-bottom: 0px solid black;" ALIGN="center" COLSPAN="100%">
<b>End</b>
</TD>
</TR>
</TFOOT>
</TABLE>
Notice that the DATAFLD property of the DIV tags is used to specify which element is displayed in each column. When setting dataFld properties, you must match the case of the corresponding field name within your data source.
Using Progress Indicator as a Graph or Survey
Overview
Our progress indicator can also be used to create graphs and surveys. The below screenshot illustrates the progress indicator being used to create a simple "Yes" or "No" survey.
Figure 3. Survey
Progress Indicator Setup
Our progress indicator is set up on the client side via the below script block.
<SCRIPT LANGUAGE="Javascript">
var percentYes;
var percentNo;
function init()
{
percentYes = new ProgressIndicator();
percentNo = new ProgressIndicator();
percentYes.xmlDoc = "ProgressIndicator/ProgressIndicatorGreen.xml";
percentNo.xmlDoc = "ProgressIndicator/ProgressIndicatorRed.xml";
percentYes.xslDoc = "ProgressIndicator/ProgressIndicator.xslt";
percentNo.xslDoc = "ProgressIndicator/ProgressIndicator.xslt";
percentYes.target = percentYesContainer;
percentNo.target = percentNoContainer;
percentYes.init();
percentNo.init();
percentYes.update(99);
percentNo.update(1);
}
</SCRIPT>
As illustrated above, to create a simple "Yes" and "No" survey, two variables are declared. These variables are named "percentYes" and "percentNo" and are initialized as ProgressIndicator() classes.
After creating and initializing our variables, we then set the paths to our XML and XSL Transformations (XSLT) files. You'll notice the "percentYes" object receives a path to the ProgressIndicatorGreen.xml file, while the "percentNo" object receives a path to the ProgressIndicatorRed.xml file. Our XML configuration files are used to configure the "Yes" and "No" bar colors and also to initialize starting percentages.
Once these steps have been completed we then initialize the progress indicators by calling their init() methods. Calling the init() methods transforms our indicators for the first time and places them in their proper locations based on the "target" property.
Benefits
Using this progress indicator or a similar mechanism increases the usability of your application. Instead of a user waiting 6 seconds for a 420-record data-binding routine or 24 seconds for a 1600-record routine without any update about the progress, you can update the user of the status, making them aware that the application is working and not frozen.
Demo and Download
1. Data-Binding Demo
2. Survey and Graphing Demo
Dowload complete source code
Closing
I hope the contents of this article will help to increase the quality of your Web applications. If you have any questions, comments, suggestions, or requests, please email me at the address listed in the Author section.
I would also like to thank the person(s) at Microsoft who were responsible for making the data-binding mechanism an asynchronous process. Thank you!
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 5 -- Progress Indicator Creation
http://www.15seconds.com/issue/011212.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.
|
