Visit Our Home Page
 




Creativyst Docs 
I.E. ONLY: Display XML in HTML 


 


 
 




















 
 

How To:
Display XML Data Using I.E. Data Islands
Use Microsoft's data-binding to connect your web pages to outside XML data




 
Important note: This is not for Web sites that are visible to the general public. If you'd just like to display RSS feeds on a web page (for example), there are much better ways. Also, for a general discussion of using XML data within general web pages see our article entitled Displaying XML in HTML (coming soon).

The technique discussed here only works on Microsoft Internet Explorer version 5.0 and higher. It is documented here for use by Microsoft shops who can insist that their target audience use ONLY Microsoft I.E. This might be the case for some corporate intranet sites for example.

We recommend however, that shops setting up new intranet sites try to avoid using proprietary technology, even if they are pure Microsoft shops. By not locking into a specific vendor you will retain the flexibility to choose a different browser type in the future.

 







[top]
Overview
This document will examine a simple, easy-to-implement technique for displaying XML data on web pages without resorting to server-side programming. In the first and simplest case presented, no scripting of any kind is required. Note however that the particular technique discussed in this document only works in Microsoft Internet Explorer so is only useful in situations where the viewer's browser choice is controlled or can be mandated.

We will start this tutorial with a simple fictitious XML data file. The simple structure of this file will allow webmasters to cut through initial learning confusion and show the basic concepts with clarity in the early learning.

We will then move on to displaying real XML data-feeds from around the Web. This will give the web designer an immediate appreciation for what's involved in using these techniques in the real-world display situations


[top]
Benefits of XML Data Display
So, why would you want to show XML data from within your static HTML web pages?

For one thing, many free, real-time content feeds are now made available on the Web as native XML. The most widely used and well known of these formats is RSS. The portal site, www.NewsIsFree.com currently carries a list of over 2000 RSS feeds featuring everything from the latest news & weather, to what's being talked about on the Blogs.

XML feeds are constantly being updated in real-time by their sources. The portal site mentioned here represents only a small corner of the growing list of resources available on the Web in XML formats.


[top]
Zen and the Art of Skinning A Cat
There are many ways to display XML data within the text of HTML documents. Here we will concentrate on one of those techniques which allows you to display XML data fields in the table elements (and other elements) on your web pages. This technique is called Data Binding. It is at once very easy to implement and yet very powerful and flexible. It has one major disadvantage though for all but the most hard-core Microsoft shops; it only works on Internet Explorer 5.0 or higher (at the time of this writing).


[top]
Starting With Simple Example Data.
We'll start with the easiest possible example, just to demonstrate how easy it is (at one extreme) to display an XML feed using Data Binding. The first example document we'll use here is completely fictitious. The XML source for this document is included here in our document directory.

http://www.creativyst.com/Doc/Articles/XMLhtmlT/Products.xml

