Editing XML data with XForms

Multimedia DocumentEditing XML data with XFormsStéphane Sire (speaking)

FrameworkIC > IIF > MEDIA : http://media.epfl.chModels &Environments forDocument relatedInteraction &AuthoringMEDIAXML based technologies19.02.20091Introduction

Editing XML Data ?Classical approach with text editorsrequires knowledge of XMLnot for non expert end-users19.02.2009Introduction2

Editing XML Data ?What they say ?http://www.ibm.com/developerworks/library/x-xml2008prevw.htmlThe end of markup-centric editors“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.”Elliotte Rusty Harold19.02.2009Introduction3

Editing XML Data ?Classical approach with form based user interfacesno knowledge of XML requiredcan be deployed in Web browsers19.02.2009Introduction4

What Forms Standards are Available ?Web Forms in HTMLnot XML output but key/value pairs (flat data model)no automatic validation (dependent on scripting in Javascript)Propietary formats Adobe XML Forms, Microsoft InfoPath, etc. W3C XFormsopen standard (free)XForms 1.0 appeared in 2001, became a Recommendation in 2007XForms 1.1 now a Candidate Recommendationbased on XML for editing XML data 19.02.2009Introduction5

XForms builtin FeaturesInput Validation and CalculationDeclarative Actions and Events (no scripting)AccessibilityDevice Independenceabstract forms controls that may be rendered with different devicesData persistencecommunication layer compliant with REST principlesInitial data insertion as XMLno need for template languages as with JSP or RoRCompatible with any XML host language (XHTML, SVG, …)this allows to “borrow” user interface elements from a foreign languageModel View Controller MVC19.02.2009XForms overview6

MVC in XFormsEach XForms document has three partsa model that contains the data to be edited and submittedone or more viewsforms controls (presentation part)elements from a host presentation document (XHTML, SVG, …)each view is bound to a particular element in the model via an XPath expression some controllersforms controls (logical part)bindings that control data input value space actions triggered by events to update the model and/or the viewssubmissions that control model downloading from and offloading to server(s)19.02.2009XForms overview7

Anatomy of an XForms document<?xml version="1.0"?><html xmlns="http://www.w3.org/1999/xhtml” xmlns:xf="http://www.w3.org/2002/xforms" xmlns:xsd="http://www.w3.org/2001/XMLSchema"><head><model xmlns="http://www.w3.org/2002/xforms" id="order-model"><instance> <doughnuts xmlns=""> <quantity/> </doughnuts> </instance><bind nodeset="quantity" type="xsd:nonNegativeInteger"/> <submission action=”http://doughnuts.org/order" method="post" id="order-submit" /></model> </head> <body><h2>Order Doughnuts</h2><xf:input ref="quantity"><xf:label>Quantity</xf:label></xf:input> <xf:submit submission="order-submit"><xf:label>Order</xf:label></xf:submit> </body></html>19.02.2009XForms overview8Legendxml declarationsModelViews (incl. host language)ControllersXPath expression

XForms Modules19.02.2009XForms overview9

Data Declaration <xforms:instance>one or more <xforms:instance> inside an <xforms:model>case 1: linked to external datawith an src attribute : <xforms:instance src=“my-data-source.xml”/>case 2: inline instance datawith an XML skeleton empty of data or notoptional link to an XML Schema filewith a schema attribute on the model elementoptional id attribute19.02.2009XForms data declaration10<xforms:instance id="credit-card-instance"> <credit-card> <type/> <number/> <expiration-month/> <expiration-year/> <verification-code/> <valid>false</false> </credit-card></xforms:instance>

What’s the need for several data instances ?Data can be loaded from different data sourcesone data instance per sourceData can be saved to different data sinksone data instance per sinkThis is the basis for supporting Ajax patterns in XFormswe will detail this with the <xforms:submission> element Data instances can also be used to represent non-user dataapplication data (e.g. a list of city to display in selection lists)the state of some user interface elements, the value of the data instance control the visibility of the user interface elements19.02.2009XForms data declaration11

Data Vaildation with Model Item Properties <xforms:bind>Model item properties define rules that constrain the elements and attributes of the instancesThey are defined on <xforms:bind> elements placed within an <xforms:model>They apply to a nodeset through a nodeset attribute (implicit iteration)which is defined by an XPath expressionEach property is associated with an attribute applying to different facetse.g. check that <age> is a positive integerwith the type attribute<xforms:bind nodeset=“user/age” type=“xsd:nonNegativeInteger”/>XPath expressions in <xforms:bind> are by default relative to the root element of the first XForms instanceexcept when starting with instance(“instance-id”)19.02.2009XForms data bindings12

List Of Model Item Properties on <xforms:bind>19.02.2009XForms data bindings13

