MCCC CIS 177 - Markup Languages

Binding XML Data

Work with Multiple Records

Bind the Staff Data

Edit FP1.htm to add the staff data island as follows:

<xml id="Page_Info" src="FPInfo.xml"></xml>
<xml id="Staff_Info" src="Emp1.xml"></xml>

Bind the XML elements to the appropriate HTML tags:

<table>....

<img datasrc="#Staff_Info" datafld="Photo">
<span datasrc="#Staff_Info" datafld="Name"></span>

<span datasrc+"#Staff_Info" datafld="Department"></span>

<span datasrc+"#Staff_Info" datafld="Position"></span>

<span datasrc+"#Staff_Info" datafld="Phone"></span>

<span datasrc+"#Staff_Info" datafld="Years"></span>

<span datasrc+"#Staff_Info" datafld="Status"></span>

</table>

Save and refresh the file.

Examine the XML source code for Emp1.xml. Notice that "Status" is an attribute of the record element "Employee". Such attributes are interpreted by the DSO as fields. As long as the attribute is part of a record element, this does not pose a problem. If you specify an attribute as part of a field element, it becomes more complicated. Examine the following examples:

XML Element
Interpreted by DSO
<employee status="part-time">
   <name>Joe Smith</name>
   <department>Marketing</department>
</employee>

<employee>
   <status>part-time</status>
   <name>Joe Smith</name>
   <department>Marketing</department>
</employee>

<employee>
   <status>part-time</status>
   <name>Joe Smith</name>
   <department>Marketing</department>
</employee>
Same as above
<employee>
   <name status="part-time">Joe Smith</name>
   <department>Marketing</department>
</employee>

<employee>
   <status>part-time</status
   Joe Smith
   <department>Marketing</department>
</employee>

The third example is a problem because the name unassociated with a field. For this reason, it's best to avoid the use of attributes when planning to bind the data.

Work with the DSO

Work with the DSO using ActiveX Methods

Since most HTML tags can only display field values for one record at a time, it is necessary to use ActiveX Data Objects (ADO) to allow navigating the records in the recordset. You can apply a method to the DSO to accomplish this. To apply a method, use the following syntax:

id.recordset.method

Where id is the id of the data island and method is one supported by ADO. The methods for navigating through a recordset include:

id.recordset.moveFirst()
id.recordset.movePrevious()
id.recordset.moveNext()
id.recordset.moveLast()
id.recordset.move(i) //where i is the record number

Assign a recordset method

Edit FP1.htm by adding the recordset methods appropriately to each button tag as follows:

<button onClick="Staff_Info.recordset.moveFirst()">
|&lt; First
</button>
<button onClick="Staff_Info.recordset.movePrevious()">
&nbsp;&nbsp;&lt; Back &nbsp;&nbsp;
</button>
<button onClick="Staff_Info.recordset.moveNext()">
Forward &gt;
</button>
<button onClick="Staff_Info.recordset.moveLast()">
Last &gt;|
</button>

Work with DSO Properties

One of the problems with using the ActiveX navigation methods is when you navigate to the last record and click forward, the page attempts to access a record that doesn't exist. You can avoid this behavior by changing the location properties of the current DSO record:

id.recordset.property

Location properties include:

id.recordset.BOF
id.recordset.EOF
id.recordset.Index
id.recordset.RecordCount

To test for the location of the record, you use an if statement and insert it in the onClick event handler:

if (Staff_Info.recordset.BOF) Staff_Info.recordset.moveFirst()
if (Staff_Info.recordset.EOF) Staff_Info.recordset.moveLast()

Test for location

Edit FP1.htm to add the code to the appropriate button tags:

<button onClick="Staff_Info.recordset.moveFirst()">
|&lt; First
</button>
<button onClick="Staff_Info.recordset.movePrevious()
; if (Staff_Info.recordset.BOF) Staff_Info.recordset.moveFirst()">
&nbsp;&nbsp;&lt; Back &nbsp;&nbsp;
</button>
<button onClick="Staff_Info.recordset.moveNext()
; if (Staff_Info.recordset.EOF) Staff_Info.recordset.moveLast()">
Forward &gt;
</button>
<button onClick="Staff_Info.recordset.moveLast()">
Last &gt;|
</button>

Save and refresh the file. Test the navigation.