香
香槟女孩
Unregistered / Unconfirmed
GUEST, unregistred user!
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 fordo
wnload 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:
1.Nesting
2.Lines
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 thedo
cument 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 thedo
M. 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.
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 fordo
wnload 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:
1.Nesting
2.Lines
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 thedo
cument 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 thedo
M. 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.