Your SlideShare is downloading. ×
Editing XML data with XForms
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Editing XML data with XForms

5,451
views

Published on

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

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,451
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
86
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Multimedia Document
    Editing XML data with XForms
    Stéphane Sire (speaking)
  • 2. Framework
    IC > IIF > MEDIA : http://media.epfl.ch
    Models &
    Environments for
    Document related
    Interaction &
    Authoring
    MEDIA
    XML based technologies
    19.02.2009
    1
    Introduction
  • 3. Editing XML Data ?
    Classical approach with text editors
    requires knowledge of XML
    not for non expert end-users
    19.02.2009
    Introduction
    2
  • 4. Editing XML Data ?
    What they say ?
    http://www.ibm.com/developerworks/library/x-xml2008prevw.html
    The 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 Harold
    19.02.2009
    Introduction
    3
  • 5. Editing XML Data ?
    Classical approach with form based user interfaces
    no knowledge of XML required
    can be deployed in Web browsers
    19.02.2009
    Introduction
    4
  • 6. What Forms Standards are Available ?
    Web Forms in HTML
    not 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 XForms
    open standard (free)
    XForms 1.0 appeared in 2001, became a Recommendation in 2007
    XForms 1.1 now a Candidate Recommendation
    based on XML for editing XML data
    19.02.2009
    Introduction
    5
  • 7. XForms builtin Features
    Input Validation and Calculation
    Declarative Actions and Events (no scripting)
    Accessibility
    Device Independence
    abstract forms controls that may be rendered with different devices
    Data persistence
    communication layer compliant with REST principles
    Initial data insertion as XML
    no need for template languages as with JSP or RoR
    Compatible with any XML host language (XHTML, SVG, …)
    this allows to “borrow” user interface elements from a foreign language
    Model View Controller MVC
    19.02.2009
    XForms overview
    6
  • 8. MVC in XForms
    Each XForms document has three parts
    a model that contains the data to be edited and submitted
    one or more views
    forms 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 controllers
    forms controls (logical part)
    bindings that control data input value space
    actions triggered by events to update the model and/or the views
    submissions that control model downloading from and offloading to server(s)
    19.02.2009
    XForms overview
    7
  • 9. 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.2009
    XForms overview
    8
    Legend
    xml declarations
    Model
    Views (incl. host language)
    Controllers
    XPath
    expression
  • 10. XForms Modules
    19.02.2009
    XForms overview
    9
  • 11. Data Declaration <xforms:instance>
    one or more <xforms:instance> inside an <xforms:model>
    case 1: linked to external data
    with an src attribute : <xforms:instance src=“my-data-source.xml”/>
    case 2: inline instance data
    with an XML skeleton empty of data or not
    optional link to an XML Schema file
    with a schema attribute on the model element
    optional id attribute
    19.02.2009
    XForms data declaration
    10
    <xforms:instance id="credit-card-instance">
    <credit-card>
    <type/>
    <number/>
    <expiration-month/>
    <expiration-year/>
    <verification-code/>
    <valid>false</false>
    </credit-card>
    </xforms:instance>
  • 12. What’s the need for several data instances ?
    Data can be loaded from different data sources
    one data instance per source
    Data can be saved to different data sinks
    one data instance per sink
    This is the basis for supporting Ajax patterns in XForms
    we will detail this with the <xforms:submission> element
    Data instances can also be used to represent non-user data
    application 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 elements
    19.02.2009
    XForms data declaration
    11
  • 13. Data Vaildation with Model Item Properties <xforms:bind>
    Model item properties define rules that constrain the elements and attributes of the instances
    They 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 expression
    Each property is associated with an attribute applying to different facets
    e.g. check that <age> is a positive integer
    with 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 instance
    except when starting with instance(“instance-id”)
    19.02.2009
    XForms data bindings
    12
  • 14. List Of Model Item Properties on <xforms:bind>
    19.02.2009
    XForms data bindings
    13
  • 15. Examples of XPath expressions in Data Bindings
    imagine 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.2009
    XForms data bindings
    14
  • 16. Data Editing with Forms Controls
    They bind a user interface “widget” with an instance data model element or attribute
    they “control” user inputs
    19.02.2009
    XForms forms controls
    15
    <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>
  • 17. Several Kinds Of Forms Controls
    To control the edition of instance data
    input: a basic text field
    textarea: a multiline text field
    secret: passwords and the like
    upload: upload a file or data stream
    range: choose from a range of values
    selection among a list of items
    select: choose any number of items from a list
    select1: choose one item from a list
    To present data (non editable)
    output: display non-editable value
    To generate events which can be used to trigger actions
    submit: send the form data as specified in the model's submission
    trigger: forge an event
    19.02.2009
    XForms forms controls
    16
  • 18. Some Possible Forms Controls Representation
    Would you recognize the forms controls ?
    19.02.2009
    XForms forms controls
    17
  • 19. Forms Control Look and Feel
    Some attributes control the appearance of forms control
    id, class, style: styling with CSS
    appearance : choose between “full”, “compact” or “minimal” display
    this augments the number of forms widgets available with the same vocabulary
    incremental update behaviour
    with the incremental attribute
    19.02.2009
    XForms forms controls
    select1 appearance =“minimal”
    appearance =“compact”
    appearance =“full”
    18
  • 20. Forms Control Edited Content
    Some attributes control the content of forms control
    ref: bind the content of the control with one instance data in the model
    nodeset: bind an itemset in a selection control with a list of instance data in the model
    19.02.2009
    XForms forms controls
    19
    <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>
  • 21. Forms Control Feedback
    Forms 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.2009
    XForms forms controls
    20
    alert
    hint
    help
  • 22. 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 XPath
    the enclosed block (XForms and Host language constructs) is repeated
    this is an easy way to generate tables rows, lists, etc.
    Each <xforms:repeat> defines an implicit index
    users can manually change the selected index
    the user interface highlights the item at the index
    it can be used in XPath expressions with index(‘repeat-id’) function
    the index is used with insert / delete actions (see infra)
    <xforms:repeat> can be nested
    inner nodeset expressions are interpreted relatively to the nodeset of the parent’s repetition
    19.02.2009
    XForms repetition
    21
  • 23. User Interface Generation Basic Example
    19.02.2009
    XForms repetition
    22
    <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>
  • 24. Actions and Events
    Programming side effects with no scripting language
    Actions can be invoked in response to events
    events declarations follow the XML Events recommendation
    event defined by an event, an observer, a target and a handler
    in XForms the handler is an Action
    Actions can be used in isolation
    with an ev:event attribute to subscribe to an event whose observer/target is the parent of the action
    with an ev:observer attribute to subscrive to an event whose observer is different than the parent of the action
    e.g. <xforms:toggle ev:event=“DOMActivate” case=“noshow”/>
    Actions can be grouped into sequences in a <xforms:action>
    equivalent to a declarative script
    19.02.2009
    XForms user interaction
    23
  • 25. Different Kinds of Actions
    There are actions to
    set focus to a form control
    display a message to the user
    navigate 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 value
    variant with inline content
    force a recalculation, revalidation, or screen refresh
    submit or reset all or a portion of the instance data
    perform other actions to deal with scrolling and manipulating repeating line item tables
    insert or delete instance data nodes (see next slide)
    19.02.2009
    XForms user interaction
    24
  • 26. Data Mutation with Actions and Events (insertion)
    <xforms:insert> action
    inserts 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 set
    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.
    19.02.2009
    XForms user interaction
    25
    <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>
  • 27. Data Mutation with Actions and Events (Deletion)
    <xforms:delete> action
    deletes an item inside a nodeset at the index specified by an at XPath expression
    e.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 repetition
    19.02.2009
    XForms user interaction
    26
    <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>
  • 28. Dynamical User Interface with <xforms:switch>
    <xforms:swith> introduces several alternatives in the rendering of a page
    each <xforms:case> child of a switch is an alternative
    identified with an id attribute
    the <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 attribute
    e.g. <toggle case="products" ev:event="DOMActivate"/>
    Applications
    show / hide details on demand
    the first case contains a Show button
    the second case contains a Hide button and the details
    tabbed browsing (each panel is a case in a switch)
    19.02.2009
    XForms user interaction
    27
  • 29. Grouping with <xforms:group>
    <xforms:group> sets the context to a current node in the data model with a ref attribute
    all relative XPath expressions in descendants forms controls are relative to the <xforms:group> context
    e.g.
    19.02.2009
    XForms user interaction
    28
    <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>
  • 30. Model Based Switching with <xforms:group>
    an <xforms:group> can be dynamically hidden
    by using a relevant model item property on its bound node
    this also applies to any other forms control
    the node bound to an <xforms:group> can be changed dynamically
    by using a conditional XPath expression
    this will change the content of the full group each time the conditional XPath expression is reevaluated
    e.g.
    19.02.2009
    XForms user interaction
    29
    <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>
  • 31. 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 server
    XForms is Ajax ready
    you can define multiple submissions to load / save different parts of the data model within the same forms document
    one or more <xforms:submission> elements are declared in the model in the head
    action 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 submit
    replace attribute defines what to do with the result
    instance attribute defines which instance to replace
    many more attributes…
    don’t forget the id attribute to control when to submit
    19.02.2009
    XForms submission
    30
  • 32. Submission Example
    Sends 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 context
    Retrieves 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 data
    19.02.2009
    XForms submission
    31
  • 33. Controlling Submissions
    <xforms:submit> forms controls trigger the submissions in the body of the document
    e.g. basic Search button
    <xforms:send> actions can be used to react to events by triggering a submission
    e.g. same as above with a send action
    19.02.2009
    XForms submission
    32
    <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>
  • 34. Submissions and XML databases
    XML databases (such as Exist) have REST APIs
    CRUD functionalities exposed through HTTP methods
    create (PUT)
    read (GET)
    update (POST)
    delete (DELETE)
    <xforms:submission> can direcly talk with the Exist database
    by 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 browser
    XML database can also store XQuery scripts which are executed when accessed through REST APIs
    This allows to develop XRX applications
    XForms + REST + XQuery
    no middleware (direct client-to-database applications, except for Orbeon Forms server)
    19.02.2009
    XRX framework
    33
  • 35. How to Test XForms with Orbeon Forms
    With the XForms sandbox provided with Orbeon Forms
    On the public Orbeon Forms demonstration server
    http://www.orbeon.com/ops/xforms-sandbox/
    On your own local installation of Orbeon Forms under Tomcat
    http://localhost:8080/orbeon/xforms-sandbox/
    Make your own Orbeon Forms application
    Write an XHTML file (my-forms.xhtml)
    Place this file into your Orbeon Forms deployed server
    under WEB-INF/resources/my-forms.xhtml
    add 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/hello
    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)
    19.02.2009
    Orbeon Forms
    34
  • 36. Debugging XForms with Orbeon Forms
    Activate the data instance inspector widget
    add 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.2009
    Orbeon Forms
    35
  • 37. Summary of XForms in XHTML documents
    In the <head> section
    declare the model(s)
    declare the instance(s) and their initial values
    empty / inline / from file
    declare submission(s) that allow to save / reload the instance
    bind the instance data model to item properties
    data types, constraints, etc.
    In the <body>
    bind controls to the instances
    declare repetitive parts of the user interface
    hard wire actions to events
    repetitive parts insertion and deletion
    user interface visual state change
    submissions
    19.02.2009
    Summary
    36
  • 38. Summary of main XPath use in XForms
    Bind a model item property to one or more instance nodes
    nodeset attribute
    Compute dynamical expressions for model item properties
    readonly, required, relevant, calculate, constraint attributes
    Bind a form control to instance data
    ref attribute (single node binding)
    nodeset attribute (node set binding)
    Specify the node or node set for operation by some action
    e.g. at attribute (in node insertion or removal)
    e.g. value attribute (in setvalue)
    Make some calculation in some actions
    e.g. index attribute (in <xforms:setindex> for a repetition)
    19.02.2009
    Summary
    37
  • 39. Summary Of XForms Companion Recommendations
    XPath + Namespaces in XML
    used everywhere
    XML Schemas
    to define your own data types including with patterns (RegExp)
    support is optional in an XForms user agent
    XForms has equivalent facilities to define data types
    XML Events
    in XForms <script> handlers are replaced with <action> handlers
    CSS
    Forms Controls can be styled
    with Orbeon Forms you can use the class attribute of forms controls and then declare their style
    19.02.2009
    Summary
    38
  • 40. Useful Namespaces to Remember
    19.02.2009
    Summary
    39
  • 41. XForms References
    19.02.2009
    References
    40
  • 42. Orbeon Forms References
    19.02.2009
    References
    41

×