UMLi and ARGOi: A Short Tutorial

[Printer friendly version of the entire tutorial]

1. Introduction

UMLi is a modelling language that extends UML providing the following additional facilities for user interface design:
  • a new diagram for modelling UI presentations called a user interface diagram. 
    • Each user interface diagram is composed of one FreeContainer  that is a top-level "window"; 
    • FreeContainers may contain Containers , Editors , Displayers , Inputters  and ActionInvokers; 
    • Displayers  are responsible for sending visual information to users;
    • Inputters  are responsible for receiving information from users;
    • Editors  are simultaneously Displayers and Inputters;
    • ActionInvokers  are responsible for receiving information from users in the form of events;
    • Containers  may contain other Containers, Editors, Displayers, Inputters and Action Invokers; 
    • The user interface diagram constructors are InteractionClasses that are specialised UML Classes. The instances of these InteractiveClasses are the interaction objects (or widgets).
The following figure presents a user interface diagram for the ConnectUI where a user connect to the system proving his/her login and password. Some definitions required to understand this diagram and some modelling facilities required to build this diagram are presented in this tutorial.

  • a new set of activity diagram constructors for modelling UI behaviour: 
    • new activity diagram PseudoStates for modelling common UI behaviour called selection states; 
    • new stereotypes for modelling object flows of UI objects. These stereotypes identify the interaction object flows and they are responsible for specifying the collaboration: 
      • among interaction objects, and 
      • between interaction objects and objects from the domain. 
The following figure presents a partial view of the activity diagram for the ConnectUI. Some definitions required to understand this diagram and some modelling facilities required to build this diagram are presented in this tutorial.

The following screen snapshots in this tutorial may clarify the purpose of each one of these new constructors on the design of UIs. These screen snapshots were produced using ARGOi, a design environment that supports the construction of UMLi models. ARGOi is an extended version of ArgoUML. ARGOi is freely available here. Being a conservative extension of UML, UMLi, in principle, could be implemented in any UML-based design environment. 

If you don't have experience with UML tools, we suggest a visit to the ArgoUML site, and in particular to its tutorial, to learn more about a standard UML-based design environment . From there, we suggest a visit to the rest of this tutorial which is organised as follows. 

Concerning the modelling of UI presentations:

Concerning the modelling of UI behaviour:
email: paulo@psemantica.com.