An Eclipse GMF Tool for Modelling User Interaction

Contents

1. Introduction

2. User-interaction Diagrams

2.1. Basis

2.2. Rules

3. User-interaction Tool

1. Introduction

In a previous work we presented an extension of UML for the modeling of WIMP (Windows, Icons, Menus, and Pointers) user interfaces. In our proposal we use four steps for developing UIs, which comply with three models:

a) Dialogue Model: it uses the user-interaction diagrams, a specialized diagram of the UML state-machine diagram.

b) Task Model: it uses the user-interface diagrams, a specialized diagram of the UML use case diagram.

c) Presentation Model: it uses both the user-interface class diagrams and user-interface prototypes (UML class diagrams).

Now, we present ALIR, a graphical modeling tool that implements the core behaviour of our user-interaction model.

Developer can use the ALIR tool to draw the GUI interaction requirements. This tool has been implemented using some of the MDD-related plug-ins provided by the Eclipse platform, namely: the Eclipse Modeling Framework (EMF) and the Eclipse Graphical Modeling Framework (GMF).

Contents

2. User-interaction Diagrams

2.1. Basis

To describe user-interaction diagrams in UML we adopt a piece of the elements defined by the UML state-machine diagram. Our user-interaction diagrams are graphs linking states by means of transitions, which are arrows connecting an initial state and a final state. Initial (resp. final) state is the starting (resp. end) point of the diagram. Each state represents data output (and input request) and transitions represent actor interactions (user’s events). Transitions are labeled by means of conditions/events, representing the boolean conditions to be held and the events to be achieved for the state change. There can be diamonds between transitions that describe alternative paths, depending on a boolean condition.

From a practical point of view, it is convenient to use more than one user-interaction diagram. That is because the logic of a window is usually too complex (see Figure 1). A user-interaction diagram can be deployed in several user-interaction diagrams, in which a part of the main logic is separately described. Therefore, user interaction diagrams can include states which do not correspond to data output, rather than representing sub-diagrams. In this case, the states are called non-terminal states; otherwise, they are called terminal states.

Now, it is sometimes desirable to be able to combine the logic of the sub-diagrams and the main logic. For this reason, we will use in the main user-interaction diagram transitions with conditions which can be referred to the logic of the sub-diagrams.

Figure 1: A purchase window.

Figure 2 shows the user-interaction diagram for the purchasing process together with a set of sub-diagrams. The main user-interaction diagram is UI_Purchase. The model shows how the customer begins the purchasing process by querying, adding or removing articles from the shopping cart. After a usual purchasing process, the shopping system requests the customer a card number and a PIN (i.e. card control code) to carry out the shipment.

Figure 2: A purchase user-interaction modeling.

Our technique gives precise correspondence between models and the Java swing package. We have chosen this package due to the wide acceptance of this technology (applet, frames, and event-handlers). This correspondence can be viewed as a concrete modeling of our abstract modeling technique.

Contents

2.2. Rules

Figure 3 presents the metamodel for describing user-interaction models, which is partially inspired in the UML state-machine metamodel. This metamodel has been developed and used for implementing the ALIR tool.

Figure 3: The user-interaction metamodel.

Figure 4 summarizes the set of elements we can use in a user-interaction diagram. Elements (classes in the metamodel) are related to states and transitions. States (Vertex in UML metamodel) have been grouped into states and pseudostates (at left in the metamodel). Transitions (at right) go out from terminal and non-terminal states.

Figure 4: Elements in the user-interaction tool.

Contents

3. User-interaction Tool

Figure 5 shows a snapshot of the ALIR tool for drawing user-interaction diagrams. In the toolbar we can observe some of the elements described before in the metamodel.

Figure 5: Snapshot of the GMF user-interaction modeling tool.

Figure 6 describes an instance of the metamodel (an object model) for the user-interaction diagram that shown as example in the tool figure.

Figure 6: An object model for the UI_ShoppingCart user-interaction diagram.

We have also provided to the ALIR tool with model checking to validate semantical and syntactical rules. Some examples of the OCL rules appear in Figure 7.

Figure 7: Some OCL rules applied to transitions of the ALIR tool.

Contents