XQuery/Simple XForms Examples

Motivation
Although static XForms can be held in the eXist database, XForms can also be generated dynamically using XQuery. In this section, we first show static forms being output and executed by some XForms client-side engines, the FireFox add-in, the Javascript FormFaces and the XSLT/Javascript XSLTForms.

Then we look at dynamic form generation.

A wide range of XForms examples can be found in the XForms Wikibook

XForms Engines
These examples use:


 * Firefox addin
 * Requires Firefox with the XForms add-in
 * media-type set to application/xhtml+xml


 * FormFaces
 * Cross-browser support - examples tested on Firefox and IE6
 * The Javascript source is stored in the eXist database and linked to each form
 * media-type set to text/html


 * XSLTForms
 * Uses XSLT to transform to an HTML page and JavaScript to execute.
 * The XSLT transformation may be either server-side (via eXist) or client-side.

All examples use the same css stylesheet

Firefox
  

Execute

FormFaces
declare option exist:serialize "method=xhtml media-type=text/html indent=yes";

 Output a Model value       

Execute

XSLTForms
  </form:output>

Execute

Simple Controls
Firefox Formfaces  XSLTForms

Observations

 * FormFaces : breaks on Firefox
 * XSLTForms : Changes only made when triggered

Multiple instances
A model can contain multiple instances, whose root node is accessed with the instance(id) construct.

</xf:instance> <xf:instance id="seasons" xmlns=""> </xf:instance> <xf:instance id="months" xmlns=""> <item name="January" season="winter"/> <item name="February" season="winter"/> <item name="March" season="spring"/> <item name="April" season="spring"/> <item name="May" season="spring"/> <item name="June" season="summer"/> <item name="July" season="summer"/> <item name="August" season="summer"/> <item name="September" season="autumn"/> <item name="October" season="autumn"/> <item name="November" season="autumn"/> <item name="December" season="winter"/> </xf:instance> </xf:model> Test conditional selection lists - month selector depends on the current season <xf:select1 ref="instance('data')/selected-season"> <xf:label>Season:</xf:label> <xf:itemset nodeset="instance('seasons')/item"> <xf:label ref="@name"/> <xf:value ref="@name"/> </xf:itemset> </xf:select1> <xf:select1 ref="instance('data')/selected-month"> <xf:label>Month:</xf:label> <xf:itemset nodeset="instance('months')/item[@season=instance('data')/selected-season]"> <xf:label ref="@name"/> <xf:value ref="@name"/> </xf:itemset> </xf:select1> <xf:output ref="instance('data')/selected-season"> <xf:label>selected-season: </xf:label> </xf:output> <xf:output ref="instance('data')/selected-month"> <xf:label>selected-month: </xf:label> </xf:output>

FireFox

Date Entry

 * Firefox generates a drop-down calendar. Firefox


 * Formfaces currently has no Calendar widget Formfaces

Server Interaction
Interaction with a server can be via GET or POST. This example is based on Dan McCreary's example in the XForms Wiki book.

On Firefox:

<html xmlns:xf="http://www.w3.org/2002/xforms" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns="http://www.w3.org/1999/xhtml"> XQuery Tester <link rel="stylesheet" type="text/css" href="xforms.css" /> <xf:model> <xf:instance> </xf:instance> <xf:submission id="get-instance" method="get" replace="instance" action="adderGet.xq" separator="&amp;"> </xf:submission> <xf:submission id="post-instance" method="post" replace="instance" action="adderPost.xq"> </xf:submission> </xf:model> XForm interaction with XQuery <xf:input ref="input/arg1" incremental="true"> <xf:label>Arg1:</xf:label> </xf:input> <xf:input ref="input/arg2" incremental="true"> <xf:label>Arg2:</xf:label> </xf:input> <xf:output ref="result/sum"> <xf:label> Sum:</xf:label> </xf:output> <xf:submit submission="get-instance"> <xf:label>Get</xf:label> </xf:submit> <xf:submit submission="post-instance"> <xf:label>Post</xf:label> </xf:submit>

Firefox Formfaces

The respective server scripts are
 * GET

xquery version "1.0"; declare namespace request="http://exist-db.org/xquery/request";

let $arg1 := number(request:get-parameter("arg1", "0")) let $arg2 := number(request:get-parameter("arg2", "0")) return

xquery version "1.0"; declare namespace request="http://exist-db.org/xquery/request";
 * POST

let $data := request:get-data

let $arg1 := number($data/arg1) let $arg2 := number($data/arg2) return

In this example, the whole model is updated and returned to the client. Alternatively, part of the model can be updated (tbc)

Tabular example
A simple approach to generic XForms is illustrated in this script based on an example in the XForms wikibook

declare option exist:serialize "method=xhtml media-type=application/xhtml+xml indent=yes";

let $data := return

<html xmlns:xf="http://www.w3.org/2002/xforms" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns="http://www.w3.org/1999/xhtml"> Formatting XForms <link rel="stylesheet" type="text/css" href="xforms.css" />

<style type="text/css"> { for $item in $data/* let $width := string-length($item) return concat('._',name($item),' .xf-value {width:', $width,'em}&#10;') }     <xf:model> <xf:instance xmlns=""> {$data} </xf:instance> </xf:model> Name and Address {for $item in $data/* return (      <xf:input class="_{name($item)}" ref="/Data/{name($item)}">         <xf:label>{name($item)}: &#160;</xf:label>       </xf:input>,        ) }

In this simple tabular example, the XForm and accompanying CSS to define input field widths is generated by reflection on the supplied instance.

This example works correctly in Firefox but the styling fails in Formfaces

Simple Forms Schema
More control over the generated XForms can be provided by a simple Schema. This example is still for a simple tabular structure: declare option exist:serialize "method=xhtml media-type=application/xhtml+xml indent=yes";

let $data := let $schema := <Schema> <Row name="GivenName" label="First Name" width="20"/> <Row name="Surname" label="Surname" width="15"/> <Row name="CityName" label="City" width="15"/> <Row name="StateCode" label="State" width="3"/> <Row name="PostalID" label="ZipCode" width="8"/> </Schema> return

<html xmlns:xf="http://www.w3.org/2002/xforms" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns="http://www.w3.org/1999/xhtml"> Formatting XForms <link rel="stylesheet" type="text/css" href="xforms.css" />

<style type="text/css"> { for $item in $schema/* let $id := concat("_",$item/@name) let $width := $item/@width return concat('.',$id,' .xf-value {width:', $width,'em}&#10;') }     <xf:model> <xf:instance xmlns=""> {$data} </xf:instance> </xf:model> Name and Address {for $item in $schema/* let $id := concat("_",$item/@name) let $label := string( $item/@label) return (      <xf:input class="{$id}" ref="/Data/{$item/@name}">         <xf:label>{$label}: &#160;</xf:label>       </xf:input>,        ) }

Firefox