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"] 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"] 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"] 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"] select a composite state diagram[/caption]
Locate the state machine diagram in the package browser.
[caption id="" align="aligncenter" width="350"] 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"] 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"] Show the Execution Analyzer[/caption]
From the Execution Analyzer window, select to add a new script
[caption id="" align="aligncenter" width="243"] 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"] Define a state machine to be the simulation entry point[/caption]
That sets the entry diagram we want to use for the simulation.
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).
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"] 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"] start the model simulation from the execution analyzer[/caption]
What do we get?
[caption id="" align="aligncenter" width="346"] 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"] 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"] defining the trigger to use for the button[/caption]
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"] 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"] 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"] 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"] 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"] 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"] 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"] Protip: adding a centre position property to the screen element[/caption]
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!