DevPapers - article HTML with XML Data Binding

Data binding is a process that allows an Internet user to manipulate Web-page elements using an Internet Explorer Web browser. It employs dynamic HTML and does not require complex scripting or programming.

In this example a Web-page is used in conjunction with contact.xml to demonstrate Internet Explorer HTML data binding. Without any scripting, this will pull data from the XML file and display it in the HTML page. This is considerably different than the XSLT that converts XML into HTML.

First off. Make an XML file called contact.xml like so: (See a working example of the XML file at http://programmabilities.com/xml/contact.xml.)

< ?xml version="1.0" ?>
<!--  Filename - contact.xml  --> 
<contact>
 <party>
  <name>Chief Programmabilities</name> 
  <email>bgates@programmabilities.com</email>
  <organization>Programmabilities</organization> 
  <address>1 Programmabilities Complex</address> 
  <phone>1-661-716-2564 x7678</phone> 
  <im>bgates@programmabilities.com</im> 
  <url>http://programmabilities.com/</url> 
  <p xmlns="http://programmabilties.com/contact.php">
    Contact</p> 
 </party>
</contact>

Next off. Make an HTML file called contact.html like so: (See a working example of the HTML file at http://programmabilities.com/xml/contact.html.)

<html><header><title>Contact</title></header><body>
  <!-- Contact module -->
  <xml id="Contact" 
         src="http://programmabilities.com/xml/contact.xml"/>
  <table cellpadding="0" cellspacing="0" border="0" 
         datasrc="#Contact">
   <tr>
    <td><strong>Name</strong>:</td>
    <td><div dataFld="name"/></td>
   </tr>
   <tr>
    <td><strong>Address</strong>:</td>
    <td><div dataFld="address"/></td>
   </tr>
   <tr>
    <td><strong>Mail</strong>:</td>
    <td><div dataFld="email"/>
    </td>
   </tr>
   <tr>
    <td><strong>IM</strong>:</td>
    <td><div dataFld="im"/></td>
   </tr>
   <tr>
    <td><strong>URL</strong>:</td>
    <td><div dataFld="url"/></td>
   </tr>
  </table>
  <!-- END Contact module -->
</body></html>

   The contact.html file pulls the data out of your contact.xml file and puts it into your contact.html page using the technology called data binding.

   The datasrc attribute sets or retrieves the source of the data for data binding. The dataFld attribute sets or retrieves which field of a given data source, as specified by the dataSrc property, to bind to the specified object.

NOTE: As of today, the Data Binding technology in this example does not work with Firefox.

By Chief Programmabilities at Programmabilities.com