For both advanced authoring and simple updates, most complex forms require the use of a form editor environment. These editors can be fairly resource-intensive. Client-based forms processors can exist on high-end personal computers or lower-end portable devices. Users without access to powerful computers might not be able to update forms that need to be updated and deployed rapidly.

If you reuse the already installed XForms processor on users' devices, such as personal computers and personal digital assistants (PDAs), you can use another form to modify the original form. Forms are used to modify XML data and submit it for further processing. This XML instance data can be the XML data model for an existing form. To state it another way, an XForms application has XForms markup as its data model. This article looks at this approach using a sample disease-outbreak form and its usage and subsequent modifications and redeployment. Using this pattern, we illustrate the value of quickly editing end-user forms with lightweight editors and deploying these forms immediately, resulting in improved data collection.

About XForms

The World Wide Web Consortium (W3C) developed the XForms standard for the presentation and collection of form data. As stated in the W3C Recommendation, XForms is intended to be "the next generation of forms for the Web." XForms provides a number of advantages over existing HTML forms technology. As the Recommendation declares, "By splitting traditional XHTML forms into three parts -- XForms model, instance data, and user interface -- it separates presentation from content, allows reuse, gives strong typing -- reducing the number of round-trips to the server, as well as offering device independence and a reduced need for scripting." XForms is gaining in popularity as implementations continue to appear and existing ones improve. A wide range of client- or server-side processors, authoring tools, and workflow products now support the XForms standard.

In this article, we describe a general usage pattern for forms modification using XForms. See Resources for more developerWorks articles and other resources about XForms.

Back to top

Looking at a scenario

You'll explore a scenario in which a form is used to report disease outbreaks. As these outbreaks are reported, situations arise where the form used to collect the data will be more useful if edited to eliminate fields, add new ones, or change selection choices. The data collectors who use these forms have portable devices to collect and submit the information. Individuals, such as field supervisors, have the authority to modify these forms and redeploy them rapidly so future collected outbreak information can be more accurate. The users typically fill in these forms offline and establish network connectivity to submit them.

Back to top

The form to edit

The Disease Outbreak form in Figure 2 contains basic information that users enter for analysis of possible disease outbreaks (we simplified the form to present key concepts). Data collectors use this form, which is part of the primary application. It is important to understand this form and its composition to know how you might create a form to edit it.

The Disease Outbreak form utilizes basic field controls based on simple string types. Other fields are bound to choice lists (<xforms:select1> and <xforms:select>). To ease the entry of dates, the date-based fields are associated with the XML Schema date type, and the processor provides a date-picker for date entry. To categorize the fields, you can simply group the controls into a <xforms:group>.

The submission of the form, through the Submit Form button, is a <xforms:submission> that simply saves the instance data associated with the form back to disk. To load the external form to edit this form, invoke the Edit Form button, which by using <xforms:trigger> to initiate a <xforms:load>.

See Download for the complete source samples.

Back to top

The form that edits

The purpose of the editor form, which is also referred to as a meta-form, is not to provide a full authoring environment but rather to provide simple capabilities for a subset of the form. The XML instance data for this form is the XHTML + XForms document highlighted previously. Determine which nodes are of key value to manipulate and only bind those nodes to user-interface controls.

As the primary scenario is about mobile usage, here's the same meta-form on a PDA. It uses an emulator running Mozilla's Minimo browser with the Mozilla XForms extension.

Check boxes enable sections to assist with the complexity and length of the form. For this sample, the meta-form allows changes to only three key areas of the form: the XForms data model, Victim information, and Outbreak details. To minimize form complexity, not all of the possible attributes for these form components are surfaced.

Adding a new input field

The Disease Outbreak form is already deployed when a field supervisor decides to add a field for the data collector to provide general notes. To do so, the supervisor loads the meta-form for the Disease Outbreak form and navigates to the Outbreak Details section.

Take a quick look at how to do some of this. You can display the list of input fields using a <xf:repeat>, as shown in Listing 1.

      
<xforms:repeat model="model_html" id="repeat_outbreak_input" 
  nodeset="/xhtml:html/xhtml:body/xforms:group[@id = 
           'outbreak_details']/xforms:input">
  <xforms:input ref="./@ref" model="model_html">
    <xforms:label>ref</xforms:label>
  </xforms:input>
  <xforms:input ref="xforms:label" model="model_html">
    <xforms:label>label</xforms:label>
  </xforms:input>
