XForms

From Wikibooks, the open-content textbooks collection

Jump to: navigation, search


[edit] XForms Tutorial and Cookbook

Welcome to the XForms Tutorial and Cookbook Wikibook! 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.

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].

As of April 1st 2009 there are now 94 tested example programs in this book. The countdown is underway to our goal of 100 example programs!

  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.

We are now the 6th hit on the XForms keyword on Google Search. With a little more work we can make it to the first page. If you feel these examples are useful please create links to this site. This book has over 30 contributors.

A French version can be found here of this XForms tutorial

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.

[edit] Table of Contents

  1. Cover
  2. Introduction - About this book and overview of the technology. Development stage: 100% (as of Sept 27th, 2006)
    1. Background - A brief history and motivation for the XForms standard. Development stage: 100% (as of Sept 27th, 2006)
    2. Benefits - Why use XForms? Development stage: 100% (as of Sept 27th, 2006)
    3. Installing and Testing - How to install an XForm plug-in or extension. Development stage: 100% (as of Sept 27th, 2006)
    4. Naming Conventions - Naming standards used throughout this book. Development stage: 100% (as of March 17th, 2006)
  3. XForms by Example - Short example to test your installation and get you started. Development stage: 100% (as of Sept 27th, 2006)
    1. Beginning Examples - These examples are for people who are just getting started.
      1. HelloWorld - A simple test to see if XForms is installed correctly. Development stage: 100% (as of Sept 6th, 2006)
      2. Message - Open a panel with a message Development stage: 100% (as of Sept 13th, 2006)
    2. XForms Architecture - An introduction to the XForms MVC architecture Development stage: 100% (as of March 17th, 2007)
      1. Input - A simple input that updates the model Development stage: 100% (as of Sept 13th, 2006)
      2. Incremental Many to One - How a single input field can change many output controls Development stage: 100% (as of Sept 13th, 2006)
      3. Spreadsheet like updating - how XForms tracks what fields need to be updated Development stage: 100% (as of Sept 6th, 2006)
      4. Bind - how to bind inputs to the model using the bind element Development stage: 100% (as of Sept 6th, 2006)
      5. Adder - sample XForm that uses a remote web service to sum two numbers Development stage: 100% (as of Aug 6th, 2007)
  4. Form Controls Development stage: 100% (as of Sept 6th, 2006)
    1. Input - a simple input form with a label Development stage: 100% (as of Sept 6th, 2006)
    2. Address - a simple address form with labels Development stage: 100% (as of Sept 20th, 2006)
    3. Address Aligned - using CSS to align fields Development stage: 100% (as of Sept 20th, 2006)
    4. Input Field Width - using CSS to control field width Development stage: 100% (as of Oct 23rd, 2006)
    5. Secret - a way to enter passwords Development stage: 100% (as of Sept 27th, 2006)
    6. Message Types - three types of messages Development stage: 100% (as of Sept 6th, 2006)
    7. Textarea - a large block of text Development stage: 100% (as of Sept 6th, 2006)
    8. Textarea with style - styling textarea using CSS Development stage: 100% (as of Jan 19th, 2007)
    9. Checkbox - a simple boolean (yes/no) checkbox Development stage: 100% (as of Sept 14th, 2007)
    10. Select1 - the new radio button Development stage: 100% (as of Sept 6th, 2006)
    11. Select1 drop list - select a single option from a drop-down list Development stage: 100% (as of Sept 6th, 2006)
    12. Open Selection - suggests a value or allows the user to add their own Development stage: 100% (as of Aug 12th, 2007)
    13. Select - selecting many (check-boxes) Development stage: 100% (as of Sept 15th, 2006)
    14. Select Multi-Column - selecting from many columns (check-boxes) Development stage: 100% (as of Dec 29th, 2006)
    15. Selecting from Model - getting data for select lists from the model Development stage: 100% (as of Sept 26th, 2006)
    16. Selecting from File - getting data for select lists from an external file Development stage: 100% (as of Sept 26th, 2006)
    17. Selecting a Date - using the bind command to present a calendar selector Development stage: 75% (as of Sept 12th, 2006)
    18. Formatting a date - display a date in MM/DD/YYYY format Development stage: 100% (as of Sept 13th, 2006)
    19. Upload - uploading a file from a local file system Development stage: 50% (as of Sept 6th, 2006)
    20. Trigger - the new button Development stage: 100% (as of Sept 6th, 2006)
    21. Controlling Button Appearance - setting button labels, hints and using images Development stage: 100% (as of Sept 6th, 2006)
    22. Range - adding a slider to your form Development stage: 100% (as of Sept 27th, 2006)
    23. Setting Initial Cursor - setting the initial cursor position when a form loads Development stage: 75% (as of Jan 7th, 2008)
    24. Search Form - creating a search form Development stage: 75% (as of Jan 13th, 2008)
    25. Rich Text Editor - allow users to add markup using a WYSIWYG editor Development stage: 25% (as of October 16th, 2008)
  5. Submitting Data
    1. Submit - saving your XML data to a file or web server Development stage: 25% (as of Sept 6th, 2006)
    2. Encoding Parameters - encoding submission parameters Development stage: 25% (as of Sept 6th, 2006)
  6. Events
    1. Events Overview - What are XForms events and how to use them Development stage: 25% (as of Dec 29th, 2008)
    2. Selection and Deselection Events - Logging events when tabs are selected or deselected Development stage: 25% (as of April 1st, 2009)
    3. Conditional Actions
  7. Output
    1. Binds to many instances - binding to many instances in many models Development stage: 50% (as of Sept 20th, 2006)
    2. Bind to ranges - binding to two different ranges Development stage: 75% (as of Sept 20th, 2006)
    3. Repeat - using repeat to display lists Development stage: 75% (as of Sept 20th, 2006)
    4. Conditional Styling - using CSS and group to conditionally display items in a list Development stage: 75% (as of Feb 26th, 2008)
    5. Formatting Numbers - how to format numbers and currency Development stage: 25% (as of Feb 26th, 2009)
    6. Output and Links - how to display links in your output Development stage: 75% (as of Feb 26th, 2008)
  8. Dynamic Forms - getting dynamic forms without using Javascript Development stage: 75% (as of Sept 6th, 2006)
    1. Switch and Case - swapping views with switch and case Development stage: 25% (as of Nov. 7th, 2006)
    2. Relevant - displaying only relevant fields Development stage: 00% (as of Sept 6th, 2006)
    3. Disable Buttons - how to disable buttons when they are not relevant Development stage: 25% (as of Sept 24th, 2007)
    4. Read Only - setting input fields to be read only Development stage: 100% (as of Sept 6th, 2006)
    5. Select and Group - using select to conditionally display a group Development stage: 100% (as of Nov 8th, 2006)
    6. Dynamic Labels - dynamically change the labels of a form without reloading the page Development stage: 75% (as of Sept 21st, 2007)
    7. Suggesting Items - creating a list of suggested items as you type Development stage: 75% (as of January 21st, 2008)
    8. Slideshow - changing images in a slideshow Development stage: 75% (as of January 21st, 2008)
    9. Referencing Items - referencing items in sets Development stage: 75% (as of February 25th, 2008)
    10. Dynamic Selection Lists - itemset's that are dynamically dependent on values of an xml-instance Development stage: 75% (as of March 6th, 2008)
    11. Deep Copy with Insert Origin - using insert origin to perform a deep copy between instances in a model Development stage: 75% (as of March 6tht, 2008)
    12. Incremental Model Loading - loading a model incrementally Development stage: 25% (as of April 2nd, 2000)
    13. A Trigger for Inserting BBcode into a Textarea box
  9. Intermediate Examples - Note: These examples assume that you understand many of the beginning concepts.
    1. Menus - navigation of complex forms Development stage: 00% (as of Sept 6th, 2006)
      1. Horizontal File Tab Menu - a complete working example with no Javascript Development stage: 100% (as of Sept 6th, 2006)
      2. Horizontal File Tab Menu Highlighted - Tab menu with selected tab highlighted using CSS target Development stage: 100% (as of Sept 6th, 2006)
      3. Vertical Menu - Menu similar to prior version but using vertical orientation Development stage: 100% (as of Sept 6th, 2006)
      4. Folding Menus - Folding menus
      5. Tree Menus - Hierarchical Tree Menus Development stage: 25% (as of March 18th, 2009)
      6. Deselect Events - Catching the Deselection Events when you navigate away from a form
      7. Horizontal File Tab Menu Highlighted With Binding - Another Horizontal File Tab Menu using an Instance, Binding, Events and CSS Development stage: 100% (as of Jan 6th, 2009)
    2. Reading and writing to files
      1. Read and write with get and put - using the submission element to read and write a static Development stage: 75% (as of Sept 27th, 2006)
      2. Saving Intermediate Form Data - saving intermediate form data to a local drive Development stage: 25% (as of Sept 27th, 2006)
      3. Advanced Search - a search screen with simple and advanced tabs Development stage: 25% (as of Jan 13th, 2009)
    3. Tabular and Repeating Data
      1. Repeat into table - putting data into HTML tables Development stage: 25% (as of Sept 27th, 2006)
      2. Repeat filter - dynamically filtering out rows from lists Development stage: 50% (as of Aug 23rd, 2007)
      3. Inline Repeats - add structures horizontally to the right Development stage: 100% (as of Feb 24th, 2008)
      4. Insert - inserting a new row into a tabular structure Development stage: 100% (as of Sept 20th, 2006)
      5. Insert with Origin - inserting new data and specifying initial values using the origin attribute Development stage: 75% (as of Feb 27th, 2008)
      6. Delete - delete the selected row from a tabular structure Development stage: 100% (as of Sept 20th, 2006)
      7. Disable Trigger - disable the delete button when only a single item remains Development stage: 50% (as of Oct 22th, 2007)
      8. Delete Confirm - confirming before you delete Development stage: 25% (as of Sept 20th, 2006)
      9. Delete Confirm with CSS - Styling your confirmation with CSS Development stage: 75% (as of March 20th, 2007)
      10. Trailing Insert and Delete - add and delete from the end of a list Development stage: 100% (as of Sept 27th, 2006)
      11. Insert and Delete into Table - insert and delete rows into a table Development stage: 100% (as of Nov 4th, 2007)
      12. Highlight Selected Row - highlight a selected row Development stage: 50% (as of Sept 27th, 2006)
      13. Table Column Total - table with a column total in table footer Development stage: 100% (as of Dec 6th, 2006)
    4. XML Schema
      1. Load from XML Schema - load data types from an external XML Schema file Development stage: 75% (as of Oct 9th, 2006)
      2. Validate - validate form using XML Schema Development stage: 25% (as of Oct 9th, 2006)
      3. Validate with schema types - validate form using XML Schema types Development stage: 75% (as of Oct 30th, 2006)
      4. Facet Validation - check min and max lengths of fields from the XML Schema Development stage: 75% (as of Oct 10th, 2006)
    5. JavaScript
      1. Dynamically Load JavaScript - example of how to dynamically load a JavaScript program Development stage: 25% (as of Mar 19th, 2007)
    6. Graphics
      1. Pie Chart - draw a pie chart using range controls Development stage: 75% (as of Sept 17th, 2007)
      2. Google Charts - use the Google Charts REST web service Development stage: 25% (as of Jan 20th, 2008)
      3. Venn Diagram - change Venn diagram parameters with range controls Development stage: 25% (as of Jan 20th, 2008)
      4. Supply and Demand - use range controls to change price and see the impact on demand Development stage: 25% (as of Oct 10th, 2007)
    7. Development Tools
      1. Event Logger - demonstration of how to log events Development stage: 50% (as of Jan 8th, 2008)
      2. Replace Tester - testing regular expression substitution Development stage: 50% (as of Nov 5th, 2007)
      3. Process Step Editor - editing a list of horizontal process steps Development stage: 50% (as of Feb 17th, 2008)
      4. Application Builder - a form use to create a forms management application Development stage: 25% (as of Feb 22nd, 2008)
      5. Dashboard Builder - a form to specify the layout of a single page dashboard Development stage: 25% (as of May 15th, 2008)
      6. URL Rewriter - a form configure and test Jetty URL rewrite rules Development stage: 25% (as of Oct 30th, 2008)
      7. Web Service Tester - a form for testing a web service Development stage: 25% (as of Nov 21th, 2008)
  10. Advanced Examples Development stage: 75% (as of Sept 6th, 2006)
    1. Hierarchical Bookmarks - editing bookmarks Development stage: 100% (as of Sept 6th, 2006)
    2. Outline Editor - outline with indenting Development stage: 25% (as of Feb 5th, 2007)
    3. Synonym Set Editor - associate a synonym set with a business term Development stage: 75% (as of March 25th, 2008)
    4. W2 Tax Form - sample tax form based on Mozilla XForms site Development stage: 25% (as of Sept 6th, 2006)
    5. Invoice Manager - invoice manager Development stage: 25% (as of Oct 13th, 2008)
    6. Calculator - a four function calculator Development stage: 100% (as of Sept 6th, 2006)
    7. Crime Profile - sample of complex form used in criminal justice Development stage: 50% (as of March 6th, 2008)
    8. CSS tables - formatting tabular output with CSS without using HTML table Development stage: 50% (as of Sept 20th, 2006)
    9. Search flickr - search flickr using REST interface Development stage: 100% (as of Sept 6th, 2006)
    10. Web service - calling a web service from within an XForm Development stage: 75% (as of Oct 5th, 2006)
    11. Stock Quote - Calling a REST service that returns stock information from a ticker symbol Development stage: 25% (as of Nov 9th, 2006)
    12. Search Amazon - Search amazon using a web service Development stage: 100% (as of Oct 18th, 2006)
    13. Custom Controls - Example of a custom control using XBL Development stage: 75% (as of Oct 17th, 2006)
    14. Warn on Navigate Away - Warn users if they navigate away before saving Development stage: 75% (as of March 19th, 2007)
    15. Graph Viewer - Viewing a graph of nodes and links Development stage: 75% (as of April 23th, 2007)
    16. Select All - Selecting all rows in a table Development stage: 25% (as of July 25th, 2007)
    17. Google Maps - Example of using Google Maps from within XForms Development stage: 00% (as of Nov 5th, 2007)
    18. Sorting using XSLT - Example of how to sort an instance using a XSLT stylesheet Development stage: 75% (as of Jun 19th, 2007)
    19. Mobile XForms - Examples of XForm-based mobile applications Development stage: 25% (as of July 7th, 2007)
  11. Client XForms Solution
    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).
  12. Server Solutions Development stage: 25% (as of Feb 15th, 2007)
    1. Apache - Configuring Apache to work with XForms Development stage: 25% (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 Development stage: 00% (as of Feb 15th, 2007)
    4. XML Databases - Using native XML databases to work with XForms Development stage: 00% (as of Feb 15th, 2007)
    5. eXist - Using the eXist OpenSource native XML database Development stage: 50% (as of Feb 15th, 2007)
    6. IBM DB2 - Using the DB2 v9 with XForms Development stage: 25% (as of Mar 19th, 2007)
    7. Orbeon Forms - Open Source Ajax-based XForms implementation (also comes with the Form Builder editor) Development stage: 00% (as of Nov 5th, 2007)
    8. Chiba - Open Source Java Implementation of the W3C XForms standard Development stage: 100% (as of Nov 27th, 2007)
  13. Development Tools
    1. Form Generators
      1. NIEM to XForms
    2. Form Designers
      1. IBM Workplace Forms
      2. Intalio Form Designer
    3. Debugging XForms

Key to symbols:

Wikibook Development Stages
Sparse text Image:00%.svg Developing text Image:25%.svg Maturing text Image:50%.svg Developed text Image:75%.svg Comprehensive text: Image:100%.svg


indicates an XForms/Best practice

[edit] References

Debugging Tips

Personal tools
Create a book