Copyright © 2008 Model Driven Solutions EKB User Interface Jim Logan September 2008 Formerly Data...
-
Upload
jaylin-eggleston -
Category
Documents
-
view
221 -
download
1
Transcript of Copyright © 2008 Model Driven Solutions EKB User Interface Jim Logan September 2008 Formerly Data...
![Page 1: Copyright © 2008 Model Driven Solutions EKB User Interface Jim Logan September 2008 Formerly Data Access Technologies.](https://reader037.fdocuments.in/reader037/viewer/2022103015/551ab38a550346e0158b6430/html5/thumbnails/1.jpg)
Copyright © 2008 Model Driven Solutions
EKB User Interface
Jim LoganSeptember 2008
Formerly Data Access Technologies
![Page 2: Copyright © 2008 Model Driven Solutions EKB User Interface Jim Logan September 2008 Formerly Data Access Technologies.](https://reader037.fdocuments.in/reader037/viewer/2022103015/551ab38a550346e0158b6430/html5/thumbnails/2.jpg)
Page 2
Introduction
• Because:– The EKB is a strategic product for MDS– We need resources that can continue building the EKB– We need to make the UI implementation understandable
• This presentation aims to provide:– A tutorial on the EKB XML interface– A brief tutorial on XForms– An advanced tutorial on how to make XForms conform to the EKB
XML interface– Next steps for furthering the UI capabilities
Copyright © 2008 Model Driven Solutions.March 2008
![Page 3: Copyright © 2008 Model Driven Solutions EKB User Interface Jim Logan September 2008 Formerly Data Access Technologies.](https://reader037.fdocuments.in/reader037/viewer/2022103015/551ab38a550346e0158b6430/html5/thumbnails/3.jpg)
Page 3Copyright © 2008 Model Driven Solutions.March 2008
Contents
• Part 1: EKB XML interface tutorial
• Part 2: Brief XForms tutorial
• Part 3: How to make XForms conform to the EKB XML interface
![Page 4: Copyright © 2008 Model Driven Solutions EKB User Interface Jim Logan September 2008 Formerly Data Access Technologies.](https://reader037.fdocuments.in/reader037/viewer/2022103015/551ab38a550346e0158b6430/html5/thumbnails/4.jpg)
Page 4
Part 1: EKB XML interface tutorial
Copyright © 2008 Model Driven Solutions.March 2008
![Page 5: Copyright © 2008 Model Driven Solutions EKB User Interface Jim Logan September 2008 Formerly Data Access Technologies.](https://reader037.fdocuments.in/reader037/viewer/2022103015/551ab38a550346e0158b6430/html5/thumbnails/5.jpg)
Page 5
EKB XML Interface Rationale
• Business systems are increasingly using XML interfaces
• It would be nice to have one XML interface for systems and UI
• Challenges with this approach are:– Our EKB data is represented as a virtual graph of RDF triples– How do we get from triples to XML and back again?– Popular UI technologies require lots of code to bridge browsers and
XML– Is there a UI technology where the widgets are tied directly to XML
data?
Copyright © 2008 Model Driven Solutions.March 2008
![Page 6: Copyright © 2008 Model Driven Solutions EKB User Interface Jim Logan September 2008 Formerly Data Access Technologies.](https://reader037.fdocuments.in/reader037/viewer/2022103015/551ab38a550346e0158b6430/html5/thumbnails/6.jpg)
Page 6
From RDF Graph to XML: Overview
• Our EKB data is represented as a virtual graph
• We need to somehow transform that to XML and back again
• There is a W3C recommendation called RDF/XML that helps, but:– The graph has no real “root”, so it walks the graph in an
unpredictable order– If an instance has multiple types, the type used as the XML element
name is unpredictable
Copyright © 2008 Model Driven Solutions.March 2008
![Page 7: Copyright © 2008 Model Driven Solutions EKB User Interface Jim Logan September 2008 Formerly Data Access Technologies.](https://reader037.fdocuments.in/reader037/viewer/2022103015/551ab38a550346e0158b6430/html5/thumbnails/7.jpg)
Page 7
From Triples to XML: Virtual Graph
• Our EKB data is represented as RDF triples in a special repository
• Each triple represents {subject, predicate, object}
• The subject and predicate is always a URI
• The object can be either a URI or a literal value
• These triples form a virtual graph
Copyright © 2008 Model Driven Solutions.March 2008
#p1
#p2
“John”
“Jeff”
name
knows
name
#Person
type
type
![Page 8: Copyright © 2008 Model Driven Solutions EKB User Interface Jim Logan September 2008 Formerly Data Access Technologies.](https://reader037.fdocuments.in/reader037/viewer/2022103015/551ab38a550346e0158b6430/html5/thumbnails/8.jpg)
Page 8
From Triples to XML: RDF/XML
<Person>
<name> John </name>
<knows>
<Person>
<name> Jeff </name>
</Person>
</knows>
</Person>
Copyright © 2008 Model Driven Solutions.March 2008
• Striped RDF/XML is a W3C recommendation that almost works
• This is a bit oversimplified*, but roughly:
• The black-on-tan elements represent subjects and objects
• The blue elements represent properties (kinds of predicates)
Person
Person
“John”
“Jeff”
name
knows
name
* This is oversimplified because each Person node actually represents an additional node and an arc:
This turns into an XML element for the type name and an XML attribute for the ID / URI
#p1 #Persontype
![Page 9: Copyright © 2008 Model Driven Solutions EKB User Interface Jim Logan September 2008 Formerly Data Access Technologies.](https://reader037.fdocuments.in/reader037/viewer/2022103015/551ab38a550346e0158b6430/html5/thumbnails/9.jpg)
Page 9
From Triples to XML: Solution
• RDF/XML is really close, but:– It walks the graph in an unpredictable order, since there is no “root”– It uses unpredictable XML element names when several types exist– We only use it as a guide
• The EKB provides a REST service that produces XML instance documents, given:– A “viewpoint”– The “root” (i.e., subject) of the graph, so the structure is predictable
Copyright © 2008 Model Driven Solutions.March 2008
![Page 10: Copyright © 2008 Model Driven Solutions EKB User Interface Jim Logan September 2008 Formerly Data Access Technologies.](https://reader037.fdocuments.in/reader037/viewer/2022103015/551ab38a550346e0158b6430/html5/thumbnails/10.jpg)
Page 10
From Triples to XML: Viewpoint
• A “viewpoint” is expressed in an ontology and specifies:– What types of properties to traverse– How deep to traverse– Which type name to use for polymorphic traversals
• The UI tells the service:– Which viewpoint to use– The subject, as either:
• A specific URI, or• A query-by-example in XML
– The context (i.e., ontology file), as either:• The REST URL, or• An attribute in the XML query-by-example
Copyright © 2008 Model Driven Solutions.March 2008
![Page 11: Copyright © 2008 Model Driven Solutions EKB User Interface Jim Logan September 2008 Formerly Data Access Technologies.](https://reader037.fdocuments.in/reader037/viewer/2022103015/551ab38a550346e0158b6430/html5/thumbnails/11.jpg)
Page 11
• Both examples will return an XML instance document:– HTTP POST to http://ekb.modeldriven.org/.../directory
– HTTP GET from http://ekb.modeldriven.org/.../directory?viewpoint=escaped-viewpoint-uri&id=&23p1
From Triples to XML: HTTP Examples
Copyright © 2008 Model Driven Solutions.March 2008
<XXMLStructures:data_asset_editing_struct><Versioning:Data_asset action=“query">
<rdf-schema:label select=“matches">Actors.owl</rdf-schema:label>< /Versioning:Data_asset>
</XXMLStructures:data_asset_editing_struct>
Viewpoint
Property / predicate
Type
![Page 12: Copyright © 2008 Model Driven Solutions EKB User Interface Jim Logan September 2008 Formerly Data Access Technologies.](https://reader037.fdocuments.in/reader037/viewer/2022103015/551ab38a550346e0158b6430/html5/thumbnails/12.jpg)
Page 12
From Triples to XML: Instance Example
Copyright © 2008 Model Driven Solutions.March 2008
<XXMLStructures:data_asset_editing_struct><Versioning:Data_asset
rdf:about="http://ekb.osera.gov/asset/head/root/asserted/SC/Ontologies/ArchitectureOntology/Actors.owl">
<Authority:responsible_party><Authority:Authority
rdf:about="http://www.modeldriven.org/2008/ArchitectureOntology/Libraries/Authorities.owl#cory-c"><rdf-schema:label>Cory Casanave</rdf-schema:label>
</Authority:Authority></Authority:responsible_party>
<rdf-schema:label>Actors.owl</rdf-schema:label>
< /Versioning:Data_asset></XXMLStructures:data_asset_editing_struct>
Viewpoint
Subject
Property / predicateType
Object
![Page 13: Copyright © 2008 Model Driven Solutions EKB User Interface Jim Logan September 2008 Formerly Data Access Technologies.](https://reader037.fdocuments.in/reader037/viewer/2022103015/551ab38a550346e0158b6430/html5/thumbnails/13.jpg)
Page 13
From Triples to XML: Interface Specifics
• The service requires:– The name of the structure, called the viewpoint, either as:
• A URL query parameter• The outermost XML element in a POSTed query
– The name of the containing ontology file, called the context, either as:
• The URL of the GET or POST• An asset attribute in the outermost XML element in a POSTed query• A GET from the special “global asset URL”:
“.../asset/head/root/asserted/RDFS/*”
– The subject of interest within that ontology file or one of the files it includes, either as:
• A full URI (e.g., “about=http://ekb.modeldriven.org/.../example.owl#p1”)• An abbreviated URI (e.g., “id=#p1”)• A query-by example
Copyright © 2008 Model Driven Solutions.March 2008
![Page 14: Copyright © 2008 Model Driven Solutions EKB User Interface Jim Logan September 2008 Formerly Data Access Technologies.](https://reader037.fdocuments.in/reader037/viewer/2022103015/551ab38a550346e0158b6430/html5/thumbnails/14.jpg)
Page 14
MVC
• In one sense:– The model is the RDF triples– The view is what the service generates algorithmically from the
viewpoint– The controller is the service
• In another sense:– The model is the XML instance document– The view is the UI controls– The controller is the UI
• In a unified sense:– The model is the RDF triples– The view is the UI controls– The controller is the UI and the service
Copyright © 2008 Model Driven Solutions.March 2008
![Page 15: Copyright © 2008 Model Driven Solutions EKB User Interface Jim Logan September 2008 Formerly Data Access Technologies.](https://reader037.fdocuments.in/reader037/viewer/2022103015/551ab38a550346e0158b6430/html5/thumbnails/15.jpg)
Page 15
From XML to RDF Triples: Overview
• The outside world interacts with the EKB using XML
• The EKB data is represented as a virtual graph
• We need to somehow transform the XML into RDF triples
• We need concurrency:– No locking– No stomping– Minimal rollback
• We need value-level provenance (e.g., who set this value when?)
Copyright © 2008 Model Driven Solutions.March 2008
![Page 16: Copyright © 2008 Model Driven Solutions EKB User Interface Jim Logan September 2008 Formerly Data Access Technologies.](https://reader037.fdocuments.in/reader037/viewer/2022103015/551ab38a550346e0158b6430/html5/thumbnails/16.jpg)
Page 16
From XML to RDF Triples: The UI
• The UI requests an XML instance document from the EKB
• The user changes the XML instance document, as the UI marks up the XML instance
• The UI sends the marked-up XML instance document back to the EKB
• EKB uses this XML instance document to change the RDF triples
Copyright © 2008 Model Driven Solutions.March 2008
![Page 17: Copyright © 2008 Model Driven Solutions EKB User Interface Jim Logan September 2008 Formerly Data Access Technologies.](https://reader037.fdocuments.in/reader037/viewer/2022103015/551ab38a550346e0158b6430/html5/thumbnails/17.jpg)
Page 17
From XML to RDF Triples: Edited XML
Copyright © 2008 Model Driven Solutions.September 2008
<XXMLStructures:data_asset_editing_struct><Versioning:Data_asset
rdf:about="http://ekb.osera.gov/asset/head/root/asserted/SC/Ontologies/ArchitectureOntology/Actors.owl"action="edit">
<Authority:responsible_party action="remove"><Authority:Authority
rdf:about="http://www.modeldriven.org/2008/ArchitectureOntology/Libraries/Authorities.owl#cory-c"><rdf-schema:label>Cory Casanave</rdf-schema:label>
</Authority:Authority></Authority:responsible_party>
<auth:responsible_party action="insert"><Authority:Authority
rdf:about="http://www.modeldriven.org/2008/ArchitectureOntology/Libraries/Authorities.owl#jim-l"><rdf-schema:label>Jim Logan</rdf-schema:label>
</Authority:Authority></auth:responsible_party>
<rdf-schema:label action="remove">Actors.owl</rdf-schema:label><rdf-schema:label action="insert">Changed Actors.owl</rdf-schema:label>
< /Versioning:Data_asset></XXMLStructures:data_asset_editing_struct>
Viewpoint
Subject
![Page 18: Copyright © 2008 Model Driven Solutions EKB User Interface Jim Logan September 2008 Formerly Data Access Technologies.](https://reader037.fdocuments.in/reader037/viewer/2022103015/551ab38a550346e0158b6430/html5/thumbnails/18.jpg)
Page 18
From XML to RDF Triples: EKB Service
• Provides a REST service that consumes a marked-up XML instance document containing:– The “viewpoint”– The subject– Actions
• Starts a transaction
• Ensures that the removed values are still the current values
• Deletes the corresponding triples
• Adds the new triples
• Ends the transaction
• Unimplemented: if any rules are violated, the transaction should fail and the service should send back a report
Copyright © 2008 Model Driven Solutions.March 2008
![Page 19: Copyright © 2008 Model Driven Solutions EKB User Interface Jim Logan September 2008 Formerly Data Access Technologies.](https://reader037.fdocuments.in/reader037/viewer/2022103015/551ab38a550346e0158b6430/html5/thumbnails/19.jpg)
Page 19
Part 2: Brief XForms tutorial
Copyright © 2008 Model Driven Solutions.March 2008
![Page 20: Copyright © 2008 Model Driven Solutions EKB User Interface Jim Logan September 2008 Formerly Data Access Technologies.](https://reader037.fdocuments.in/reader037/viewer/2022103015/551ab38a550346e0158b6430/html5/thumbnails/20.jpg)
Page 20
What is XForms?
• An enhancement to normal HTML forms from the W3C
• Uses a more advanced XML vocabulary within XHTML pages
• CSS can stylize and reorganize widgets
• Firefox can operate on XForms directly with an add-on
• All other browsers require XForms emulation in JavaScript, Flash, or a Java applet
• The EKB uses Orbeon XForms:– Runs on Firefox, IE, Safari, and Opera– Has a built-in XML database on the server side– Implemented with:
• Java, Yahoo! User Interface (YUI) library, and an XSLT pipeline on the server side
• JavaScript inside the browser
Copyright © 2008 Model Driven Solutions.March 2008
![Page 21: Copyright © 2008 Model Driven Solutions EKB User Interface Jim Logan September 2008 Formerly Data Access Technologies.](https://reader037.fdocuments.in/reader037/viewer/2022103015/551ab38a550346e0158b6430/html5/thumbnails/21.jpg)
Page 21Copyright © 2008 Model Driven Solutions.March 2008
How does XForms work?
• Augments normal XHTML and CSS– <head> contains declarations about XML instances, rules,
submissions, and some actions– <body> contains the controls (i.e., widgets) and actions
• Modifies embedded XML instance documents using:– Controls that interact with the user: input, textarea, select1, select,
trigger (i.e., button), output, repeat, group– Actions fired by events (e.g., control activation, focus change)– “Submissions” that load and store XML instance documents– XPath that ties everything together to XML instances
• Some implementations of XForms run directly in a browser; Orbeon emulates XForms in a normal browser
![Page 22: Copyright © 2008 Model Driven Solutions EKB User Interface Jim Logan September 2008 Formerly Data Access Technologies.](https://reader037.fdocuments.in/reader037/viewer/2022103015/551ab38a550346e0158b6430/html5/thumbnails/22.jpg)
Page 22
XPath is central to XForms
• Connects each control to an XML instance document element
• Determines when XForms will display each control
• Calculates values for XML elements
• Synchronizes elements between different XML instances
• Provides arguments to actions
• Determines when conditional actions fire
Copyright © 2008 Model Driven Solutions.March 2008
![Page 23: Copyright © 2008 Model Driven Solutions EKB User Interface Jim Logan September 2008 Formerly Data Access Technologies.](https://reader037.fdocuments.in/reader037/viewer/2022103015/551ab38a550346e0158b6430/html5/thumbnails/23.jpg)
Page 23
Example XML Instance Document
Example XPath:instance(‘authorities-query’)/xstruct:Authority/auth:Authority/rdfs:label
Yields the value:“*”
Copyright © 2008 Model Driven Solutions.March 2008
<xforms:instance id="authorities-query"><xstruct:Authority>
<auth:Authority action="query"><rdfs:label select="matches">*</rdfs:label>
</auth:Authority></xstruct:Authority>
</xforms:instance>
Instance document
Instance identifier
![Page 24: Copyright © 2008 Model Driven Solutions EKB User Interface Jim Logan September 2008 Formerly Data Access Technologies.](https://reader037.fdocuments.in/reader037/viewer/2022103015/551ab38a550346e0158b6430/html5/thumbnails/24.jpg)
Page 24
Example Input Control
Copyright © 2008 Model Driven Solutions.March 2008
<xforms:inputid="party-name"ref="instance(‘authorities-query’)/xstruct:Authority/auth:Authority/rdfs:label"><xforms:label>Party Name:</xforms:label>
</xforms:input>
Instance document name
XPath reference into instance document
Party Name: *
![Page 25: Copyright © 2008 Model Driven Solutions EKB User Interface Jim Logan September 2008 Formerly Data Access Technologies.](https://reader037.fdocuments.in/reader037/viewer/2022103015/551ab38a550346e0158b6430/html5/thumbnails/25.jpg)
Page 25
Example Repeat
Copyright © 2008 Model Driven Solutions.March 2008
<table border="1" cellpadding="3"><thead>
<tr><th>Asset Name</th><th>Responsible Party</th><th>Corrective Action Needed</th>
</tr></thead><tbody>
<xforms:repeat id="assets-repeat" nodeset="instance('assets')//v:Data_asset"><tr>
<td><xforms:output ref="rdfs:label" /></td><td><xforms:output ref="auth:responsible_party/auth:Authority/rdfs:label" /></td><td><xforms:textarea ref="v:corrective_action_needed" /></td>
</tr></xforms:repeat>
</tbody></table>
Relative to nodeset
• Note: use “context()” to operate on a user-selected node
![Page 26: Copyright © 2008 Model Driven Solutions EKB User Interface Jim Logan September 2008 Formerly Data Access Technologies.](https://reader037.fdocuments.in/reader037/viewer/2022103015/551ab38a550346e0158b6430/html5/thumbnails/26.jpg)
Page 26
Examples of Bind
• Keep “login” element set to the “@user” attribute value:
• Force the type of “file” element:
• A control can refer to a “bind” by its ID instead of a “ref” for:– Complex XPath expressions– Determining if the control is “relevant” (although you can
alternatively express this in XPath)– Making a control read-only– Asserting the type of a XML element (e.g., show as a calendar)
Copyright © 2008 Model Driven Solutions.March 2008
<xforms:bind nodeset="instance('asset')/login" calculate="instance('parameters')/@user"/>
<xforms:bind nodeset="instance('asset')/asset/file" type="xs:anyURI"/>
![Page 27: Copyright © 2008 Model Driven Solutions EKB User Interface Jim Logan September 2008 Formerly Data Access Technologies.](https://reader037.fdocuments.in/reader037/viewer/2022103015/551ab38a550346e0158b6430/html5/thumbnails/27.jpg)
Page 27
• Post this instance:
• When this submission:
• Is invoked by an action:
Example Submission
Copyright © 2008 Model Driven Solutions.March 2008
<xforms:instance id="authorities-query"><xstruct:Authority>
<auth:Authority action="query"><rdfs:label select="matches">*</rdfs:label>
</auth:Authority></xstruct:Authority>
</xforms:instance>
<xforms:submission id=“authorities-query-submission" method="post"ref="instance(' authorities-query')"f:url-norewrite="true"action="/.../Authorities.owl "replace="instance" instance=“authorities-query-response-instance">
</xforms:submission>
<xforms:trigger><xforms:label>Submit</xforms:label><xforms:send ev:event="DOMActivate“ submission="authorities-query-submission"/>
</xforms:trigger>
Submit
![Page 28: Copyright © 2008 Model Driven Solutions EKB User Interface Jim Logan September 2008 Formerly Data Access Technologies.](https://reader037.fdocuments.in/reader037/viewer/2022103015/551ab38a550346e0158b6430/html5/thumbnails/28.jpg)
Page 28
Now What?
• Once we have a control editing an instance and a submit button, we’re not done!
• Most examples available on the Web stop here
• What if we want the previous example to:– Perform a query when the user presses return?– Display the query results in a pop-up window?– Allow the user to choose one of the query results?– Insert the chosen result into the instance document?
• What if we want to tell the EKB server what the user did to the instance document?
• These things all require actions.
Copyright © 2008 Model Driven Solutions.March 2008
![Page 29: Copyright © 2008 Model Driven Solutions EKB User Interface Jim Logan September 2008 Formerly Data Access Technologies.](https://reader037.fdocuments.in/reader037/viewer/2022103015/551ab38a550346e0158b6430/html5/thumbnails/29.jpg)
Page 29
Action Basics
• Actions listen for events
• The most useful events to listen for are:– Xforms-ready:
• Fires when the form is first initialized• Gives us a chance to get URL query parameters• Allows us to send submissions and initialize instance documents
– DOMActivate:• Fires when the user clicks or presses return• Does not fire when the user makes a selection :-/• Used for jumping to another control or submitting a query
– DOMFocusIn / Out:• Fires when the user enters or exits a control• Used to mark up changes for EKB server
• Actions can have guard conditions, expressed in XPath
Copyright © 2008 Model Driven Solutions.March 2008
![Page 30: Copyright © 2008 Model Driven Solutions EKB User Interface Jim Logan September 2008 Formerly Data Access Technologies.](https://reader037.fdocuments.in/reader037/viewer/2022103015/551ab38a550346e0158b6430/html5/thumbnails/30.jpg)
Page 30
Example: Invoke an Action with a Trigger
• When the user presses the “Change” button, show a pop-up dialog to perform a query
Copyright © 2008 Model Driven Solutions.March 2008
<xforms:outputvalue="(XPath expression elided)"><xforms:label>Responsible Party:</xforms:label>
</xforms:output>
<xforms:trigger><xforms:label>Change</xforms:label><xforms:action ev:event="DOMActivate">
<xxforms:show dialog="authority-query" /></xforms:action>
</xforms:trigger>
ChangeResponsible Party:
Orbeon extension
Event
![Page 31: Copyright © 2008 Model Driven Solutions EKB User Interface Jim Logan September 2008 Formerly Data Access Technologies.](https://reader037.fdocuments.in/reader037/viewer/2022103015/551ab38a550346e0158b6430/html5/thumbnails/31.jpg)
Page 31
Grouping Actions Together
• The “action” groups other actions, which execute in order
• It allows you to declare events and conditions once
Copyright © 2008 Model Driven Solutions.March 2008
<xforms:action ev:event="DOMActivate"><xforms:delete nodeset=“. . .”/><xforms:insert context=“. . .” origin=“. . .” />
</xforms:action>
![Page 32: Copyright © 2008 Model Driven Solutions EKB User Interface Jim Logan September 2008 Formerly Data Access Technologies.](https://reader037.fdocuments.in/reader037/viewer/2022103015/551ab38a550346e0158b6430/html5/thumbnails/32.jpg)
Page 32
Deleting Elements
<outer>
<inner/> [1]
<inner/> [2]
<inner/> [3]
</outer>
Copyright © 2008 Model Driven Solutions.March 2008
<xforms:delete nodeset=“/outer/inner” at=“2” />
![Page 33: Copyright © 2008 Model Driven Solutions EKB User Interface Jim Logan September 2008 Formerly Data Access Technologies.](https://reader037.fdocuments.in/reader037/viewer/2022103015/551ab38a550346e0158b6430/html5/thumbnails/33.jpg)
Page 33
Deleting Elements: Details
• The “delete” action deletes elements from an instance document
• The nodeset argument is an XPath expression that declares a set of nodes
• The optional at argument is an XPath expression returning which node to delete within a set of nodes, e.g. “1” , “last()”, “index(‘some-repeat-name')”, “context()”
• Without the at argument:– The XForms 1.1 spec says all nodes will get deleted– Orbeon will only delete one node and needs an “iterate”
Copyright © 2008 Model Driven Solutions.March 2008
<xforms:action xxforms:iterate="instance('selected-categories')/*"><xforms:delete nodeset="context()" />
</xforms:action>
![Page 34: Copyright © 2008 Model Driven Solutions EKB User Interface Jim Logan September 2008 Formerly Data Access Technologies.](https://reader037.fdocuments.in/reader037/viewer/2022103015/551ab38a550346e0158b6430/html5/thumbnails/34.jpg)
Page 34
Inserting Elements: The Expected Way
<outer>
<inner/> [1]
<inner/> [2]
<inner/> [3]
</outer>
Copyright © 2008 Model Driven Solutions.March 2008
<xforms:insert context=“/outer” nodeset=“inner” at=“2” position=“before”/>
Copy
“Template” element to copy
• This is the most common example in other tutorials, but is less useful
![Page 35: Copyright © 2008 Model Driven Solutions EKB User Interface Jim Logan September 2008 Formerly Data Access Technologies.](https://reader037.fdocuments.in/reader037/viewer/2022103015/551ab38a550346e0158b6430/html5/thumbnails/35.jpg)
Page 35
Inserting Elements: A Simpler Way
• A simpler way to insert an element:
• The origin can refer to a different instance document
• This is the pattern most used in the EKB UI so we don’t have to:– Keep template elements in the main XML instance document– Hide the last element in XPath wherever we reference a nodeset
Copyright © 2008 Model Driven Solutions.March 2008
<xforms:insert context=“/outer” origin="xxforms:element(‘inner')" />
<outer>
<inner/>
</outer>
![Page 36: Copyright © 2008 Model Driven Solutions EKB User Interface Jim Logan September 2008 Formerly Data Access Technologies.](https://reader037.fdocuments.in/reader037/viewer/2022103015/551ab38a550346e0158b6430/html5/thumbnails/36.jpg)
Page 36
Inserting Elements
• The “insert” action inserts an element into an instance document
• The context argument is an XPath expression that says under which element to do the insertion
• The nodeset argument is an XPath expression that declares a set of homogeneous nodes– By default Orbeon inserts at the top of that set– The “at” argument can change this
• The optional at argument is an XPath expression returning which node to insert before or after, e.g. “1” , “last()”, “index(‘some-repeat-name')”, “context()”
• The optional position argument defaults to “after”, but can be set to “before”
• The origin argument says which element to copy– Without an origin, the last node in the nodeset is copied
Copyright © 2008 Model Driven Solutions.March 2008
![Page 37: Copyright © 2008 Model Driven Solutions EKB User Interface Jim Logan September 2008 Formerly Data Access Technologies.](https://reader037.fdocuments.in/reader037/viewer/2022103015/551ab38a550346e0158b6430/html5/thumbnails/37.jpg)
Page 37
Using Variables
• Variables are useful for naming:– Constants– Complex XPath expressions
• An XML instance document or a “bind” can do similar things, but is more cumbersome
• Variables are an Orbeon extension, not part of the XForms 1.1 standard
Copyright © 2008 Model Driven Solutions.March 2008
![Page 38: Copyright © 2008 Model Driven Solutions EKB User Interface Jim Logan September 2008 Formerly Data Access Technologies.](https://reader037.fdocuments.in/reader037/viewer/2022103015/551ab38a550346e0158b6430/html5/thumbnails/38.jpg)
Page 38
Dispatching an Event
• When the user presses return on a text field, we can set the focus to a button and activate it:– Calling action:
– Called action:
• Note: XPath can be embedded in literals with braces
Copyright © 2008 Model Driven Solutions.March 2008
<xforms:dispatch ev:event="DOMActivate" name="accept-and-activate"target=“called-action-container"><xxforms:context name="my:target" select="‘my-button-id'" />
</xforms:dispatch>
<xforms:action ev:event="accept-and-activate"><xxforms:variable name="target" select="event('my:target')" /><xforms:setfocus control="{$target}" /><xforms:dispatch name="DOMActivate" target="{$target}" />
</xforms:action>
![Page 39: Copyright © 2008 Model Driven Solutions EKB User Interface Jim Logan September 2008 Formerly Data Access Technologies.](https://reader037.fdocuments.in/reader037/viewer/2022103015/551ab38a550346e0158b6430/html5/thumbnails/39.jpg)
Page 39
Part 3: How to make XForms conform to the EKB XML interface
Copyright © 2008 Model Driven Solutions.March 2008
![Page 40: Copyright © 2008 Model Driven Solutions EKB User Interface Jim Logan September 2008 Formerly Data Access Technologies.](https://reader037.fdocuments.in/reader037/viewer/2022103015/551ab38a550346e0158b6430/html5/thumbnails/40.jpg)
Page 40
Noteworthy Discoveries
• Taking a snapshot
• Dispatching events to procedures
• Using XPath as procedure arguments
• Diff handling in a procedure
• Choosing non-literals in pop-ups– Query– Pop-up windows
• Categorization
• Useful XPath functions
Copyright © 2008 Model Driven Solutions.March 2008
• Relative URLs
• Are you sure procedure
• URL rewriting (REs + iterating)
• Trees
• Passing form parameters
• File upload
• Tabs
• Managing frame size
• Making side-by-side forms
• Logging
• Removing Orbeon link sidebar
![Page 41: Copyright © 2008 Model Driven Solutions EKB User Interface Jim Logan September 2008 Formerly Data Access Technologies.](https://reader037.fdocuments.in/reader037/viewer/2022103015/551ab38a550346e0158b6430/html5/thumbnails/41.jpg)
Page 41
Taking a Snapshot
• We need to make a copy of the unmodified XML instance document to make diff processing easier
• The submission has an action that handles the “xforms-submit-done” event
• See: “list-submission” in “assets2.xhtml”
Copyright © 2008 Model Driven Solutions.March 2008
![Page 42: Copyright © 2008 Model Driven Solutions EKB User Interface Jim Logan September 2008 Formerly Data Access Technologies.](https://reader037.fdocuments.in/reader037/viewer/2022103015/551ab38a550346e0158b6430/html5/thumbnails/42.jpg)
Page 42
Dispatching Events to Procedures
• In XForms we can create a procedure by:– Defining our own events– Listening for our own events– Dispatching our own events in response to a standard event
• To pass arguments we can either:– Use an Orbeon extension:
• Standard events have parameters accessed with “event(‘parameter-name')”
• Orbeon allows us to set and get our own parameters
– Use the “setvalue” action to set up an instance document
Copyright © 2008 Model Driven Solutions.March 2008
![Page 43: Copyright © 2008 Model Driven Solutions EKB User Interface Jim Logan September 2008 Formerly Data Access Technologies.](https://reader037.fdocuments.in/reader037/viewer/2022103015/551ab38a550346e0158b6430/html5/thumbnails/43.jpg)
Page 43
Using XPath as Procedure Arguments
• In standard XForms 1.1, you cannot dynamically evaluate XPath passed as an argument to a procedure
• Orbeon allows us to call the “saxon:evaluate()” XPath function
• We can then parameterize which information to manipulate as well as the information itself!
• The EKB UI uses this extensively and it will be discussed in more detail later
Copyright © 2008 Model Driven Solutions.March 2008
![Page 44: Copyright © 2008 Model Driven Solutions EKB User Interface Jim Logan September 2008 Formerly Data Access Technologies.](https://reader037.fdocuments.in/reader037/viewer/2022103015/551ab38a550346e0158b6430/html5/thumbnails/44.jpg)
Page 44
Literal Diff Handling in a Procedure
• Uses the unmodified instance document copied at load time
• Called when the user leaves a field (“DOMFocusOut” event)
• Steps:– Duplicate edited node– Add insert action to one node– Add remove action to the other node– Copy original value to the node with the remove action– Remove markup if the old and new values are the same– Remove the removal if the old value did not exist
• See: “change-literal” event handler in “assets2.xhtml”
Copyright © 2008 Model Driven Solutions.March 2008
![Page 45: Copyright © 2008 Model Driven Solutions EKB User Interface Jim Logan September 2008 Formerly Data Access Technologies.](https://reader037.fdocuments.in/reader037/viewer/2022103015/551ab38a550346e0158b6430/html5/thumbnails/45.jpg)
Page 45
Choosing a Non-Literal in a Pop-Up
• Non-literals are existing identifiable things we link to
• Steps:– Use a “change” button to pop-up a window– Provide a form to type query criteria– Submit the query to the EKB– List the results in a table– Enable an “accept” button when a row is clicked– Update instance document with markup
• See: “Responsible Party” field in “assets2.xhtml”
Copyright © 2008 Model Driven Solutions.March 2008
![Page 46: Copyright © 2008 Model Driven Solutions EKB User Interface Jim Logan September 2008 Formerly Data Access Technologies.](https://reader037.fdocuments.in/reader037/viewer/2022103015/551ab38a550346e0158b6430/html5/thumbnails/46.jpg)
Page 46
Non-Literal Diff Handling in a Procedure
• Called when the user selects a query result
• Steps:– Remove any already-inserted property– Add remove action to old property, if one exists– Add insert action to src property– Copy src property into dest instance document– Revert if the inserted and removed properties have the same
@rdf:about ID
• See: “change-resource” event handler in “assets2.xhtml”
Copyright © 2008 Model Driven Solutions.March 2008
![Page 47: Copyright © 2008 Model Driven Solutions EKB User Interface Jim Logan September 2008 Formerly Data Access Technologies.](https://reader037.fdocuments.in/reader037/viewer/2022103015/551ab38a550346e0158b6430/html5/thumbnails/47.jpg)
Page 47
Categorization (1)
• This may be a useful pattern to make into a single XForms extension tag, expanded by XSLT
• Uses:– Categories obtained through an EKB query– An “unselected categories” XML instance– A “selected categories” XML instance
• Steps:– When the user presses a button, open a pop-up window containing:
• A list of selected categories• A list of unselected categories• Buttons to move categories back and forth
– Re-populate the unselected categories from scratch– Re-populate the selected categories from scratch– Move categories back and forth
Copyright © 2008 Model Driven Solutions.March 2008
![Page 48: Copyright © 2008 Model Driven Solutions EKB User Interface Jim Logan September 2008 Formerly Data Access Technologies.](https://reader037.fdocuments.in/reader037/viewer/2022103015/551ab38a550346e0158b6430/html5/thumbnails/48.jpg)
Page 48
Categorization (2)
• When the user presses the “Accept Changes” button, update the main instance with markup
• Steps:– Remove all categories from main instance– Iterate through selected categories
• Insert category into main instance• If not present in old copy, add action="insert“
– Iterate through unselected categories• If present in old copy and not in main instance, insert the category with
action="remove“
• See: “change-categories-dialog” in “assets2.xhtml”
Copyright © 2008 Model Driven Solutions.March 2008
![Page 49: Copyright © 2008 Model Driven Solutions EKB User Interface Jim Logan September 2008 Formerly Data Access Technologies.](https://reader037.fdocuments.in/reader037/viewer/2022103015/551ab38a550346e0158b6430/html5/thumbnails/49.jpg)
Page 49
Useful XPath Functions
• not() – negate an XPath expression
• replace() – extracts parts of a string with regular expression “capture groups” (e.g., replace “(hello) (there)” with “$2 $1”)
• encode-for-uri() – hex-encodes a string for use as a query parameter (e.g., encode a URI)
• exforms:sort() – sorts an XPath node set (e.g., for a table)
• saxon:evaluate() – evaluate a string as an XPath expression
• concat() – concatenates strings
• contains() – see if one string contains another
• xxforms:attribute() – manufactures an XML attribute
• xxforms:element() – manufactures an XML element
• context() – provides the XPath to the current index in a repeat
Copyright © 2008 Model Driven Solutions.March 2008
![Page 50: Copyright © 2008 Model Driven Solutions EKB User Interface Jim Logan September 2008 Formerly Data Access Technologies.](https://reader037.fdocuments.in/reader037/viewer/2022103015/551ab38a550346e0158b6430/html5/thumbnails/50.jpg)
Page 50
Relative URLs
• We shouldn’t need the server name to access the EKB
• Orbeon modifies relative URLs and thinks the root is below http://server-name/orbeon
• An attribute tells Orbeon not to rewrite the URL, called “f:url-norewrite”
Copyright © 2008 Model Driven Solutions.March 2008
![Page 51: Copyright © 2008 Model Driven Solutions EKB User Interface Jim Logan September 2008 Formerly Data Access Technologies.](https://reader037.fdocuments.in/reader037/viewer/2022103015/551ab38a550346e0158b6430/html5/thumbnails/51.jpg)
Page 51
Are You Sure Procedure
• Uses a “verification” instance for:– The specific question to ask– Positive button label and event to dispatch– Negative button label and event to dispatch– Defaults to “Are you sure?”, “Yes”, and “No”
• The caller:– Must have an action with a unique event name– Sets the right strings and event name in the verification instance – Shows the “verification” dialog
• The “verification” dialog buttons:– Dispatch the appropriate event– Dispatch the “reset-verification” event, which restores defaults and hides
the dialog
• See: “revert” button and “verification” dialog in “assets2.xhtml”
Copyright © 2008 Model Driven Solutions.March 2008
![Page 52: Copyright © 2008 Model Driven Solutions EKB User Interface Jim Logan September 2008 Formerly Data Access Technologies.](https://reader037.fdocuments.in/reader037/viewer/2022103015/551ab38a550346e0158b6430/html5/thumbnails/52.jpg)
Page 52
URL rewriting (REs + iterating)
• We have to provide the right links for an asset to do transforms
• Steps:– On the “xforms-ready” event, determine what links to show for an
asset– Calculate the asset download link by replacing /asserted/ with
/artifact/– For a single link:
• Replace /asserted/ with /artifact/ in the URI• Build an HTML anchor tag and output it
– For multiple links:• Replace /(asserted|inferred|history|act|all)/ with /artifact/ in the URI• Iterate through the model types and build an HTML anchor tag and
output it
• See: “assets2.xhtml” and search for “link”
Copyright © 2008 Model Driven Solutions.March 2008
![Page 53: Copyright © 2008 Model Driven Solutions EKB User Interface Jim Logan September 2008 Formerly Data Access Technologies.](https://reader037.fdocuments.in/reader037/viewer/2022103015/551ab38a550346e0158b6430/html5/thumbnails/53.jpg)
Page 53
Trees
• Trees are an Orbeon style available for a select1
• Selects use an “itemset” to determine pairs of names and values
• See: “folder-structure” in “selectAsset.xhtml”
Copyright © 2008 Model Driven Solutions.March 2008
![Page 54: Copyright © 2008 Model Driven Solutions EKB User Interface Jim Logan September 2008 Formerly Data Access Technologies.](https://reader037.fdocuments.in/reader037/viewer/2022103015/551ab38a550346e0158b6430/html5/thumbnails/54.jpg)
Page 54
Passing Form Parameters
• In the submitting form:– Use binds to automatically build the parameters instance– In the submission:
• Reference the parameters instance, just like an ordinary service• Use ‘replace=“all” ’ to replace the form with another form
• In the receiving form use the special Orbeon ‘src=“input:instance” ’ on the instance to be replaced
• See:– The “new-asset” submission in “selectAsset.xhtml”– The “parameters” instance in “New-Asset.xhtml”
Copyright © 2008 Model Driven Solutions.March 2008
![Page 55: Copyright © 2008 Model Driven Solutions EKB User Interface Jim Logan September 2008 Formerly Data Access Technologies.](https://reader037.fdocuments.in/reader037/viewer/2022103015/551ab38a550346e0158b6430/html5/thumbnails/55.jpg)
Page 55
File Upload
• File upload sends a file from the browser to a service
• First it passes through the Orbeon server, where it:– Creates a temporary file on the server– Updates the submitted instance document with the URL of the
temporary file– Sends the submitted instance document to the actual service
• Steps:– Use the standard “upload” control, which needs a reference to:
• The “file” element• The “mediatype” element• The “size” element
• See: the “xforms:upload” control and the “asset” instance in “New-Asset.xhtml”
Copyright © 2008 Model Driven Solutions.March 2008
![Page 56: Copyright © 2008 Model Driven Solutions EKB User Interface Jim Logan September 2008 Formerly Data Access Technologies.](https://reader037.fdocuments.in/reader037/viewer/2022103015/551ab38a550346e0158b6430/html5/thumbnails/56.jpg)
Page 56
Tabs
• Tabs are an Orbeon extension for organizing facets of a form
• This is an example of how we could define MDS widgets, e.g., the categorization widget
• See: the “widget:tabs” element in “selectAsset.xhtml”
Copyright © 2008 Model Driven Solutions.March 2008
![Page 57: Copyright © 2008 Model Driven Solutions EKB User Interface Jim Logan September 2008 Formerly Data Access Technologies.](https://reader037.fdocuments.in/reader037/viewer/2022103015/551ab38a550346e0158b6430/html5/thumbnails/57.jpg)
Page 57
Managing Frame Size
• HTML “iframes” have a peculiar problem with size
• The height is about one inch by default
• JavaScript is the only way to set it to the size of the loaded page
• See: the “resizeIframe” function in “selectAsset.xhtml”
Copyright © 2008 Model Driven Solutions.March 2008
![Page 58: Copyright © 2008 Model Driven Solutions EKB User Interface Jim Logan September 2008 Formerly Data Access Technologies.](https://reader037.fdocuments.in/reader037/viewer/2022103015/551ab38a550346e0158b6430/html5/thumbnails/58.jpg)
Page 58
Making Side-by-Side Forms
• In order to have a selection form on the left and detail form on the right
• For the left form:– Define a CSS style that uses:
• “float: left” – to keep the form on the upper-left• “overflow: auto” – to provide a scrollbar on smaller screens
– Surround the form with an HTML <div> tag using that style
• For the right form:– Define a CSS style that uses:
• “float: right” – to keep the for on the upper-right• “overflow: auto” – to provide a scrollbar on smaller screens
– Surround the form with an HTML <div> tag using that style
• See: the “leftcontent” and “rightcontent” styles in “selectAsset.xhtml”
Copyright © 2008 Model Driven Solutions.March 2008
![Page 59: Copyright © 2008 Model Driven Solutions EKB User Interface Jim Logan September 2008 Formerly Data Access Technologies.](https://reader037.fdocuments.in/reader037/viewer/2022103015/551ab38a550346e0158b6430/html5/thumbnails/59.jpg)
Page 59
Logging
• Most errors encountered are XPath typos that are hard to spot
• Logging is the only way to figure out what’s wrong with a form!
• Logging is turned on in “webapps\orbeon\WEB-INF\config\ log4j.xml”
• This allows us to use the Orbeon extension:
• Logging goes into a file called “orbeon.log”
Copyright © 2008 Model Driven Solutions.March 2008
<xforms:message level="xxforms:log-info">My value: <xforms:output value="..." />
</xforms:message>
![Page 60: Copyright © 2008 Model Driven Solutions EKB User Interface Jim Logan September 2008 Formerly Data Access Technologies.](https://reader037.fdocuments.in/reader037/viewer/2022103015/551ab38a550346e0158b6430/html5/thumbnails/60.jpg)
Page 60
Removing Orbeon Link Sidebar
• Orbeon has instructions for turning off their default styling:– Links down the left side– Version number– Logo
• But those instructions turn off all styles, making the forms ugly
• An easier way is to modify the file “webapps\orbeon\WEB-INF\config\theme-examples.xsl”
Copyright © 2008 Model Driven Solutions.March 2008
![Page 61: Copyright © 2008 Model Driven Solutions EKB User Interface Jim Logan September 2008 Formerly Data Access Technologies.](https://reader037.fdocuments.in/reader037/viewer/2022103015/551ab38a550346e0158b6430/html5/thumbnails/61.jpg)
Page 61
XForms 1.1 Issues
• Fetching more information about a selected thing in a list or tree:– E.g., dynamically add subtrees as the user navigates a tree– E.g., load a sub-form when the user selects something– Problem: Select1 does not update its target value before the
“xforms-value-changed” event fires– Work-around: use a bind to update a value bound to another
control that fires the actions
• Using a bind to determine when a control should appear– Problem: a “calculate” in a bind causes a control to be grayed-out– Work-around: set “read-only” to false
• Sorting tables requires a 3rd-part extension
• Dynamically sorting a table by a clicked column is complex
Copyright © 2008 Model Driven Solutions.March 2008
![Page 62: Copyright © 2008 Model Driven Solutions EKB User Interface Jim Logan September 2008 Formerly Data Access Technologies.](https://reader037.fdocuments.in/reader037/viewer/2022103015/551ab38a550346e0158b6430/html5/thumbnails/62.jpg)
Page 62
Orbeon Issues
• Will not delete multiple elements in one action– Work-around: iterate or use the “while” attribute
• DOMActivate does not work as expected for select1– Orbeon claims this is not a bug– Work-around: use a button or the “xforms-value-changed” event
• To use a relative URLs in a submission, must use “f:url-norewrite” attribute
• Orbeon omits a namespace for one insert situation– Did not have time to debug– Probably caused by Orbeon’s context() function
• Cannot use the current context more than once in a repeat– Work-around: use a variable
• Must debug problems with a log file
Copyright © 2008 Model Driven Solutions.March 2008
![Page 63: Copyright © 2008 Model Driven Solutions EKB User Interface Jim Logan September 2008 Formerly Data Access Technologies.](https://reader037.fdocuments.in/reader037/viewer/2022103015/551ab38a550346e0158b6430/html5/thumbnails/63.jpg)
Page 63
Other Issues
• Eclipse:– Horrible formatting– Has a plugin for XHTML + old XForms 1.0 auto-completion
• oXygen:– Nice formatting, but changes capitalization of XML elements!
• No editor has XPath syntax coloring, auto completion, or testing
Copyright © 2008 Model Driven Solutions.March 2008
![Page 64: Copyright © 2008 Model Driven Solutions EKB User Interface Jim Logan September 2008 Formerly Data Access Technologies.](https://reader037.fdocuments.in/reader037/viewer/2022103015/551ab38a550346e0158b6430/html5/thumbnails/64.jpg)
Page 64
• To manage a non-literal for a simple optional “Corrective action needed” field, we need to:– Determine when to show the “add” button– Determine when to show the “delete” button– Track whether we need to delete the non-literal from the EKB– Track whether we need to add the non-literal to the EKB– Allow editing of the non-literal
• Started a UML state machine
• Downgraded to a simple literal at the 11th hour
Multiplicity and Multiple Level Issue
Copyright © 2008 Model Driven Solutions.March 2008
![Page 65: Copyright © 2008 Model Driven Solutions EKB User Interface Jim Logan September 2008 Formerly Data Access Technologies.](https://reader037.fdocuments.in/reader037/viewer/2022103015/551ab38a550346e0158b6430/html5/thumbnails/65.jpg)
Page 65
Next Steps: Furthering UI Capabilities
• Figure out multiple levels – create and edit non-literal objects (e.g., “corrective action needed” instance description)
• Multiplicity [0..*] – make every property a “repeat”
• Should probably move diff processing:– Would greatly simplify the forms– Would greatly simplify multiple levels and multiplicity [0..*]– Would allow us to leverage existing form builders– Options for moving:
• Orbeon XSLT pipeline• Another EKB service
• Implement rule-violation handling
• Create a viewpoint editor
• Create data-driven XForms
Copyright © 2008 Model Driven Solutions.March 2008
![Page 66: Copyright © 2008 Model Driven Solutions EKB User Interface Jim Logan September 2008 Formerly Data Access Technologies.](https://reader037.fdocuments.in/reader037/viewer/2022103015/551ab38a550346e0158b6430/html5/thumbnails/66.jpg)
Page 66
Options for Data-Driven XForms
• Use a dynamic XForm:– Fetch metadata from the EKB as XML– Dynamically use some combination of:
• Generic repeats for all properties• Dynamically-built queries• XPath wildcards• XPath string evaluation
• Generate XForms from ontology classes:– XSLT or ModelPro– Allow user to modify and style default form:
• Using Orbeon form builder• By editing an enhanced structure ontology in yet another form
– Update default forms only when a class changes
Copyright © 2008 Model Driven Solutions.March 2008