</xforms:repeat>  
    

The repeat selects the input fields from the <xf:group> element with the ID "outbreak_details". Group the input fields and give each group a unique identifier to provide an easy way to filter all the input fields and not be dependent on the ordering of groups in the form.

Select Add Input to provide another <xf:input> element. Change the node it references to /do:outbreak/notes and give it a label of Notes: to yield:

To enter new <xf:input> nodes, use the <xf:trigger>, much like a button, and invoke the <xf:insert> action, as shown in Listing 2.

      
<xforms:trigger>
  <xforms:label>Add Input</xforms:label>
  <xforms:insert ev:event="DOMActivate" at="index('repeat_outbreak_input')"
    position="after" 
    nodeset="/xhtml:html/xhtml:body/xforms:group[@id = 'outbreak_details']/xforms:input"
    model="model_html"/>
</xforms:trigger>        
   

When the button is activated, a new input node is inserted into the data model, as shown previously.

To overwrite the original form, scroll down and select Save Form. You might tie this submission action Save Form to a Web service, where you submit the form to redeploy it.

Reload to the original form. Figure 7 shows the new Notes input field that is now available.

Listing 3 shows the source of the form.

      
<xforms:input ref="/do:outbreak/notes" model="model_outbreak">
  <xforms:label>Notes:</xforms:label>
</xforms:input>  
    

In this section, you learned how simple and useful a meta-form is to make changes to existing forms and get the forms back out for quick processing. You looked at the addition of an input field. You can also remove fields, change the labels, and change which data node the field is bound to.

Adding a new choice to the list

In another scenario, the Outbreak Details section might not have a commonly found symptom for data collectors to select -- say, dizziness. To add the symptom, the field supervisor loads the meta-form and updates the choices for symptoms. This involves changing the Symptom <xforms:select node (see Figure 8):

This again utilizes the <xforms:repeat> to display the collection of <xforms:select> <xforms:item>, as Listing 4 shows.

      
<xforms:repeat model="model_html" id="repeat_item2_model_html"  
               nodeset="xforms:item">
  <xforms:input ref="xforms:label" model="model_html">
    <xforms:label>label</xforms:label>
  </xforms:input>
  <xforms:input ref="xforms:value" model="model_html">
    <xforms:label>value</xforms:label>
  </xforms:input>
</xforms:repeat>
    

The <xforms:repeat> is nested within a <xforms:group> that appropriately selects the set of nodes for the Symptom <xforms:select> node. Then the <xforms:repeat> selects the <xforms:item> nodes, which make up the choices in the Disease Outbreak form for Symptoms.

To make the label Dizziness and value dizziness, the supervisor selects Add Symptom, which you see in Figure 9:

As shown in Figure 9, this also leverages the <xforms:trigger> along with <xforms:insert> to create a new <xforms:item> for the <xforms:select> node.

Save the form and reload it to yield the new <xforms:item> in the <xforms:select> as Figure 10 shows:

Look at the source of the form, as shown in Listing 5.

      
<xforms:item>
  <xforms:label>Dizziness</xforms:label>
  <xforms:value>dizziness</xforms:value>
</xforms:item>
    

In this section, you saw another valuable usage of the meta-form to quickly update a form without knowledge of detailed forms programming or use of a separate development tool. The insertion of a new choice is only one of the possible usage scenarios. With this simple meta-form, you also can change choice labels and values or remove a choice completely.

Back to top

Notes on how the forms were developed

You might find it useful to explore how these forms were created and modified. Starting with the Disease Outbreak form, we developed its data's schema by creating a hand-crafted outbreak.xsd. Next, we generated a sample XML document based on the XML Schema provided. To accomplish this, we use the Eclipse-based Web Tools Platform (WTP) tooling -- specifically, by performing the action Generate > XML File from the XML Schema. Then we updated the XML document using the WTP XML editor, which was ready for generating a XHTML + XForms file. We used XML Forms Generator (XFG) and selected the new XML file, then initiated the action Generate XHTML/XForm. We edited the resulting file with the WTP XML editor and the Compound XML Document Toolkit (CXDTK). The modifications consisted of providing groups and usage of an existing CSS stylesheet.

