XForms

XForms

Welcome to the XForms Tutorial and Cookbook Wikibook!

XForms is a World Wide Web Consortium recommendation for creating web forms and web applications. It's easy to learn, provides a rich user experience and does not require you to learn JavaScript.

There are many different implementations of XForms and this cookbook is designed to work with any of them. A list of implementations is available on the W3C website.

This is a collaborative project and we encourage everyone who is using XForms to contribute their complete working XForms examples. All submissions must be licensed under the Creative Commons Attribution-ShareAlike 2.5 license.

Note: many of the examples in this wikibook still use the "nodeset" attribute for binding rules, groups and repeats. Most XForms systems (Orbeon and betterForm) now use the "ref" attribute and may no longer support the older "nodeset" attributes. XSLTForms 1.0RC does not allow @ref instead of @nodeset but builds since rev.559 do support @ref where @nodeset was previously used. We will be updating the examples accordingly.

1. Instructors: please sign our Guest Registry if you are using this book for learning or teaching XForms.
2. Contributors: please see our Naming Conventions to ensure your examples are consistent with the textbook.
3. If you are looking for a specific example program, please feel free to use the Examples Wanted section.

If you feel these examples are useful please create links to this site. This book has over 30 contributors.

Recent Changes Book Statistics

Related Wikibooks: XQuery XForms/REST/XQuery

Note: Almost all of the examples have been tested with the FireFox 2.0 XForms addon and the newer 0.8.6ff3 FireFox 3.0 addon. Please let us know if you find any errors.

Introduction

1. Introduction - About this book and overview of the technology.
2. Background - A brief history, theory and motivation for the XForms standard.
3. Benefits - Why use XForms?
4. Installing and Testing - How to install an XForm plug-in or extension.
5. Naming Conventions - Naming standards used throughout this book.
6. Comparison of XForms Products - A comparison of XForms products

A Tour of XForms

These examples are for people who are just getting started.

1. HelloWorld - A simple test to see if XForms is installed correctly.
2. Simple Message - Open a panel with a message
3. XForms Architecture - An introduction to the XForms MVC architecture
4. Input Example - A simple input that updates the model
5. Incremental Many to One - How a single input field can change many output controls
6. Spreadsheet-like Updating - how XForms tracks what fields need to be updated
7. Bind - how to bind inputs to the model using the bind element
8. Adder - sample XForm that uses a remote web service to sum two numbers

Controls

1. Input - a simple input form with a label
2. Address - a simple address form with labels
3. Address Aligned - using CSS to align fields
4. Input Field Width - using CSS to control field width
5. Secret - a way to enter passwords
6. Message Types - three types of messages
7. Textarea - a large block of text
8. Textarea with style - styling textarea using CSS
9. Checkbox - a simple boolean (yes/no) checkbox
10. Selecting Items from Lists
    1. Select1 - the new radio button
    2. Select1 drop list - select a single option from a drop-down list
    3. Open Selection - suggests a value or allows the user to add their own
    4. Select - selecting many (check-boxes)
    5. Select Multi-Column - selecting many items from many columns (check-boxes)
    6. Select1 Multi-Column - selecting one item from many columns (radio buttons)
    7. Selecting from Model - getting data for select lists from the model
    8. Selecting Codes From File - getting data for select lists from an external file
11. Working with Dates
    1. Selecting a Date - using the bind command to present a calendar selector
    2. Formatting a date - display a date in MM/DD/YYYY format
12. Upload - uploading a file from a local file system
13. Trigger - the new button
    1. Controlling Button Appearance - setting button labels, hints and using images
14. Range - adding a slider to your form
15. Send - send out a request for a new resource
16. Load - dynamically loading additional resources into your form

Binds

1. Selecting Text - use a bind expression to set select from a variety of text messages

Intermediate Examples

These examples assume you are familiar with XForms concepts and controls.

Client-Side Field Validation

1. Validation with Bind - use a bind expression to set a data type and alert the user
2. Case Validation - use a bind expression to check the case of an field
3. Limiting Length - use an action to warn users when they exceed a field length

