September 21, 2010 Betty HarveyElectronic Commerce Connection, Inc. harvey@eccnet.com The W3C describes XForms as: XForms is an XML application that represents the next generation of forms for the Web. XForms is not a free-standing document type, but is intended to be integrated into other markup languages, such as XHTML, ODF or SVG. An XForms-based web form gathers and processes XML data using an architecture that separates presentation, purpose and content. The underlying data of a form is organized into instances of data schema (though formal schema definitions are not required).

This section provides a brief introduction to the XForms technology. There is some common vocabulary that will be used throughout this presentation. XML InstanceThe XML Instance is an instantiation or a single document of a XML vocabulary defined by a XML schema language. XIncludeA W3C specification for merging multiple XML documents into a single instance by referencing the physical location of the document. XHTML XHTML (Extensible Hypertext Markup Language) is a family of XML markup languages that mirror or extend versions of the widely used Hypertext Markup Language (HTML), the language in which web pages are written. XForms is a W3C Specification XForms 1.1 - dated October 20, 2009 Version 3 - dated 29 October 2007 Version 2 - dated14 March 2006 Version 1 - dated 14 October 2003 There are many technologies for developing forms: HTML PHP AJAX JSP XForms XForms and HTML are the only standard for developing forms. XForms provides the ability to work directly with XML objects. Input on HTML forms need to be sent to another language to be manipulated. Standard Vocabulary Reusable modules (XInclude) Native XML Results Use of MVC (Model–view–controller) - separation of business logic and user interface. Used with other vocabularies, usually XHTML but could be custom vocabulary. The user should not be able to distinguish what technology is being used for a well-designed form. XForms has been described as "Next generation of webforms". Actually XForms is an XML vocabulary for defining forms and it is not limited to the web Most implementation of XForms are web-based client/server implementations.

Client Side	Server Side
Firefox XForms extension	Orbeon Forms
IBM Locus Forms	Chiba
Open Office 2.0	IBM Lotus Forms
X-Smiles	XSLT Forms
DENG
PicoForms
DataMovil

I have personal knowledge and have used Firefox Xforms and Orbeon. I have 'played' with Chiba but haven't developed any applications using it.

This section provides a brief understanding of the XFoprms Model. The following topics will be discussed: Model Controls XForms Instance Binding Data XForms Submission The XForms model component can contain 4 different types of components: xforms:instance: The XML document for results. xforms:bind: A mechanism to set a value in the result tree (XML instance). xforms:variable: A mechanism to set a variable to me used within XForm calculations. xforms:control: Processing controls for the XForm, for example <xform:submission>

XForms Model

The XForms Model provides form setup. <xforms:model> <xforms:instance id="Contact-instance"> <Contact> <PersonalName> <FirstName/> . . . </PersonalName> <Address> <Street/> . . . </Address> <Email/> </Contact> </xforms:instance> <xforms:submission id="save-submission" ref="instance('Contact-instance')" resource="http://localhost:8080/exist/rest/db/home/era/TransferRequests/{$TRID}.xml" method="put" replace="none"> <xforms:action ev:event="xforms-submit-done"> <xforms:message level="modal">Submission complete</xforms:message> </xforms:action> <xforms:action ev:event="xforms-submit-error"/> </xforms:submission> </xforms:model> XForms uses the <xforms:instance> element to create the XML model. There are 2 ways define the model.

W3C Schema

<xforms:instance id="Contact-instance" schema="contact.xsd">

Embedded XML Document

<xforms:instance id="Contact-instance"> <Contact> . . . </Contact> </xforms:instance>

Pointer to XML Document

<xforms:instance id="Contact-instance" src="contact.xml"> When developing a form the form designer decides how they want to create the XML XForms Instance. There can be multiple XML instance models in a single form. Separate instances can be used to store state data about the individuals form. XML components can be set using the <xforms:bind> element.

Set Datatype

<xforms:bind nodeset="TodayDate" type="xsd:date" required="yes">

Perform Calculations

<xforms:bind nodeset="instance('Contact-instance')/TodayDate" calculate="now()"/>

Combination Calculations

