Home arrow XML arrow Page 5 - XForms Basics, Part 2

Not My Type - XML

In the first part of this series, I gave you a quick introduction to the newly-released XForms 1.0 specification, by explaining the fundamental concepts of the XForms model. Now that you know the basics, find out how to submit XForms data to a server-side script or save it to a local client file, and also read about how XForms can integrate with XML Schemas to simplify input validation.

TABLE OF CONTENTS:
  1. XForms Basics, Part 2
  2. Welcome to Immigration
  3. Data Overload
  4. A Custom Job
  5. Not My Type
  6. The Number Game
By: Harish Kamath, (c) Melonfire
Rating: starstarstarstarstar / 8
January 14, 2004

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement

Speak to any Web developer, and they're sure to complain about the need to write complex JavaScript code to carry out elementary data validation on form input. With XForms, they are no longer hostage to JavaScript – Xforms is closely integrated with XML Schema, and can use XML Schema datatypes to perform both simple and complex form validation. Take a look at the next example:


<html xmlns="http://www.w3.org/1999/xhtml"
xmlns
:xforms="http://www.w3.org/2002/xforms/cr"
<head>
<!-- 
define the form model -->
<xforms:model id="enter">
 
<xforms:instance>
  
<user xmlns:xsi=
    
"http://www.w3.org/2001/XMLSchema-instance"
     xmlns
:xsd=
    
"http://www.w3.org/2001/XMLSchema">
    
<name 
    xsi
:type="xsd:string" />
    
<age 
    xsi
:type="xsd:integer" />
    
<dob 
    xsi
:type="xsd:date" /> 
    
<height 
    xsi
:type="xsd:float" />
    
<weight 
    xsi
:type="xsd:decimal" /> 
    
<immunizaton 
    xsi
:type="xsd:boolean" />    
  
</user>
 
</xforms:instance>
</xforms:model>
 
<
basefont face="Arial">
 
</
head>
 
<
body>
 
<
font size="+1">So you wanna join 
the Army
?</font>
<br /><br />
 
<!-- 
form controls -->
<xforms:input id="txtname" 
  model
="enter" ref="/user/name">
 
<xforms:label>Name</xforms:label>
 
<xforms:hint>Enter your 
                   name
</xforms:hint>
 
<xforms:alert>Haven't you got a name, 
                    mate?</xforms:alert>
</xforms:input>
 
<xforms:input id="txtage" 
  model="enter" ref="/user/age">
 <xforms:label>Age</xforms:label>
 <xforms:hint>Enter your age in 
                   years</xforms:hint>
 <xforms:alert>Can'
t you readTell me 
                    your age
!</xforms:alert>
</xforms:input>
 
<
xforms:input id="txtdob" 
model
="enter" ref="/user/dob">
 
<xforms:label>
    Date of birth
 
</xforms:label>
 
<xforms:hint>
    Enter your date of birth
 
</xforms:hint>
 
<xforms:alert>
    You can forget your birthday 
    gift
brother!
 
</xforms:alert>
</xforms:input>
<
xforms:input id="txtheight" 
model
="enter" ref="/user/height">
 
<xforms:label>Height</xforms:label>
 
<xforms:hint>
  Enter your height in feet 
and inches
 
</xforms:hint>
 
<xforms:alert>
  Don
't have a measuring tape, do you?
 </xforms:alert>
</xforms:input>
 
<xforms:input id="txtweight" 
model="enter" ref="/user/weight">
 <xforms:label>Weight</xforms:label>
 <xforms:hint>Enter your weight in 
                   pounds</xforms:hint>
 <xforms:alert>Come on fatso, '
fess 
                     up
!</xforms:alert>
</xforms:input>
 
<
xforms:input id="boolimmunization" 
  model
="enter" ref="/user/immunization">
 
<xforms:label>Have you been immunized 
    against major diseases
?</xforms:label>
 
<xforms:hint>Enter your immunization 
                   status
</xforms:hint>
 
<xforms:alert>Don't lie, we have syringes
           with large needles!</xforms:alert>
</xforms:input>
</body>
</html>

At first glance, the above example looks a lot like the examples we have discussed so far. But a closer inspection of the model reveals a subtle difference…


<xforms:model id="enter">
 
<xforms:instance>
  
<user 
     xmlns
:xsi=
     
"http://www.w3.org/2001/XMLSchema-instance"
     xmlns
:xsd=
     
"http://www.w3.org/2001/XMLSchema">
    
<name xsi:type="xsd:string" />
    
<age xsi:type="xsd:integer" />
    
<dob xsi:type="xsd:date" /> 
    
<height xsi:type="xsd:float" />
    
<weight xsi:type="xsd:decimal" /> 
    
<immunizaton xsi:type="xsd:boolean" />    
  
</user>
 
</xforms:instance>
</xforms:model>

For starters, I have two new namespaces, one for XML Schema and the second for the XML Schema instance. Both these are required for the new features that I'm going to introduce in this example.

Next, take a closer look at the definition of the XForms model. You'll see that each element contains a new "xsi:type" attribute. This attribute, which references datatypes from the XML Schema namespace (hence the "xsd:" namespace identifier) makes it possible to easily use those datatypes within XForms. Once datatypes have been defined in this manner, and links to the form controls have been set up via "ref" attributes, the XForms processor will generate an error if the data entered into a field does not match the datatype associated with it in the form model.

How is this error handled? Simple! With the new <xforms:alert> element; it can be used to display control-specific errors or alerts. Take a look at this snippet, which illustrates:


<xforms:input id="txtage" 
  model
="enter" ref="/user/age">
 
<xforms:label>Age</xforms:label>
 
<xforms:hint>Enter your age in 
                   years
</xforms:hint>
 
<xforms:alert>
  Can
't you read? Tell me your age!
 </xforms:alert>
</xforms:input>

Here, if the user does not enter data consistent with the definition for the control, the message specified in the <xforms:alert> field will be displayed.



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