In today’s IT world, Extensible Markup Language (XML) is fast becoming the language of choice for transportable data. XML’s allure lies in its ability to present a structured environment for data from virtually any data source. Almost every data repository is now able to produce an XML view of its data either natively or through a parsing program.Unfortunately, Web browsers don’t automatically display XML data in a form that users can interact with easily. What can you do to display XML data in a usable form?
An XML consumer is any page that uses or “consumes” XML data. The process to create an XML consumer is straightforward:
- Create (or obtain) the XML data source
- Create the data island inside your Web page
- Bind data fields to the data island
- Create a mechanism for navigating through the records
The application you’ll create is a simple employee directory. The XML data for the application is admittedly incomplete when compared to that typically received from a relational database (there’s no primary key, for example) but it is sufficient for demonstration purposes. The cool part about the EmployeeDirectory application is that the application does not have to reside on a Web server?it works as a stand-alone client-side application. IE5 instantiates an XML Data Source Object (DSO) and lets you manipulate the data either as a DOM object or as an ADO recordset.
Open up your favorite text editor and create the following XML document:
Save the file as data.xml in a clean directory (all of the files for the Employee Directory application will reside in the same folder). That completes the first phase!Create the Data Island in Your Web Page
Smith Jill President All 160 Roberts William Vice President Marketing 175 Gonzalez Alejandra Vice President Sales 188 Billiker Brian Senior Software Architect Information Systems 176 Williamson Tara Account Manager Sales 196
Creating the data island is actually the easiest part of the application. Simply add an
Take note of the id attribute. IE5 uses that identifier for the XML DSO. From this point forward, you can refer to the DSO as “data” in script and you’ll have access to all of the DOM and ADO properties of the DSO object. The
Alternatively, you can embed the data directly inside the
I find it more palatable to separate the data from its presentation so I recommend using an external file?but either method works just fine. In either case, IE5 creates an instance of the Microsoft XML (MSXML) DOMDocument object and loads the XML data into the object.Bind Data Fields to the Data Island
Binding data fields to the data island is also relatively simple. Binding is the term for creating an automatic connection between a data source and a data consumer. To bind the source to the consumer, you must specify the name of the source object and a column name. A bound data consumer’s contents update automatically as you move through the source data. For this display-only application, span tags are appropriate. Just add two new attributes to the element, for example:
The dataSrc attribute indicates which data island contains the data for the tag, and the dataFld attribute contains the name of the specific data field containing the element data. Note that you set the dataSrc attribute value to the
That’s it! IE5 takes care of the internal plumbing required to synchronize the XML DSO and the element. When the page loads, the text fields will display the indicated data field of the first record (node) in the XML data tree.
Here’s the code that binds the fields of the data island in the Employee Directory (see Figure 1):