LTSA Web Animator : A Tutorial

The web animator is an extension to LTSA and LTSA-MSC that allows the creation of simulations of web applications, driven by a formal behaviour model. The animator allows us to mock up an interface for the application, so that we can experiment with how and end-user might interact with the system at the modelling stage.

Starting the application

Download the latest version of the software from this web page. Extract the zip file. In the bin directory is a file called run.bat. Run this to start the application. If this does not work, check that you have JDK 1.4 or higher installed, and that java is in your path.

Creating a Behaviour Model

The web animator works well in conjunction with the Message Sequence Chart extensions to LTSA. Please see the LTSA-MSC tutorial for instructions on creating a specification using MSCs and generating a behaviour model. We will take the model created in that tutorial and use it as the basis for a web animation.

A web animation requires two files to be written. The first must be called conditions.xml. This defines which actions are user actions and which are system actions, and can also be used to configure other aspects of the simulation's behaviour.

Create an xml file using your favourite editor that contains the following:

<actionset>

  <!-- users can only do the following actions, all other actions are system actions -->

  <role name="user">
    <possibleaction>enterPassword</possibleaction>
    <possibleaction>selectMsg</possibleaction>
  </role>

</actionset>

This defines a role, user, and specifies that users perform two actions, enterPassword and selectMsg. These relate to action names in the behaviour model. Any actions that are not specified as belonging to a role are taken to be system actions. They will automatically be executed by the simulator, not controlled by the user.

Visual Presentation

Each action can be linked to a fragment of HTML. The web animator then composes a complete HTML page representing all of the possible actions in the current state and sends it to the user's browser. The web animator uses an XSL transformation to create the HTML page. We next show how to link actions with HTML fragments.

Create a file called stylesheet.xsl using you favourite editor than contains the following XSL. This provides a template into which you can insert your own fragments.

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">

<xsl:template match="state">
<html>
  <head>
    <title>web application simulation</title>	
  </head>

  <body>

  <xsl:apply-templates select="header" />

  <form action="/" method="GET">
    <input type="hidden" name="role" value="{//state/env/role}" />
    <xsl:apply-templates select="transition" />
  </form>

  <xsl:apply-templates select="footer" />

  </body>
</html>
</xsl:template>

<xsl:template match="header">
</xsl:template>

<xsl:template match="footer">
</xsl:template>

<xsl:template match="transition">
  <xsl:choose>

    <!-- this template matches the different actions -->

    <xsl:when test="name='action1'">
	<!-- put html to be displayed when action1 is available here -->
    </xsl:when>

    <xsl:when test="name='action2'">
	<!-- put html to be displayed when action2 is available here -->
    </xsl:when>

    <!-- add more action cases here -->

  </xsl:choose>
</xsl:template>

</xsl:stylesheet>

Find the section that mentions action1 and edit is so that it appears as follows:

    <xsl:when test="name='enterPassword'">

    <center>
    <table>

    <tr><td><input type="text" name="login" /></td>
        <td><input type="password" name="password" /></td>
        <td><input name="{number}" value="Login" type="submit" /></td>
    </tr> 

    </table>
    </center>

    </xsl:when>

This will draw a login box, password box and a Login button on the user's webpage whenever the enterPassword action is enabled. Typing something into the boxes and pressing the button will trigger the action in the behaviour model. The {number} element is important as is relates to the number used by LTSA to represent this action, which is not fixed. Inside a transition template you can always use {number} to refer to the current action.


The login and password boxes as they appear in a browser window.

Add another similar section corresponding to the selectMsg action, when the user chooses an email to view. We will represent this as a hyperlink. Add the following XSL:

    <xsl:when test="name='selectMsg'">
      <a href="/?role=user&{number}=selectMsg">You have 1 new message.</a>
    </xsl:when>

This is a bit less elegant than the case where we use <input> elements, as we have to put more in the URL in the href. ?role=user says that it is the user performing this action. Again the {number} refers to the action. It is normal (but not essential) to put the action name where we have written selectMsg.

Running the Simulation

We have now done enough to try the simulation out. Make sure that conditions.xml, stylesheet.xsl and the scenario specification are all saved in the same directory. Load the scenario specification and compile a behaviour model as described in the LTSA-MSC tutorial. Now click the www button in the main toolbar to start the webserver. Start a web browser and go to the following address http://localhost:1235?role=user (replace localhost with myhost.mydomain.com if you are running the browser on a different machine to LTSA). You should get a web page similar to the following:

Type something into both the boxes and press the Login button. If you observe the state machines displayed in LTSA as you press the buttons in the web browser, you will see the state transitions happening. At one point the simulator will make a random choice as to which of personalPage or wrongPassword to perform. Depending on which of these is triggered, you will either see the login page again or the page with the link to select a message. We will see shortly how to specify logic to control this choice rather than having it purely random.

Once you get the link "You have one new message." and click on it, you will get a white screen as you will have reached the end of the simulation, performing the endAction in the behaviour model. You can change this by putting a loop in the high-level message sequence chart, so that some series of actions are repeated.

Adding extra logic

We can add extra logic in the conditions.xml file to allow us to control when certain actions happen. For instance we can allow personalPage to be performed when the username and password that the user enters match certain values. If they do not match these values then we will only allow wrong password to be performed. We do this by adding the following fragment of XML to conditions.xml inside the actionset element.


  <action name="personalPage">
    <conditions>
      <and>
        <equal key="login"       value="Bill" />
        <equal key="password"    value="abcd" />
      </and>
    </conditions>
  </action>

 <action name="wrongPassword">
    <conditions>
      <or>
        <notequal key="login"    value="Bill" />
        <notequal key="password" value="abcd" />
      </or>
    </conditions>
  </action>

Adding this should mean that you can log in with the username Bill and password abcd, but using any other username or password will cause you to be returned to the login screen. To try this, save the conditions.xml, stop and start the web animator by pressing the www button twice (this will cause the configuration to be reloaded) and return to browser to the start of the simulation as we did above.

Extras

You can add a header and/or footer to appear on every page (for instance to give a certain branding to a simulation of an e-commerce website) by completing the header or footer templates in stylesheet.xsl. For example:

<xsl:template match="header">
  <h1>Webmail Simulation</h1> <img src="banner.jpg" />
</xsl:template>

You can use any features of HTML, such as images, buttons or even cascading stylesheets, along with the features of XSL (look on the web for XSL tutorials) in your fragments.