1. Copyright © 2008 Model Driven Solutions EKB User Interface Lab Jim Logan October 2008 Formerly Data Access Technologies

2. Page 2 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

3. Page 3 Prerequisites Subversion client: –Check out the lab presentation and files into a folder somewherelab presentation and files Eclipse (or other XML editor) Tomcat Orbeon: Orbeon –Copy WAR file into the “webapps” directory so it deploys –You should see Tomcat create a folder called “orbeon” Copyright © 2008 Model Driven Solutions.March 2008

4. Page 4 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-Labhttp://localhost:8080/orbeon/xforms-hello/EKB-User-Editor-Lab –http://localhost:8080/orbeon/xforms-hello/EKB-User-Editorhttp://localhost:8080/orbeon/xforms-hello/EKB-User-Editor Copyright © 2008 Model Driven Solutions.March 2008 <page path-info="/xforms-hello/EKB-User-Editor-Lab“ view="EKB-User-Editor-Lab.xhtml"/>

5. Page 5 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 Copyright © 2008 Model Driven Solutions.March 2008

6. Page 6 Open Browser and Editor Browse to http://localhost:8080/orbeon/xforms-hello/EKB-User- Editor-Labhttp://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) Copyright © 2008 Model Driven Solutions.March 2008

7. Page 7 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 Copyright © 2008 Model Driven Solutions.March 2008 <widget:xforms-instance-inspector id="inspector" xmlns:widget="http://orbeon.org/oxf/xml/widget" />

8. Page 8 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: Copyright © 2008 Model Driven Solutions.March 2008 *

9. Page 9 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: Copyright © 2008 Model Driven Solutions.March 2008 <xforms:submission id="get-people" method="post" ref="instance('people-query')" f:url-norewrite="true" action="{$people-uri}" replace="instance" instance="people"> Load

10. Page 10 Automatically Load Users We want the form to automatically load without user action Add this to the model section of the form: Copyright © 2008 Model Driven Solutions.March 2008

11. Page 11 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: Copyright © 2008 Model Driven Solutions.March 2008 Add

12. Page 12 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”: Copyright © 2008 Model Driven Solutions.March 2008

13. Page 13 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: Copyright © 2008 Model Driven Solutions.March 2008

14. Page 14 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 Copyright © 2008 Model Driven Solutions.March 2008 <xforms:bind id="id" nodeset="instance('people')/Actors:Person/@rdf:ID" constraint="matches(., '^[\w\-_]+$') and not(. =../preceding::Actors:Person/@rdf:ID)"/>

15. Page 15 Add a User Hint We should tell the user what the red icon means Add the following to the input for “rdf:ID”: Copyright © 2008 Model Driven Solutions.March 2008 User name must be unique and contain only letters, numbers, dashes, and underscores

16. Page 16 Add a Delete Button Add the following to the empty table column to provide a button to remove an entry: Copyright © 2008 Model Driven Solutions.March 2008 Delete

17. Page 17 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: Copyright © 2008 Model Driven Solutions.March 2008

18. Page 18 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: Copyright © 2008 Model Driven Solutions.March 2008 <xforms:insert context="instance('people-snapshot')" nodeset="." origin="instance('people')"/>

19. Page 19 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”: Copyright © 2008 Model Driven Solutions.March 2008 XXX: firing <xxforms:context name="my:path" select="concat('Actors:Person[', index('person-repeat'), ']/rdfs:label')" />

20. Page 20 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: Copyright © 2008 Model Driven Solutions.March 2008 <xforms:submission id="post-people" method="post" ref="instance('people')" f:url-norewrite="true" action="{$people-uri}" replace="instance" instance="people"> Save