Fields, Records and Recordsets

IE 5.0 and above allows you to use XML as a data source that you can bind to a Web document. It's easiest to think of a data source as a collection of records, or recordset, with each record consisting of atomic data elements, known as fields or attributes that describe the record, which is very similar to how you would organize data in a database. A recordset may be simple or hierarchical:

Simple: <group> <person>    <first>Joe</first>    <last>Smith</last> </person> <person>    <first>Mary</first>    <last>Doe</last> </person>   </group>

Hierarchical: <group> <department>    <deptname>CIS</deptname>    <person>       <first>Mark</first>       <last>Jones</last>    </person>    <person>         <first>Jane</first>         <last>Doe</last>    </person> </department> <department>.....</department> </group>

 

There is no limit to the number of nested recordsets a document may contain. It is important to know whether your data source is simple or hiercharchical because IE uses a different data binding technique for each.

Data Islands

When you bind a Web page to a recordset, the attached data is known as a data island, which can be either external or embedded. Binding data by embedding the XML into the HTML document generally is not very useful because it defeats the purpose of separating content from formatting. Use the following syntax to create a data island from an external file:

<xml id="id" src="URL"></xml>

When IE creates the data island, the parser reads and stores the daa island as a data source object (DSO). The DSO handls the interaction between the Web page and the data island. In advanced applications, you can use a program to control the actions of the DSO, such as specifying which records to display when. Keep in mind if the document is not well-formed or valid, IE will ignore the DSO and won't give you a reason for the error. It is also important to understand that the DSO is created only one time per session, so if the contents of the data source are changed, you need to refresh the page.

Once you've created the data island, the next step is to bind the XML elements to the appropriate HTML tags. The syntax is as follows:

<tag datasrc="#id" datafld="field">

Different HTML tags will use the valued of the data field in different ways and not every tag supports data binding.

HTML ITEM	BOUND ELEMENT
hyperlink	<a href="bound element value">
Java applet	<applet param="bound element value">
button	<button>bound element value</button>
div	<div>bound element value</div>
frame	<frame src="bound element value">
iframe	<ifram src="bound element value">
inline image	<img src="bound element value">
checkbox	<input type="checkbox" checked="bound element value">
hidden field	<input type="hidden" value="bound element value">
password field	<input type="password" value="bound element value">
radio button	<input type="radio" checked="bound element value">
text field	<input type="text" value="bound element value">
label	<label>bound element value</label>
marquee	<marquee>bound element value</marquee>
list box item	<option>bound element value</option>
span	<span>bound element value</span>
text area	<textarea>bound element value</textarea>

Bind the Page Info Data

Download the lab files.

Open FP1text.htm and view the source code. Save the file as FP1.htm. Open FPInfo.xml and view the code.

The following fields need to be bound to an XML data source:

page title
page subtitle
paragraph describing purpose
hyperlink pointing to the Webmaster e-mail address
tabel containing data and picture of employee

Add the first data island immediately below the body tag of FP1text.htm:

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

Bind the page info data by editing the <div> tags as follows:

<div id="Page_Title" datasrc="#Page_Info" datafld="Title"></div>
<div id="Page_Subtitle" datasrc="#Page_Info" datafld="Subtitle"></div>
<div id="Page_Text" datasrc="#Page_Info" datafld="Purpose"></div>
<div id="Page_Author">For more information, contact: <a datasrc="#Page_Info" datafld="Author_Email">
   <span datasrc="#Page_Info" datafld="Author"></span></a>.</div>

Save the page and refresh in the browser.