Server-Side Field Validation

1. Server-Side Field Validation - sending a single field to the server to validate the contents of the field

Submitting Data

1. Submit - saving your XML data to a file or web server
2. Encoding Parameters - encoding submission parameters
3. Changing Namespaces in Submission - changing the namespace prefixes from submission data
4. Displaying Save Results - showing save status after you have done a save

Events and Condition

1. Events Overview - What are XForms events and how to use them
2. Setting Initial Cursor - setting the initial cursor position when a form loads
3. Selection and Deselection Events - Logging events when tabs are selected or deselected
4. Conditional Actions

Output

1. Binds to many instances - binding to many instances in many models
2. Bind to ranges - binding to two different ranges
3. Repeat - using repeat to display lists
4. Conditional Styling - using CSS and group to conditionally display items in a list
5. Formatting Numbers - how to format numbers and currency
6. Output and Links - how to display links in your output

Dynamic Forms

Forms that change as you use them. Dynamic forms without using Javascript

1. Switch and Case - swapping views with switch and case
2. Relevant - displaying only relevant fields
3. Binding in Repeats - binding within repeated elements
4. Show-Hide Controls - hiding large controls
5. Disable Buttons - how to disable buttons when they are not relevant
6. Read Only - setting input fields to be read only
7. Select and Group - using select to conditionally display a group
8. Dynamic Labels - dynamically change the labels of a form without reloading the page
9. Suggesting Items - creating a list of suggested items as you type
10. Dynamic Selection Lists - itemset's that are dynamically dependent on values of an xml-instance
11. Incremental Model Loading - dynamically loading other models
12. Dynamic Labels in Local language - dynamically change the labels of a form in Local language without reloading the page

Search Forms

1. Search Form - creating a search form
2. Search with Load - creating a search form with the load element
3. Advanced Search - a search screen with simple and advanced tabs
4. Date Range Search - searching for items with date ranges
5. Search flickr - search flickr using REST interface
6. Web service - calling a web service from within an XForm
7. Stock Quote - Calling a REST service that returns stock information from a ticker symbol
8. Search Amazon - Search amazon using a web service
9. Incremental Find - As you type a list of choices is narrowed

Advanced Forms

Larger Examples

1. CKEditor - allow users to add markup using a WYSIWYG editor
2. Slideshow - changing images in a slideshow
3. Referencing Items - referencing items in sets
4. Deep Copy with Insert Origin - using insert origin to perform a deep copy between instances in a model
5. A Trigger for Inserting BBcode into a Textarea box
6. Multi-Part Forms - how to keep your initial load times short
7. Moving Items Between Lists - how to move selected items between lists
8. Queue Management - how to manage items in a sorted queue

Navigating Large Forms

Using Tabs and Trees - navigation of complex form data

1. Horizontal File Tab Menu - a complete working example with no Javascript
2. Horizontal File Tab Menu Highlighted - Tab menu with selected tab highlighted using CSS target
3. Vertical Menu - Menu similar to prior version but using vertical orientation
4. Storing Tabs in the Model - Storing tabs in the model and using repeat to display tabs
5. Folding Menus - Folding menus
6. Tree Menus - Hierarchical Tree Menus
7. Deselect Events - Catching the Deselection Events when you navigate away from a form
8. Horizontal File Tab Menu Highlighted With Binding - Another Horizontal File Tab Menu using an Instance, Binding, Events and CSS
9. Hierarchical Bookmarks - editing bookmarks
10. Outline Editor - outline with indenting

Reading and writing to files

1. Read and write with get and put - using the submission element to read and write a static
2. Saving Intermediate Form Data - saving intermediate form data to a local drive

Composite Controls

Controls that combine controls

1. Tri-Document Loading - three ways to upload a document
2. Entity Selection - ways to select a person or organization

Tabular and Repeating Data

