Modeling the User Interface

User interfaces are modeled with the standard MagicDraw tool set and do not need to have any additional stereotypes applied. However, it makes sense to follow some conventions in organizing the UI elements:

	Create a new package structure underneath the root node Data within the Containment tree. The repository UI is the root for all user interface related diagrams and objects. The Templates repository holds all user interface diagrams. For each screen a separate package should be created. The HelloWorld repository will hold the main screen and the Confirmation repository the modal confirmation dialog.
	As with Activity or Class Diagrams, user interfaces have a specific diagram type. To create a User Interface Modeling Diagram, right-click on the HelloWorld Repository and select New Diagram > Custom Diagrams > User Interface Modeling Diagram. Create a Diagram for both screens.
	Depending on the diagram type, MagicDraw offers different drawing objects. In this case user interface specific objects appear in the middle tool bar. Note: Not all of the UI elements are supported by the Builder. For a list of supported UI elements please refer to the UI Widgets chapter overview.
	Each screen model is based on a container object on which the elements are placed according to the application design. Container objects can also be nested with additional containers. The HelloWorld screen consists of a container of type Panel () which holds a Group Box (). Within the Group Box the actual elements are placed as shown in the screenshot. Label () for the HelloWorld text Text Field () for user input Button () to trigger the confirmation The default text of elements like button names or label text can be changed within the Specification window. The naming of the created UI elements is not mandatory. The generation of the UI files within the xUML service will automatically generate id's for the elements.However, it is beneficial to name root container elements like the Frame and Panel because this makes the State Diagrams that refers these elements more readable.
	The behavior of a confirmation dialog window is to open up overlaying the main screen. For this reason the Frame () container is used and holds the question Label text () and the YES and NO Button ().
	The package structure of the user interface elements should resemble the containment tree structure as shown in the screen shot. As mentioned in the note in the previous steps, UI elements do not necessarily have to be named due to the fact, that the compiler will assign a name and an id to the element itself anyway. Assigning a name though makes it easier to locate the element in select windows or within the generated HTML code.

UI Navigating (Functional Prototype)

To be able to present user interface prototypes more interactively, MagicDraw offers to hyperlink user interface elements to each other. The hyperlinks are added to an element by clicking on the element you want to assign the link.

Linking the YES and NO button to the HelloWorld UI diagram allows to jump from the confirmation back to the main screen. On the other side, the Change text button HelloWorld screen has to be linked to the Confirmation UI diagram.