XML data islands offer a useful mechanism to display Web form data

At first blush, XML data islands may not seem that useful for client-side Web development. But, when they are bound to HTML objects, they can be used as an alternative to hidden HTML frames.

An XML data island is Extensible Markup Language (XML) embedded in an HTML document. By themselves, data islands are not that important or helpful, but if employed correctly, they can be useful for storing client-side information.

Let's start with a simple XML data island that represents individual items in an order entry system, as shown in Listing A.

Embedded in an HTML document, this data island by itself is useless. In fact, unless you choose to view the page’s source, you don’t even know that the data island is there. But strangely enough, the fact that the data island is hidden from the casual user can be of use. The data island can provide a method of storing information on the client’s machine in much the same way that hidden HTML frames do. Data islands differ from hidden HTML frames in that data islands can be bound to HTML objects. And since they are XML, they can be manipulated on the client machine as any other XML document.

Imagine that our sample data island represents the contents of a shopping cart. Customers expect certain features from an e-commerce application, like the ability to view a shopping cart whenever the mood strikes. Having the necessary information on the client side allows the dynamic display of the shopping cart contents.

Binding data islands
HTML binding refers to telling the client’s browser that the value associated with an HTML object comes from a particular source. When you bind an HTML object, updating its value results in the text for the associated node being updated. For example, the value an input box can come from a node of an XML data island, as shown in Listing B.

This snippet results in two text boxes, the first containing Easton and the second containing Pennsylvania. When you change the contents of either input box, data binding shows its strength. If, for example, Wilson Borough is entered in the text box that is bound to the data island’s city node, that node’s text will change from Easton to Wilson Borough, as shown in Listing C.

You need to keep three things in mind with binding HTML objects to an XML data island. First, not every HTML object can be bound. Second, not every HTML object updates the data island. Third, not every HTML object renders the data island’s node text as HTML. Table A lists the HTML objects that can be bound, along with whether the object can update the data island and whether the data island’s node text is rendered as HTML.
Table A
HTML object Updateable Renders HTML
a No No
applet Yes No
button No Yes
div No Yes
frame No No
iframe No No
img No No
input type="button" No Yes
input type="checkbox" Yes No
input type="hidden" Yes No
input type="password" Yes No
input type="radio" Yes No
input type="text" Yes No
legend No Yes
marquee No Yes
select Yes No
span No Yes
table No Yes
textarea No No

The fact that not every bindable HTML object updates the data island makes sense because the majority of HTML objects are display only. Even the fact that not every object renders the data island’s node text makes sense. For example, consider the HTML select object. When it is bound to a node of a data island, the select object’s options don’t reflect the data island’s node text. Instead, the node text reflects the selected select object’s option.

Binding tables for display purposes
One of the most powerful features of binding data islands is the ability to bind HTML tables. Listing D shows an HTML table that is bound to the data island in Listing A. Notice that although there is only one table row (<tr>…</tr>), the number of table rows produced is dependent on the contents of the data island.

Binding tables for input purposes
A while back, I had to create a page for an order entry system that allowed the client to enter up to 15 items, line by line. I used Active Server Pages (ASP) forms and JavaScript to accomplish this task. Needless to say, the scripting required was somewhat complex. Using a combination of a bound HTML table and input objects yields the same results with substantially less scripting required, as shown in Listing E.

Changes made to the input objects in the table are reflected in the data island’s XML. With this method, only two additional items are necessary to complete the application. First are client-side edits to validate input, make sure that the quantity is numeric, and the like. The second is a method, such as XMLHTTP, to get the data island’s XML from the client to the server and vice versa. With these final two pieces, my old application is outdated.

Using XML data islands and HTML binding, it is possible to produce pages with substantially less coding than the equivalent conventionally written pages. The resulting pages are also significantly smaller than their conventional counterparts, so pages load faster and users are happier. And since less client-side scripting is required, there are fewer opportunities to introduce errors.

Editor's Picks