This is a well-formed XML document with a document element called <Products> which can be filled with one or more <Item> elements. Each <Item> element may contain the following elements which themselves contain text (#PCData)
  • Name Short name.
  • Number The item number
  • Description A short description (optional)
  • Price How much the item sells for
In the easiest possible form of the method being discussed here, no scripting of any kind is needed. You use plain HTML to accomplish the presentation of XML data.

Run example #1  
  <HTML>

  <HEAD>
      <TITLE>Show XML In Your HTML - Example 01 (Using Made Up Data)</TITLE>
  </HEAD>

  <BODY>

      <!-- This is the 'Data Island' element  -->
      <XML ID="MyProducts" SRC="Products.xml"></XML>


      <!-- Note the DATASRC attribute naming the MyProducts island    -->
      <TABLE ID="ProdTable" DATASRC="#MyProducts" BORDER="1">
      <THEAD>
      <TH>
          Item Name/Description
      </TH>
      <TH>
          Item Number
      </TH>
      <TH>
          Price
      </TH>
      </THEAD>

      <TR>
      <TD>
          <B><Span DATAFLD="Name"></SPAN></B><BR>
          <SPAN DATAFLD="Description"></SPAN>
      </TD>
      <TD>
          <SPAN DATAFLD="Number"></SPAN>
      </TD>
      <TD>
          <SPAN DATAFLD="Price"></SPAN>
      </TD>
      </TR>

  </TABLE>


  </BODY>
  </HTML>

 


How:
  • Open a data island called MyProducts linked to our xml file
    • <XML ID="MyProducts" SRC="Products.xml"></XML>
  • Use the attribute DATASRC to link our table to the data island. Note how the data-island ID is preceded by a #
    • <TABLE ID="ProdTable" DATASRC="#MyProducts" BORDER="1">
  • Used THEAD tags in the table to define the header. If we used a TR tag for the header it would have been repeated over each row of data displayed.
  • Defined a single table-row for data.
  • Used the DATAFLD attribute to bind data to SPAN elements. You can place more than one field in each table element.
    • <SPAN DATAFLD="Number"></SPAN>



[top]
One More Faux Data Example: Paging
The data display above is fine for our little test document with only 15 rows in it, but what if you're document has hundreds of rows, or even thousands of rows. Then you'll need to page through them. This is only a little more dificult than what we did above.

Run example #2  

  <HTML>

  <HEAD>
      <TITLE>Show XML In Your HTML - Example 02 (Using Made Up Data)</TITLE>
  </HEAD>

  <BODY>

      <!-- This is the 'Data Island' element  -->
      <XML ID="MyProducts" SRC="Products.xml"></XML>


      <!-- Make the standard paging buttons.          -->
      <!-- Link them to the TABLE using the TABLE's   -->
      <!-- ID tag. (table links to the data island)   -->
      <!-- Function names are self-explanatory        -->
      <BUTTON ONCLICK="ProdTable.firstPage()">|<</BUTTON>
      <BUTTON ONCLICK="ProdTable.previousPage()"><</BUTTON>
      <BUTTON ONCLICK="ProdTable.nextPage()">></BUTTON>
      <BUTTON ONCLICK="ProdTable.lastPage()">>|</BUTTON>


      <!-- Note the DATASRC attribute naming the MyProducts island    -->
      <!-- Also, the PAGESIZE=5 attribute for five rows at a time     -->
      <TABLE
           ID="ProdTable" DATASRC="#MyProducts" BORDER="1" DATAPAGESIZE="5">
 
     <THEAD>
      <TH>
          Item Name/Description
      </TH>
      <TH>
          Item Number
      </TH>
      <TH>
          Price
      </TH>
      </THEAD>

      <TR>
      <TD>
          <B><Span DATAFLD="Name"></SPAN></B><BR>
          <SPAN DATAFLD="Description"></SPAN>
      </TD>
      <TD>
          <SPAN DATAFLD="Number"></SPAN>
      </TD>
      <TD>
          <SPAN DATAFLD="Price"></SPAN>
      </TD>
      </TR>

  </TABLE>


  </BODY>
  </HTML>

 


How:
  • Add Four buttons shown to the code from example #1. Note that the onclick functions are members of the table object from your ProdTable.
  • Add DATAPAGESIZE attribute to the TABLE and set it to the number of rows you would like to display each time.



[top]
Getting Real: Handling Hierarchical XML Data (RSS)
A lot of XML data exists as simple flat sets of a single element type just like our example data. But one of XML's advantages is its ability to represent more expressive document structures.

The RSS file format is often used to distribute changing data-streams on the Web. it is one example of how XML can be used to represent more structured types of data. So, for our last example we will use a real RSS file found on the Web at ReaderBoards.com. They provide a free news-feed called News In Queue™, which is a set of recent press-releases that are relevant to the call center industry. The XML feed for News In Queue™ is located at:

http://readerboards.com/O/NIQ/Newsfeed.xml


Run example #3  


  <HTML>

  <HEAD>
      <TITLE>Show XML In Your HTML - Example 03 (ReaderBoards.com: News In Queue)</TITLE>
  </HEAD>

  <BODY>

      <!-- This is the 'Data Island' element  -->
      <XML ID="NIQ" SRC="Newsfeed.xml"></XML>

<!-- Or set your browser security to allow this one directly from the site -->
<!--
      <XML ID="NIQ" SRC="http://www.readerboards.com/O/NIQ/Newsfeed.xml"></XML>
-->

      <TABLE ID="ChanTable" DATASRC="#NIQ" BORDER="1">

      <TR>
      <TD>
          <!-- ====================================== -->
          <!-- Ok, this requires some explanation     -->
          <!-- In the Microsoft data-binding scheme   -->
          <!-- attributes are considered nested       -->
          <!-- sub-elements within the element they   -->
          <!-- are attributes of.  In RSS that means  -->
          <!-- <rss version="0.91"> translates to:    -->
          <!-- <rss>                                  -->
          <!--    <version>                           -->
          <!--        0.91                            -->
          <!--        <channel>                       -->
          <!--            ... rest of the document    -->
          <!-- ====================================== -->

          <B>RSS Version:</B> <SPAN DATAFLD="version"></SPAN>
      </TD>
      </TR>

      <TR>
      <TD>
          <TABLE DATASRC="#NIQ" DATAFLD="channel" BORDER="1">
            <THEAD>
              <TH>
                  Channel Information
              </TH>
            </THEAD>
            <TR>
            <TD>
                <B>Title:</B> <SPAN DATAFLD="title"></SPAN><BR>
                <B>Description:</B> <SPAN DATAFLD="description"></SPAN><BR>
                <B>Language:</B> <SPAN DATAFLD="language"></SPAN><BR>
                <B>Link:</B> <SPAN DATAFLD="link"></SPAN><BR>
                <B>CpyRight:</B> <SPAN DATAFLD="copyright"></SPAN><BR>
                <B>Editor:</B> <SPAN DATAFLD="managingEditor"></SPAN><BR>
                <B>webmaster:</B> <SPAN DATAFLD="webmaster"></SPAN><BR>
            </TD>
            </TR>
            <TR>
            <TD>
              <TABLE DATASRC="#NIQ" DATAFLD="item" BORDER="1">
              <THEAD>
                <TH>
                    Stories
                </TH>
              </THEAD>
              <TR>
              <TD>

                <!-- ==================================== -->
                <!-- Note here how the link binds to the  -->
                <!-- anchor field.                        -->
                <!-- ==================================== -->
                <A DATASRC="#NIQ" DATAFLD="link"
                 ><B><SPAN DATAFLD="title"></SPAN></B></A><BR>
                 <SPAN DATAFLD="description"></SPAN><BR>
              </TD>
              </TR>
              </TABLE>
            </TD>
            </TR>

          </TABLE>
      </TD>
      </TR>

  </TABLE>


  </BODY>
  </HTML>



 


How:

It's all fairly logical.

  • Nest each table based on how the elements themselves are nested.
  • We've left all the borders on so you can see the nesting represented graphically.
  • The nested tables must be linked to the data-island just like the top-level table. Inside (nested) tables must also be linked to the element who's nested fields they will display. Do this using the DATAFLD attribute within the TABLE element.
  • Note that the attributes of XML elements are interpreted as being nested elements within the element they are attributes of. That is:
    • <elmA B="5"/> is the same as
    • <elmA> <B>5</B> </elmA>
    • (see the comments in the html code above).
  • Ask in the forum if you need more help with this.



[top]
Related Topics in the Forums













 


















© Copyright 2002 - 2007 Creativyst, Inc.
ALL RIGHTS RESERVED

Written by: John Repici