<xforms:bind nodeset="instance('Contact-instance')/TodayDate" calculate="now()"/> Example of Calculation working. The <xforms:submission> element is a child element of the <xforms:model> element and tells the <xforms:submit> element what do to.

Example XForms Submission Element

<xforms:submission id="save-submission" ref="instance('Contact-instance')" resource="http://localhost:8080/exist/rest/db/myfile.xml" method="put" replace="none"> <xforms:action ev:event="xforms-submit-done"> <xforms:message level="modal">Submission complete</xforms:message> </xforms:action> <xforms:action ev:event="xforms-submit-error"/> </xforms:submission>

Very similar to HTML forms but with more functionality.

XForms Control	Definition	Example
<xforms:input>	Free form text.	Link to Example
<xforms:secret>	Used to capture data while being hidden. Can be used to capture password information.	Link to Example
<xforms:textarea>	Free formed block of text in a multiline format.	Link to Example
<xforms:output>	Display information to the user.	Link to Example
<xforms:upload>	Provides the ability for a user to upload an external file.	Link to Example
<xforms:range>	Provides the ability for a person to upload a value from a range of values.	Link to Example
<xforms:trigger>	Provides a user triggered action	Link to Example
<xforms:select>	Provides the ability to allow the user to select multiple values from a list.	Link to Example
<xforms:select1>	Provides the ability to allow the user to select a single value from a list.	Link to Example
<xforms:submit>	Provides the ability submit data to a processor. Works in conjunction with the <xforms:submission> element.	Link to Example

The input control allows the users the ability to input a piece of information. This is usually short pieces of information that the user wants to capture.

Example <forms:input>

<xforms:input ref="Example1"> <xforms:label>First Name</xforms:label> </xforms:input> Link to Example

Allowed Attribute Types

Common UI Common Single Node Binding The secret control allows the user to imput data that is encrypted at the time it is captured. The secret control is most often used for a password.

Example <xforms:secret>

<xforms:secret ref="Example2"> <xforms:label>Password</xforms:label> </xforms:secret> Link to Example

Allowed Attribute Types

Common UI Common Single Node Binding The textarea control provides the user the ability to input a block of text. The textarea control provides the ability to have multiline display.

Example <xforms:textarea>

<xforms:textarea ref="Example3" width="20" height="3"> <xforms:label>Text Area</xforms:label> </xforms:textarea> Link to Example

Allowed Attribute Types

Common UI Common Single Node Binding The output control allow the presentation of information from the datamodel to the user. The possibilities are a node in an XML instance, a variable, output from function, etc.

Example <xforms:output>

<xforms:output value="now()"> <xforms:label>Today's Date &#160;</xforms:label> </xforms:output> Link to Example

Allowed Attribute Types

Common Single Node Binding The upload control allows the user to upload a local file to the process.

<xforms:upload>

<xforms:upload ref="Example5"> <xforms:label>Upload a file</xforms:label> </xforms:upload> Link to Example

Allowed Attribute Types

Common UI Common Single Node Binding The ranges control allow the user to select values from a range of values. Most XForms engines will put a UI control to select the value.

Range UI Example

<xforms:range> (Select Number)

<xforms:range ref="Example6" start="1" end="10" step="1"> <xforms:label>Set Ranges</xforms:label> </xforms:range>

<xforms:range> (Select Date)

<range ref="Example6" start="2009-01-01" end="2009-12-31"> <label>Ship Ranges</label> </range> Link to Example

Specific Range Attribues
Attribute	Description
start	Optional hint for the lexical starting bound for the range—a legal value for the underlying data. If provided, this value is used to further refine the constraints specified by the underlying model.
end	Optional hint for the ending bound for the range—a legal value for the underlying data. If provided, this value is used to further refine the constraints specified by the underlying model.
step	Optional value to use for incrementing or decrementing the value. Must be of a type capable of expressing the difference between two legal values of the underlying data.
incremental	When true, this form control will generate additional xforms-value-changed events. The default for this form control is false.

Allowed Attribute Types

Common UI Common Single Node Binding The trigger element provides the ability to perform user-triggered actions. One of the common uses of the trigger control is to provide the ability to add multiple element types to the document, for example a row in an order form. The example below shows how to use a trigger to add a new element.

Trigger Before and After

