XML DSO Examples
In this section, we will create an example that allows a user to view the data stored in a data island in an HTML page using the XML DSO. This example creates a user services component that is contained within Internet Explorer 5 and that performs all the normal movement through records, such as move next, move previous, and so forth. To begin we must create the XML data, a DTD for the XML data, and an HTML page to embed the XML data. We will then need to add DHTML script to the HTML page. The DHTML script works with the DSO and allows the user to move through the records using a Web browser. For this example, you will use the XML data from the BizTalk example in Chapter 12. Create a file called NorthwindPO.xml, and add the following XML data to the file:
<?xml version="1.0" standalone="no" ?> <!DOCTYPE POLines SYSTEM "NorthwindPO.dtd"> <POLines> <Item> <line>1</line> <partno>pc1010</partno> <qty>200</qty> <uom>EACH</uom> <unitPrice>800.00</unitPrice> <discount>10</discount> <totalAmount>144000.00</totalAmount> </Item> <Item> <line>1</line> <partno>monitor17</partno> <qty>200</qty> <uom>EACH</uom> <unitPrice>300.00</unitPrice> <discount>20</discount> <totalAmount>48000.00</totalAmount> </Item> </POLines> |
Create a DTD for this XML document called NorthwindPO.dtd with the following declarations:
<!ELEMENT POLines (Item+)> <!ELEMENT Item (line , partno , qty , uom , unitPrice , discount , totalAmount)> <!ELEMENT line (#PCDATA)> <!ELEMENT partno (#PCDATA)> <!ELEMENT qty (#PCDATA)> <!ELEMENT uom (#PCDATA)> <!ELEMENT unitPrice (#PCDATA)> <!ELEMENT discount (#PCDATA)> <!ELEMENT totalAmount (#PCDATA)> |
You could also create the following BizTalk schema called NorthwindPO.xsd to validate NorthwindPO.xml:
<?xml version = "1.0"?> <Schema name = "NorthwindPO.xsd" xmlns = "urn:schemas-microsoft-com:xml-data" xmlns:dt = "urn:schemas-microsoft-com:datatypes"> <ElementType name = "POLines" content = "eltOnly" order = "seq"> <element type = "Item" minOccurs = "1" maxOccurs = "*"/> </ElementType> <ElementType name = "Item" content = "eltOnly" order = "seq"> <element type = "line"/> <element type = "partno"/> <element type = "qty"/> <element type = "uom"/> <element type = "unitPrice"/> <element type = "discount"/> <element type = "totalAmount"/> </ElementType> <ElementType name = "line" content = "textOnly"/> <ElementType name = "partno" content = "textOnly"/> <ElementType name = "qty" content = "textOnly"/> <ElementType name = "uom" content = "textOnly"/> <ElementType name = "unitPrice" content = "textOnly"/> <ElementType name = "discount" content = "textOnly"/> <ElementType name = "totalAmount" content = "textOnly"/> </Schema> |
Notice that the Item element is defined such that it can appear either one time or several times. This is exactly the type of element we want to bind to a table. Once bound to a table, each instance of the Item element will be placed into a row in the table. Let's look at how this can be done.
You can create the following HTML document that uses the XML DSO to render the NorthwindPO.xml XML document in the browser:
<html> <xml src="NorthwindPO.xml" id="NorthwindDSO"></xml> <body> <table border="2" width="100%" datasrc="#NorthwindDSO" cellpadding="5"> <thead> <th>Line Item</th> <th>Part No</th> <th>Quantity</th> <th>UOM</th> <th>Unit Price</th> <th>Discount</th> <th>Total</th> </thead> <tbody> <tr> <td valign="top"><span datafld="line"></span> </td> <td valign="top"><span datafld="partno"></span> </td> <td valign="top"><span datafld="qty"></span> </td> <td valign="top"><span datafld="uom"></span> </td> <td valign="top"><span datafld="unitprice"> </span></td> <td valign="top"><span datafld="discount"> </span></td> <td valign="top"><span datafld="totalAmount"> </span></td> </tr> </tbody> </table> </body> </html> |
This HTML document will appear as shown in Figure 13-3.
Figure 13-3. NorthwindReturn.htm showing how the XML DSO data binding works.
In this example, you used the xml element to place the XML data in the NorthwindPO.xml XML document into a DSO object called NorthwindDSO. You also bound the table to the NorthwindDSO object using the table element's datasrc attribute. You have accomplished essentially the same task as you did using XSL, except now we are using a technique that currently works with only Internet Explorer 5.
NOTE
Style sheets and other elements could have been included to further improve this example, but they were left out so that you could focus on how the XML DSO data binding works.
We would presume that each line item in the previous code represents items that go together. In this particular example, there was only one line item (a line element equal to 1), which included a computer and a monitor that were sold together. What if there were two line items? If we add the following two Item elements to the NorthwindPO.XML document, the page will look as shown in Figure 13-4 in the Web browser. Add the following to the NorthwindPO.XML document:
<Item> <line>2</line> <partno>pc2010</partno> <qty>100</qty> <uom>EACH</uom> <unitPrice>1200.00</unitPrice> <discount>10</discount> <totalAmount>108000.00</totalAmount> </Item> <Item> <line>2</line> <partno>monitor19</partno> <qty>100</qty> <uom>EACH</uom> <unitPrice>500.00</unitPrice> <discount>10</discount> <totalAmount>45000.00</totalAmount> </Item> |
Figure 13-4. NorthwindReturn.htm with the two new items.
Although this change is acceptable, you might want to create separate sections for each line item by making some minor changes to the XML document and the DTD. First let's make a few changes to the XML document: add a new element called po and make it the root element of the document; replace the POLines element with the POLine element; move the line element out of the Item element's content and place it within the POLine element. The revised NorthwindPO.XML document now looks as follows:
<?xml version="1.0" standalone="no" ?> <!DOCTYPE po SYSTEM "NorthwindPO2.dtd"> <po> <POLine> <line>1</line> <Item> <partno>pc1010</partno> <qty>200</qty> <uom>EACH</uom> <unitPrice>800.00</unitPrice> <discount>10</discount> <totalAmount>144000.00</totalAmount> </Item> <Item> <partno>monitor17</partno> <qty>200</qty> <uom>EACH</uom> <unitPrice>300.00</unitPrice> <discount>20</discount> <totalAmount>48000.00</totalAmount> </Item> </POLine> <POLine> <line>2</line> <Item> <partno>pc2010</partno> <qty>100</qty> <uom>EACH</uom> <unitPrice>1200.00</unitPrice> <discount>10</discount> <totalAmount>108000.00</totalAmount> </Item> <Item> <partno>monitor19</partno> <qty>100</qty> <uom>EACH</uom> <unitPrice>500.00</unitPrice> <discount>10</discount> <totalAmount>45000.00</totalAmount> </Item> </POLine> </po> |
Next we need to make revisions to the DTD to reflect the changes we made to the XML document. Specifically, delete the declaration for the POLines element and declare two new elements: po and POLine; make POLine the child element of po and declare it to occur one or more times; and make the line element a child element of POLine instead of a child element of Item. The new DTD looks as follows:
<!ELEMENT po (POLine+)> <!ELEMENT POLine (line , Item+)> <!ELEMENT Item (partno , qty , uom , unitPrice , discount , totalAmount)> <!ELEMENT line (#PCDATA)> <!ELEMENT partno (#PCDATA)> <!ELEMENT qty (#PCDATA)> <!ELEMENT uom (#PCDATA)> <!ELEMENT unitPrice (#PCDATA)> <!ELEMENT discount (#PCDATA)> <!ELEMENT totalAmount (#PCDATA)> |
You can now rewrite NorthwindReturn.htm as follows:
<html> <xml src="NorthwindPO2.xml" id="NorthwindDSO"></xml> <body> <table border="2" width="100%" datasrc="#NorthwindDSO" cellpadding="5"> <thead> <th>Line Item</th> <th>Details</th> </thead> <tbody> <td valign="top"><span datafld="line"></span> </td> <td> <table border="1" width="100%" datasrc="#NorthwindDSO" datafld="Item" cellpadding="5"> <thead> <th>Part No</th> <th>Quantity</th> <th>UOM</th> <th>Unit Price</th> <th>Discount</th> <th>Total</th> </thead> <tbody> <tr> <td valign="top"> <span datafld="partno"></span></td> <td valign="top"> <span datafld="qty"></span></td> <td valign="top"> <span datafld="uom"></span></td> <td valign="top"> <span datafld="unitprice"></span> </td> <td valign="top"> <span datafld="discount"></span> </td> <td valign="top"> <span datafld="totalAmount"> </span></td> </tr> </tbody> </table> </td> </tbody> </table> </body> </html> |
You just created two tables, one nested within the other. The first table uses the element POLine for the repeating element, as this element can occur one or more times. You did not specify the datasrc attribute for the top-level table. The embedded table will need to specify the element that can appear one or more times, which is Item in this example. This document will look as shown in Figure 13-5.
Figure 13-5. NorthwindReturn2.htm with separate line items.
The DSO also presents the XML data it contains as an ADO recordset. A recordset is a table of data in memory. You can use an ADO recordset to programmatically manipulate the data. We will discuss ADO in more detail in Chapter 15. For our purposes in this chapter, we can simply view the ADO recordset as an object that has a set of methods that we will be using. The primary methods we will be looking at are moveFirst, moveLast, movePrevious, moveNext and Fields. After examining how to code these methods, you can easily code additional methods such as delete or addNew. Before we can discuss using these methods, we need to discuss the events associated with the XML DSO.
XML DSO Events
The XML DSO has events just as HTML elements have events. The events associated with the XML DSO are as follows:
XML DSO Events
| Event | Description |
|---|---|
| ondataavailable | Raised when data comes in from the data source |
| ondatasetcomplete | Raised when all the data has arrived from the data source |
| ondatasetchanged | Raised when data changes |
| onreadystatechange | Raised when the readystate property of the DSO changes |
| onrowenter | Raised when a row is entered |
| onrowexit | Raised for a recordset before another row is entered |
| onrowsdelete | Raised when rows are about to be deleted from the current recordset |
| onrowsinserted | Raised after rows are inserted into the current recordset |
| oncellchange | Raised when the data in a bound control or table cell has been changed and the focus has been moved away from the cell |
You can use these events to manage XML data in the DSO object. In addition to these events, new properties associated with the event object can also be used within the DSO events. The following table shows the new properties associated with the event object:
Properties Associated with the Event Object
| Property | Description |
|---|---|
| bookmarks | Returns a collection of bookmarks that identify the records being inserted or deleted. It can also contain cells that have been changed. |
| boundElements | Returns a collection of elements in the HTML page that are bound to the DSO and have raised the event. |
| dataFld | Returns the name of the column or field in the ADO recordset that was affected by an oncellchanged event. Thus, it can be used in the oncellchanged event to identify which field has been changed. |
| recordset | Returns a reference to the ADO recordset that is bound to the DSO that raised the event. |
Let's look at an example that uses DHTML, XML data located in a data island, and the DSO. We will rewrite the NorthwindPO.XML file as follows:
<?xml version="1.0" standalone="yes" ?> <POLine> <Item> <partno>pc1010</partno> <qty>200</qty> <uom>EACH</uom> <unitPrice>800.00</unitPrice> <discount>10</discount> <totalAmount>144000.00</totalAmount> </Item> <Item> <partno>monitor17</partno> <qty>200</qty> <uom>EACH</uom> <unitPrice>300.00</unitPrice> <discount>20</discount> <totalAmount>48000.00</totalAmount> </Item> <Item> <partno>pc2010</partno> <qty>100</qty> <uom>EACH</uom> <unitPrice>1200.00</unitPrice> <discount>10</discount> <totalAmount>108000.00</totalAmount> </Item> <Item> <partno>monitor19</partno> <qty>100</qty> <uom>EACH</uom> <unitPrice>500.00</unitPrice> <discount>10</discount> <totalAmount>45000.00</totalAmount> </Item> </POLine> |
In the above code, the four items represent one order that includes four items. We will now create the following HTML document:
<html> <head> <xml src="NorthwindPO3.xml" id="NorthwindDSO"></xml> <style type="text/css"> .FieldName {font-family:Arial,sans-serif; font-size:12px; font-weight:normal} .DataButtons {behavior:url (MoveButtons.htc);} </style> <script language="vbscript"> <!-- Sub NorthwindDSO_ondatasetcomplete() End Sub Sub UpdateTextBoxes() txtPartNo.value=NorthwindDSO.recordset.Fields("partno") txtQuantity.value=NorthwindDSO.recordset.Fields("qty") txtUOM.value=NorthwindDSO.recordset.Fields("uom") txtUnitPrice.value=NorthwindDSO.recordset.Fields("unitPrice") txtDiscount.value=NorthwindDSO.recordset.Fields("discount") txtTotal.value=NorthwindDSO.recordset.Fields("totalAmount") End Sub Sub MoveNext() NorthwindDSO.Recordset.MoveNext If NorthwindDSO.Recordset.EOF Then NorthwindDSO.Recordset.MoveFirst End If UpdateTextBoxes End Sub Sub MovePrevious() NorthwindDSO.Recordset.MovePrevious If NorthwindDSO.Recordset.BOF Then NorthwindDSO.Recordset.MoveLast End If UpdateTextBoxes End Sub Sub MoveLast() If (Not NorthwindDSO.Recordset.EOF) And _ (Not NorthwindDSO.Recordset.BOF) Then NorthwindDSO.Recordset.MoveLast End If UpdateTextBoxes End Sub Sub MoveFirst() If (Not NorthwindDSO.Recordset.EOF) And _ (Not NorthwindDSO.Recordset.BOF) Then NorthwindDSO.Recordset.MoveFirst End If UpdateTextBoxes End Sub --> </script> </head> <body> <table cellpadding="5"> <tr> <td> <div class="FieldName">Part No</div> </td> <td> <div class="FieldName"> <input id="txtPartNo" name="txtPartNo"> </div> </td> </tr> <tr> <td> <div class="FieldName">Quantity</div> </td> <td> <div class="FieldName"> <input id="txtQuantity" name="txtQuantity"> </div> </td> </tr> <tr> <td> <div class="FieldName">UOM</div> </td> <td> <div class="FieldName"> <input id="txtUOM" name="txtUOM"></div> </td> </tr> <tr> <td> <div class="FieldName">Unit Price</div> </td> <td> <div class="FieldName"> <input id="txtUnitPrice" name="txtUnitPrice"> </div> </td> </tr> <tr> <td> <div class="FieldName">Discount</div> </td> <td> <div class="FieldName"> <input id="txtDiscount" name="txtDiscount"> </div> </td> </tr> <tr> <td> <div class="FieldName">Total</div> </td> <td> <div class="FieldName"> <input id="txtTotal" name="txtTotal"> </div> </td> </tr> </table> <table> <td><input id="cmdRetrieveData" name="cmdRetrieveData" type="button" value="Retrieve Data" onClick="UpdateTextBoxes" ></input></td> <td><input id="cmdMoveNext" name="cmdMoveNext" type="button" value="Move Next" onClick="MoveNext" ></input></td> <td><input id="cmdMovePrevious" name="cmdMovePrevious" type="button" value="Move Previous" onClick="MovePrevious" ></input></td> <td><input id="cmdMoveFirst" name="cmdMoveFirst" type="button" value="Move First" onClick="MoveFirst" ></input></td> <td><input id="cmdMoveLast" name="cmdMoveLast" type="button" value="Move Last" onClick="MoveLast" ></input></td> </table> </body> </html> |
Figure 13-6 shows what this document looks like in Internet Explorer 5.
Figure 13-6. A Web-based user services component for viewing data.
As you can see, subroutines written in Visual Basic were added to the code that will use the XML DSO to move the recordset. These subroutines have been associated to the onClick events of the buttons. This is how DHTML code is normally written.
In this example, you did not bind the XML DSO to any of the text boxes. Instead, you used DHTML code and the DSO to fill the text boxes using the UpdateTextBoxes function. The move functions all perform the appropriate move and then call the UpdateTextBoxes to update the text boxes.
EAN: 2147483647
Pages: 115