XForms

From Wikibooks, open books for an open world
Jump to: navigation, search
XForms
Welcome to the XForms Tutorial and Cookbook Wikibook!
XForms-cover.jpg

XForms is a World Wide Web Consortium recommendation for creating web forms and web applications. XForms is 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 web site.

This is a collaborative project and we encourage everyone who is using XForms to contribute their complete working XForms examples. All example programs must conform to the creative-commons-2.5 share-alike with attribution license agreement [1].

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 use to be 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 Google Code Version Control System 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. 100% developed  as of Sept 27th, 2006
  2. Background - A brief history, theory and motivation for the XForms standard. 100% developed  as of Sept 27th, 2006
  3. Benefits - Why use XForms? 100% developed  as of Sept 27th, 2006
  4. Installing and Testing - How to install an XForm plug-in or extension. 100% developed  as of Sept 27th, 2006
  5. Naming Conventions - Naming standards used throughout this book. 100% developed  as of March 17th, 2006
  6. Comparison of XForms Products - A comparison of XForms products 25% developed  as of February 17th, 2010

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. 100% developed  as of Sept 6th, 2006
  2. Simple Message - Open a panel with a message 100% developed  as of Sept 13th, 2006
  3. XForms Architecture - An introduction to the XForms MVC architecture 100% developed  as of March 17th, 2007
  4. Input Example - A simple input that updates the model 100% developed  as of Sept 13th, 2006
  5. Incremental Many to One - How a single input field can change many output controls 100% developed  as of Sept 13th, 2006
  6. Spreadsheet like updating - how XForms tracks what fields need to be updated 100% developed  as of Sept 6th, 2006
  7. Bind - how to bind inputs to the model using the bind element 100% developed  as of Sept 6th, 2006
  8. Adder - sample XForm that uses a remote web service to sum two numbers 100% developed  as of Aug 6th, 2007

Controls

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

Binds

  1. Selecting Text - use a bind expression to set select from a variety of text messages 25% developed  as of November 17th, 2010

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 50% developed  as of October 14th, 2009
  2. Case Validation - use a bind expression to check the case of an field 50% developed  as of October 14th, 2009
  3. Limiting Length - use an action to warn users when they exceed a field length 25% developed  as of December 19th, 2010

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 25% developed  as of Sept 6th, 2006
  2. Encoding Parameters - encoding submission parameters 25% developed  as of Sept 6th, 2006
  3. Changing Namespaces in Submission - changing the namespace prefixes from submission data 50% developed  as of October 23th, 2009
  4. Displaying Save Results - showing save status after you have done a save 25% developed  as of July 12th, 2013

Events and Condition

  1. Events Overview - What are XForms events and how to use them 25% developed  as of Dec 29th, 2008
  2. Setting Initial Cursor - setting the initial cursor position when a form loads 75% developed  as of Jan 7th, 2008
  3. Selection and Deselection Events - Logging events when tabs are selected or deselected 25% developed  as of April 1st, 2009
  4. Conditional Actions

Output

  1. Binds to many instances - binding to many instances in many models 50% developed  as of Sept 20th, 2006
  2. Bind to ranges - binding to two different ranges 75% developed  as of Sept 20th, 2006
  3. Repeat - using repeat to display lists 75% developed  as of Sept 20th, 2006
  4. Conditional Styling - using CSS and group to conditionally display items in a list 75% developed  as of Feb 26th, 2008
  5. Formatting Numbers - how to format numbers and currency 25% developed  as of Feb 26th, 2009
  6. Output and Links - how to display links in your output 75% developed  as of Feb 26th, 2008

Dynamic Forms

Forms that change as you use them. Dynamic forms without using Javascript 75% developed  as of Sept 6th, 2006

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

Search Forms

  1. Search Form - creating a search form 75% developed  as of Jan 13th, 2008
  2. Search with Load - creating a search form with the load element 75% developed  as of October 15th, 2009
  3. Advanced Search - a search screen with simple and advanced tabs 25% developed  as of Jan 13th, 2009
  4. Date Range Search - searching for items with date ranges 25% developed  as of May 14th, 2010
  5. Search flickr - search flickr using REST interface 100% developed  as of Sept 6th, 2006
  6. Web service - calling a web service from within an XForm 75% developed  as of Oct 5th, 2006
  7. Stock Quote - Calling a REST service that returns stock information from a ticker symbol 25% developed  as of Nov 9th, 2006
  8. Search Amazon - Search amazon using a web service 100% developed  as of Oct 18th, 2006
  9. Incremental Find - As you type a list of choices is narrowed 25% developed  as of Feb. 1st, 2010