Examples of XPath expressions in Data Bindingsimagine what each model item property does ?nodeset="year" constraint=". > 1970”ref="volume" calculate="../height * ../width * ../depth”nodeset="quantity" type="xsd:integer" required="true()nodeset="state" required="../country='USA'"nodeset="verification-code” relevant="../type = 'visa' or ../type = 'mastercard’”19.02.2009XForms data bindings14

Data Editing with Forms ControlsThey bind a user interface “widget” with an instance data model element or attributethey “control” user inputs19.02.2009XForms forms controls15<model id="order-model" xmlns="http://www.w3.org/2002/xforms" ><instance> <doughnuts xmlns=""> <quantity>20</quantity> </doughnuts> </instance></model>XPath expression<xf:input ref="quantity"> <xf:label>Quantity</xf:label></xf:input>

Several Kinds Of Forms ControlsTo control the edition of instance datainput: a basic text fieldtextarea: a multiline text fieldsecret: passwords and the likeupload: upload a file or data streamrange: choose from a range of valuesselection among a list of itemsselect: choose any number of items from a listselect1: choose one item from a listTo present data (non editable)output: display non-editable valueTo generate events which can be used to trigger actionssubmit: send the form data as specified in the model's submissiontrigger: forge an event19.02.2009XForms forms controls16

Some Possible Forms Controls RepresentationWould you recognize the forms controls ?19.02.2009XForms forms controls17

Forms Control Look and FeelSome attributes control the appearance of forms controlid, class, style: styling with CSSappearance : choose between “full”, “compact” or “minimal” displaythis augments the number of forms widgets available with the same vocabularyincremental update behaviourwith the incremental attribute19.02.2009XForms forms controlsselect1 appearance =“minimal”appearance =“compact”appearance =“full”18

Forms Control Edited ContentSome attributes control the content of forms controlref: bind the content of the control with one instance data in the modelnodeset: bind an itemset in a selection control with a list of instance data in the model19.02.2009XForms forms controls19 <instance id="order"> <Order xmlns=""> <Grape>Chardonnay</Grape> </Order> </instance> <instance id="grapes"> <Grape xmlns=""> <Name>Cabernet Franc</Name> <Name>Carignan</Name> <Name>Cinsault</Name> … etc … <Name>Ugni Blanc</Name> <Name>Viognier</Name> </Grape> </instance> <xf:select1 ref="instance('order')/Grape" appearance=”compact"> <xf:label>Grape type: </xf:label> <xf:itemset nodeset="instance('grapes')/Name"> <xf:label ref="."/> <xf:value ref="."/> </xf:itemset></xf:select1>

Forms Control FeedbackForms Controls allow 4 child elements to give feedback to the user<xforms:label>: mandatory label<xforms:alert>: error message to show in case of validation error<xforms:hint>: hint to show when users mouse over the control<xforms:help>: help dialog displayed on demand 19.02.2009XForms forms controls20alerthinthelp

User Interface Generation With Repetitions<xforms:repeat> allows to “iterate” over a collection of instance data and to generate repetitive user interface elements the attribute nodeset points to the collection with an XPaththe enclosed block (XForms and Host language constructs) is repeatedthis is an easy way to generate tables rows, lists, etc. Each <xforms:repeat> defines an implicit indexusers can manually change the selected indexthe user interface highlights the item at the indexit can be used in XPath expressions with index(‘repeat-id’) functionthe index is used with insert / delete actions (see infra)<xforms:repeat> can be nestedinner nodeset expressions are interpreted relatively to the nodeset of the parent’s repetition19.02.2009XForms repetition21

User Interface Generation Basic Example19.02.2009XForms repetition22<model xmlns="http://www.w3.org/2002/xforms”> <instance id="grapes"> <Grape xmlns=""> <Name>Cabernet Franc</Name> <Name>Cabernet Sauvignon</Name> <Name>Carignan</Name> … etc … <Name>Semillon Blanc</Name> <Name>Ugni Blanc</Name> <Name>Viognier</Name> </Grape> </instance> </model><table> <tr><th>Grapes</th></tr> <xf:repeat nodeset="instance('grapes')/Name"><tr><td><xf:output ref="."/></td></tr> </xf:repeat></table>

Actions and EventsProgramming side effects with no scripting languageActions can be invoked in response to eventsevents declarations follow the XML Events recommendationevent defined by an event, an observer, a target and a handlerin XForms the handler is an ActionActions can be used in isolationwith an ev:event attribute to subscribe to an event whose observer/target is the parent of the actionwith an ev:observer attribute to subscrive to an event whose observer is different than the parent of the actione.g. <xforms:toggle ev:event=“DOMActivate” case=“noshow”/>Actions can be grouped into sequences in a <xforms:action>equivalent to a declarative script19.02.2009XForms user interaction23

