copyright © 2008 model driven solutions ekb user interface lab jim logan october 2008 formerly data...

Copyright © 2008 Model Driven Solutions

EKB User Interface Lab

Jim LoganOctober 2008

Formerly Data Access Technologies

Introduction

• This lab is a follow-on to the EKB interface and XForms tutorial

• It provides an opportunity to put the tutorial to use

Copyright © 2008 Model Driven Solutions.March 2008

Prerequisites

• Subversion client:– Check out the lab presentation and files into a folder somewhere

• Eclipse (or other XML editor)

• Tomcat

• Orbeon:– Copy WAR file into the “webapps” directory so it deploys– You should see Tomcat create a folder called “orbeon”


Setup Orbeon

• Under the Orbeon installation, go to “WEB-INF\resources\apps\xforms-hello”

• Edit “page-flow.xml” and add the lines:

• Copy the file “EKB-User-Editor-Template.xhtml” here

• Rename it to “EKB-User-Editor-Lab.xhtml”

• Copy the file “EKB-User-Editor.xhtml” here

• Verify you can browse to:– http://localhost:8080/orbeon/xforms-hello/EKB-User-Editor-Lab – http://localhost:8080/orbeon/xforms-hello/EKB-User-Editor


<page path-info="/xforms-hello/EKB-User-Editor" view="EKB-User-Editor.xhtml"/><page path-info="/xforms-hello/EKB-User-Editor-Lab“

view="EKB-User-Editor-Lab.xhtml"/>

Final Product

• Loads from EKB

• Shows short user IDs

• Allows name editing

• Allows adding of new users:– Editing of newly-added IDs– Deletion– Uniqueness checking

• Allows instance inspection

• Performs diff markup

• Allows saving to EKB


Open Browser and Editor

• Browse to http://localhost:8080/orbeon/xforms-hello/EKB-User-Editor-Lab

• Open “EKB-User-Editor-Lab.xhtml” in an XML editor

• After each change, do a “deep reload” in the browser (control-shift-R in Firefox)


Add the Instance Inspector

• The instance inspector is a must-have!

• Add the following to the end of the bottom of the form:

• You can use a “switch” and a couple of buttons to toggle it on and off, if you like


<widget:xforms-instance-inspector id="inspector"xmlns:widget="http://orbeon.org/oxf/xml/widget" />

Add a Query

• The form is using a test instance

• We need to add a query to the model section we can submit to the server to get a real instance:


<xforms:instance id="people-query"><DefaultViewpoint:Default_viewpoint>

<Actors:Person action="query"><rdfs:label select="matches">*</rdfs:label>

</Actors:Person></DefaultViewpoint:Default_viewpoint>

</xforms:instance>

Add a Query POST

• We need to submit the query to the server

• Add the following submission to the model section:

• And the following button at the bottom of the body section:


<xforms:submission id="get-people" method="post"ref="instance('people-query')"f:url-norewrite="true"action="{$people-uri}"replace="instance" instance="people">

</xforms:submission>

<xforms:trigger><xforms:label>Load</xforms:label><xforms:send ev:event="DOMActivate" submission="get-people"/>

</xforms:trigger>

Automatically Load Users

• We want the form to automatically load without user action

• Add this to the model section of the form:


<xforms:action ev:event="xforms-ready"><xforms:send submission="get-people"/>

</xforms:action>

Add an “Add” Button

• The user needs a way to add new users

• Add the following to the end of the body section to copy the “new-person” instance into the “person” instance:


<xforms:trigger><xforms:label>Add</xforms:label><xforms:action ev:event="DOMActivate">

<xforms:insert bind="person" origin="instance('new-person')"/><xforms:setvalue bind="new-name" value="'new name'"/><xforms:setvalue bind="new-id" value="'new-id'"/>

</xforms:action></xforms:trigger>

Add an Input for User ID

• The user ID is a URI

• We don’t want the user to have to type in a complete URI!

• Add an input that allows editing of the “@rdf:ID” attribute next to the output for “@rdf:about”:


<xforms:input ref="@rdf:ID"/>

Show Only the User Name

• We don’t want to show the entire URI for each user

• Change the value of the output for “rdf:about” as follows:


<xforms:output value="substring-after(@rdf:about, '#')"/>

Add a Constraint

• The form allows you to add multiple rows with the same ID

• We can prevent that with a bind

• Add the following to the model section:

• The user will get a red icon when a duplicate exists


<xforms:bind id="id" nodeset="instance('people')/Actors:Person/@rdf:ID"constraint="matches(., '^[\w\-_]+$') and not(. = ../preceding::Actors:Person/@rdf:ID)"/>

Add a User Hint

• We should tell the user what the red icon means

• Add the following to the input for “rdf:ID”:


<xforms:alert>User name must be unique and contain only letters, numbers, dashes, and underscores</xforms:alert>

Add a Delete Button

• Add the following to the empty table column to provide a button to remove an entry:


<xforms:trigger><xforms:label>Delete</xforms:label><xforms:action ev:event="DOMActivate">

<xforms:delete nodeset="."/></xforms:action>

</xforms:trigger>

Add a Guard Condition to Delete Button

• A user entry may be tied to provenance information

• We don’t want to remove entries that exist on the server

• Add the following guard condition to the trigger:


<xforms:trigger ref=".[@action = 'create']">

Keep a Snapshot of the Original

• The diff processing needs a copy of the untouched instance

• Add a “people-snapshot” instance

• Add the following action within the “get-people” submission:


<xforms:action ev:event="xforms-submit-done"><xforms:insert context="instance('people-snapshot')" nodeset="."origin="instance('people')"/>

</xforms:action>

Add Diff-Handling Procedure

• The form allows you to change strings, but there is no diff processing

• Copy the diff-handling procedure into the model section

• Add a call to it within the input for “rdfs:label”:


<xforms:action ev:event="DOMFocusOut"><xforms:message ev:event="xforms-submit-error" level="xxforms:log-info">

XXX: firing</xforms:message><xforms:dispatch name="change-literal" target="main-model">

<xxforms:context name="my:old-instance" select="'people-snapshot'" /><xxforms:context name="my:new-instance" select="'people'" /><xxforms:context name="my:path"

select="concat('Actors:Person[', index('person-repeat'), ']/rdfs:label')" /></xforms:dispatch>

</xforms:action>

Add a POST

• We need to send the changes back to the server

• Add the following submission to the model section:

• And the following trigger to the end of the body section:


<xforms:submission id="post-people" method="post"ref="instance('people')"f:url-norewrite="true"action="{$people-uri}"replace="instance" instance="people">

</xforms:submission>

<xforms:trigger><xforms:label>Save</xforms:label><xforms:send ev:event="DOMActivate" submission="post-people"/>

</xforms:trigger>

copyright © 2008 model driven solutions ekb user interface lab jim logan october 2008 formerly data...

Documents