Example <xforms:trigger> Code

<xforms:repeat nodeset="Example7" id="Example7-repeat"> <xforms:input ref="."> <xforms:label>Repeating Element</xforms:label> </xforms:input><br/> </xforms:repeat> <xforms:trigger> <xforms:label>Add a new Example7</xforms:label> <xforms:insert nodeset="Example7" at="index('Example7-repeat')" position="after" ev:event="DOMActivate" /> </xforms:trigger> Link to Example

Allowed Attribute Types

Common UI Common Single Node Binding The select1 control allows the user to select a single item from a list of items.

Select1 Representation After Selection

Example <xforms:select1> Code

<xforms:select1 ref="Example8" appearance="full"> <xforms:item> <xforms:label>Yes</xforms:label> <xforms:value>yes</xforms:value> </xforms:item> <xforms:item> <xforms:label>No</xforms:label> <xforms:value>No</xforms:value> </xforms:item> </xforms:select1> Link to Example

Allowed Attribute Types

Common UI Common Single Node Binding The select control allows the user to select multiple items from a single list.

Select Representation After Selection

Example <xforms:select> Code

<xforms:select ref="Example8"> <xforms:item> <xforms:label>Red Shoe</xforms:label> <xforms:value>red</xforms:value> </xforms:item> <xforms:item> <xforms:label>Blue Shoe</xforms:label> <xforms:value>blue</xforms:value> </xforms:item> <xforms:item> <xforms:label>Green Shoe</xforms:label> <xforms:value>green</xforms:value> </xforms:item> </xforms:select> Link to Example

Allowed Attribute Types

Common UI Common Single Node Binding The submit control provides the ability to submit the form. It is used in conjunction with the <xforms:submission> element which provides information about what to do when the submit button is selected.

Submit Button

<xforms:submit>

<xforms:submit submission="save-submission"> <xforms:label>Save Example Data</xforms:label> </xforms:submit> Link to Example

Specific Submit Attributes
Attribute	Description
submission	Required attribute. The value of the submission attribute should be the value of the id attribute on the <xforms:submission> element.

Allowed Attribute Types

Common UI Common Single Node Binding

XForms enables the form developer to easily send helpand hint messages to a form using the <xforms:help> and <xforms:hint> elements. This section will provide an overview of the help and hints events in XForms. Mechanism to provide further help to the user Mix vocabularies for presentation purposes. Can be used with and XForms control element Most applications provide a help button

Input Field with Help Function

Example of <xforms:help> Element

<xforms:input ref="Example1"> <xforms:label>Favorite Barnyard Animal</xforms:label> <xforms:help> <p>In this field please type your favorite barnyard animal.</p> <p><b>Examples:</b></p> <ul> <li>chicken</li> <li>cow</li> <li>goat</li> <li>etc</li> </ul> </xforms:help> </xforms:input> Link to Example Mechanism to provide further help to the user Mix vocabularies for presentation purposes. Can be used with and XForms control element Most applications provide a mouse-over

Input Field with Hint Mouseover

Example of <xforms:hint> Element

<xforms:input ref="Example1"> <xforms:label>Who was the first President of the US?</xforms:label> <xforms:hint> <p>First name is <i>George</i></p> </xforms:hint> </xforms:input> Link to Example

The element <xforms:group> is used for: Logical grouping of Xforms Components Set XML context Recursive model <xforms:group> elements can contain other <xforms:group> Can be used to control logic with XPath statements

<xforms:input> single node reference without <xforms:group>

<xforms:input ref="instance('Example-instance')/Example1"> <xforms:label>Example 1</xforms:label> </xforms:input> . . . <xforms:input ref="instance('Example-instance')/Example20"> <xforms:label>Example 1</xforms:label> </xforms:input>

<forms:group> used for context

<xforms:group ref="instance('Example-instance')"> <xforms:input ref="Example1"> <xforms:label>Example1</xforms:label> </xforms:input> . . . <xforms:input ref="Example20"> <xforms:label>Example20</xforms:label> </xforms:input> </xforms:group> XPath variables Variables have context. XForms Model - global variables XForms Group - local variables XForms variables are set using the <xforms:variable> element. The example below shows setting a variable to be a random number using the random function.

