|
|
How To:
Display XML Data Using I.E. Data Islands [OBSOLETE]
Use Microsoft's data-binding to connect
your web pages to outside XML data
| |
|
[P.S.] MOST IMPORTANT NOTE: This technique is totally
obsolete at this point because, well, nobody uses microsoft
Internet Explorer anymore.
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.
|
|
|
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
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.
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).
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.
/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.
|
|
<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>
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.
|
|
<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.
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
|
|
<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.
Related Topics in the Forums
|
|