Advanced Forms

Larger Examples

  1. CKEditor - allow users to add markup using a WYSIWYG editor 25% developed  as of October 16th, 2008
  2. Slideshow - changing images in a slideshow 75% developed  as of January 21st, 2008
  3. Referencing Items - referencing items in sets 75% developed  as of February 25th, 2008
  4. Deep Copy with Insert Origin - using insert origin to perform a deep copy between instances in a model 75% developed  as of March 6tht, 2008
  5. A Trigger for Inserting BBcode into a Textarea box
  6. Multi-Part Forms - how to keep your initial load times short 25% developed  as of July 14th, 2010
  7. Moving Items Between Lists - how to move selected items between lists 25% developed  as of July 27th, 2011
  8. Queue Management - how to manage items in a sorted queue 25% developed  as of July 28th, 2011

Navigating Large Forms

Using Tabs and Trees - navigation of complex form data 0% developed  as of Sept 6th, 2006

  1. Horizontal File Tab Menu - a complete working example with no Javascript 100% developed  as of Sept 6th, 2006 XForms-best-practice.jpg
  2. Horizontal File Tab Menu Highlighted - Tab menu with selected tab highlighted using CSS target 100% developed  as of Sept 6th, 2006 XForms-best-practice.jpg
  3. Vertical Menu - Menu similar to prior version but using vertical orientation 100% developed  as of Sept 6th, 2006
  4. Storing Tabs in the Model - Storing tabs in the model and using repeat to display tabs 25% developed  as of 6Sept 11th, 2010
  5. Folding Menus - Folding menus
  6. Tree Menus - Hierarchical Tree Menus 25% developed  as of March 18th, 2009
  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 100% developed  as of Jan 6th, 2009
  9. Hierarchical Bookmarks - editing bookmarks 100% developed  as of Sept 6th, 2006
  10. Outline Editor - outline with indenting 25% developed  as of Feb 5th, 2007

Reading and writing to files

  1. Read and write with get and put - using the submission element to read and write a static 75% developed  as of Sept 27th, 2006
  2. Saving Intermediate Form Data - saving intermediate form data to a local drive 25% developed  as of Sept 27th, 2006

Composite Controls

Controls that combine controls

  1. Tri-Document Loading - three ways to upload a document 25% developed  as of July 6th, 2009
  2. Entity Selection - ways to select a person or organization 25% developed  as of July 7th, 2009

Tabular and Repeating Data

  1. Repeat into table - putting data into HTML tables 25% developed  as of Sept 27th, 2006
  2. Repeat filter - dynamically filtering out rows from lists 50% developed  as of Aug 23rd, 2007
  3. Inline Repeats - add structures horizontally to the right 100% developed  as of Feb 24th, 2008
  4. Insert - inserting a new row into a tabular structure 100% developed  as of Sept 20th, 2006
  5. Insert with Origin - inserting new data and specifying initial values using the origin attribute 75% developed  as of Feb 27th, 2008
  6. Delete - delete the selected row from a tabular structure 100% developed  as of Sept 20th, 2006
    1. Disable Trigger - disable the delete button when only a single item remains 50% developed  as of Oct 22th, 2007
    2. Delete Confirm - confirming before you delete 25% developed  as of Sept 20th, 2006
    3. Delete Confirm with CSS - Styling your confirmation with CSS 75% developed  as of March 20th, 2007
    4. Trailing Insert and Delete - add and delete from the end of a list 100% developed  as of Sept 27th, 2006
    5. Insert and Delete into Table - insert and delete rows into a table 100% developed  as of Nov 4th, 2007
  7. Highlight Selected Row - highlight a selected row 50% developed  as of Sept 27th, 2006
  8. Table Column Total - table with a column total in table footer 100% developed  as of Dec 6th, 2006
  9. Multiple Uploads - use the repeat function to attach multiple uploads to a form 25% developed  as of Sept 23rd, 2013
  10. Summary Details - a table of summary information at the top of a form allows you to inspect the details of each item 25% developed  as of Feb 26th, 2013