Example <xforms:variable>

<xforms:variable name="random" select="random()"/> Using a variable is the same as using a variable in XSLT or XQuery in an XPath statement.

Using a Variable

<xforms:submission id="save-submission" ref="instance('Example-instance)" action="http://localhost:8080/exist/rest/db/home/MyFile-{$mydoc}-{$random}.xml" method="put" replace="none"> The example above show a submission that uses 2 variables to set a filename during submission of the form.

Using a Variable in an Output Statement

<xforms:output value="$RecordGroupNumber"/> The <xforms:bind> element is used to set values to a node in the XML document. The example below shows that the height of a container is set based on information in a container list instance.

Example Bind

<xforms:bind nodeset="descendant::Height" id="bindHeight" calculate="instance('Container-instance')/Row[ContainerDescription = $containerType]/Height"/> Content can be conditionally shown to individuals based on XPath conditions.

Asking A Question:

<p><b>Will you attend the event?</b> <xforms:select1 ref="Attend" appearance="full"> <xforms:item> <xforms:label>Yes</xforms:label> <xforms:value>yes</xforms:value> </xforms:item> <xforms:item> <xforms:label>No</xforms:label> <xforms:value>no</xforms:value> </xforms:item> </xforms:select1>&#160;&#160; </p>

Presentation of Question

Based on the answer different presentations are presented to the user:

No Answer Presentation

No Content

<xforms:group ref="Attend[contains(., 'no')]"> <p>Sorry you won't be able to attend. Your presence will be missed!</p> </xforms:group>

Yes Presentation

Yes content

<xforms:repeat id="repeat-Dish" nodeset="Dish"> <xforms:input ref="DishName"> <xforms:label>Dish Name</xforms:label> </xforms:input> <xforms:input ref="SpecialInstructions"> <xforms:label>Any special needs for your dish? Explain.</xforms:label> </xforms:input> <br/> </xforms:repeat> Triggers to insert and delete rows <xforms:trigger> <xforms:label>Add another dish</xforms:label> <xforms:insert nodeset="Dish" at="index('repeat-Dish')" position="after" ev:event="DOMActivate" /> </xforms:trigger> <xforms:trigger> <xforms:label>Delete previous dish</xforms:label> <xforms:delete nodeset="Dish" at="index('repeat-Dish')" position="after" ev:event="DOMActivate" /> </xforms:trigger> Toggles between logical views of the form Can establish XPath context <xforms:switch> must be parent <xforms:trigger element controls which view is presented to the user <xforms:case> maintains single view.

<xforms:switch> with 3 <xforms:case> Views

<xforms:switch> <xforms:case id="case-1"> <h1>View 1</h1> <xforms:input ref="Example1"> <xforms:label>Complete Example 1</xforms:label> </xforms:input> </xforms:case> <xforms:case id="case-2"> <h1><font color="maroon">View 2</font></h1> <xforms:input ref="Example2"> <xforms:label>Complete Example 2</xforms:label> </xforms:input> </xforms:case> <xforms:case id="case-3"> <h1 align="center"><font color="blue">View 3</font></h1> <xforms:input ref="Example3/Name"> <xforms:label>Name</xforms:label> </xforms:input> <xforms:input ref="Example3/OrganizationName"> <xforms:label>Organization Name</xforms:label> </xforms:input> </xforms:case> </xforms:switch> Link to Example

In this section we will cover the various attributes that can be used with Xform control element. The common class of attributes are attributes that can be used in any XForms elements.

Attribute	Definition
id	The optional id attribute of type xsd:ID assigns an identity to the containing element.
anyAttribute	Foreign attributes are allowed on all XForms elements. Foreign attributes are used in specific XForms engines to provide more functionality than is provided in the XForms standards.

id Attribute and Foreign Attribute

<xforms:input id="input5" ref="AgencyName" xxforms:size="100"> The xxforms attribute is a custom attribute that provides the ability to assign a size to an input field. The 'readonly' attribute can be used in the <xforms:bind> element to make fields 'read only'. <xforms:bind nodeset="//Example3/OrganizationName" readonly="true()"/>

Example Presentation of 'readonly' Attribute

QUESTIONS!