XForms workshop slides

What is XForms?
●
W3C standard web form specification
●
MVC architecture
●
XPath validation
●
Manipulate complex XML models*
●
Interacts with REST services
*XPath/XSLT 3.0 and XSLT 2.0 support JSON-LD
See more at http://en.wikipedia.org/wiki/XForms
Basic XForms workshop by Ethan Gruber. June 12, 2015

Kerameikos XRX-ish Architecture
XForms, REST, SPARQL/Solr
XForms processor
(Orbeon)
XForms
instructions
Fuseki
Triplestore
Solr
Save
(REST)
Author/editor
Web Form
User
(interface)
HTML5:
XSLT+JS+CSS
VIAF
DBpedia
Pleiades
Getty LOD
Web Services
External Content

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xforms="http://www.w3.org/2002/xforms"
xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:ev="http://www.w3.org/2001/xml-events"
xmlns:xxforms="http://orbeon.org/oxf/xml/xforms">
<head>
<title>hello world</title>
<xforms:model>
<xforms:instance id="hello-world">
<foo>hello world</foo>
</xforms:instance>
</xforms:model>
</head>
<body>
<h1>hello world</h1>
<xforms:output ref="instance('hello-world')">
<xforms:label>Label</xforms:label>
</xforms:output>
<xforms:output value="concat(instance('hello-world'), '!')">
<xforms:label>Label</xforms:label>
</xforms:output>
</body>
</html>
Model:
Instances, actions, bindings,
submissions
View:
Inputs, outputs, triggers,
actions

<head>
<xforms:model>
<xforms:instance id="list">
<list title="" xmlns="">
<item lang=""></item>
<item lang=""></item>
</list>
</xforms:instance>
<xforms:bind nodeset="instance('list')">
<xforms:bind nodeset="@title" required="true()"></xforms:bind>
<xforms:bind nodeset="item" required="true()" type="xs:string">
<xforms:bind nodeset="@lang"
constraint="string-length(.) > 0 and
count(ancestor::list/item[@lang='en']) = 1 and count(ancestor::list/item/@lang) = count(distinct-
values(ancestor::list/item/@lang))"
></xforms:bind>
</xforms:bind>
</xforms:bind>
</xforms:model>
</head>
<body>
<div>
<xforms:input ref="instance('list')/@title">
<xforms:label>Title</xforms:label>
<xforms:alert>Required</xforms:alert>
</xforms:input>
</div>
</body>

<body>
<div>
<xforms:input ref="instance('list')/@title">
</xforms:input>
</div>
<xforms:repeat nodeset="instance('list')/item">
<div>
<xforms:input ref=".">
<xforms:label>Item</xforms:label>
</xforms:input>
</div>
<div>
<xforms:input ref="@lang">
<xforms:label>Lang</xforms:label>
<xforms:alert>English Required. Must be Unique</xforms:alert>
</xforms:input>
</div>
</xforms:repeat>
</body>

<xforms:group ref="instance('list')">
<div>
<xforms:input ref="@title">
</xforms:input>
</div>
<xforms:repeat nodeset="item">
<div>
</xforms:input>
</div>
<div>
<xforms:input ref="@lang">
<xforms:label>Lang</xforms:label>
<xforms:alert>English Required. Must be Unique</xforms:alert>
</xforms:input>
</div>
</xforms:repeat>
</xforms:group>

XForms Group as a conditional for UI displays
<xforms:group ref=".[instance('list')//@lang[string-length(.) = 0]]">
<p>A language attribute is empty.</p>
</xforms:group>

<div>
</xforms:input>
</div>
<div>
<xforms:select1 ref="@lang">
<xforms:label>Type</xforms:label>
<xforms:item>
<xforms:label>Select...</xforms:label>
<xforms:value></xforms:value>
</xforms:item>
<xforms:itemset nodeset="instance('languages')/lang">
<xforms:label ref="."></xforms:label>
<xforms:value ref="@code"></xforms:value>
</xforms:itemset>
</xforms:select1>
</div>
</xforms:repeat>
<xforms:instance id="languages">
<languages xmlns="">
<lang code="en">English</lang>
<lang code="fr">French</lang>
</languages>
</xforms:instance>