XML Schema

  1. Load from XML Schema - load data types from an external XML Schema file 75% developed  as of Oct 9th, 2006
  2. Validate - validate form using XML Schema 25% developed  as of Oct 9th, 2006
  3. Validate with schema types - validate form using XML Schema types 75% developed  as of Oct 30th, 2006
  4. Facet Validation - check min and max lengths of fields from the XML Schema 75% developed  as of Oct 10th, 2006
  5. SVG

JavaScript

  1. Dynamically Load JavaScript - example of how to dynamically load a JavaScript program 25% developed  as of Mar 19th, 2007

Adding Graphs, Charts and Maps

  1. Pie Chart - draw a pie chart using range controls 75% developed  as of Sept 17th, 2007
  2. Google Charts - use the Google Charts REST web service 25% developed  as of Jan 20th, 2008
  3. Venn Diagram - change Venn diagram parameters with range controls 25% developed  as of Jan 20th, 2008
  4. Supply and Demand - use range controls to change price and see the impact on demand 25% developed  as of Oct 10th, 2007
  5. Graph Viewer - Viewing a graph of nodes and links 75% developed  as of April 23th, 2007

Development Tools

  1. Event Logger - demonstration of how to log events 50% developed  as of Jan 8th, 2008
  2. Replace Tester - testing regular expression substitution 50% developed  as of Nov 5th, 2007
  3. Process Step Editor - editing a list of horizontal process steps 50% developed  as of Feb 17th, 2008
  4. Application Builder - a form use to create a forms management application 25% developed  as of Feb 22nd, 2008
  5. Dashboard Builder - a form to specify the layout of a single page dashboard 25% developed  as of May 15th, 2008
  6. URL Rewriter - a form configure and test Jetty URL rewrite rules 25% developed  as of Oct 30th, 2008
  7. Web Service Tester - a form for testing a web service 25% developed  as of Nov 21th, 2008
  8. Synonym Set Editor - associate a synonym set with a business term 75% developed  as of March 25th, 2008

Other Examples

  1. W2 Tax Form - sample tax form based on Mozilla XForms site 25% developed  as of Sept 6th, 2006
  2. Invoice Manager - invoice manager 25% developed  as of Oct 13th, 2008
  3. Calculator - a four function calculator 100% developed  as of Sept 6th, 2006
  4. Crime Profile - sample of complex form used in criminal justice 50% developed  as of March 6th, 2008
  5. CSS tables - formatting tabular output with CSS without using HTML table 50% developed  as of Sept 20th, 2006
  6. Custom Controls - Example of a custom control using XBL 75% developed  as of Oct 17th, 2006
  7. Warn on Navigate Away - Warn users if they navigate away before saving 75% developed  as of March 19th, 2007
  8. Select All - Selecting all rows in a table 25% developed  as of July 25th, 2007
  9. Google Maps - Example of using Google Maps from within XForms 0% developed  as of Nov 5th, 2007
  10. Sorting using XSLT - Example of how to sort an instance using a XSLT stylesheet 75% developed  as of Jun 19th, 2007

Mobile XForms

  1. Mobile XForms - Examples of XForm-based mobile applications 25% developed  as of July 7th, 2007

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 25% developed  as of Feb 15th, 2007
  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 0% developed  as of Feb 15th, 2007
  4. XML Databases - Using native XML databases to work with XForms 0% developed  as of Feb 15th, 2007
  5. eXist - Using the eXist OpenSource native XML database 50% developed  as of Feb 15th, 2007
  6. IBM DB2 - Using the DB2 v9 with XForms 25% developed  as of Mar 19th, 2007
  7. Orbeon Forms - Open Source Ajax-based XForms implementation (also comes with the Form Builder editor) 0% developed  as of Nov 5th, 2007
  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:

Wikibook Development Stages
Sparse text 0% Developing text 25% Maturing text 50% Developed text 75% Comprehensive text 100%

XForms-best-practice.jpg indicates an XForms/Best practice

References

Debugging Tips