Different Kinds of ActionsThere are actions toset focus to a form controldisplay a message to the usernavigate to a new URI (in the same or a new window)change the value of an instance data node<xforms:setvalue ref=“XPath expr.” value=“XPath expr.”/>variant with copy instead of valuevariant with inline contentforce a recalculation, revalidation, or screen refreshsubmit or reset all or a portion of the instance dataperform other actions to deal with scrolling and manipulating repeating line item tablesinsert or delete instance data nodes (see next slide)19.02.2009XForms user interaction24

Data Mutation with Actions and Events (insertion)<xforms:insert> actioninserts an item inside a nodeset at the index specified by an at XPath expression and in position “before” or “after”e.g. <xf:insert nodeset="instance('grapes')/Name" at="1" position="before"/>by default duplicates the last node of the setThis allows to interactively edit repeated data when used in conjunction with a <xforms:repeat>The common pattern is to observe a <xforms:trigger>e.g. 19.02.2009XForms user interaction25<xf:trigger> <xf:label>Add grape at 1</xf:label> <xf:actionev:event="DOMActivate"><xf:insert nodeset="instance('grapes')/Name" at="1" position="before"/> <xf:setvalue ref="instance('grapes')/Name[1]" value="instance('admin')/Name"/> </xf:action></xf:trigger>

Data Mutation with Actions and Events (Deletion)<xforms:delete> actiondeletes an item inside a nodeset at the index specified by an at XPath expressione.g. <xf:insert nodeset="instance(’diary')/Person" at="index(‘my-repeat’)"/>This allows to interactively edit repeated data when used in conjunction with a <xforms:repeat>The common pattern is to observe a <xforms:trigger>e.g. delete an item in a repetition19.02.2009XForms user interaction26<xf:repeat nodeset="instance('grapes')/Name" id="grape-repetition"> <tr><td> <xf:output ref="." class="editable"/> <xf:trigger appearance="minimal" class="edit-button"> <xf:label><img src="../apps/coursmd/cancel.png" alt="Delete" /></xf:label><xf:delete ev:event="DOMActivate" nodeset="." at="1"/> </xf:trigger> <tr><td></x:repeat>

Dynamical User Interface with <xforms:switch><xforms:swith> introduces several alternatives in the rendering of a pageeach <xforms:case> child of a switch is an alternativeidentified with an id attributethe <xforms:toggle> action can be used anywhere to react to an event and to select which alternative is currently visible in a switch with a case attributee.g. <toggle case="products" ev:event="DOMActivate"/>Applications show / hide details on demandthe first case contains a Show buttonthe second case contains a Hide button and the detailstabbed browsing (each panel is a case in a switch)19.02.2009XForms user interaction27

Grouping with <xforms:group><xforms:group> sets the context to a current node in the data model with a ref attributeall relative XPath expressions in descendants forms controls are relative to the <xforms:group> context e.g.19.02.2009XForms user interaction28<group ref=”instance(‘order’)/client/address"> <label>Shipping Address</label> <input ref="line_1"> <label>Address line 1</label> </input> <input ref="line_2"> <label>Address line 2</label> </input> <input ref="postcode"> <label>Postcode</label> </input></group><instance id=”order”> <order xmlns=""> <client> <name/> <address> <line_1/> <line_2> <postcode/> </client> <cart> … </cart> </customers> </instance>

