Home arrow XML arrow Page 6 - XForms Basics

A Tour of Nowhere - XML

XMLToday, XML is most definitely in the mainstream, and proving its mettle by making all kinds of new and unique applications possible (witness the success of Amazon.com's AWS service, or the Google APIs, both based on XML technology). This article provides an introduction to XForms, a recent W3C Recommendation that suggests using XML to manage the display, input and processing of form data on the Web.

TABLE OF CONTENTS:
  1. XForms Basics
  2. Out with the Old...
  3. ... In With the New
  4. What's In A Name?
  5. Welcome to Nowhere
  6. A Tour of Nowhere
By: Harish Kamath, (c) Melonfire
Rating: starstarstarstarstar / 41
January 12, 2004

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement

First up, the definition of the XForms model: unlike the previous example, I've defined the instance data tree in a separate file and imported it via the "src" attribute.


<!-- form model -->
<
xforms:model id="immigration">
 <
xforms:instance src="immigration.xml" />
</
xforms:model>
<
basefont face="Arial">

Here's what "immigration.xml" looks like:


<?xml version="1.0" encoding="iso-8859-1"


<!-- immigration.xml -->
<immigrant>
 <name />
 <citizenship />
 <purpose />
 <immunization />
 <address />
</immigrant>

You've already seen how to use an <xforms:input> element in previous examples, so I won't go into the details again. Do note, however, my usage of the <xforms:label> and <xforms:hint> elements within it. These come in handy to provide descriptive human-readable information about the control.


 <xforms:input id="txtname" model="immigration" 
ref="/immigrant/name">
  <
xforms:label>Name</xforms:label>
  <
xforms:hint>
  
Enter your name here
  
</xforms:hint>
 </
xforms:input>

The <xforms:select1> element allows the user to select one item from a series of options:


 <xforms:select1 model="immigration" 
 
ref="/immigrant/purpose" appearance="full">
  <
xforms:label>Purpose of visit</xforms:label>
  <
xforms:hint>
  
Please state the purpose of your visit
  
</xforms:hint>
  <
xforms:item>
   <
xforms:label>Business</xforms:label>
   <
xforms:value>B</xforms:value>
  </
xforms:item>
  <
xforms:item>
   <
xforms:label>Pleasure</xforms:label>
   <
xforms:value>P</xforms:value>
  </
xforms:item>
  <
xforms:item>
   <
xforms:label>Other</xforms:label>
   <
xforms:value>O</xforms:value>
  </
xforms:item>
 </
xforms:select1>

Within the <xforms:select1> element, the list of available choices is defined via one or more <xforms:item> elements, each of which must have a label and value; the former is displayed to the user and the latter is passed to the server on submission.

A special "appearance" attribute in the <xforms:select1> element can be used to control the display of the element in the browser ("full" for a list of all values, "minimal" for a minimum number of values, and "compact" for a scrollable list).

Similar, though not identical to the above, is the <xforms:select> element, which allows the user to select more than one value from the options available.


 <xforms:select model="immigration" 
 
ref="/immigrant/immunization" appearance="full">
  <
xforms:label>Immunization</xforms:label>
  <
xforms:hint>
  
Please select the diseases that 
  you have been immunized against
  
</xforms:hint>
  <
xforms:item>
   <
xforms:label>Smallpox</xforms:label>
   <
xforms:value>100</xforms:value>
  </
xforms:item>
  <
xforms:item>
   <
xforms:label>Malaria</xforms:label>
   <
xforms:value>113</xforms:value>
  </
xforms:item>
  <
xforms:item>
   <
xforms:label>Yellow fever</xforms:label>
   <
xforms:value>56</xforms:value>
  </
xforms:item>
  <
xforms:item>
   <
xforms:label>Typhoid</xforms:label>
   <
xforms:value>174</xforms:value>
  </
xforms:item>
 </
xforms:select>

As before, the choices are defined via a series of <xforms:label> and <xforms:value> elements, while the "appearance" attribute can be used to control the appearance of the control ("full" for a list of all values, "minimal" for a minimum number of values, and "compact" for a scrollable list).

Finally, the <xforms:textarea> element is used to display a multi-line text entry box, suitable for use with large blocks of text.


 <xforms:textarea model="immigration" 
 
ref="/immigrant/address">
  <
xforms:label>
  
Address in home country
  
</xforms:label>
 </
xforms:textarea>

And here's what it all looks like:

Now, all this is fine and dandy, but how about submitting the form and actually doing something with the user's data?

Well, that's a whole new kettle of fish, one which involves jumping through a complicated series of hoops involving the <xsd:submission> element. I don't plan to discuss it now. Instead, I'm going to defer it to the second segment of this tutorial and encourage you to spend the interim playing with the various form controls to understand how they work. Each control comes with specific properties that can be used to customize its behavior, so take a look at the specification, get comfortable with them, try out a couple of implementations, and come back next week to take the next step in our XForms journey!

Note: Examples are illustrative only, and are not meant for a production environment. Melonfire provides no warranties or support for the source code described in this article.
 



 
 
>>> More XML Articles          >>> More By Harish Kamath, (c) Melonfire
 

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort
   

XML ARTICLES

- Google Docs and Xpath Data Functions
- Flex Array Collection Sort and Filtering
- The Flex Tree Control
- Flex List Controls
- Working with Flex and Datagrids
- How to Set Up Podcasting and Vodcasting
- Creating an RSS Reader Application
- Building an RSS File
- An Introduction to XUL Part 6
- An Introduction to XUL Part 5
- An Introduction to XUL Part 4
- An Introduction to XUL Part 3
- An Introduction to XUL Part 2
- An Introduction to XUL Part 1
- XML Matters: Practical XML Data Design and M...

Developer Shed Affiliates

 


Dev Shed Tutorial Topics: