Displaying items by tag: ea javascript behaviour

Following on from my previous post on creating and simulating state machines in Enterprise Architect (EA), I will walk through the process of adding a UI to prototype and further interactivity to your model.

If you recall the previous article, I walked through the process of setting up ‘Triggers’ to run scenarios through your state machine and set simulation variables at state or sub-state level to better represent your application. All of this information was available using the EA ‘variables’ or recording to the Console. We can go a step further and prototype a quick UI to represent our application and/or provide a ‘dashboard’ view of states and variables.

 

Setting up the state machine

image
the state machine from the previous post

Using the state machine I used last time, we need to create a place-holder ‘state machine’ element so we can reference it as a simulation start point.

Add a ‘User  Interface’ diagram to the appropriate place in the package browser.

 

image
add a user interface to the diagram

 

This will be our place-holder to put the state machine and User Interface elements.

On the diagram create a new state machine element.

image
create a new state machine element

Then right-click the newly created element and select your existing state machine diagram we created in the previous example.

image
select a composite state diagram

Locate the state machine diagram in the package browser.

image
Locate the state machine in the package browser

Now we can create a new User Interface diagram and add that as a frame on to the current diagram (keeps it neater and modular).

image
add another UI element on drag into onto the master canvas

And drag that on to the Model Default (or whatever you named the original) diagram canvas.

To complete the process of linking a UI to a simulation, we want to open the Execution Analyser and create a script. If you don’t have the window open, select ‘Analyzer’ - ‘Execution Analyzer’ to bring it back up

image
Show the Execution Analyzer

 

From the Execution Analyzer window, select to add a new script

image
Add a new simulation script to the Execution Analyzer

And they key step for us is the last tab, ‘Simulation’ and defining the ‘Entry Point’ and Input behaviour.

Select the ‘..’ icon to locate your state machine element for the Entry Point.

image
Define a state machine to be the simulation entry point

That sets the entry diagram we want to use for the simulation.

To connect the User Interface to the simulation, we need to define a behaviour (in JavaScript notation) to display the correct UI element.

The format of this command is as follows:

dialog.CreateOrder.Show = True;

where ‘CreateOrder’ is the name of User Interface we created earlier (‘CreateOrder’ in my example above).

As you may have guessed from the above JavaScript, the model simulation script will start the simulation on the ‘Validate Example’ state machine and as it’s first point of business, it will display the ‘CreateOrder’ User Interface we created.

Note: Another method of displaying the UI is to assign the same command (above) to the first transition of the state diagram (e.g. Initial –> Created in my example). Whichever method works for you!

 

Creating the UI and assigning actions to things!

So now we have a model simulation that will give us an actual rendered screen we should probably put something on it!

Open up the CreateOrder User Interface  we created earlier and lets start adding elements.

Using the Toolbox you can add standard UI elements or use the Win32 elements to add things onto your prototype. Here is a horridly rushed example of some text and a button (note the list of Win32 UI control types in the toolbox)

image
building a basic user interface

So now I’ve added a UI to the model and hooked it up using a simulation script, what happens if I run it? Well let see.

Going to back to the ‘Execution Analyzer’, right click the script and select ‘Start Simulation’

image
start the model simulation from the execution analyzer

What do we get?

image
example rendered UI element during a simulation

A ‘nicely’ rendered (I use the term nicely loosely of course!) dialog box that we mocked up but the button doesn’t do anything – lets fix that!

 

Adding Signal behaviours to Button and making our UI interactive

Head back to our CreateModel user interface and view the properties of the ‘No More Items’ button. On the ‘tagged values’ tab we want to add a new tagged value.

image
creating an OnClick action for the button

The naming of this tagged value is very specific and must always be named ‘OnClick’ with the following value ‘BroadcastSignal(“ “)

image
defining the trigger to use for the button

When the simulation is interpreted, EA will parse the above tagged value as a JavaScript function and attempt to fire the trigger “Signal Name”. So what we were doing before manually using the ‘Simulation events’ and ‘Waiting Triggers’ window in EA, we can no build into our interactive prototype to reasonable something more alike our application!

It is important to note that the trigger type must be ‘Signal’ for this to work. To check this, return to our state machine and find an appropriate transition. In my example we are using a button called ‘No more items’ which corresponds to following transition on my state machine.

clip_image001
locating the appropriate trigger

Bringing up the properties of this transition will allow me to view the Triggers associated with it.

image
checking the trigger type of the transition

Notice the type is ‘Signal’. Had this been one of the other trigger types our simulation would not register the event.

So when we run the simulation again, we can actually use the button on the UI to progress the simulation.

image
simulation before clicking the rendered button

 

Selecting the button progresses us further into the state machine as if we had used the ‘waiting triggers’ window in the bottom right of my example.

image
simulation progressed after selecting the rendered button

So you've now added some interesting tricks to your model but at this point you still might be thinking – “that's all very well, but that isn't all that useful to me”. Well the initial driver for me to head down this path wasn't to create a prototype application based on my state machine but was in fact to provide a better view of the variables and states I was assigning throughout my model.

Introducing the Model Simulation Dashboard!

So go along with my very basic prototype I built an even simpler dashboard view which sits along side the prototype and displays the variable states (as recorded in the EA ‘Locals’ window) and any additional info I want to record in my simulation.

To this all I do is create a second UI diagram, and call this at the first transition (from Initial –> Created in my example)

image
linking a second UI for a 'dashboard' type view

dialog.Screen1.Show=true;
dialog.CreateOrder.Show=true;

In the above example, Screen1 (horribly named I know!) is my dashboard view and CreateOrder is the first UI screen from our example above.

What does that look like?

image
example of dashboard view alongside the running prototype

I have my dashboard running alongside my UI screens to give an alternative view of things I need to track at any given time.

Protip: You can change the stereotype of a Screen element to be a Win32Dialog and get additional properties, such as setting the window to be in the centre – very useful when using multiple Screens.

image
Protip: adding a centre position property to the screen element

All done!

Well thats the basics covered of adding a prototype UI to your model simulations and if there is further interest I can share some tips on making a more dynamic prototype in EA, hiding elements until required – but I shall save that for another day.

Hope that was useful to someone!

Published in Tutorials