HTML With XML Data Binding

“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>

 

 

7 thoughts on “HTML With XML Data Binding

  1. 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.

  2. 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.

  3. 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!

  4. 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&quot; width="20" height="20"> <param name="SRC" value="swf/thisisthesoundfile.swf"> <embed src="swf/thisisthesoundfile.swf" pluginspage="http://www.macromedia.com/shockwave/download/&quot; 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

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

  6. 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.

Leave a Reply

Your email address will not be published. Required fields are marked *