BeWebmaster

HTML With XML Data Binding

Ad

By Chief Programmabilities
Programmabilities.com

Data binding is a process that allows an Internet user to manipulate Web page elements using a 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 IE 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 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 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.