Once the Disease Outbreak form was completed, we could automatically generate the form to modify it. To generate the meta-form XHTML/XForm file using the original Disease Outbreak XHTML/XForm file as the external data model, we selected the Disease Outbreak form (after renaming it DiseaseOutbreak.xml) and performed the XFG action Generate XHTML/XForm. Lastly, we updated the meta-form using the WTP XML editor and the CXDTK to again provide logical grouping and remove unwanted input fields. The WTP XML editor, along with the CXDTK, provided content-assisted editing and validation.

Overall, we developed the forms fairly quickly and easily. The primary XForms processor used to run the samples was the Mozilla XForms extension version 0.5 running in Firefox 1.5.0.2.

Back to top

Conclusion

This article focuses only on some simple examples to illustrate the idea behind an XForm that updates an XForm. You can extend these scenarios to include meta-forms that:

• Add or update hint and help text
• Change the types of controls (for example, change <xforms:select1> to <xforms:select> or make it an open or closed selection)
• Add or remove groups
• Reorder groups and fields
• Modify the data model binds

XForms has proven itself as a viable and useful form technology for traditional form-based applications. This article has shown another usage and how XForms can greatly simplify the application.

Back to top

Download

Information about download methods

Resources

Learn

• Get ready for XForms (developerWorks, September 2002): Get a head start on how to build online forms that are extensible and suitable for any platform.
  
  
• Model-driven XML forms generation, Part I: Start using the XML Forms Generator (developerWorks, August 2005): Generate standards-compliant forms from XML instance data with the XML Forms Generator, Model Driven Development concepts, and the Eclipse Modeling Framework.
  
  
• XML and XML Schema: See developerWorks XML Zone for a wide range of technical articles and tips, tutorials, standards, and IBM Redbooks.
  
  
• W3C XForms public site: Consider this your starting point for learning and using XForms.
  
  
• XForms 1.0 Second Edition (W3C, March 2006): Dig into the XForms spec and learn about reuse, stronger typing, and improved use for the next generation of Web forms.
  
  

Get products and technologies

• XML Forms Generator: Generate functional forms with XForms mark-up embedded within an XHTML document from a XML data instance or a WSDL document with this standards-based, data-driven Eclipse plug-in from alphaWorks.
  
  
• Compound XML Document Toolkit: With this standards-based, schema-driven toolkit from alphaWorks, create, directly edit, and serialize mixed-namespace XML documents for flexibility and power.
  
  
• IBM trial products for download: Build your next development project on Linux with IBM trial software, available for download directly from developerWorks.
  
  
• Mozilla XForms project and Mozilla Minimo project: Explore a Mozilla extension based on XForms and a small, but powerful Web browser for mobile devices, respectively.
  
  
• List of XForms implementations from W3C: Connect to numerous XForm implementations.
  
  

Discuss

• XML-related and other forums: Join the discussions in a variety of developerWorks forums
  
  
• developerWorks blogs: Get involved in the developerWorks community.
  
  

About the authors

Comments (Undergoing maintenance)

Back to top

Trademarks  |  My developerWorks terms and conditions

Table of contents

• About XForms
• Looking at a scenario
• The form to edit
• The form that edits
• Notes on how the forms were developed
• Conclusion
• Download
• Resources
• About the authors
• Comments

Next steps from IBM

With the no-charge DB2 Express-C, pureXML and evolving your XML schemas you can easily increase development and application performance.

---

• Try: Download a free trial version of DB2 Express-C, which includes pureXML technology that is ideally suited for managing XML schema and relational data.
• Article: See how to use DB2's pureXML schema evolution capabilities, that evolve schemas without making any changes to your applications.
• Tutorial: This tutorial shows you how using a native DB2 XML database enables changes in an existing XML schema to also appear in your application code.
• Demo: This demo shows you how easy it is to create a DB2 database for storing XML data.
• Buy: DB2 9 for Linux, UNIX and Windows

My developerWorks community

Dig deeper into XML on developerWorks

Rate a product. Write a review.

Write a review for Rational products today!

Special offers