Copyright © 2008 Model Driven Solutions EKB User Interface Jim Logan September 2008 Formerly Data...

66
Copyright © 2008 Model Driven Solutions EKB User Interface Jim Logan September 2008 Formerly Data Access Technologies

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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