The project source presented here contains five files (Figure 1). When the browser reads salescust.xml, it finds commands that tell it to interpret the data as defined in the schema and to produce its output according to the instructions in the XML stylesheet.
You can download the complete project from the Midrange Computing Web site at www.midrangecomputing.com/mc. As things stand today, youll need Microsoft Internet Explorer Version 5.5 or higher to run it.
Like any good construction project, XSL needs a structural framework. For this project, that framework looks like Figure 2. You can see that the template exactly mirrors the structure of the XML. It must start with the root node (/).
The nonbreaking space character ( ) is not built into XML the way it is in HTML, but its still useful. So, I declare it myself, as Ive done in the example.
Fleshing It Out
The root node contains the document header and the static parts of the body (see Figure 3). It executes one time when the document is loaded. This particular template does little more than build a table with three columns that spans the entire width of the page. The middle column is centered on the page and is 300 pixels in width.
Notice that the
The Dynamic Content
Figure 4 (page 100) contains the rest of the style sheet. The sales template now contains
| elements text should be centered so both lines will be centered within the width of the table.|
The two column header buttons (Figure 4, Section C) make the output look like a spreadsheet or grid control. Each table cell specifies three class names button enabled link. Each of these is a style sheet class, and button does just what you would expect. It makes the cell look like a button. The enabled class name specifies that the cell should inherit its color attributes from elsewhere. The link class name sets the text color to blue and makes the hand cursor display when the mouse passes over the element. The
It sends the this pointer, an object reference to the
| element, to the mouseOver function, which changes the text color of whatever object is passed to it.|
In Figure 4, Section D, you get to the really neat stuff! Here an attribute named order-by is specified on the
Within each loop, a table row is constructed consisting of a customer ID button and a customer name. The XSL processor sorts the data as specified (initially by the customers id attribute).
When the user clicks a customer ID button, the onClick event fires, and the event handler passes a reference to its container (the table cell or
| element) to the loadPage function in Figure 3. Then loadPage opens a new window (a new instance of the browser), specifies that its contents will be provided by salesdtl.asp and appends a query string consisting of cust= and the contents of the table cell (its innerHTML property), which is the customer ID. Of course, salesdtl.asp is a script or servlet that can retrieve the sales information for a single customer.|
Sorting the List
What happens when the user clicks one of the column headers? Im glad you asked. Going back to Figure 4, Section C, when the onClick event fires, onClick=sort (@custname); or onClick=sort(@id); passes the literal value @custname or @id to the sort function in globalxml.js. It looks like this:
The first three lines are really executed when the global functions are loaded. Theyre not part of the function itself. They retrieve object references for the XSL style sheet, the XML document, and the attribute named order-by that was declared in Figure 4, Section D.
The sort function takes the literal value (@custname or @id) and assigns it to the value of the order-by attribute of the
This Is Just a Trivial Little Example, But...
I hope it has given you a glimpse of the power thats available in this new marriage of XML and DHTML. You can use this technology to build robust, full-functioned applications. What Ive shown you is just the tip of the iceberg. Download the example code from www.midrangecomputing.com/mc and play with it. Explore some of the sites listed in the References and Related Materials list for more ideas and examples. Dont worry about it being complex. It just seems that way at first. If you can maintain that 2000- line RPG program, this will be a snap. Dive in! The waters fine.
REFERENCES AND RELATED MATERIALS
Microsoft BizTalk: www.microsoft.com/biztalk/
Microsoft Windows Script Technologies: http://msdn.microsoft.com/scripting/default.htm
Microsoft XML SDK 2.5: http://msdn.microsoft.com/library/default.asp?URL=/library/psdk/xmlsdk/xmls6g53.htm
Web Developers Virtual Library: www.wdvl.com/ Authoring/Languages/
xmlpitstop.com Web site: www.xmlpitstop.com
xmlTree Directory of Content Web site: www.xmltree.com
salescust.xml The data Is the file that the browser requests. Double click it to see what the result looks like.
salescust.xsl XML Stylesheet Contains the run-time logic that tells the XML processor how to display the data.
schemas/sales.xml XML Schema Defines XML element relationships and data types found in the salescust application.
stylesheets/styles.css Cascading Style Defines classes that tell the
Sheet browser how to display specific types of HTML elements. This will give all of the pages in the application a consistent look and feel.
Figure 1: The downloadable code contains five files. This figure documents their usage.
Figure 2: The skeleton XSL template exactly mirrors the structure of the XML.