Apr 3, 2008

Binding XML to HTML

Binding XML to HTML

Binding XML to HTML is used to display XML on an HTML page. The XML binding technique described on this page relies on proprietary Microsoft-addons which may only work for Microsoft Internet Explorer 5.0 and above. This binding is based on the Microsoft Data Source Object (DSO) programming model which allows scripts or data binding to be used to display an XML document from HTML.

To bind an XML file to an HTML file:

  1. Use a line similar to the following:

<XML ID="partsList" SRC="parts.xml"></XML>

  1. Use the SPAN element or TABLE element to bind the XML file to the elements at the proper location

Here's the HTML code:

<XML ID="partsList" SRC="parts.xml"></XML>
<table DATASRC="#partsList">
<thead>
<th>Item</th><th>Manufacturer</th><th>Model</th><th>Cost</th>
<thead>
<tr>
<td><SPAN DATAFLD="ITEM"></SPAN></td>
<td><SPAN DATAFLD="MANUFACTURER"></SPAN></td>
<td><SPAN DATAFLD="MODEL"></SPAN></td>
<td><SPAN DATAFLD="COST"></SPAN></td>
</tr>
</table>

Here's the XML file, parts.xml

<?xml version="1.0"?>
<!DOCTYPE PARTS SYSTEM "parts.dtd">
<?xml-stylesheet type="text/css" href="xmlpartsstyle.css"?>
<PARTS>
   <PART>
      <ITEM>Motherboard</ITEM>
      <MANUFACTURER>ASUS</MANUFACTURER>
      <MODEL>P3B-F</MODEL>
      <COST> 123.00</COST>
   </PART>
   <PART>
      <ITEM>Video Card</ITEM>
      <MANUFACTURER>ATI</MANUFACTURER>
      <MODEL>All-in-Wonder Pro</MODEL>
      <COST> 160.00</COST>
        </PART>
   <PART>
      <ITEM>Sound Card</ITEM>
      <MANUFACTURER>Creative Labs</MANUFACTURER>
      <MODEL>Sound Blaster Live</MODEL>
      <COST> 80.00</COST>
        </PART>
   <PART>
      <ITEM> 19 inch Monitor</ITEM>
      <MANUFACTURER>LG Electronics</MANUFACTURER>
      <MODEL> 995E</MODEL>
      <COST> 290.00</COST>
        </PART>
</PARTS>
 

Here's the DTD:

<!ELEMENT PARTS (PART*)>
<!ELEMENT PART (ITEM, MANUFACTURER, MODEL, COST)>
<!ATTLIST PART
   type (computer|auto|airplane) #IMPLIED>
<!ELEMENT ITEM (#PCDATA)>
<!ELEMENT MANUFACTURER (#PCDATA)>
<!ELEMENT MODEL (#PCDATA)>
<!ELEMENT COST (#PCDATA)>

Notice in the implementation, below, that the attributes specified by the XML file are overridden by the default attributes in HTML. None of the items are displayed using the color or font sizes specified by the CSS file that is referenced in the XML file, so that reference in the XML file is not effective.

No comments:

Post a Comment

Popular Posts