XForms

XForms Welcome to the XForms Tutorial and Cookbook Wikibook! 300px|right 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. 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 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 /Introduction/ - About this book and overview of the technology. 100% Sept 27th, 2006 /Background/ - A brief history, theory and motivation for the XForms standard. 100% Sept 27th, 2006 /Benefits/ - Why use XForms? 100% Sept 27th, 2006 /Installing and Testing/ - How to install an XForm plug-in or extension. 100% Sept 27th, 2006 /Naming Conventions/ - Naming standards used throughout this book. 100% March 17th, 2006 /Comparison of XForms Products/ - A comparison of XForms products 25% February 17th, 2010 A Tour of XForms These examples are for people who are just getting started. /HelloWorld/ - A simple test to see if XForms is installed correctly. 100% Sept 6th, 2006 /Simple Message/ - Open a panel with a message 100% Sept 13th, 2006 /XForms Architecture/ - An introduction to the XForms MVC architecture 100% March 17th, 2007 /Input Example/ - A simple input that updates the model 100% Sept 13th, 2006 /Incremental Many to One/ - How a single input field can change many output controls 100% Sept 13th, 2006 /Spreadsheet-like Updating/ - how XForms tracks what fields need to be updated 100% Sept 6th, 2006 /Bind/ - how to bind inputs to the model using the bind element 100% Sept 6th, 2006 /Adder/ - sample XForm that uses a remote web service to sum two numbers 100% Aug 6th, 2007 Controls /Input/ - a simple input form with a label 100% Sept 6th, 2006 /Address/ - a simple address form with labels 100% Sept 20th, 2006 /Address Aligned/ - using CSS to align fields 100% Sept 20th, 2006 /Input Field Width/ - using CSS to control field width 100% Oct 23rd, 2006 /Secret/ - a way to enter passwords 100% Sept 27th, 2006 15px /Message Types/ - three types of messages 100% Sept 6th, 2006 /Textarea/ - a large block of text 100% Sept 6th, 2006 /Textarea with style/ - styling textarea using CSS 100% Jan 19th, 2007 15px /Checkbox/ - a simple boolean (yes/no) checkbox 100% Sept 14th, 2007 Selecting Items from Lists /Select1/ - the new radio button 100% Sept 6th, 2006 /Select1 drop list/ - select a single option from a drop-down list 100% Sept 6th, 2006 /Open Selection/ - suggests a value or allows the user to add their own 100% Aug 12th, 2007 /Select/ - selecting many (check-boxes) 100% Sept 15th, 2006 /Select Multi-Column/ - selecting many items from many columns (check-boxes) 100% Dec 29th, 2006 /Select1 Multi-Column/ - selecting one item from many columns (radio buttons) 100% Dec 29th, 2006 /Selecting from Model/ - getting data for select lists from the model 100% Sept 26th, 2006 /Selecting Codes From File/ - getting data for select lists from an external file 100% Sept 26th, 2006 15px Working with Dates /Selecting a Date/ - using the bind command to present a calendar selector 75% Sept 12th, 2006 /Formatting a date/ - display a date in MM/DD/YYYY format 100% Sept 13th, 2006 15px /Upload/ - uploading a file from a local file system 50% Sept 6th, 2006 /Trigger/ - the new button 100% Sept 6th, 2006 /Controlling Button Appearance/ - setting button labels, hints and using images 100% Sept 6th, 2006 /Range/ - adding a slider to your form 100% Sept 27th, 2006 /Send/ - send out a request for a new resource 25% October 14th, 2009 /Load/ - dynamically loading additional resources into your form 25% October 14th, 2009 Binds /Selecting Text/ - use a bind expression to set select from a variety of text messages 25% November 17th, 2010 Intermediate Examples These examples assume you are familiar with XForms concepts and controls. Client-Side Field Validation /Validation with Bind/ - use a bind expression to set a data type and alert the user 50% October 14th, 2009 /Case Validation/ - use a bind expression to check the case of an field 50% October 14th, 2009 /Limiting Length/ - use an action to warn users when they exceed a field length 25% December 19th, 2010 Server-Side Field Validation /Server-Side Field Validation/ - sending a single field to the server to validate the contents of the field Submitting Data /Submit/ - saving your XML data to a file or web server 25% Sept 6th, 2006 /Encoding Parameters/ - encoding submission parameters 25% Sept 6th, 2006 /Changing Namespaces in Submission/ - changing the namespace prefixes from submission data 50% October 23th, 2009 /Displaying Save Results/ - showing save status after you have done a save 25% July 12th, 2013 Events and Condition /Events Overview/ - What are XForms events and how to use them 25% Dec 29th, 2008 /Setting Initial Cursor/ - setting the initial cursor position when a form loads 75% Jan 7th, 2008 /Selection and Deselection Events/ - Logging events when tabs are selected or deselected 25% April 1st, 2009 /Conditional Actions/ Output /Binds to many instances/ - binding to many instances in many models 50% Sept 20th, 2006 /Bind to ranges/ - binding to two different ranges 75% Sept 20th, 2006 /Repeat/ - using repeat to display lists 75% Sept 20th, 2006 /Conditional Styling/ - using CSS and group to conditionally display items in a list 75% Feb 26th, 2008 /Formatting Numbers/ - how to format numbers and currency 25% Feb 26th, 2009 /Output and Links/ - how to display links in your output 75% Feb 26th, 2008 Dynamic Forms Forms that change as you use them. Dynamic forms without using Javascript 75% Sept 6th, 2006 /Switch and Case/ - swapping views with switch and case 25% Nov. 7th, 2006 /Relevant/ - displaying only relevant fields 25% Sept 6th, 2006 /Binding in Repeats/ - binding within repeated elements 25% Feb 3re, 2010 /Show-Hide Controls/ - hiding large controls 25% July 12th, 2009 /Disable Buttons/ - how to disable buttons when they are not relevant 25% Sept 24th, 2007 /Read Only/ - setting input fields to be read only 100% Sept 6th, 2006 /Select and Group/ - using select to conditionally display a group 100% Nov 8th, 2006 /Dynamic Labels/ - dynamically change the labels of a form without reloading the page 75% Sept 21st, 2007 /Suggesting Items/ - creating a list of suggested items as you type 75% January 21st, 2008 /Dynamic Selection Lists/ - itemset's that are dynamically dependent on values of an xml-instance 75% March 6th, 2008 /Incremental Model Loading/ - dynamically loading other models 25% April 2nd, 2000 /Dynamic Labels in Local language/ - dynamically change the labels of a form in Local language without reloading the page 100% July 28th, 2010 Search Forms /Search Form/ - creating a search form 75% Jan 13th, 2008 /Search with Load/ - creating a search form with the load element 75% October 15th, 2009 /Advanced Search/ - a search screen with simple and advanced tabs 25% Jan 13th, 2009 /Date Range Search/ - searching for items with date ranges 25% May 14th, 2010 /Search flickr/ - search flickr using REST interface 100% Sept 6th, 2006 /Web service/ - calling a web service from within an XForm 75% Oct 5th, 2006 /Stock Quote/ - Calling a REST service that returns stock information from a ticker symbol 25% Nov 9th, 2006 /Search Amazon/ - Search amazon using a web service 100% Oct 18th, 2006 /Incremental Find/ - As you type a list of choices is narrowed 25% Feb. 1st, 2010 Advanced Forms Larger Examples /CKEditor/ - allow users to add markup using a WYSIWYG editor 25% October 16th, 2008 /Slideshow/ - changing images in a slideshow 75% January 21st, 2008 /Referencing Items/ - referencing items in sets 75% February 25th, 2008 /Deep Copy with Insert Origin/ - using insert origin to perform a deep copy between instances in a model 75% March 6tht, 2008 /A Trigger for Inserting BBcode into a Textarea box/ /Multi-Part Forms/ - how to keep your initial load times short 25% July 14th, 2010 /Moving Items Between Lists/ - how to move selected items between lists 25% July 27th, 2011 /Queue Management/ - how to manage items in a sorted queue 25% July 28th, 2011 Navigating Large Forms Using Tabs and Trees - navigation of complex form data 00% Sept 6th, 2006 /Horizontal File Tab Menu/ - a complete working example with no Javascript 100% Sept 6th, 2006 15px /Horizontal File Tab Menu Highlighted/ - Tab menu with selected tab highlighted using CSS target 100% Sept 6th, 2006 15px /Vertical Menu/ - Menu similar to prior version but using vertical orientation 100% Sept 6th, 2006 /Storing Tabs in the Model/ - Storing tabs in the model and using repeat to display tabs 25% 6Sept 11th, 2010 /Folding Menus/ - Folding menus /Tree Menus/ - Hierarchical Tree Menus 25% March 18th, 2009 /Deselect Events/ - Catching the Deselection Events when you navigate away from a form /Horizontal File Tab Menu Highlighted With Binding/ - Another Horizontal File Tab Menu using an Instance, Binding, Events and CSS 100% Jan 6th, 2009 /Hierarchical Bookmarks/ - editing bookmarks 100% Sept 6th, 2006 /Outline Editor/ - outline with indenting 25% Feb 5th, 2007 Reading and writing to files /Read and write with get and put/ - using the submission element to read and write a static 75% Sept 27th, 2006 /Saving Intermediate Form Data/ - saving intermediate form data to a local drive 25% Sept 27th, 2006 Composite Controls Controls that combine controls /Tri-Document Loading/ - three ways to upload a document 25% July 6th, 2009 /Entity Selection/ - ways to select a person or organization 25% July 7th, 2009 Tabular and Repeating Data /Repeat into table/ - putting data into HTML tables 25% Sept 27th, 2006 /Repeat filter/ - dynamically filtering out rows from lists 50% Aug 23rd, 2007 /Inline Repeats/ - add structures horizontally to the right 100% Feb 24th, 2008 /Insert/ - inserting a new row into a tabular structure 100% Sept 20th, 2006 /Insert with Origin/ - inserting new data and specifying initial values using the origin attribute 75% Feb 27th, 2008 /Delete/ - delete the selected row from a tabular structure 100% Sept 20th, 2006 /Disable Trigger/ - disable the delete button when only a single item remains 50% Oct 22th, 2007 /Delete Confirm/ - confirming before you delete 25% Sept 20th, 2006 /Delete Confirm with CSS/ - Styling your confirmation with CSS 75% March 20th, 2007 /Trailing Insert and Delete/ - add and delete from the end of a list 100% Sept 27th, 2006 /Insert and Delete into Table/ - insert and delete rows into a table 100% Nov 4th, 2007 /Code Table Editor/ - insert and delete rows into reference data code table 50% Jan 4th, 2017 /Highlight Selected Row/ - highlight a selected row 50% Sept 27th, 2006 /Table Column Total/ - table with a column total in table footer 100% Dec 6th, 2006 /Multiple Uploads/ - use the repeat function to attach multiple uploads to a form 25% Sept 23rd, 2013 /Summary Details/ - a table of summary information at the top of a form allows you to inspect the details of each item 25% Feb 26th, 2013 XML Schema /Load from XML Schema/ - load data types from an external XML Schema file 75% Oct 9th, 2006 /Validate/ - validate form using XML Schema 25% Oct 9th, 2006 /Validate with schema types / - validate form using XML Schema types 75% Oct 30th, 2006 /Facet Validation/ - check min and max lengths of fields from the XML Schema 75% Oct 10th, 2006 /SVG/ JavaScript /Dynamically Load JavaScript/ - example of how to dynamically load a JavaScript program 25% Mar 19th, 2007 Adding Graphs, Charts and Maps /Pie Chart/ - draw a pie chart using range controls 75% Sept 17th, 2007 /Google Charts/ - use the Google Charts REST web service 25% Jan 20th, 2008 /Venn Diagram/ - change Venn diagram parameters with range controls 25% Jan 20th, 2008 /Supply and Demand/ - use range controls to change price and see the impact on demand 25% Oct 10th, 2007 /Graph Viewer/ - Viewing a graph of nodes and links 75% April 23th, 2007 Development Tools /Event Logger/ - demonstration of how to log events 50% Jan 8th, 2008 /Replace Tester/ - testing regular expression substitution 50% Nov 5th, 2007 /Process Step Editor/ - editing a list of horizontal process steps 50% Feb 17th, 2008 /Application Builder/ - a form use to create a forms management application 25% Feb 22nd, 2008 /Dashboard Builder/ - a form to specify the layout of a single page dashboard 25% May 15th, 2008 /URL Rewriter/ - a form configure and test Jetty URL rewrite rules 25% Oct 30th, 2008 /Web Service Tester/ - a form for testing a web service 25% Nov 21th, 2008 /Synonym Set Editor/ - associate a synonym set with a business term 75% March 25th, 2008 Other Examples W2 Tax Form - sample tax form based on Mozilla XForms site 25% Sept 6th, 2006 /Invoice Manager/ - invoice manager 25% Oct 13th, 2008 /Calculator/ - a four function calculator 100% Sept 6th, 2006 /Crime Profile/ - sample of complex form used in criminal justice 50% March 6th, 2008 /CSS tables/ - formatting tabular output with CSS without using HTML table 50% Sept 20th, 2006 /Custom Controls/ - Example of a custom control using XBL 75% Oct 17th, 2006 /Warn on Navigate Away/ - Warn users if they navigate away before saving 75% March 19th, 2007 /Select All/ - Selecting all rows in a table 25% July 25th, 2007 /Google Maps/ - Example of using Google Maps from within XForms 00% Nov 5th, 2007 /Sorting using XSLT/ - Example of how to sort an instance using a XSLT stylesheet 75% Jun 19th, 2007 Mobile XForms /Mobile XForms/ - Examples of XForm-based mobile applications 25% July 7th, 2007 Client XForms Solutions /FireFox Extension/ /FormFaces/ /Picoforms/ /Ubiquity XForms/ - http://code.google.com/p/ubiquity-xforms/ XSLTForms - Open source client-side implementation, not a plug-in or install, works with all major browsers (IE, FireFox, Opera, Safari, Chrome and more). EMC Documentum Formula - Client-side implementation, free for developer use. Server Side Solutions /Apache/ - Configuring Apache to work with XForms 25% Feb 15th, 2007 /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 00% Feb 15th, 2007 /XML Databases/ - Using native XML databases to work with XForms 00% Feb 15th, 2007 /eXist/ - Using the eXist OpenSource native XML database 50% Feb 15th, 2007 /IBM DB2/ - Using the DB2 v9 with XForms 25% Mar 19th, 2007 Orbeon Forms - Open Source Ajax-based XForms implementation (also comes with the Form Builder editor) 00% Nov 5th, 2007 betterFORM - Open Source Java Implementation using Dojo toolkit for client-side AJAX layer Development Tools /Form Generators/ /NIEM to XForms/ /Form Designers/ /IBM Workplace Forms/ /Intalio Form Designer/ /Debugging XForms/ Key to symbols: 15px indicates an XForms/Best practice /References/ /Debugging Tips/ Markup languages X 75% __NOTOC__ __NOEDITSECTION__