1. Repeat into table - putting data into HTML tables
2. Repeat filter - dynamically filtering out rows from lists
3. Inline Repeats - add structures horizontally to the right
4. Insert - inserting a new row into a tabular structure
5. Insert with Origin - inserting new data and specifying initial values using the origin attribute
6. Delete - delete the selected row from a tabular structure
   1. Disable Trigger - disable the delete button when only a single item remains
   2. Delete Confirm - confirming before you delete
   3. Delete Confirm with CSS - Styling your confirmation with CSS
   4. Trailing Insert and Delete - add and delete from the end of a list
   5. Insert and Delete into Table - insert and delete rows into a table
   6. Code Table Editor - insert and delete rows into reference data code table
7. Highlight Selected Row - highlight a selected row
8. Table Column Total - table with a column total in table footer
9. Multiple Uploads - use the repeat function to attach multiple uploads to a form
10. Summary Details - a table of summary information at the top of a form allows you to inspect the details of each item

XML Schema

1. Load from XML Schema - load data types from an external XML Schema file
2. Validate - validate form using XML Schema
3. Validate with schema types - validate form using XML Schema types
4. Facet Validation - check min and max lengths of fields from the XML Schema
5. SVG

JavaScript

1. Dynamically Load JavaScript - example of how to dynamically load a JavaScript program

Adding Graphs, Charts and Maps

1. Pie Chart - draw a pie chart using range controls
2. Google Charts - use the Google Charts REST web service
3. Venn Diagram - change Venn diagram parameters with range controls
4. Supply and Demand - use range controls to change price and see the impact on demand
5. Graph Viewer - Viewing a graph of nodes and links

Development Tools

1. Event Logger - demonstration of how to log events
2. Replace Tester - testing regular expression substitution
3. Process Step Editor - editing a list of horizontal process steps
4. Application Builder - a form use to create a forms management application
5. Dashboard Builder - a form to specify the layout of a single page dashboard
6. URL Rewriter - a form configure and test Jetty URL rewrite rules
7. Web Service Tester - a form for testing a web service
8. Synonym Set Editor - associate a synonym set with a business term

Other Examples

1. W2 Tax Form - sample tax form based on Mozilla XForms site
2. Invoice Manager - invoice manager
3. Calculator - a four function calculator
4. Crime Profile - sample of complex form used in criminal justice
5. CSS tables - formatting tabular output with CSS without using HTML table
6. Custom Controls - Example of a custom control using XBL
7. Warn on Navigate Away - Warn users if they navigate away before saving
8. Select All - Selecting all rows in a table
9. Google Maps - Example of using Google Maps from within XForms
10. Sorting using XSLT - Example of how to sort an instance using a XSLT stylesheet

Mobile XForms

1. Mobile XForms - Examples of XForm-based mobile applications

Client XForms Solutions

1. FireFox Extension
2. FormFaces
3. Picoforms
4. Ubiquity XForms - http://code.google.com/p/ubiquity-xforms/
5. XSLTForms - Open source client-side implementation, not a plug-in or install, works with all major browsers (IE, FireFox, Opera, Safari, Chrome and more).
6. EMC Documentum Formula - Client-side implementation, free for developer use.

Server Side Solutions

1. Apache - Configuring Apache to work with XForms
2. Versioning Form Data With WebDAV and Subversion - Using subversion and WebDAV to automatically version form data
3. IIS - Configuring Microsoft's IIS to work with XForms
4. XML Databases - Using native XML databases to work with XForms
5. eXist - Using the eXist OpenSource native XML database
6. IBM DB2 - Using the DB2 v9 with XForms
7. Orbeon Forms - Open Source Ajax-based XForms implementation (also comes with the Form Builder editor)
8. betterFORM - Open Source Java Implementation using Dojo toolkit for client-side AJAX layer

Development Tools

1. Form Generators
2. NIEM to XForms
3. Form Designers
4. IBM Workplace Forms
5. Intalio Form Designer
6. Debugging XForms

Key to symbols:

indicates an XForms/Best practice

References

• Debugging Tips