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 how to create a folder tree
of unlimited depth by using XML and XSL, the style-sheet
language for XML. The folder tree discussed in this
article functions by taking an XML feed of a specific
format and applying an XSL style sheet to it. The
resulting transformation is then printed to the client.
The client handles all requests to expand, collapse,
maximize or minimize entities within the tree, or the
whole tree itself. The client used in this article is
Internet Explorer 5.5+.
The actual folder tree demonstrated is available for
download at the end of this article.
Folder -Tree-Specific
Architecture
Like most Web page objects, there are several ways to
build them. When developing your specific folder tree,
you should keep in mind some architectural decisions
adherent to a folder tree such as:
Nesting
Lines
Nesting
Figure 1. No nesting within
the browser
Figure 2. Nesting within
the browser
In Both Figures 1 and 2 borders were temporarily
applied to the tree so that one can more easily see the
relationships and nesting of objects within the Document
Object Model (DOM).
Lines
Lines within your tree can provide a greater visual
effect and make larger tree structures easier to read.
The negative effect on having lines within your tree is
performance. A tree with 100 items may use about 300
images just to display the relationship between
entities. Caching and preloading images can help, but
they still exist as individual objects within the DOM.
Without lines, simple indenting can show the
relationship between parent and child. In this article I
will demonstrate the creation of a tree without lines.
XML Structure
All corporations' requirements differ from one
another. Odds are the requirements I have for my tree
are much different than the requirements you may have
for yours. XML provides us with the perfect interface to
describe our unique tree entities. The format you choose
will have a direct effect on your XSL style sheets and
your client operations. The format I have chosen is good
for a recursive XSL style sheet, which satisfies the
requirement within this article for a folder tree of
unlimited depth.
The XML document I have constructed contains a root
element named "tree" that can contain only "entity"
elements. The structure of your tree is implicitly
defined here by nesting entity elements within the
"contents" element of other entity elements. Below is a
listing of all elements or attributes that belong to the
"entity" element.
Name
Type
Description
id
Attribute
Unique string or integer used to identify the
individual entity
description
Element
Description of individual entity. This is the
text displayed to the user.
onClick
Element
Name of the client-side function fired upon
the onClick event
image
Element
Image displayed when entity is closed or not
selected
imageOpen
Element
Image displayed when entity is open
contents
Element
Contains entity elements. The content element
is used to determine whether or not an entity has
children.
Within your individual trees, use the entity element
to append specific data about each object in your tree.
This could be the ID of a record in a database that the
entity is representing. In upcoming articles I will
demonstrate how to create an entity-specific context
menu that is implemented by the addition of an
"oncontextmenu" element to our entity element.
The following XML is the XML we will be using in this
article. For illustration purposes I have created a
static XML document instead of implementing a dynamic
XML database query.
The above XML file is named "tree.xml" and
is available for download at the end of this article.
XSL Style Sheet
Both Figures 1 and 2 were the result of
transformations with our XML document and separate XSL
style sheets. Below is the standard XSL style sheet that
is applied to our XML document(s).
Figure 3 (below) displays the folder tree
that is created using the above XSL style sheet.
Figure
3. XSL transformation
Client
Operations
In order for our folder tree to function, we require
the following client-side operations:
Initialize
Expand
Collapse
Expand All (Maximize)
Collapse All (Minimize)
Below is the code
that performs these five operations. This code can be
found within the "tree.js" file included with this
article.
function initialize() {
var xmlDoc
var xslDoc
xmlDoc = new ActiveXObject('Microsoft.XMLDOM')
xmlDoc.async = false;
xslDoc = new ActiveXObject('Microsoft.XMLDOM')
xslDoc.async = false;
xmlDoc.load("tree/tree.xml")
xslDoc.load("tree/tree.xsl")
folderTree.innerHTML = xmlDoc.documentElement.transformNode(xslDoc)
}
function clickOnEntity(entity) {
if(entity.open == "false") {
expand(entity, true)
}
else {
collapse(entity)
}
window.event.cancelBubble = true
}
function expand(entity) {
var oImage
oImage = entity.childNodes(0).all["image"]
oImage.src = entity.imageOpen
for(i=0; i < entity.childNodes.length; i++) {
if(entity.childNodes(i).tagName == "DIV") {
entity.childNodes(i).style.display = "block"
}
}
entity.open = "true"
}
function collapse(entity) {
var oImage
var i
oImage = entity.childNodes(0).all["image"]
oImage.src = entity.image
// collapse and hide children
for(i=0; i < entity.childNodes.length; i++) {
if(entity.childNodes(i).tagName == "DIV") {
if(entity.id != "folderTree") entity.childNodes(i).style.display = "none"
collapse(entity.childNodes(i))
}
}
entity.open = "false"
}
function expandAll(entity) {
var oImage
var i
expand(entity, false)
// expand children
for(i=0; i < entity.childNodes.length; i++) {
if(entity.childNodes(i).tagName == "DIV") {
expandAll(entity.childNodes(i))
}
}
}
Future of Web-Based Folder
Trees
As Web technologies grow, they allow us to maintain
state within our Web applications. This increases the
complexity of our interfaces as more operations are
moved from server to client. This is a blessing that
will increase the usability of our interfaces and the
performance of our applications by taking the load off
of our servers.
In future articles I may expand on the tree discussed
in this article by explaining how to create an API to
dynamically insert, remove, rename, and refresh objects
within your trees.
Closing
I hope the contents of this article will help
increase the quality of your Web applications interface.
If you have any questions, comments, or suggestions,
please feel free to email me at the address listed in
the author section.
On a side note, I would like to thank Lee McGraw for
helping me proofread and validate this document.
The second
article in this series addresses custom context menu
creation.
Download
Download the example.zip
file that contains the files that make up the tree,
including tree.xsl, tree.xml, tree.js, tree.css,
common.js, and images.
About the
Author
Joe Slovinski is president of Internet Solutions,
Inc., and is currently developing .NET applications in
Nashville, while at the same time working on the next
generation of Web application UI objects. Programming
Internet sites and Web applications since 1993, he has
seen the Internet grow into what it is today and is
helping to create the Internet of tomorrow.
When not working, and depending on location, he
enjoys listening to most all forms of music, playing the
guitar, surfing, and spending time outdoors.
Stonebroom.ASP2XML(c) is an
interface component designed to make building
applications that transport data in XML format
much easier. It can be used to automatically pass
updates back to the original data source.
Joe Slovinski
creates a Progress Indicator object that uses XML and
XSLT. This object has several uses, including updating
the client browser of the progress of a data binding
routine or the preloading of images. [Read This
Article][Top]
Joe Slovinski
creates a drag-and-drop object for folder trees. This
control has the capability to drag and drop entities
from one point within a tree to another or between
multiple trees. [Read This
Article][Top]
Joe Slovinski
explains how to dynamically insert, update, rename, and
delete entities within a folder tree. Providing features
such as unlimited metadata support via XML and XSLT this
version of the folder tree can be re-used to represent
any array of data. [Read This
Article][Top]
Joe Slovinski
explains how to use XML and XSL to create custom context
menus on the fly. Using XML and XSL makes these menus
low-maintenance and reusable, and reduces load on the
server when transformed on the client. [Read This
Article][Top]
Robert Chartier
explains how to use the WSDLReader Component, part of
the Microsoft SOAP Toolkit, to automatically read any
Web Service and automatically create your client-sided
code. This can be a big time saver. [Read This
Article][Top]
This article builds
on the concepts introduced in Part 1. It will show you
an actual implementation in Visual Basic 6 that solves
the problems faced by many companies and described in
Part 1. This implementation shows you how to serve data
up to any client, independent of programming language or
operating system. [Read This
Article][Top]
In this article,
Robert Galante describes two solutions he employed in
applications to generate custom reports. His solutions
convert XML data to HTML using XSL Transformations. One
solution uses the Sun Java API for XML Processing, which
is called JAXP. The other solution uses the Microsoft
MSXML API. [Read This
Article][Top]
This is the second
part of a two-part series geared to get you quickly
started with Web services and the Microsoft Simple
Object Access Protocol (SOAP) Toolkit. It will allow you
to consume the server that we created in the first part
of this article. [Read This
Article][Top]
This article will
introduce you to common mistakes and how to avoid them
when dealing with Web-enabled application architecture.
It also offers a robust example of how to build an
expandable solution using XML and XSLT. [Read This
Article][Top]
In this article Lai
Yuen Kit creates a simple stats tracking program to
demonstrate how to deal with records using XML, instead
of ADO Object. [Read This
Article][Top]
With the Server with
the SOAP Toolkit (V2, Gold Release) from Microsoft, you
can easily get a Web service on line in minutes. This
article will take you through, step by step, the quick
and easy way of taking your custom business logic and
deploying it as a Web service. [Read This
Article][Top]
In this article,
Marco Nanni examines an example of multiple binary file
uploading for Web applications using XML, without the
typical limitations of traditional file upload
processing. [Read This
Article][Top]
Learn what types of
data exchanges are targets for optimization and the
benefits and disadvantages of using persistence with the
Application object. [Read This
Article][Top]
Learn how to
successfully apply an IMDB to large volumes of data and
still get phenomenal searching speeds that outperform a
dedicated SQL Server database. [Read This
Article][Top]
In this article
Niall Ginsbourg takes a look at using Microsoft's XML
Parser, along with its in-built XPath query processor,
to create an In-Memory Database that provides superior
searching operations over an equivalent SQL Server
solution. [Read This
Article][Top]
Using traditional
ASP, Web servers are forced to do all the work in
creating a page. This includes getting the data,
formatting the output, and sending it to the client.
With XML and XSL, the server only needs to get the data
in XML format and send that and the XSL to the client.
The client will then use its CPU power to transform the
XML into HTML using the XSL style sheet. This approach
will allow your Web servers to handle many more
concurrent users. [Read This
Article][Top]
The XML data island
in IE 5.x provides a simple and convenient way to
dynamically alter the content of a Web page using data
stored either locally or remotely in XML
format. [Read This
Article][Top]
At XML 2000 last
week in Washington, D.C., David Turner of Microsoft
introduced a new technology called XfA. Get a glimpse of
the technology in this summary report. [Read This
Article][Top]
SQL Server is packed
with features for retrieving XML documents. Steven Woods
offers a demonstration of extending a SQL Query via the
RAW, AUTO, and EXPLICIT modes to illustrate the
functionality available. The article then discusses the
concept of templates, which allow the creation of
dynamic parameter-based XML documents, and how templates
can be executed via Visual Basic. [Read This
Article][Top]
Doing a hard refresh
every time the client needs more information makes the
interface difficult for a user to use in complex
applications and causes unnecessary strain on the
network because frequently the same data is being sent
to the client repeatedly. Dennis Hurst examines the
problem and provides a XML/ASP solution. [Read This
Article][Top]
Kyle Patrick
explains how using the XMLHTTPConnection object that
Microsoft packaged with its MSXML parser is a fast,
free, and powerful method for communication between any
client and server application that supports COM objects.
Using this, instead of CGI, means you can have a
client-server interaction between the browser and the
Web server that can be done without changing the Web
page. Sample code and URLs are included. [Read This
Article][Top]
With the upcoming
release of Internet Explorer 5.0, it is much easier to
use XML in Web applications. Here is some information on
how to harness the power of the updated XML Document
Object Model (DOM) on the server to parse and use XML
data in ASP applications. [Read This
Article][Top]
Mailing List Want
to receive email when the next article is published? Just Click
Here to sign up.
.gif)
.gif)
.gif)
.gif)
.gif)
.gif)
.gif)
.gif)
.gif)
.gif)