Multimedia Document<br />Editing XML data with XForms<br />Stéphane Sire (speaking)<br />
Framework<br />IC &gt; IIF &gt; MEDIA : http://media.epfl.ch<br />Models &<br />Environments for<br />Document related<br ...
Editing XML Data ?<br />Classical approach with text editors<br />requires knowledge of XML<br />not for non expert end-us...
Editing XML Data ?<br />What they say ?<br />http://www.ibm.com/developerworks/library/x-xml2008prevw.html<br />The end of...
Editing XML Data ?<br />Classical approach with form based user interfaces<br />no knowledge of XML required<br />can be d...
What Forms Standards are Available ?<br />Web Forms in HTML<br />not XML output but key/value pairs (flat data model)<br /...
XForms builtin Features<br />Input Validation and Calculation<br />Declarative Actions and Events (no scripting)<br />Acce...
MVC in XForms<br />Each XForms document has three parts<br />a model that contains the data to be edited and submitted<br ...
Anatomy of an XForms document<br />&lt;?xml version=&quot;1.0&quot;?&gt;<br />&lt;html xmlns=&quot;http://www.w3.org/1999/...
XForms Modules<br />19.02.2009<br />XForms overview<br />9<br />
Data Declaration &lt;xforms:instance&gt;<br />one or more &lt;xforms:instance&gt; inside an &lt;xforms:model&gt;<br />case...
What’s the need for several data instances ?<br />Data can be loaded from different data sources<br />one data instance pe...
Data Vaildation with Model Item Properties &lt;xforms:bind&gt;<br />Model item properties define rules that constrain the ...
List Of Model Item Properties on &lt;xforms:bind&gt;<br />19.02.2009<br />XForms data bindings<br />13<br />
Examples of XPath expressions in Data Bindings<br />imagine what each model item property does ?<br />nodeset=&quot;year&q...
Data Editing with Forms Controls<br />They bind a user interface “widget” with an instance data model element or attribute...
Several Kinds Of Forms Controls<br />To control the edition of instance data<br />input: a basic text field<br />textarea:...
Some Possible Forms Controls Representation<br />Would you recognize the forms controls ?<br />19.02.2009<br />XForms form...
Forms Control Look and Feel<br />Some attributes control the appearance of forms control<br />id, class, style: styling wi...
Forms Control Edited Content<br />Some attributes control the content of forms control<br />ref: bind the content of the c...
Forms Control Feedback<br />Forms Controls allow 4 child elements to give feedback to the user<br />&lt;xforms:label&gt;: ...
User Interface Generation With Repetitions<br />&lt;xforms:repeat&gt; allows to “iterate” over a collection of instance da...
User Interface Generation Basic Example<br />19.02.2009<br />XForms repetition<br />22<br />&lt;model xmlns=&quot;http://w...
Actions and Events<br />Programming side effects with no scripting language<br />Actions can be invoked in response to eve...
Different Kinds of Actions<br />There are actions to<br />set focus to a form control<br />display a message to the user<b...
Data Mutation with Actions and Events (insertion)<br />&lt;xforms:insert&gt; action<br />inserts an item inside a nodeset ...
Data Mutation with Actions and Events (Deletion)<br />&lt;xforms:delete&gt; action<br />deletes an item inside a nodeset a...
Dynamical User Interface with &lt;xforms:switch&gt;<br />&lt;xforms:swith&gt; introduces several alternatives in the rende...
Grouping with &lt;xforms:group&gt;<br />&lt;xforms:group&gt; sets the context to a current node in the data model with a r...
Model Based Switching with &lt;xforms:group&gt;<br />an &lt;xforms:group&gt; can be dynamically hidden<br />by using a rel...
Submitting Data with an &lt;xforms:submission&gt;<br />The purpose of XForms is to submit data to a server !<br />Submissi...
Submission Example<br />Sends the content of instance(‘order’) to the /order URL using the POST method<br />&lt;xforms:sub...
Controlling Submissions<br />&lt;xforms:submit&gt; forms controls trigger the submissions in the body of the document<br /...
Submissions and XML databases<br />XML databases (such as Exist) have REST APIs<br />CRUD functionalities exposed through ...
How to Test XForms with Orbeon Forms<br />With the XForms sandbox provided with Orbeon Forms<br />On the public Orbeon For...
Debugging XForms with Orbeon Forms<br />Activate the data instance inspector widget<br />add this line at the end of your ...
Summary of XForms in XHTML documents<br />In the &lt;head&gt; section<br />declare the model(s)<br />declare the instance(...
Summary of main XPath use in XForms<br />Bind a model item property to one or more instance nodes<br />nodeset attribute<b...
Summary Of XForms Companion Recommendations<br />XPath + Namespaces in XML<br />used everywhere<br />XML Schemas<br />to d...
Useful Namespaces to Remember<br />19.02.2009<br />Summary<br />39<br />
XForms References<br />19.02.2009<br />References<br />40<br />
Orbeon Forms References<br />19.02.2009<br />References<br />41<br />
Upcoming SlideShare
Loading in …5
×

Editing XML data with XForms

5,952 views
5,821 views

Published on

Part of a course on multimedia document engineering, presented at EPFL in February 2009. Quick introduction to the W3C XForms specification.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,952
On SlideShare
0
From Embeds
0
Number of Embeds
22
Actions
Shares
0
Downloads
89
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Editing XML data with XForms

  1. 1. Multimedia Document<br />Editing XML data with XForms<br />Stéphane Sire (speaking)<br />
  2. 2. Framework<br />IC &gt; IIF &gt; MEDIA : http://media.epfl.ch<br />Models &<br />Environments for<br />Document related<br />Interaction &<br />Authoring<br />MEDIA<br />XML based technologies<br />19.02.2009<br />1<br />Introduction<br />
  3. 3. Editing XML Data ?<br />Classical approach with text editors<br />requires knowledge of XML<br />not for non expert end-users<br />19.02.2009<br />Introduction<br />2<br />
  4. 4. Editing XML Data ?<br />What they say ?<br />http://www.ibm.com/developerworks/library/x-xml2008prevw.html<br />The end of markup-centric editors<br />“In the early days, a lot of vendors released markup-centric editors that made embedded documents in tree controls. This had the advantage of being incredibly easy to code using numerous preexisting tree components like JTree on Swing. But they had the distinct disadvantage that nobody wanted to read, write, or edit their XML documents as trees. The marketplace has mostly swept these tools away to an unlamented grave.”<br />Elliotte Rusty Harold<br />19.02.2009<br />Introduction<br />3<br />
  5. 5. Editing XML Data ?<br />Classical approach with form based user interfaces<br />no knowledge of XML required<br />can be deployed in Web browsers<br />19.02.2009<br />Introduction<br />4<br />
  6. 6. What Forms Standards are Available ?<br />Web Forms in HTML<br />not XML output but key/value pairs (flat data model)<br />no automatic validation (dependent on scripting in Javascript)<br />Propietary formats <br />Adobe XML Forms, Microsoft InfoPath, etc. <br />W3C XForms<br />open standard (free)<br />XForms 1.0 appeared in 2001, became a Recommendation in 2007<br />XForms 1.1 now a Candidate Recommendation<br />based on XML for editing XML data <br />19.02.2009<br />Introduction<br />5<br />
  7. 7. XForms builtin Features<br />Input Validation and Calculation<br />Declarative Actions and Events (no scripting)<br />Accessibility<br />Device Independence<br />abstract forms controls that may be rendered with different devices<br />Data persistence<br />communication layer compliant with REST principles<br />Initial data insertion as XML<br />no need for template languages as with JSP or RoR<br />Compatible with any XML host language (XHTML, SVG, …)<br />this allows to “borrow” user interface elements from a foreign language<br />Model View Controller MVC<br />19.02.2009<br />XForms overview<br />6<br />
  8. 8. MVC in XForms<br />Each XForms document has three parts<br />a model that contains the data to be edited and submitted<br />one or more views<br />forms controls (presentation part)<br />elements from a host presentation document (XHTML, SVG, …)<br />each view is bound to a particular element in the model via an XPath expression<br /> some controllers<br />forms controls (logical part)<br />bindings that control data input value space <br />actions triggered by events to update the model and/or the views<br />submissions that control model downloading from and offloading to server(s)<br />19.02.2009<br />XForms overview<br />7<br />
  9. 9. Anatomy of an XForms document<br />&lt;?xml version=&quot;1.0&quot;?&gt;<br />&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml” xmlns:xf=&quot;http://www.w3.org/2002/xforms&quot;<br /> xmlns:xsd=&quot;http://www.w3.org/2001/XMLSchema&quot;&gt;<br />&lt;head&gt;<br />&lt;model xmlns=&quot;http://www.w3.org/2002/xforms&quot; id=&quot;order-model&quot;&gt;<br />&lt;instance&gt;<br /> &lt;doughnuts xmlns=&quot;&quot;&gt;<br /> &lt;quantity/&gt;<br /> &lt;/doughnuts&gt;<br /> &lt;/instance&gt;<br />&lt;bind nodeset=&quot;quantity&quot; type=&quot;xsd:nonNegativeInteger&quot;/&gt;<br /> &lt;submission action=”http://doughnuts.org/order&quot; method=&quot;post&quot; id=&quot;order-submit&quot; /&gt;<br />&lt;/model&gt;<br /> &lt;/head&gt;<br /> &lt;body&gt;<br />&lt;h2&gt;Order Doughnuts&lt;/h2&gt;<br />&lt;xf:input ref=&quot;quantity&quot;&gt;<br />&lt;xf:label&gt;Quantity&lt;/xf:label&gt;<br />&lt;/xf:input&gt; <br />&lt;xf:submit submission=&quot;order-submit&quot;&gt;<br />&lt;xf:label&gt;Order&lt;/xf:label&gt;<br />&lt;/xf:submit&gt; <br /> &lt;/body&gt;<br />&lt;/html&gt;<br />19.02.2009<br />XForms overview<br />8<br />Legend<br />xml declarations<br />Model<br />Views (incl. host language)<br />Controllers<br />XPath <br />expression<br />
  10. 10. XForms Modules<br />19.02.2009<br />XForms overview<br />9<br />
  11. 11. Data Declaration &lt;xforms:instance&gt;<br />one or more &lt;xforms:instance&gt; inside an &lt;xforms:model&gt;<br />case 1: linked to external data<br />with an src attribute : &lt;xforms:instance src=“my-data-source.xml”/&gt;<br />case 2: inline instance data<br />with an XML skeleton empty of data or not<br />optional link to an XML Schema file<br />with a schema attribute on the model element<br />optional id attribute<br />19.02.2009<br />XForms data declaration<br />10<br />&lt;xforms:instance id=&quot;credit-card-instance&quot;&gt;<br /> &lt;credit-card&gt;<br /> &lt;type/&gt;<br /> &lt;number/&gt;<br /> &lt;expiration-month/&gt;<br /> &lt;expiration-year/&gt;<br /> &lt;verification-code/&gt;<br /> &lt;valid&gt;false&lt;/false&gt;<br /> &lt;/credit-card&gt;<br />&lt;/xforms:instance&gt;<br />
  12. 12. What’s the need for several data instances ?<br />Data can be loaded from different data sources<br />one data instance per source<br />Data can be saved to different data sinks<br />one data instance per sink<br />This is the basis for supporting Ajax patterns in XForms<br />we will detail this with the &lt;xforms:submission&gt; element <br />Data instances can also be used to represent non-user data<br />application data (e.g. a list of city to display in selection lists)<br />the state of some user interface elements, the value of the data instance control the visibility of the user interface elements<br />19.02.2009<br />XForms data declaration<br />11<br />
  13. 13. Data Vaildation with Model Item Properties &lt;xforms:bind&gt;<br />Model item properties define rules that constrain the elements and attributes of the instances<br />They are defined on &lt;xforms:bind&gt; elements placed within an &lt;xforms:model&gt;<br />They apply to a nodeset through a nodeset attribute (implicit iteration)<br />which is defined by an XPath expression<br />Each property is associated with an attribute applying to different facets<br />e.g. check that &lt;age&gt; is a positive integer<br />with the type attribute<br />&lt;xforms:bind nodeset=“user/age” type=“xsd:nonNegativeInteger”/&gt;<br />XPath expressions in &lt;xforms:bind&gt; are by default relative to the root element of the first XForms instance<br />except when starting with instance(“instance-id”)<br />19.02.2009<br />XForms data bindings<br />12<br />
  14. 14. List Of Model Item Properties on &lt;xforms:bind&gt;<br />19.02.2009<br />XForms data bindings<br />13<br />
  15. 15. Examples of XPath expressions in Data Bindings<br />imagine what each model item property does ?<br />nodeset=&quot;year&quot; constraint=&quot;. &gt; 1970”<br />ref=&quot;volume&quot; calculate=&quot;../height * ../width * ../depth”<br />nodeset=&quot;quantity&quot; type=&quot;xsd:integer&quot; required=&quot;true()<br />nodeset=&quot;state&quot; required=&quot;../country=&apos;USA&apos;&quot;<br />nodeset=&quot;verification-code” relevant=&quot;../type = &apos;visa&apos; or ../type = &apos;mastercard’”<br />19.02.2009<br />XForms data bindings<br />14<br />
  16. 16. Data Editing with Forms Controls<br />They bind a user interface “widget” with an instance data model element or attribute<br />they “control” user inputs<br />19.02.2009<br />XForms forms controls<br />15<br />&lt;model id=&quot;order-model&quot; <br /> xmlns=&quot;http://www.w3.org/2002/xforms&quot; &gt;<br />&lt;instance&gt;<br /> &lt;doughnuts xmlns=&quot;&quot;&gt;<br /> &lt;quantity&gt;20&lt;/quantity&gt;<br /> &lt;/doughnuts&gt;<br /> &lt;/instance&gt;<br />&lt;/model&gt;<br />XPath expression<br />&lt;xf:input ref=&quot;quantity&quot;&gt;<br /> &lt;xf:label&gt;Quantity&lt;/xf:label&gt;<br />&lt;/xf:input&gt; <br />
  17. 17. Several Kinds Of Forms Controls<br />To control the edition of instance data<br />input: a basic text field<br />textarea: a multiline text field<br />secret: passwords and the like<br />upload: upload a file or data stream<br />range: choose from a range of values<br />selection among a list of items<br />select: choose any number of items from a list<br />select1: choose one item from a list<br />To present data (non editable)<br />output: display non-editable value<br />To generate events which can be used to trigger actions<br />submit: send the form data as specified in the model&apos;s submission<br />trigger: forge an event<br />19.02.2009<br />XForms forms controls<br />16<br />
  18. 18. Some Possible Forms Controls Representation<br />Would you recognize the forms controls ?<br />19.02.2009<br />XForms forms controls<br />17<br />
  19. 19. Forms Control Look and Feel<br />Some attributes control the appearance of forms control<br />id, class, style: styling with CSS<br />appearance : choose between “full”, “compact” or “minimal” display<br />this augments the number of forms widgets available with the same vocabulary<br />incremental update behaviour<br />with the incremental attribute<br />19.02.2009<br />XForms forms controls<br />select1 appearance =“minimal”<br />appearance =“compact”<br />appearance =“full”<br />18<br />
  20. 20. Forms Control Edited Content<br />Some attributes control the content of forms control<br />ref: bind the content of the control with one instance data in the model<br />nodeset: bind an itemset in a selection control with a list of instance data in the model<br />19.02.2009<br />XForms forms controls<br />19<br /> &lt;instance id=&quot;order&quot;&gt;<br /> &lt;Order xmlns=&quot;&quot;&gt; <br /> &lt;Grape&gt;Chardonnay&lt;/Grape&gt;<br /> &lt;/Order&gt;<br /> &lt;/instance&gt; <br /> &lt;instance id=&quot;grapes&quot;&gt;<br /> &lt;Grape xmlns=&quot;&quot;&gt; <br /> &lt;Name&gt;Cabernet Franc&lt;/Name&gt;<br /> &lt;Name&gt;Carignan&lt;/Name&gt;<br /> &lt;Name&gt;Cinsault&lt;/Name&gt;<br /> … etc … &lt;Name&gt;Ugni Blanc&lt;/Name&gt;<br /> &lt;Name&gt;Viognier&lt;/Name&gt;<br /> &lt;/Grape&gt; <br /> &lt;/instance&gt; <br />&lt;xf:select1 ref=&quot;instance(&apos;order&apos;)/Grape&quot; appearance=”compact&quot;&gt;<br /> &lt;xf:label&gt;Grape type: &lt;/xf:label&gt;<br /> &lt;xf:itemset nodeset=&quot;instance(&apos;grapes&apos;)/Name&quot;&gt;<br /> &lt;xf:label ref=&quot;.&quot;/&gt;<br /> &lt;xf:value ref=&quot;.&quot;/&gt;<br /> &lt;/xf:itemset&gt;<br />&lt;/xf:select1&gt;<br />
  21. 21. Forms Control Feedback<br />Forms Controls allow 4 child elements to give feedback to the user<br />&lt;xforms:label&gt;: mandatory label<br />&lt;xforms:alert&gt;: error message to show in case of validation error<br />&lt;xforms:hint&gt;: hint to show when users mouse over the control<br />&lt;xforms:help&gt;: help dialog displayed on demand <br />19.02.2009<br />XForms forms controls<br />20<br />alert<br />hint<br />help<br />
  22. 22. User Interface Generation With Repetitions<br />&lt;xforms:repeat&gt; allows to “iterate” over a collection of instance data and to generate repetitive user interface elements <br />the attribute nodeset points to the collection with an XPath<br />the enclosed block (XForms and Host language constructs) is repeated<br />this is an easy way to generate tables rows, lists, etc. <br />Each &lt;xforms:repeat&gt; defines an implicit index<br />users can manually change the selected index<br />the user interface highlights the item at the index<br />it can be used in XPath expressions with index(‘repeat-id’) function<br />the index is used with insert / delete actions (see infra)<br />&lt;xforms:repeat&gt; can be nested<br />inner nodeset expressions are interpreted relatively to the nodeset of the parent’s repetition<br />19.02.2009<br />XForms repetition<br />21<br />
  23. 23. User Interface Generation Basic Example<br />19.02.2009<br />XForms repetition<br />22<br />&lt;model xmlns=&quot;http://www.w3.org/2002/xforms”&gt;<br /> &lt;instance id=&quot;grapes&quot;&gt;<br /> &lt;Grape xmlns=&quot;&quot;&gt; <br /> &lt;Name&gt;Cabernet Franc&lt;/Name&gt;<br /> &lt;Name&gt;Cabernet Sauvignon&lt;/Name&gt;<br /> &lt;Name&gt;Carignan&lt;/Name&gt;<br /> … etc …<br /> &lt;Name&gt;Semillon Blanc&lt;/Name&gt;<br /> &lt;Name&gt;Ugni Blanc&lt;/Name&gt;<br /> &lt;Name&gt;Viognier&lt;/Name&gt;<br /> &lt;/Grape&gt; <br /> &lt;/instance&gt; <br />&lt;/model&gt;<br />&lt;table&gt;<br /> &lt;tr&gt;&lt;th&gt;Grapes&lt;/th&gt;&lt;/tr&gt;<br /> &lt;xf:repeat nodeset=&quot;instance(&apos;grapes&apos;)/Name&quot;&gt;<br />&lt;tr&gt;&lt;td&gt;&lt;xf:output ref=&quot;.&quot;/&gt;&lt;/td&gt;&lt;/tr&gt;<br /> &lt;/xf:repeat&gt;<br />&lt;/table&gt;<br />
  24. 24. Actions and Events<br />Programming side effects with no scripting language<br />Actions can be invoked in response to events<br />events declarations follow the XML Events recommendation<br />event defined by an event, an observer, a target and a handler<br />in XForms the handler is an Action<br />Actions can be used in isolation<br />with an ev:event attribute to subscribe to an event whose observer/target is the parent of the action<br />with an ev:observer attribute to subscrive to an event whose observer is different than the parent of the action<br />e.g. &lt;xforms:toggle ev:event=“DOMActivate” case=“noshow”/&gt;<br />Actions can be grouped into sequences in a &lt;xforms:action&gt;<br />equivalent to a declarative script<br />19.02.2009<br />XForms user interaction<br />23<br />
  25. 25. Different Kinds of Actions<br />There are actions to<br />set focus to a form control<br />display a message to the user<br />navigate to a new URI (in the same or a new window)<br />change the value of an instance data node<br />&lt;xforms:setvalue ref=“XPath expr.” value=“XPath expr.”/&gt;<br />variant with copy instead of value<br />variant with inline content<br />force a recalculation, revalidation, or screen refresh<br />submit or reset all or a portion of the instance data<br />perform other actions to deal with scrolling and manipulating repeating line item tables<br />insert or delete instance data nodes (see next slide)<br />19.02.2009<br />XForms user interaction<br />24<br />
  26. 26. Data Mutation with Actions and Events (insertion)<br />&lt;xforms:insert&gt; action<br />inserts an item inside a nodeset at the index specified by an at XPath expression and in position “before” or “after”<br />e.g. &lt;xf:insert nodeset=&quot;instance(&apos;grapes&apos;)/Name&quot; at=&quot;1&quot; position=&quot;before&quot;/&gt;<br />by default duplicates the last node of the set<br />This allows to interactively edit repeated data when used in conjunction with a &lt;xforms:repeat&gt;<br />The common pattern is to observe a &lt;xforms:trigger&gt;<br />e.g. <br />19.02.2009<br />XForms user interaction<br />25<br />&lt;xf:trigger&gt;<br /> &lt;xf:label&gt;Add grape at 1&lt;/xf:label&gt;<br /> &lt;xf:actionev:event=&quot;DOMActivate&quot;&gt;<br />&lt;xf:insert nodeset=&quot;instance(&apos;grapes&apos;)/Name&quot; at=&quot;1&quot; position=&quot;before&quot;/&gt;<br /> &lt;xf:setvalue ref=&quot;instance(&apos;grapes&apos;)/Name[1]&quot; value=&quot;instance(&apos;admin&apos;)/Name&quot;/&gt;<br /> &lt;/xf:action&gt;<br />&lt;/xf:trigger&gt;<br />
  27. 27. Data Mutation with Actions and Events (Deletion)<br />&lt;xforms:delete&gt; action<br />deletes an item inside a nodeset at the index specified by an at XPath expression<br />e.g. &lt;xf:insert nodeset=&quot;instance(’diary&apos;)/Person&quot; at=&quot;index(‘my-repeat’)&quot;/&gt;<br />This allows to interactively edit repeated data when used in conjunction with a &lt;xforms:repeat&gt;<br />The common pattern is to observe a &lt;xforms:trigger&gt;<br />e.g. delete an item in a repetition<br />19.02.2009<br />XForms user interaction<br />26<br />&lt;xf:repeat nodeset=&quot;instance(&apos;grapes&apos;)/Name&quot; id=&quot;grape-repetition&quot;&gt;<br /> &lt;tr&gt;&lt;td&gt;<br /> &lt;xf:output ref=&quot;.&quot; class=&quot;editable&quot;/&gt;<br /> &lt;xf:trigger appearance=&quot;minimal&quot; class=&quot;edit-button&quot;&gt;<br /> &lt;xf:label&gt;&lt;img src=&quot;../apps/coursmd/cancel.png&quot; alt=&quot;Delete&quot; /&gt;&lt;/xf:label&gt;<br />&lt;xf:delete ev:event=&quot;DOMActivate&quot; nodeset=&quot;.&quot; at=&quot;1&quot;/&gt;<br /> &lt;/xf:trigger&gt;<br /> &lt;tr&gt;&lt;td&gt;<br />&lt;/x:repeat&gt;<br />
  28. 28. Dynamical User Interface with &lt;xforms:switch&gt;<br />&lt;xforms:swith&gt; introduces several alternatives in the rendering of a page<br />each &lt;xforms:case&gt; child of a switch is an alternative<br />identified with an id attribute<br />the &lt;xforms:toggle&gt; action can be used anywhere to react to an event and to select which alternative is currently visible in a switch with a case attribute<br />e.g. &lt;toggle case=&quot;products&quot; ev:event=&quot;DOMActivate&quot;/&gt;<br />Applications<br /> show / hide details on demand<br />the first case contains a Show button<br />the second case contains a Hide button and the details<br />tabbed browsing (each panel is a case in a switch)<br />19.02.2009<br />XForms user interaction<br />27<br />
  29. 29. Grouping with &lt;xforms:group&gt;<br />&lt;xforms:group&gt; sets the context to a current node in the data model with a ref attribute<br />all relative XPath expressions in descendants forms controls are relative to the &lt;xforms:group&gt; context <br />e.g.<br />19.02.2009<br />XForms user interaction<br />28<br />&lt;group ref=”instance(‘order’)/client/address&quot;&gt; <br /> &lt;label&gt;Shipping Address&lt;/label&gt; <br /> &lt;input ref=&quot;line_1&quot;&gt; <br /> &lt;label&gt;Address line 1&lt;/label&gt; <br /> &lt;/input&gt; <br /> &lt;input ref=&quot;line_2&quot;&gt; <br /> &lt;label&gt;Address line 2&lt;/label&gt;<br /> &lt;/input&gt; <br /> &lt;input ref=&quot;postcode&quot;&gt; <br /> &lt;label&gt;Postcode&lt;/label&gt; <br /> &lt;/input&gt;<br />&lt;/group&gt;<br />&lt;instance id=”order”&gt; <br /> &lt;order xmlns=&quot;&quot;&gt; <br /> &lt;client&gt;<br /> &lt;name/&gt;<br /> &lt;address&gt;<br /> &lt;line_1/&gt;<br /> &lt;line_2&gt;<br /> &lt;postcode/&gt;<br /> &lt;/client&gt;<br /> &lt;cart&gt;<br /> …<br /> &lt;/cart&gt;<br /> &lt;/customers&gt; <br />&lt;/instance&gt;<br />
  30. 30. Model Based Switching with &lt;xforms:group&gt;<br />an &lt;xforms:group&gt; can be dynamically hidden<br />by using a relevant model item property on its bound node<br />this also applies to any other forms control<br />the node bound to an &lt;xforms:group&gt; can be changed dynamically<br />by using a conditional XPath expression<br />this will change the content of the full group each time the conditional XPath expression is reevaluated<br />e.g. <br />19.02.2009<br />XForms user interaction<br />29<br />&lt;instance id=&quot;members&quot;&gt;<br /> &lt;Members xmlns=&quot;&quot;&gt;<br /> &lt;Person&gt;&lt;id&gt;1&lt;/id&gt;&lt;Name&gt;Eva&lt;/Name&gt;&lt;Age&gt;20&lt;/Age&gt;&lt;/Person&gt; …<br />&lt;instance id=”admin&quot;&gt;<br /> &lt;Admin xmlns=&quot;&quot;&gt;<br /> &lt;Selection&gt;2&lt;/Selection&gt;…<br />&lt;xf:group ref=&quot;instance(&apos;members&apos;)/Person[child::id = instance(’admin&apos;)/Selection]&quot;&gt;<br /> &lt;xf:output ref=&quot;Name&quot;/&gt; is &lt;xf:output ref=&quot;Age&quot;/&gt; years old <br />&lt;/xf:group&gt;<br />
  31. 31. Submitting Data with an &lt;xforms:submission&gt;<br />The purpose of XForms is to submit data to a server !<br />Submissions also work to upload data from a server<br />XForms is Ajax ready<br />you can define multiple submissions to load / save different parts of the data model within the same forms document<br />one or more &lt;xforms:submission&gt; elements are declared in the model in the head<br />action attribute defines the destination URI (deprecated for a resource attribute in XForms 1.1 which can be dynamical)<br />method attribute defines the protocol (get, post, etc.)<br />ref attribute defines which instance / node(s) to submit<br />replace attribute defines what to do with the result<br />instance attribute defines which instance to replace<br />many more attributes…<br />don’t forget the id attribute to control when to submit<br />19.02.2009<br />XForms submission<br />30<br />
  32. 32. Submission Example<br />Sends the content of instance(‘order’) to the /order URL using the POST method<br />&lt;xforms:submission id=&quot;save-submission&quot; ref=&quot;instance(’order&apos;)&quot; method=”post&quot; replace=&quot;none&quot; action=&quot;/order&quot; /&gt;<br />“post” data is serialized as an XML document with a content type “application/xml” within the HTTP request body<br />“get” data is URL encoded and appended to the URI using the separator defined in an optional separator attribute (default to &amp;)<br />NB: absolute paths in action are relative to the servlet context<br />Retrieves the list of countries at countries.xml and replaces the content of the instance ‘countries’<br />&lt;xforms:submission id=”get-countries” method=&quot;get” instance=“countries” action=“countries.xml&quot; serialize=“false”/&gt;<br />serialize attribute is set to none to avoid submitting data<br />19.02.2009<br />XForms submission<br />31<br />
  33. 33. Controlling Submissions<br />&lt;xforms:submit&gt; forms controls trigger the submissions in the body of the document<br />e.g. basic Search button<br />&lt;xforms:send&gt; actions can be used to react to events by triggering a submission<br />e.g. same as above with a send action <br />19.02.2009<br />XForms submission<br />32<br />&lt;xforms:submit submission=”search-submission&quot;&gt;<br /> &lt;xforms:label&gt;Search&lt;/xforms:label&gt;<br />&lt;/xforms:submit&gt;<br />&lt;xforms:trigger&gt;<br /> &lt;xforms:label&gt;Search&lt;/xforms:label&gt;<br /> &lt;xforms:action ev:event=&quot;DOMActivate&quot;&gt;<br /> &lt;xforms:send submission=&quot;save-submission&quot; /&gt;<br /> &lt;/xforms:action&gt;<br />&lt;/xforms:submit&gt;<br />
  34. 34. Submissions and XML databases<br />XML databases (such as Exist) have REST APIs<br />CRUD functionalities exposed through HTTP methods<br />create (PUT)<br />read (GET)<br />update (POST)<br />delete (DELETE)<br />&lt;xforms:submission&gt; can direcly talk with the Exist database<br />by using a URI is of the form (Exist database)<br />/exist/rest/db/orbeon/{database}/{collection}/{resource}…<br />try http://localhost:8080/orbeon/exist/rest/db/orbeon/in your browser<br />XML database can also store XQuery scripts which are executed when accessed through REST APIs<br />This allows to develop XRX applications<br />XForms + REST + XQuery<br />no middleware (direct client-to-database applications, except for Orbeon Forms server)<br />19.02.2009<br />XRX framework<br />33<br />
  35. 35. How to Test XForms with Orbeon Forms<br />With the XForms sandbox provided with Orbeon Forms<br />On the public Orbeon Forms demonstration server<br />http://www.orbeon.com/ops/xforms-sandbox/<br />On your own local installation of Orbeon Forms under Tomcat<br />http://localhost:8080/orbeon/xforms-sandbox/<br />Make your own Orbeon Forms application<br />Write an XHTML file (my-forms.xhtml)<br />Place this file into your Orbeon Forms deployed server <br />under WEB-INF/resources/my-forms.xhtml<br />add a page flow entry into WEB-INF/resources/page-flow.xml that uses this file as its view<br />&lt;page path-info=&quot;/hello&quot; view=&quot;my-forms.xhtml&quot;/&gt;<br />open it with your browser (do not forget to start Tomcat)<br />http://localhost:8080/orbeon/hello<br />change config/epilogue-servet.xpl to use theme-plain.xsl transformation for your page if you do not want Orbeon menus (this is more tricky)<br />19.02.2009<br />Orbeon Forms<br />34<br />
  36. 36. Debugging XForms with Orbeon Forms<br />Activate the data instance inspector widget<br />add this line at the end of your XHTML XForms file to debug :<br />&lt;span class=&quot;inspector-widget-class”&gt;<br /> &lt;widget:xforms-instance-inspector xmlns:widget=&quot;http://orbeon.org/oxf/xml/widget&quot;/&gt;<br />&lt;/span&gt;<br />19.02.2009<br />Orbeon Forms<br />35<br />
  37. 37. Summary of XForms in XHTML documents<br />In the &lt;head&gt; section<br />declare the model(s)<br />declare the instance(s) and their initial values<br />empty / inline / from file<br />declare submission(s) that allow to save / reload the instance<br />bind the instance data model to item properties<br />data types, constraints, etc.<br />In the &lt;body&gt;<br />bind controls to the instances<br />declare repetitive parts of the user interface<br />hard wire actions to events<br />repetitive parts insertion and deletion<br />user interface visual state change<br />submissions<br />19.02.2009<br />Summary<br />36<br />
  38. 38. Summary of main XPath use in XForms<br />Bind a model item property to one or more instance nodes<br />nodeset attribute<br />Compute dynamical expressions for model item properties<br />readonly, required, relevant, calculate, constraint attributes<br />Bind a form control to instance data<br />ref attribute (single node binding)<br />nodeset attribute (node set binding)<br />Specify the node or node set for operation by some action<br />e.g. at attribute (in node insertion or removal)<br />e.g. value attribute (in setvalue)<br />Make some calculation in some actions<br />e.g. index attribute (in &lt;xforms:setindex&gt; for a repetition)<br />19.02.2009<br />Summary<br />37<br />
  39. 39. Summary Of XForms Companion Recommendations<br />XPath + Namespaces in XML<br />used everywhere<br />XML Schemas<br />to define your own data types including with patterns (RegExp)<br />support is optional in an XForms user agent<br />XForms has equivalent facilities to define data types<br />XML Events<br />in XForms &lt;script&gt; handlers are replaced with &lt;action&gt; handlers<br />CSS<br />Forms Controls can be styled<br />with Orbeon Forms you can use the class attribute of forms controls and then declare their style<br />19.02.2009<br />Summary<br />38<br />
  40. 40. Useful Namespaces to Remember<br />19.02.2009<br />Summary<br />39<br />
  41. 41. XForms References<br />19.02.2009<br />References<br />40<br />
  42. 42. Orbeon Forms References<br />19.02.2009<br />References<br />41<br />

×