3. Adding new InteractionClasses to a user interface diagram

The selection menu on the user interface diagram editor, as presented in the following figure, contains a button for each InteractionClass that can be inserted into the diagram's FreeContainer. FreeContainers are created along with the user interface diagram.
 

The Inputter, Displayer and Editor are PrimitiveInteractionClasses. These are the constructors that identify how interactive systems can receive and send data from/to users. In the following figure an early version of the ConnectUI FreeContainer is presented, where only the LoginText and PasswordText Inputters are specified.

ActionInvokers are mainly used to trigger and/or confirm actions that users can perform. The elicitation and modelling of ActionInvokers often occurs along with the modelling of behavioural diagrams, i.e., activity diagrams and sequence diagrams. In the following figure it can be observed that the OK and Cancel ActionInvokers were added to the model in the same way as other PrimitiveInteractionClasses such as the Feedback Displayer.

The Container is used to logically organise user interface diagrams by grouping InteractionClasses within FreeContainers as in the following figure.

User interfaces specified in user interface diagrams are conceptual models of UI presentations since they specify just abstract aspects of user interfaces that may be relevant to understand the UI. For example, the ConnectUI FreeContainer in the figure above does not say anything about things such as:
 

• layout (for instance, whether the Login Displayer is going to be to the left or the right of the LoginText, or whether the UserDetailsCN is going to be at the top, the left, the right or the bottom of the the ConnectUI);
• widget selection (for instance, if the OK ActionInvoker is going to be a button, a list, a combo box, etc.);
• toolkits and programming language.

Return to the beginning of the tutorial