HTML With XML Data Binding

Published Tue, Apr 13 2004 22:40 | coad

“Vocabulary.html”

 

This is used in conjunction with “Vocabulary.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.  Note that this is also a well-formatted XHTML document.

 

 

<?xml version="1.0"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 

<!-- Created by Noah Coad, coad.net/noah, noah@coad.net, 3/23/04 -->

<!-- This is a proper XHTML document. -->

 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

   <head>

      <title>Vocabulary Words</title>

      <style type="text/css">

         body            {font: 10pt verdana;}

         table           {font: 10pt verdana;}

         h1              {font: bold 13pt; color: navy;}

         th              {color: white; background: darkmagenta;}

      </style>

   </head>

  

   <body>

      <xml id="dsoVocabulary" src="Vocabulary.xml" />

  

      <h1>Vocabulary Words</h1>

     

      <table datasrc="#dsoVocabulary" cellpadding="1">

         <thead>

            <th>Word</th>

            <th>Description</th>

         </thead>

         <tr>

            <td><span datafld="Word"></span></td>

            <td><span datafld="Desc"></span></td>

         </tr>

      </table>

     

      <p><a href="http://dictionary.reference.com/">Dictionary</a> | <a href="http://thesaurus.reference.com/">Thesaurus</a>  | <a href="http://msdn.microsoft.com/library/default.asp?url=/workshop/author/databind/dataconsumer.asp">HTML Data Binding</a></p>

  

   </body>

</html>

 

 

Filed under:

Comments

# coad said on April 14, 2004 6:46 PM:

Great point. I think a log of people have forgotten that this capability exists in IE 5+. It's great for a quick display of data if you know the use will be using IE. I've used this even to dynamically add rows to the grid (without a postback) - with javascript. Great post.

# coad said on April 15, 2004 12:09 AM:

You're the first person I've heard of that actually used the basic HTML data binding in production. I'm glad to hear it worked so well. Thanks for the feedback Jeff.

Any other feedback on specific ways this has been useful would be appreciated from readers.

# coad said on April 15, 2004 8:43 PM:

Great XML posts! I have used the IE xml data binding in an actual solution
for a client. It allowed several records to be added before posting back
the end result to the server. And this was with ASP 3.0. Pretty cool
feature. I think I have been a little intimidated with XSL, although I have
used it to convert xml to a different form (from attributes to elements). I
didn't know how much you were into XML!

# TrackBack said on April 16, 2004 7:06 PM:

Great XML DataBinding post

# coad said on May 19, 2004 11:42 PM:

hi, Noah:

Search-engined my way to your blog entries on xml and databinding - those vocabulary files.

I must profess total aloofness (=ignorance) when it comes to seeing how your files work. I am a know-only-how-to-change-the-tire-and-sparkplugs kind of guy, so i am not sure how to activate the page, and get it to read the data.

I am wanting to build vocabulary lists for different languages, and i want it to be as simplified as possible (thus the use of .txt files or .xml files for the data) so that people everywhere can contribute to and build up the lists quickly.

I have had some success using .txt files and HTML databinding, but now i want to associate a sound file for each word and its sample sentences as part of the word database, and then have a kind of flash mx embed arrow button to quickly hear the word or the sentence. but the code for the flash sound file is rather extensive for each word
-----
<p align="right"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#3,0,0,0" width="20" height="20"> <param name="SRC" value="swf/thisisthesoundfile.swf"> <embed src="swf/thisisthesoundfile.swf" pluginspage="http://www.macromedia.com/shockwave/download/" type="application/x-shockwave-flash" width="20" height="20"> </embed> </object></p>

----

and if i want to do those for 1000s of words, it would be a very long piece of code.

If I juse use a href, it kicks in with my default audio player, which is not too bad, but i want to keep the student visitor focussed only on the one screen with all controls on it....

I probably haven't explained it very clearly, but you can see a bit of an example at
http://twohandsapproach.org/webside2/vocab/enmp108.htm

Any suggestions you can give would be greatly appreciated.

Steve Watson
English Instructor
Guangzhou Institute of Technology
Guangzhou, China

co-author The Two Hands Approach to the English Language

# coad said on December 29, 2004 2:19 AM:

Is this feature available in other browsers like Opera or Mozilla? I made a quick search on their forums but found nothing.

# coad said on December 29, 2004 11:04 AM:

Don't know, but you can try it out and post back here whether it does or not. :)

# coad said on April 21, 2005 10:29 PM:

At the NC Dept. of Public Instruction, we use client-side databinding (IE only) to dynamically display from one to thousands of records, perform client-side sorting (using XSL), etc. This is within an HR management system used by all the public schools in NC. Our users are very pleased with the speed and flexibility of this approach.

When the user requests data or changes search conditions, the src of the data island is dynamically built. When the data is returned, record counts are displayed. The data sits in DB2, and a single Domino agent performs a query, based on the query id and lookup values presented in the URL. The recordset is wrapped in XML tags and returned to the browser by the agent. We currently have over 150 queries that are dynamically modified and submitted by the single agent.

For example, the agent can be called as follows:

../../getGeneric.xml?openagent&queryid=ApplicantsByPositionChoice&1=ELEMENTARY&2=01-01-2005

When the getGeneric.xml agent is called, it finds the ApplicantsByPositionChoice query, which might look like this...

select * from apps.applications
where position_choice = '$$1$'
and create_date >= '$$2$'

(The actual query will be more complex and the date format in the query above is probably wrong.)

The agent, after retriving the query, substitutes all the numbered values in the query ($$1$, $$2$, etc.) with the values found in the url (ELEMENTARY, 01-01-2005).

When the data is returned, the field names and values are read from the recordset and made into xml tags. In this way, a single agent (or servlet) can be used to perform nearly all the data service to the browser.

We use a similar solution for web reports, with XML/XSL, though the solution is more complex because it allows nesting of query data to produce a more complex XML document. As far as data binding is concerned, a "flat" XML file is all that's needed.