XQuery/Sequence Diagrams

Background
Sequence Diagrams are tedious to draw, even with a diagramming tool. They are even worse to edit when the sequence changes. An alternative is to define an XML vocabulary to define the message sequencing and to use XQuery to render this description as XHTML. This textual approach also allows explanations to be revealed at each step and alternative renderings of the XML definition of the Sequence to be generated, such as a printed version.

This demonstrator uses a simplified meta-model, with only messages between actors and actions undertaken by actors.

(article under re-design - CW)

3-tier architecture
Here is a sample description of interaction in a 3-tier architecture: (badly needs re-writing)

 3-tier architecture An overview of the 3-tier Architecture user The User pink client The user of the site browser Presentation Layer lightgreen client A browser such as Firefox, Opera or Internet Explorer server Application Layer lightblue server Scripts in languages such as PHP or Java invoked via a web server database Persistance Layer grey server A database server such as Oracle or MySQL user browser on            browser server HTTP to            server database SQL to            user browser click link browser server request URL http://www.cems.uwe.ac.uk/~cjwallac/apps/poll2/tally.php?pollid=2  server decode input   server create SQL request  server database request SQL statement database server</to> respond tables <do> <at>server</at> create page with data in table </do> server <to>browser</to> respond HTML page user <to>browser</to> read page </SequenceDiagram>

Rendering the diagram
The script 'displayDiagram' renders this model as an XHTML table:

declare option exist:serialize "method=xhtml media-type=text/html indent=yes"; declare variable $homesym :='&#160;||&#160;'; declare variable $leftsym := '&#160;>>&#160;'; declare variable $rightsym := '&#160;&lt;&lt;&#160;';

declare function local:makeText($event){ concat($event/action,' ',string-join($event/object,' + ')) };

let $id:= request:get-parameter('id','') let $sd :=//SequenceDiagram[@id=$id] let $trace := $sd/trace

let $actors := $sd/cast/actor let $nactors := count($sd/cast/actor) let $width := 100 div $nactors return Sequence Diagram {string($sd/@id)} {string($sd/name)} {$sd/description/node }

Display

Further example Diagrams
Model Display
 * 1) A GoogleEarth application

Animating the Diagram
Rather than display the complete interaction, the diagram can be simply animated by displaying only the first n steps, together with explanatory text for the last step. The addition of some controls allows the user to step forward and backward in the sequence.

3 Tier GoogleEarth A function to compute the next step: declare function local:next-step($step,$action, $max) { if ($action = "start") then 0 else if ($action = "back") then max (($step -1,0)) else if ($action = "forward") then min(($max,$step+1)) else if ($action="end") then $max else $step };

and call the function let $step := local:next-step(                               number(request:request-parameter("step",0)),                               request:request-parameter("action", "start"),                               count($trace/*))

A form to provide the controls and maintain the interaction state:

<input type="hidden" name="id" value="{$id}"/> <input type="hidden" name="step" value="{$step}"/> <input type="submit" name="action" value="start"/> <input type="submit" name="action" value="back"/> <input type="submit" name="action" value="forward"/> <input type="submit" name="action" value="end"/>

Limit the events displayed to the specified number of steps:

for $event in $trace/*[position<=$step]

and display the explanation of the last step: {if ($step=0) then $sd/description/node else $trace/*[position=$step]/description/node }

Print the diagram
One of the advantages of having the whole diagram in XML is that the diagram can be displayed differently in print, so that each step can be shown with its description.

Fully expanded Descriptions