Transcript Information Management Metamodel Core

Formerly Data Access Technologies
EKB User Interface Lab
Jim Logan
October 2008
Copyright © 2008 Model Driven Solutions
Introduction
• This lab is a follow-on to the EKB interface and XForms tutorial
• It provides an opportunity to put the tutorial to use
March 2008
Copyright © 2008 Model Driven Solutions.
Page 2
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”
March 2008
Copyright © 2008 Model Driven Solutions.
Page 3
Setup Orbeon
• Under the Orbeon installation, go to “WEBINF\resources\apps\xforms-hello”
• Edit “page-flow.xml” and add the lines:
<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"/>
• 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
March 2008
Copyright © 2008 Model Driven Solutions.
Page 4
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
March 2008
Copyright © 2008 Model Driven Solutions.
Page 5
Open Browser and Editor
• Browse to http://localhost:8080/orbeon/xforms-hello/EKB-UserEditor-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)
March 2008
Copyright © 2008 Model Driven Solutions.
Page 6
Add the Instance Inspector
• The instance inspector is a must-have!
• Add the following to the end of the bottom of the form:
<widget:xforms-instance-inspector id="inspector"
xmlns:widget="http://orbeon.org/oxf/xml/widget" />
• You can use a “switch” and a couple of buttons to toggle it on
and off, if you like
March 2008
Copyright © 2008 Model Driven Solutions.
Page 7
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>
March 2008
Copyright © 2008 Model Driven Solutions.
Page 8
Add a Query POST
• We need to submit the query to the server
• Add the following submission to the model 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>
• And the following button at the bottom of the body section:
<xforms:trigger>
<xforms:label>Load</xforms:label>
<xforms:send ev:event="DOMActivate" submission="get-people"/>
</xforms:trigger>
March 2008
Copyright © 2008 Model Driven Solutions.
Page 9
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>
March 2008
Copyright © 2008 Model Driven Solutions.
Page 10
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>
March 2008
Copyright © 2008 Model Driven Solutions.
Page 11
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"/>
March 2008
Copyright © 2008 Model Driven Solutions.
Page 12
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, '#')"/>
March 2008
Copyright © 2008 Model Driven Solutions.
Page 13
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:
<xforms:bind id="id" nodeset="instance('people')/Actors:Person/@rdf:ID"
constraint="matches(., '^[\w\-_]+$') and not(. = ../preceding::Actors:Person/@rdf:ID)"/>
• The user will get a red icon when a duplicate exists
March 2008
Copyright © 2008 Model Driven Solutions.
Page 14
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>
March 2008
Copyright © 2008 Model Driven Solutions.
Page 15
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>
March 2008
Copyright © 2008 Model Driven Solutions.
Page 16
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']">
March 2008
Copyright © 2008 Model Driven Solutions.
Page 17
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>
March 2008
Copyright © 2008 Model Driven Solutions.
Page 18
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>
March 2008
Copyright © 2008 Model Driven Solutions.
Page 19
Add a POST
• We need to send the changes back to the server
• Add the following submission to the model section:
<xforms:submission id="post-people" method="post"
ref="instance('people')"
f:url-norewrite="true"
action="{$people-uri}"
replace="instance" instance="people">
</xforms:submission>
• And the following trigger to the end of the body section:
<xforms:trigger>
<xforms:label>Save</xforms:label>
<xforms:send ev:event="DOMActivate" submission="post-people"/>
</xforms:trigger>
March 2008
Copyright © 2008 Model Driven Solutions.
Page 20