XForms
From Wikibooks, the open-content textbooks collection
[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 May 27th 2008 there are now 90 tested example programs in this book. The countdown is underway to our goal of 100 example programs!
Instructors: please sign our Guest Registry if you are using this book for learning or teaching XForms Contributors: please see our Naming Conventions to ensure your examples are consistent with the textbook If you are looking for a specific example program, please feel free to use the Examples Wanted section if you are looking for specific example programs
As of February 8th we are now the 13th 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. The FireFox 3.0 addon is still too unstable to begin our testing process.
[edit] Table of Contents
Cover Introduction - About this book and overview of the technology. 
Background - A brief history and motivation for the XForms standard. Benefits - Why use XForms? Installing and Testing - How to install an XForm plug-in or extension. Naming Conventions - Naming standards used throughout this book.
XForms by Example - Short example to test your installation and get you started. Benefits - Why use XForms? Installing and Testing - How to install an XForm plug-in or extension. Naming Conventions - Naming standards used throughout this book.
Beginning Examples - These examples are for people who are just getting started.
Form Controls HelloWorld - A simple test to see if XForms is installed correctly. Message - Open a panel with a message
XForms Architecture - An introduction to the XForms MVC architecture Message - Open a panel with a message
Input - A simple input that updates the model Incremental Many to One - How a single input field can change many outputs controls Spreadsheet like updating - how XForms tracks what fields need to be updated Bind - how to bind inputs to the model using the bind element Adder - sample XForms that uses a remote web service to sum two numbers
Incremental Many to One - How a single input field can change many outputs controls Spreadsheet like updating - how XForms tracks what fields need to be updated Bind - how to bind inputs to the model using the bind element Adder - sample XForms that uses a remote web service to sum two numbers
Input - a simple input form with a label Address - a simple address form with labels Address Aligned - using CSS to align fields Input Field Width - using CSS to control field width Secret - a way to enter passwords 
Message Types - three types of messages Textarea - a large block of text Textarea with style - styling textarea using CSS Checkbox - a simple boolean (yes/no) checkbox Select1 - the new radio button Select1 drop list - select a single option from a drop-down list Open Selection - suggests a value or allows the user to add their own Select - selecting many (check-boxes) Select Multi-Column - selecting from many columns (check-boxes) Selecting from Model - getting data for select lists from the model Selecting from File - getting data for select lists from an external file Selecting a Date - using the bind command to present a calendar selector Formatting a date - display a date in MM/DD/YYYY format Upload - uploading a file from a local file system 
Trigger - the new button Controlling Button Appearance - setting button labels, hints and using images Range - adding a slider to your form Setting Initial Cursor - setting the initial cursor position when a form loads Search Form - creating a search form Submit - saving your XML data to a file or web server
Output
Address - a simple address form with labels Address Aligned - using CSS to align fields Input Field Width - using CSS to control field width Secret - a way to enter passwords 
Message Types - three types of messages Textarea - a large block of text Textarea with style - styling textarea using CSS Checkbox - a simple boolean (yes/no) checkbox Select1 - the new radio button Select1 drop list - select a single option from a drop-down list Open Selection - suggests a value or allows the user to add their own Select - selecting many (check-boxes) Select Multi-Column - selecting from many columns (check-boxes) Selecting from Model - getting data for select lists from the model 
Selecting from File - getting data for select lists from an external file Selecting a Date - using the bind command to present a calendar selector Formatting a date - display a date in MM/DD/YYYY format Upload - uploading a file from a local file system 
Trigger - the new button Controlling Button Appearance - setting button labels, hints and using images Range - adding a slider to your form Setting Initial Cursor - setting the initial cursor position when a form loads Search Form - creating a search form Submit - saving your XML data to a file or web server 
Binds to many instances - binding to many instances in many models Bind to ranges - binding to two different ranges Repeat - using repeat to display lists Conditional Styling - using CSS and group to conditionally display items in a list Output and Links - how to display links in your output
Dynamic Forms - getting dynamic forms without using Javascript Bind to ranges - binding to two different ranges Repeat - using repeat to display lists Conditional Styling - using CSS and group to conditionally display items in a list Output and Links - how to display links in your output
Switch and Case - swapping views with switch and case Relevant - displaying only relevant fields 
Disable Buttons - how to disable buttons when they are not relevant Read Only - setting input fields to be read only Select and Group - using select to conditionally display a group Dynamic Labels - dynamically change the labels of a form without reloading the page Suggesting Items - creating a list of suggested items as you type Slideshow - changing images in a slideshow Referencing Items - referencing items in sets Dynamic Selection Lists - itemset's that are dynamically dependent on values of an xml-instance Deep Copy with Insert Origin - using insert origin to perform a deep copy between instances in a model A Trigger for Inserting BBcode into a Textarea box
Intermediate Examples - Note: These examples assume that you understand many of the beginning concepts.
Relevant - displaying only relevant fields 
Disable Buttons - how to disable buttons when they are not relevant Read Only - setting input fields to be read only Select and Group - using select to conditionally display a group Dynamic Labels - dynamically change the labels of a form without reloading the page Suggesting Items - creating a list of suggested items as you type Slideshow - changing images in a slideshow Referencing Items - referencing items in sets Dynamic Selection Lists - itemset's that are dynamically dependent on values of an xml-instance Deep Copy with Insert Origin - using insert origin to perform a deep copy between instances in a model A Trigger for Inserting BBcode into a Textarea boxMenus - navigation of complex forms
Advanced Examples
Horizontal File Tab Menu - a complete working example with no Javascript Horizontal File Tab Menu Highlighted - Tab menu with selected tab highlighted using CSS target Vertical Menu - Menu similar to prior version but using vertical orientation Folding Menus - Folding menus Deselect Events - Catching the Deselection Events when you navigate away from a form
Reading and writing to files
Horizontal File Tab Menu Highlighted - Tab menu with selected tab highlighted using CSS target Vertical Menu - Menu similar to prior version but using vertical orientation Folding Menus - Folding menus Deselect Events - Catching the Deselection Events when you navigate away from a formRead and write with get and put - using the submission element to read and write a static Saving Intermediate Form Data - saving intermediate form data to a local drive Advanced Search - a search screen with simple and advanced tabs
Tabular and Repeating Data
Saving Intermediate Form Data - saving intermediate form data to a local drive Advanced Search - a search screen with simple and advanced tabs Repeat into table - putting data into HTML tables Repeat filter - dynamically filtering out rows from lists Inline Repeats - add structures horizontally to the right Insert - inserting a new row into a tabular structure Insert with Origin - inserting new data and specifying initial values using the origin attribute Delete - delete the selected row from a tabular structure Disable Trigger - disable the delete button when only a single item remains Delete Confirm - confirming before you delete Delete Confirm with CSS - Styling your confirmation with CSS Trailing Insert and Delete - add and delete from the end of a list Insert and Delete into Table - insert and delete rows into a table Highlight Selected Row - highlight a selected row Table Column Total - table with a column total in table footer
XML Schema
Repeat filter - dynamically filtering out rows from lists Inline Repeats - add structures horizontally to the right Insert - inserting a new row into a tabular structure Insert with Origin - inserting new data and specifying initial values using the origin attribute Delete - delete the selected row from a tabular structure Disable Trigger - disable the delete button when only a single item remains Delete Confirm - confirming before you delete Delete Confirm with CSS - Styling your confirmation with CSS Trailing Insert and Delete - add and delete from the end of a list Insert and Delete into Table - insert and delete rows into a table Highlight Selected Row - highlight a selected row Table Column Total - table with a column total in table footer Load from XML Schema - load data types from an external XML Schema file Validate - validate form using XML Schema Validate with schema types - validate form using XML Schema types Facet Validation - check min and max lengths of fields from the XML Schema
JavaScript
Validate - validate form using XML Schema Validate with schema types - validate form using XML Schema types Facet Validation - check min and max lengths of fields from the XML Schema Dynamically Load JavaScript - example of how to dynamically load a JavaScript program
Graphics
Pie Chart - draw a pie chart using range controls Google Charts - use the Google Charts REST web service Venn Diagram - change Venn diagram parameters with range controls Supply and Demand - use range controls to change price and see the impact on demand
Development Tools
Google Charts - use the Google Charts REST web service Venn Diagram - change Venn diagram parameters with range controls Supply and Demand - use range controls to change price and see the impact on demand Event Logger - demonstration of how to log events Replace Tester - testing regular expression substitution Process Step Editor - editing a list of horizontal process steps Application Builder - a form use to create a forms management application Dashboard Builder - a form to specify the layout of a single page dashboard
Replace Tester - testing regular expression substitution Process Step Editor - editing a list of horizontal process steps Application Builder - a form use to create a forms management application Dashboard Builder - a form to specify the layout of a single page dashboard
Hierarchical Bookmarks - editing bookmarks Outline Editor - outline with indenting Synonym Set Editor - associate a synonym set with a business term W2 Tax Form - sample tax form based on Mozilla XForms site Calculator - a four function calculator Crime Profile - sample of complex form used in criminal justice CSS tables - formatting tabular output with CSS without using HTML table Search flickr - search flickr using REST interface Web service - calling a web service from within an XForm Stock Quote - Calling a REST service that returns stock information from a ticker symbol Search Amazon - Search amazon using a web service Custom Controls - Example of a custom control using XBL Warn on Navigate Away - Warn users if they navigate away before saving Graph Viewer - Viewing a graph of nodes and links Select All - Selecting all rows in a table Google Maps - Example of using Google Maps from within XForms Sorting using XSLT - Example of how to sort an instance using a XSLT stylesheet Mobile XForms - Examples of XForm-based mobile applications
Client XForms Solution
Server Solutions Outline Editor - outline with indenting Synonym Set Editor - associate a synonym set with a business term W2 Tax Form - sample tax form based on Mozilla XForms site Calculator - a four function calculator Crime Profile - sample of complex form used in criminal justice CSS tables - formatting tabular output with CSS without using HTML table Search flickr - search flickr using REST interface Web service - calling a web service from within an XForm Stock Quote - Calling a REST service that returns stock information from a ticker symbol Search Amazon - Search amazon using a web service Custom Controls - Example of a custom control using XBL Warn on Navigate Away - Warn users if they navigate away before saving Graph Viewer - Viewing a graph of nodes and links Select All - Selecting all rows in a table Google Maps - Example of using Google Maps from within XForms Sorting using XSLT - Example of how to sort an instance using a XSLT stylesheet Mobile XForms - Examples of XForm-based mobile applications
Apache - Configuring Apache to work with XForms Versioning Form Data With WebDAV and Subversion - Using subversion and WebDAV to automatically version form data IIS - Configuring Microsoft's IIS to work with XForms XML Databases - Using native XML databases to work with XForms eXist - Using the eXist OpenSource native XML database IBM DB2 - Using the DB2 v9 with XForms Orbeon Forms - XForms conversion to HTML forms and other widgets Chiba - Open Source Java Implementation of the W3C XForms standard
Developement Tools
Versioning Form Data With WebDAV and Subversion - Using subversion and WebDAV to automatically version form data IIS - Configuring Microsoft's IIS to work with XForms XML Databases - Using native XML databases to work with XForms eXist - Using the eXist OpenSource native XML database IBM DB2 - Using the DB2 v9 with XForms Orbeon Forms - XForms conversion to HTML forms and other widgets Chiba - Open Source Java Implementation of the W3C XForms standard Key to symbols:
Sparse text Developing text Maturing text Developed text Comprehensive text:
Developing text Maturing text Developed text Comprehensive text:
indicates an XForms/Best practice