<xforms:trigger>
<xforms:label>Add Item</xforms:label>
<xforms:insert context="instance('list')" nodeset="./child::node()[last()]"
origin="instance('item-template')" ev:event="DOMActivate"/>
</xforms:trigger>
<xforms:instance id="item-template">
<item xmlns=""/>
</xforms:instance>
<xforms:trigger>
<xforms:label>Add Item</xforms:label>
<xforms:action ev:event="DOMActivate">
<xforms:insert context="instance('list')" nodeset="./child::node()[last()]"
origin="instance('item-template')"/>
<xforms:insert context="instance('list')/item[last()]"
origin="xforms:attribute('lang', instance('languages')/lang[1]/@code)"/>
<xforms:setvalue ref="instance('list')/item[last()]" value="'test'"/>
</xforms:action>
</xforms:trigger>
See more events: http://en.wikibooks.org/wiki/XForms/Events_Overview

<div>
</xforms:input>
</div>
<div>
<xforms:select1 ref="@lang">
<xforms:label>Type</xforms:label>
<xforms:item>
<xforms:label>Select...</xforms:label>
<xforms:value></xforms:value>
</xforms:item>
<xforms:itemset nodeset="instance('languages')/lang">
<xforms:label ref="."></xforms:label>
<xforms:value ref="@code"></xforms:value>
</xforms:itemset>
</xforms:select1>
</div>
<xforms:trigger appearance="minimal">
<xforms:delete ev:event="DOMActivate" context="."></xforms:delete>
<xforms:label>Delete</xforms:label>
</xforms:trigger>
</xforms:repeat>

<xforms:submission id="load-submission" serialization="none" method="get"
action="{instance('exist-config')/url}eaditor/{instance('control-instance')/collection-
name}/guides/{instance('guide')/ead:eadheader/ead:eadid}.xml"
replace="instance" instance="guide" xxforms:username="{instance('exist-config')/username}"
xxforms:password="{instance('exist-config')/password}">
<xforms:message ev:event="xforms-submit-error" level="modal">Unable to load finding
aid</xforms:message>
<xforms:send submission="load-toc" ev:event="xforms-submit-done"/>
</xforms:submission>
SUBMISSIONS
<xforms:submit submission="load-submission" appearance="minimal">
<xforms:label>Load</xforms:label>
</xforms:submit>

<xforms:submission id="save-submission" ref="instance('guide')"
action="{instance('exist-config')/url}eaditor/{instance('control-instance')/collection-
name}/guides/{instance('guide')/ead:eadheader/ead:eadid}.xml" method="put"
replace="none" xxforms:username="{instance('exist-config')/username}"
xxforms:password="{instance('exist-config')/password}">
<xforms:message ev:event="xforms-submit-error" level="modal">Error Saving Documents. Be
sure all required inputs are filled in.</xforms:message>
<xforms:action ev:event="xforms-submit-done">
<xforms:setvalue ref="instance('control-instance')/status">EAD guide
saved.</xforms:setvalue>

<xforms:send submission="query-solr-for-publication"/>

<xforms:send submission="load-toc"/>
</xforms:action>

<xforms:submission id="query-solr-for-publication" serialization="none" method="get"
action="{instance('config')/solr_published}select/?q=id:"
{instance('guide')/ead:eadheader/ead:eadid}"" replace="instance" instance="is-published">

<xforms:action ev:event="xforms-submit-done" if="instance('is-
published')/result[@name='response']/@numFound = '1'">

<xforms:send submission="doc-to-solr"/>

<xforms:send submission="get-rdf" if="string(instance('config')/sparql/update) and
string(instance('config')/sparql/store)"/>
</xforms:action>

Interactive demo code: https://gist.github.com/ewg118/d5a3e4624c3075764d81

XForms workshop slides

Recommended

Recommended

More Related Content

Similar to XForms workshop slides

Similar to XForms workshop slides (20)

More from ewg118

More from ewg118 (11)

Recently uploaded

Recently uploaded (20)

XForms workshop slides