Presentation is loading. Please wait.

Presentation is loading. Please wait.

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

Similar presentations


Presentation on theme: "Copyright © 2008 Model Driven Solutions EKB User Interface Jim Logan September 2008 Formerly Data Access Technologies."— Presentation transcript:

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

2 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

3 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

4 Page 4 Part 1: EKB XML interface tutorial Copyright © 2008 Model Driven Solutions.March 2008

5 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

6 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

7 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

8 Page 8 From Triples to XML: RDF/XML John Jeff 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 “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#Person type

9 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

10 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

11 Page 11 Both examples will return an XML instance document: –HTTP POST to http://ekb.modeldriven.org/.../directoryhttp://ekb.modeldriven.org/.../directory –HTTP GET from http://ekb.modeldriven.org/.../directory?viewpoint=escaped- viewpoint-uri&id=&23p1 http://ekb.modeldriven.org/.../directory?viewpoint=escaped- viewpoint-uri&id=&23p1 From Triples to XML: HTTP Examples Copyright © 2008 Model Driven Solutions.March 2008 Actors.owl Viewpoint Property / predicate Type

12 Page 12 From Triples to XML: Instance Example Copyright © 2008 Model Driven Solutions.March 2008 Cory Casanave Actors.owl Viewpoint Subject Property / predicate Type Object

13 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

14 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

15 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

16 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

17 Page 17 From XML to RDF Triples: Edited XML Copyright © 2008 Model Driven Solutions.September 2008 Cory Casanave Jim Logan Actors.owl Changed Actors.owl Viewpoint Subject

18 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

19 Page 19 Part 2: Brief XForms tutorial Copyright © 2008 Model Driven Solutions.March 2008

20 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

21 Page 21Copyright © 2008 Model Driven Solutions.March 2008 How does XForms work? Augments normal XHTML and CSS – contains declarations about XML instances, rules, submissions, and some actions – 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

22 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

23 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 * Instance document Instance identifier

24 Page 24 Example Input Control Copyright © 2008 Model Driven Solutions.March 2008 Party Name: Instance document name XPath reference into instance document Party Name:*

25 Page 25 Example Repeat Copyright © 2008 Model Driven Solutions.March 2008 Asset Name Responsible Party Corrective Action Needed Relative to nodeset Note: use “context()” to operate on a user-selected node

26 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

27 Page 27 Post this instance: When this submission: Is invoked by an action: Example Submission Copyright © 2008 Model Driven Solutions.March 2008 * Submit Submit

28 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

29 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

30 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 Responsible Party: Change Change Responsible Party: Orbeon extension Event

31 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

32 Page 32 Deleting Elements [1] [2] [3] Copyright © 2008 Model Driven Solutions.March 2008

33 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

34 Page 34 Inserting Elements: The Expected Way [1] [2] [3] Copyright © 2008 Model Driven Solutions.March 2008 Copy “Template” element to copy This is the most common example in other tutorials, but is less useful

35 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

36 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

37 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

38 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

39 Page 39 Part 3: How to make XForms conform to the EKB XML interface Copyright © 2008 Model Driven Solutions.March 2008

40 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

41 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

42 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

43 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

44 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

45 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

46 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

47 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

48 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

49 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

50 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 http://server-name/orbeon An attribute tells Orbeon not to rewrite the URL, called “f:url- norewrite” Copyright © 2008 Model Driven Solutions.March 2008

51 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

52 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

53 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

54 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

55 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

56 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

57 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

58 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 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 tag using that style See: the “leftcontent” and “rightcontent” styles in “selectAsset.xhtml” Copyright © 2008 Model Driven Solutions.March 2008

59 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 My value:

60 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

61 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 3 rd -part extension Dynamically sorting a table by a clicked column is complex Copyright © 2008 Model Driven Solutions.March 2008

62 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

63 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

64 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 11 th hour Multiplicity and Multiple Level Issue Copyright © 2008 Model Driven Solutions.March 2008

65 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

66 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


Download ppt "Copyright © 2008 Model Driven Solutions EKB User Interface Jim Logan September 2008 Formerly Data Access Technologies."

Similar presentations


Ads by Google