O'Reilly Network's XML.com What is XML?: A Technical Introduction to XML. This is an extensive document that goes into great detail.
If you're developing an application that uses XML for data transfer, then your application probably interacts with a number of other applications and runs on a diverse range of operating systems. I inherited a system whose sole purpose was to receive and process XML files from many different sources for storage in the SQL Server database.
Since the XML files were flowing in from so many varied sources, the XML files were validated against the XML Schema. The Schema defined many standards, including only accepting dates that were formatted in the XML Schema standard "date" type format (YYYY-MM-DD). Close to the end of the development phase of the project, my colleagues decided we should append the time to all date fields.
This change occurred around the same time I began running performance testing on the system. Unfortunately, not all of the XML files that we were going to use in the performance tests had been updated to include the time within the date fields. Only some of my XML files conformed to the new XML Schema. XML Schemas are very strict, so any XML file that didn't contain a time would be rejected as invalid and unavailable for the performance tests. Since I discovered this about 10 minutes before the performance test began, it wasn't possible to request a new set of corrected XML files.
My solution was to alter the simpleType definitions for the date elements within the XML Schema to include a UNION definition. The UNION definition allows for multiple base types within a single element. This allowed me to update the XML Schema to accept date fields along with the dateTime fields. Here is an example of one element:
<element name="dateCreated">
<simpleType>
<union>
<simpleType>
<restriction base="date">
</restriction>
</simpleType>
<simpleType>
<restriction base="dateTime">
</restriction>
</simpleType>
</union>
</simpleType>
</element>
Notice that the base types (date and dateTime) specified within the UNION definition in the preceding example were of the same derived type. This isn't a requirement for using UNION definitions; you can use any combination of base types within a UNION definition. However, if you're using the data within the validated XML file to update a back-end database, it's a good idea to use base types in your UNION definition that are from the same derived type. Serious problems could arise if you allow character and integer data types in the same field, and this field was used to update an integer field in a SQL Server database.
Mark Peterson, MCSD, is a consultant for Tek Systems. He has developed a variety of Web sites, ranging from e-commerce to corporate intranets.
The ability to bind HTML elements to XML data islands opens up an array of possibilities for providing information to an end user. One of the best is the ability of a <TABLE> element to render multiple rows based on one row as a template. Also, the nested <TABLE>s can be bound to nested nodes in the XML hierarchy. Using this in conjunction with a group of other bound elements opens the door to some quickly coded solutions.
Using the following XML, a ListView control is created to provide a list
of choices to the user with accompanying images:
<root>
<product>
<product_id>001</product_id>
<product_name>Widget1</product_name>
<price>$99.99</price>
<product_img>images/widget1.gif</product_img>
</product>
<product>
<product_id>002</product_id>
<product_name>Widget2</product_name>
<price>$99.99</price>
<product_img>images/widget2.gif</product_img>
</product>
<product>
<product_id>003</product_id>
<product_name>Widget3</product_name>
<price>$99.99</price>
<product_img>images/widget3.gif</product_img>
</product>
</root>
First, we populate an XML data island on the HTML page with the above
XML. This is accomplished by surrounding the XML with <XML> element tags.
Then we add ID and NAME attributes to the opening <XML> tag for reference.
For example:
<XML ID="xmlProducts" NAME="xmlProducts">
. . .
</XML>
Next, we create the HTML for the TABLE:
<DIV style="width:250px;height:300px;overflow:auto;border:2px menu
solid;">
<TABLE CELLPADDING="0" CELLSPACING="0" BORDER="0" DATASRC="#xmlProducts"
ID="tblProducts" NAME="tblProducts">
<TR>
<TD><IMG DATAFLD="product_img" BORDER="0"></TD>
<TD><SPAN DATAFLD="product_name"></TD>
<TD><SPAN DATAFLD="price"></TD>
</TR>
</TABLE>
</DIV>
The DATASRC attribute on the <TABLE> element binds XML data island rows to the <TABLE> element. The individual elements that contain DATAFLD attributes are bound to the data for the corresponding field in the current row. Notice the # preceding the DATASRC name.
The "product_img" field is bound to the SRC attribute on the <IMG> tag. This provides the individual images for the individual products in each row. The "product_name" field is bound to the innerText property of the <SPAN> tag. The <DIV> element surrounding the <TABLE> is meant only for containing the <TABLE> element.
This code creates the basis for the ListView control. The remainder of the code is for user interaction. When the user moves the mouse pointer over each row, I make the user aware of the row under the mouse pointer by changing the background color of the <TR> element. When the user clicks on the row, the user will know that the row was selected by the row highlighting. I'll also keep track of the active row within the current table.
The <TR> element within the <TABLE> should be modified to the following
code to accommodate the user events:
<TR onmouseover="tr_onmouseover(this)" onmouseout="tr_onmouseout(this)"
onclick="tr_onclick(this)" active="false">
Add the following JavaScript code:
<SCRIPT LANGUAGE="JavaScript">
function tr_onmouseover(element) {
var oTR = getElement(element, "TR");
if (oTR != null && !eval(oTR.active)) {
oTR.style.backgroundColor = "silver";
}
}
function tr_onmouseout(element) {
var oTR = getElement(element, "TR");
if (oTR != null && !eval(oTR.active)) {
oTR.style.backgroundColor = "";
}
}
function tr_onclick(element) {
var oTR = getElement(element, "TR");
var oTABLE = getElement(oTR, "TABLE");
if (oTABLE != null) {
if (typeof(oTABLE.activeRow) != "undefined" && oTABLE.activeRow
!=
null) {
oTABLE.activeRow.style.backgroundColor = "";
oTABLE.activeRow.style.color = "";
oTABLE.activeRow.active = "false";
}
if (oTR != null) {
oTR.style.backgroundColor = "highlight";
oTR.style.color = "highlighttext";
oTR.active = "true";
oTABLE.activeRow = oTR;
}
}
}
function getElement(src, tagName) {
var obj = src;
while (obj != null && obj.tagName != tagName) {
obj = obj.parentElement;
}
return obj;
}
</SCRIPT>
This script changes the row background color to silver when the mouse pointer is hovering over it--if the row is not active. Then it clears the background color to default when the mouse pointer leaves the boundaries of the row. When the user clicks on the row, the background color is changed to the system's currently applicable highlight color, and the text color is changed to the system's currently applicable highlight text color. Also, the currently selected row reference is stored to the "activeRow" property of the table. This provides quick access to the information in the selected row. An example of this would be "document.all.tblProducts.activeRow. . .."
I frequently use this skeletal code as the basis for many of my lists because of the easy customization. It gives me a little more freedom and functionality than radio buttons, checkboxes, or <SELECT> elements. It also makes it easier to bind to the XML data islands, helping me to separate content from layout.
This script and the HTML are abstract enough to be used for any type of list control. The ability to bind the image information to the <IMG> tags from the XML data island makes for a quick ListView control.
Phillip Perkins is a contractor with Ajilon Consulting. His experience ranges from machine control and client/server to corporate intranet applications.
Here's an example of XML for the SPAUG CD.