XForms

From Wikibooks, the open-content textbooks collection

XForms is a featured book on Wikibooks because it contains substantial content, it is well-formatted, and the Wikibooks community has decided to feature it on the main page or in other places. Please continue to improve it and thanks for the great work so far! You can edit its advertisement template.

[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

[edit] Table of Contents

Cover
Introduction - About this book and overview of the technology.
1. Background - A brief history and motivation for the XForms standard.
2. Benefits - Why use XForms?
3. Installing and Testing - How to install an XForm plug-in or extension.
4. Naming Conventions - Naming standards used throughout this book.
XForms by Example - Short example to test your installation and get you started.
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.
  2. Message - Open a panel with a message
2. XForms Architecture - An introduction to the XForms MVC architecture
  1. Input - A simple input that updates the model
  2. Incremental Many to One - How a single input field can change many outputs controls
  3. Spreadsheet like updating - how XForms tracks what fields need to be updated
  4. Bind - how to bind inputs to the model using the bind element
  5. Adder - sample XForms that uses a remote web service to sum two numbers
Form 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. Select1 - the new radio button
11. Select1 drop list - select a single option from a drop-down list
12. Open Selection - suggest a value or allows the user to add their own
13. Select - selecting many (check-boxes)
14. Select Multi-Column - selecting from many columns (check-boxes)
15. Selecting from Model - getting data for select lists from the model
16. Selecting from File - getting data for select lists from an external file
17. Selecting a Date - using the bind command to present a calendar selector
18. Formatting a date - display a date in MM/DD/YYYY format
19. Upload - uploading a file from a local file system
20. Trigger - the new button
21. Controlling Button Appearance - setting button labels, hints and using images
22. Range - adding a slider to your form
23. Setting Initial Cursor - setting the initial cursor position when a form loads
24. Search Form - creating a search form
25. Submit - saving your XML data to a file or web server
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. Output and Links - how to display links in your output
Dynamic Forms - getting dynamic forms without using Javascript
1. Switch and Case - swapping views with switch and case
2. Relevant - displaying only relevant fields
3. Disable Buttons - how to disable buttons when they are not relevant
4. Read Only - setting input fields to be read only
5. Select and Group - using select to conditionally display a group
6. Dynamic Labels - dynamically change the labels of a form without reloading the page
7. Suggesting Items - creating a list of suggested items as you type
8. Slideshow - changing images in a slideshow
9. Referencing Items - referencing items in sets
10. Dynamic Selection Lists - itemsets that dynamically depends on values of an xml-instance
11. Deep Copy with Insert Origin - using insert origin to perform a deep copy between instances in a model
Intermediate Examples - Note: These examples assume that you understand many of the beginning concepts.
1. Menus - navigation of complex forms
  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. Folding Menus - Folding menus
  5. Deselect Events - Catching the Deselection Events when you navigate away from a form
2. 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
  3. Advanced Search - a search screen with simple and advanced tabs
3. 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
  7. Disable Trigger - disable the delete button when only a single item remains
  8. Delete Confirm - confirming before you delete
  9. Delete Confirm with CSS - Styling your confirmation with CSS
  10. Trailing Insert and Delete - add and delete from the end of a list
  11. Insert and Delete into Table - insert and delete rows into a table
  12. Highlight Selected Row - highlight a selected row
  13. Table Column Total - table with a column total in table footer
4. XML Schema
  1. Load from XML Schema - load data types from an external XML Schema file
  2. Dynamically Load JavaScript - example of how to dynamically load a JavaScript program
  3. Validate - validate form using XML Schema
  4. Validate with schema types - validate form using XML Schema types
  5. Facet Validation - check min and max lengths of fields from the XML Schema
5. Graphics
  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
6. 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

Advanced Examples
1. Hierarchical Bookmarks - editing bookmarks
2. Outline Editor - outline with indenting
3. Synonym Set Editor - associate a synonym set with a business term
4. W2 Tax Form - sample tax form based on Mozilla XForms site
5. Calculator - a four function calculator
6. Crime Profile - sample of complex form used in criminal justice
7. CSS tables - formatting tabular output with CSS without using HTML table
8. Search flickr - search flickr using REST interface
9. Web service - calling a web service from within an XForm
10. Stock Quote - Calling a REST service that returns stock information from a ticker symbol
11. Search Amazon - Search amazon using a web service
12. Custom Controls - Example of a custom control using XBL
13. Warn on Navigate Away - Warn users if they navigate away before saving
14. Graph Viewer - Viewing a graph of nodes and links
15. Select All - Selecting all rows in a table
16. Google Maps - Example of using Google Maps from within XForms
17. Sorting using XSLT - Example of how to sort an instance using a XSLT stylesheet
18. Mobile XForms - Examples of XForm-based mobile applications
Client XForms Solution
Server 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 - XForms conversion to HTML forms and other widgets
8. Chiba - Open Source Java Implementation of the W3C XForms standard
Developement Tools
1. Form Generators
  1. NIEM to XForms
2. Form Designers
  1. IBM Workplace Forms
  2. Intalio Form Designer
3. Debugging XForms