You can use SmallTestSamples.mdzip as your example. This file is a sample project of Cameo Simulation Toolkit. It is located in the <install_root>\samples\simulation folder. In this example, an ImageSwitcher was created to represent a VerdictKind enumeration. An ActiveImage was created for each enumeration literal of the VerdictKind as follows
If a property is typed by an enumeration, you can use the ImageSwitcher and the ActiveImage to represent it with a UI frame mockup of the Classifier that owns the property. Once you drag the property to the panel owned by the UI frame mockup, Cameo Simulation Toolkit will prompt you to select either an ImageSwitcher or a group of radio buttons to represent the value. If you select the ImageSwitcher, the ActiveImage that represents the enumeration literal, which is the default value of the property, will open in the panel or in the group box to which the property has been dragged.
The figure below shows the User Interface Modeling diagram of the SmallTestSamples.mdzip sample project. It contains a UI frame that represents the Test Result dialog, which is the Classifier owning the property typed by the VerdictKind enumeration. The property is result:VerdictKind, whose default value is pass. Now, the ActiveImage that represents the value pass will be shown in the panel.
When the UI mockup opens in the MagicDraw window during model simulation, the image shown in the panel containing the ImageSwitcher will be the ActiveImage that represents the enumeration literal, which is the runtime value of the property.
You can simulate the Test Result dialog in the SmallTestSamples.mdzip sample project. You can also change a result value by selecting one of the radio buttons that represents the value: pass, fail, inconclusive, or error. Now the image that corresponds to the value will appear.
You can view more information on reusing ImageSwitcher in the UI mockup in Nested UI Configuration stereotype.
The image that appears on the web UI through ImageSwitcher is the same image that represents the current State of simulation UI. If the image on the simulation UI is changed, the image on the Web UI will change accordingly and vice versa. Setting the show empty image for unspecified value option (true/ false) on the «ImageSwitcher» will change the image on the web UI through ImageSwitcher to be the same as the image that represents the simulation UI.
Another more comprehensive and realistic sample is available in Cameo Simulation Toolkit is Blackjack.mdzip. This sample contains a Blackjack game simulation in which Players can only stand or hit, and the Dealer can stand on 17 or higher. Once you run the Run Blackjack Simulation Config, the Blackjack game will begin by showing a Blackjack game table UI (see the following blackjack figure).
Note that this sample also demonstrates the Nested UI Configuration feature (see Nested UI Configuration stereotype for more information). As the Dealer/Player has 7 possible card slots, according to the Nested UI Configuration feature, the Dealer/Player thus has 7 corresponding Value Properties, e.g., 'Card1', 'Card2', 'Card3', and so on.
The image showing the card slots demonstrates the application of ImageSwitcher and enumeration. Each card slot is actually a UI Panel having the NestedUIConfig stereotype applied in which the NestedUIConfig's config tag is set to the Card Image Switcher ImageSwitcher, and the NestedUIConfig's feature tag is set to the corresponding Value Property, e.g., 'Card1'. The Card Image Switcher ImageSwitcher is set to represent the Card Value enumeration. The Card Image Switcher ImageSwitcher contains 53 ActiveImages, each of which is the corresponding Enumeration Literal of the Card Image enumeration. Note the Card Value enumeration also contains 53 Enumeration Literals.
When the value of one of the 7 Value Properties changes, the card slot image will change accordingly. See the Player's cards in the figure to better understand how it works as follows