Model Based Switching with <xforms:group>an <xforms:group> can be dynamically hiddenby using a relevant model item property on its bound nodethis also applies to any other forms controlthe node bound to an <xforms:group> can be changed dynamicallyby using a conditional XPath expressionthis will change the content of the full group each time the conditional XPath expression is reevaluatede.g. 19.02.2009XForms user interaction29<instance id="members"> <Members xmlns=""> <Person><id>1</id><Name>Eva</Name><Age>20</Age></Person> …<instance id=”admin"> <Admin xmlns=""> <Selection>2</Selection>…<xf:group ref="instance('members')/Person[child::id = instance(’admin')/Selection]"> <xf:output ref="Name"/> is <xf:output ref="Age"/> years old </xf:group>

Submitting Data with an <xforms:submission>The purpose of XForms is to submit data to a server !Submissions also work to upload data from a serverXForms is Ajax readyyou can define multiple submissions to load / save different parts of the data model within the same forms documentone or more <xforms:submission> elements are declared in the model in the headaction attribute defines the destination URI (deprecated for a resource attribute in XForms 1.1 which can be dynamical)method attribute defines the protocol (get, post, etc.)ref attribute defines which instance / node(s) to submitreplace attribute defines what to do with the resultinstance attribute defines which instance to replacemany more attributes…don’t forget the id attribute to control when to submit19.02.2009XForms submission30

Submission ExampleSends the content of instance(‘order’) to the /order URL using the POST method<xforms:submission id="save-submission" ref="instance(’order')" method=”post" replace="none" action="/order" />“post” data is serialized as an XML document with a content type “application/xml” within the HTTP request body“get” data is URL encoded and appended to the URI using the separator defined in an optional separator attribute (default to &)NB: absolute paths in action are relative to the servlet contextRetrieves the list of countries at countries.xml and replaces the content of the instance ‘countries’<xforms:submission id=”get-countries” method="get” instance=“countries” action=“countries.xml" serialize=“false”/>serialize attribute is set to none to avoid submitting data19.02.2009XForms submission31

Controlling Submissions<xforms:submit> forms controls trigger the submissions in the body of the documente.g. basic Search button<xforms:send> actions can be used to react to events by triggering a submissione.g. same as above with a send action 19.02.2009XForms submission32<xforms:submit submission=”search-submission"> <xforms:label>Search</xforms:label></xforms:submit><xforms:trigger> <xforms:label>Search</xforms:label> <xforms:action ev:event="DOMActivate"> <xforms:send submission="save-submission" /> </xforms:action></xforms:submit>

Submissions and XML databasesXML databases (such as Exist) have REST APIsCRUD functionalities exposed through HTTP methodscreate (PUT)read (GET)update (POST)delete (DELETE)<xforms:submission> can direcly talk with the Exist databaseby using a URI is of the form (Exist database)/exist/rest/db/orbeon/{database}/{collection}/{resource}…try http://localhost:8080/orbeon/exist/rest/db/orbeon/in your browserXML database can also store XQuery scripts which are executed when accessed through REST APIsThis allows to develop XRX applicationsXForms + REST + XQueryno middleware (direct client-to-database applications, except for Orbeon Forms server)19.02.2009XRX framework33

How to Test XForms with Orbeon FormsWith the XForms sandbox provided with Orbeon FormsOn the public Orbeon Forms demonstration serverhttp://www.orbeon.com/ops/xforms-sandbox/On your own local installation of Orbeon Forms under Tomcathttp://localhost:8080/orbeon/xforms-sandbox/Make your own Orbeon Forms applicationWrite an XHTML file (my-forms.xhtml)Place this file into your Orbeon Forms deployed server under WEB-INF/resources/my-forms.xhtmladd a page flow entry into WEB-INF/resources/page-flow.xml that uses this file as its view<page path-info="/hello" view="my-forms.xhtml"/>open it with your browser (do not forget to start Tomcat)http://localhost:8080/orbeon/hellochange config/epilogue-servet.xpl to use theme-plain.xsl transformation for your page if you do not want Orbeon menus (this is more tricky)19.02.2009Orbeon Forms34

Debugging XForms with Orbeon FormsActivate the data instance inspector widgetadd this line at the end of your XHTML XForms file to debug :<span class="inspector-widget-class”> <widget:xforms-instance-inspector xmlns:widget="http://orbeon.org/oxf/xml/widget"/></span>19.02.2009Orbeon Forms35

Summary of XForms in XHTML documentsIn the <head> sectiondeclare the model(s)declare the instance(s) and their initial valuesempty / inline / from filedeclare submission(s) that allow to save / reload the instancebind the instance data model to item propertiesdata types, constraints, etc.In the <body>bind controls to the instancesdeclare repetitive parts of the user interfacehard wire actions to eventsrepetitive parts insertion and deletionuser interface visual state changesubmissions19.02.2009Summary36

Summary of main XPath use in XFormsBind a model item property to one or more instance nodesnodeset attributeCompute dynamical expressions for model item propertiesreadonly, required, relevant, calculate, constraint attributesBind a form control to instance dataref attribute (single node binding)nodeset attribute (node set binding)Specify the node or node set for operation by some actione.g. at attribute (in node insertion or removal)e.g. value attribute (in setvalue)Make some calculation in some actionse.g. index attribute (in <xforms:setindex> for a repetition)19.02.2009Summary37

Summary Of XForms Companion RecommendationsXPath + Namespaces in XMLused everywhereXML Schemasto define your own data types including with patterns (RegExp)support is optional in an XForms user agentXForms has equivalent facilities to define data typesXML Eventsin XForms <script> handlers are replaced with <action> handlersCSSForms Controls can be styledwith Orbeon Forms you can use the class attribute of forms controls and then declare their style19.02.2009Summary38

Useful Namespaces to Remember19.02.2009Summary39

XForms References19.02.2009References40

Orbeon Forms References19.02.2009References41

Editing XML data with XForms

More Related Content

Similar to Editing XML data with XForms (20)

Recently uploaded (20)

Editing XML data with XForms