Hamish King

Hamish King

Thoughts and ideas from a consultant trying to improve the enterprise through better lean/agile principles, sensible design and pragmatic solutions.

Hamish King

Thoughts and ideas from a consultant trying to improve the enterprise through better lean/agile principles, sensible design and pragmatic solutions.


Our Newsletter

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.




Adding a UI (prototype) to Model Simulations in EA

Hamish KingHamish King

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

[caption id="" align="aligncenter" width="622"]image the state machine from the previous post[/caption]

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.


[caption id="" align="aligncenter" width="640"]image add a user interface to the diagram[/caption]


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

On the diagram create a new state machine element.

[caption id="" align="aligncenter" width="657"]image create a new state machine element[/caption]

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

[caption id="" align="aligncenter" width="635"]image select a composite state diagram[/caption]

Locate the state machine diagram in the package browser.

[caption id="" align="aligncenter" width="350"]image Locate the state machine in the package browser[/caption]

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).

[caption id="" align="aligncenter" width="651"]image add another UI element on drag into onto the master canvas[/caption]

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

[caption id="" align="aligncenter" width="402"]image Show the Execution Analyzer[/caption]


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

[caption id="" align="aligncenter" width="243"]image Add a new simulation script to the Execution Analyzer[/caption]

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.

[caption id="" align="aligncenter" width="502"]image Define a state machine to be the simulation entry point[/caption]

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)

[caption id="" align="aligncenter" width="591"]image building a basic user interface[/caption]

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’

[caption id="" align="aligncenter" width="365"]image start the model simulation from the execution analyzer[/caption]

What do we get?

[caption id="" align="aligncenter" width="346"]image example rendered UI element during a simulation[/caption]

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.

[caption id="" align="aligncenter" width="457"]image creating an OnClick action for the button[/caption]

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

[caption id="" align="aligncenter" width="357"]image defining the trigger to use for the button[/caption]

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.

[caption id="" align="aligncenter" width="567"]clip_image001 locating the appropriate trigger[/caption]

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

[caption id="" align="aligncenter" width="454"]image checking the trigger type of the transition[/caption]

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.

[caption id="" align="aligncenter" width="414"]image simulation before clicking the rendered button[/caption]


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.

[caption id="" align="aligncenter" width="538"]image simulation progressed after selecting the rendered button[/caption]

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)

[caption id="" align="aligncenter" width="511"]image linking a second UI for a 'dashboard' type view[/caption]


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?

[caption id="" align="aligncenter" width="575"]image example of dashboard view alongside the running prototype[/caption]

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.

[caption id="" align="aligncenter" width="448"]image Protip: adding a centre position property to the screen element[/caption]

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!

Hamish King

Hamish King

Thoughts and ideas from a consultant trying to improve the enterprise through better lean/agile principles, sensible design and pragmatic solutions.