Data Binding Using XML DSO

[Previous] [Next]

In the preceding section, we talked about Microsoft's implementation of the XML Document Object Model. In this section, we'll talk about another object, equally useful and valuable: the XML Data Source Object (DSO). This object makes an XML document available for data binding, which of course means that you can move data in both directions between the XML document and the visual display elements. You can use data binding to expose data from the document, and you can use data binding to modify the content of the document as users have modified the content of the visual elements on the page.

The following code snippet loads an XML document in the XML DSO:

 <HEAD> <SCRIPT Language = "Jscript" FOR="window" EVENT="load"> var xmldso = xmldso.XMLDocument; xmldso.load("filename.filetype") </SCRIPT> 

The preceding script executes as the page is loaded in Internet Explorer. It defines the xmldso variable and assigns a reference to the XMLDocument property of the data source object to it. The next code line loads the file in which the XML document is saved. After this script is executed, data binding is available to the document.

For the preceding script to work, the page must contain an OBJECT element that defines the class ID for the XML DSO. The following example shows the exact class ID you must use; for the other attributes, you can use whatever you want:

 <BODY> <OBJECT WIDTH="0" HEIGHT="0" CLASSID="clsid:550dda30-0541-11d2-9ca9-0060b0ec3d39" ID="xmldso"> </OBJECT> 

In the next few code snippets, we give you an example that's complete, even if simple. The example loads the same XML document we've used a number of times in this chapter, and the page displays the same information as other examples already shown in this chapter. In the second code snippet—the one following Figure 20-11—we show you the code that displays the data, and we'll compare it with the code used in the scripting example, in which we didn't take advantage of data binding. You've seen this XML document before, but the following copy shows it again, with the schema removed to save space:

 <?xml version="1.0" encoding="windows-1252" ?> <Horserace> <Track>Täby Galopp</Track> <Date>1999-10-15</Date> <Raceno>3</Raceno> <Distance>1600</Distance> </Horserace> 

We used the same presentation format as in the preceding examples too. Figure 20-11 shows the borderless table we used. The left column contains the hard-coded captions or field names; the right column contains the data values retrieved from the DSO.

click to view at full size.

Figure 20-11. The data was displayed in a table with two columns: the right column contains the data values, and the left column contains the captions.

To display the data values, we used one SPAN element for each row in the rightmost column. Notice the DATASRC attribute defining the xmldso variable as the data source, just as a data-bound text box control in a Visual Basic form would use a data control as its data source. Also notice the DATAFLD attribute, defining the Track element of the XML document contained in the data source object that the xmldso variable refers to.

 <SPAN ID="spanTrack" STYLE="font-family:Verdana;font-size:10pt"  DATASRC=#xmldso DATAFLD="Track"> </SPAN> 

To show how simple it really gets when you take advantage of data binding, here's the collected HTML and JavaScript code for the entire page:

<HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript" FOR=window EVENT=onload> var doc = xmldso.XMLDocument; doc.load("HorseraceDTD.xml"); </SCRIPT> <TITLE>Data Binding with XML Data Source Object</TITLE> </HEAD> <BODY> <OBJECT WIDTH="0" HEIGHT="0" CLASSID="clsid:550dda30-0541-11d2-9ca9-0060b0ec3d39" ID="xmldso"> </OBJECT> <TABLE><TR><TD width=125> <DIV ID="track" STYLE="font-family:Verdana;font-weight:bold; font-size:10pt;color='blue'"> Track Name: </TD><TD> <SPAN ID="spanTrack" STYLE=" font-family:Verdana; font-size:10pt" DATASRC=#xmldso DATAFLD="Track"></SPAN> </TD></TR> </DIV> <TR><TD> <DIV ID="date" STYLE="font-family:Verdana; font-weight:bold;font-size:10pt;color='blue'"> Date:</TD><TD> <SPAN ID="spanDate" STYLE="font-family:Verdana; font-size:10pt" DATASRC=#xmldso DATAFLD="Date"></SPAN> </TD></TR> </DIV> <TR><TD> <DIV ID="Raceno" STYLE="font-family:Verdana; font-weight:bold;font-size:10pt;color='blue'"> Race Number:</TD><TD> <SPAN ID="spanRace" STYLE="font-family:Verdana; font-size:10pt" DATASRC=#xmldso DATAFLD="Raceno"></SPAN> </TD></TR> </DIV> <TR><TD> <DIV ID="distance" STYLE="font-family:Verdana; font-weight:bold;font-size:10pt;color='blue'"> Distance:</TD><TD> <SPAN ID="spanDistance" STYLE=" font-family:Verdana; font-size:10pt" DATASRC=#xmldso DATAFLD="Distance"></SPAN> </TD></TR> </DIV> </TABLE> </BODY> </HTML> 

Notice that the only script needed is the two-liner in the HEAD section of the page. There's no need at all to access XML DOM or to furnish any procedural code at all for that matter. This is an easy example, but the more complicated it gets, the more valuable is the "complexity remover" that data binding really is.



Designing for scalability with Microsoft Windows DNA
Designing for Scalability with Microsoft Windows DNA (DV-MPS Designing)
ISBN: 0735609683
EAN: 2147483647
Year: 2000
Pages: 133

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net