Skip to content

How To Use

Luis Diogo Couto edited this page Feb 1, 2016 · 16 revisions

This guide provides step-by-step instructions for building a new Tempo UI. Refer to the example folder in the main repo to follow along.

Step 0: Bootstrap

A TempoUI is essentially a DukeScript project with some additional code to extend the bindings towards VDM. Speaking of which, the DukeScript documentation is a valuable resource for TempoUIs.

To create an initial UI project, we use Maven archetypes (see https://github.com/dukescript/maven-archetypes):

mvn archetype:generate 
    -DarchetypeGroupId=com.dukescript.archetype
    -DarchetypeArtifactId=knockout4j-archetype 
    -DarchetypeVersion=0.9

This will create a root folder for your project with 2 modules: client and js. We ignore js. You can rename the modules however but we will leave them as is.

Now, add TempoUI as a dependency to the client/pom.xml:

<dependency>
  <groupId>org.overturetool</groupId>
  <artifactId>tempoui</artifactId>
  <version>1.0-SNAPSHOT</version>
</dependency> 

At this point, you should be able to mvn compile.

Step 1: Building the Model API

The ModelAPI is a Java class that exposes operations of the VDM model to the UI. These exposed operations can then be bound to UI events so that they are triggered when the event occurs.

This class must be handwritten since we do not want all operations to be visible to the UI. In addition, we may want to perform some manual encoding of data (for example, to build VDM records).

Step 2: Building the DataModel

Step 3: Putting it all together

Clone this wiki locally