A UMLBased Design Environment for Interactive Applications

1
A UML-Based Design Environment for Interactive
Applications

• Paulo Pinheiro da Silva and Norman W. Paton
• Department of Computer Science,
• University of Manchester

2
Outline

• User Interface (UI) Modelling with UML
• UMLi Proposal
• ARGOi A UMLi-Based Tool
• Modelling UI presentations
• Modelling UI behaviours
• Conclusions
• Future work

3
User Interface Modelling with UML (1/2)

• UML is a standard intended for modelling any
  software application.
• User interfaces are a crucial part of most
  applications.

HOWEVER UIs are not usually modelled using UML.
4
User Interface Modelling with UML (2/2)

• The modelling of the following aspect of UIs
  needs to be simplified in UML
• UI presentations
• Interactive behaviour (inter-object transitions)
• Collaboration between interaction objects and
  non-interaction objects
• (P. Pinheiro da Silva and N. W. Paton ,UML2000)

5
UMLi Proposal

• A conservative extension of UML.
• Main features of UMLi
• User Interface Diagrams (meta-modelling)
• Activity Diagram Extensions
• Selection States (meta-modelling)
• Interaction Object Flows (stereotypes
  metamodelling)
• UMLi XMI DTD

6
UI Modelling An Example

• Abstract constructors are required to model UI
  presentations.
• Abstract constructors should eventually be mapped
  into widgets.
• UI behaviours are modelled by specifying the
  behaviours of each abstract constructor.

• 9 instances of 6 widgets.

7
UML UI Presentation

• In structural diagrams, e.g., class diagrams
  and object diagrams, it is difficult to
  graphically realise
• Interaction object containment
• Which abstract roles interaction objects are
  playing

InteractionClass isVisible boolean
isActive boolean isInteracting
boolean setVisible(boolean) setActive(boolean)

PrimitiveInteractionClass value
getValue() setValue()
InvokeAction InteractionClass invokeAction()
Cancel
OK
Login
PasswordText
Password
LoginText
UserDetails
Options
ConnectUI
Distinct abstract roles
Containment
8
UMLi UI Presentation

• UI diagrams provide graphical representations
  for
• containment (and enactment) of interaction
  objects
• abstract roles of interaction objects

ConnectionUI


Password
Login
Cancel
LoginText
PasswordText
OK
9
UML UI Behaviour

• The modelling of some categories of transition
  may be simple using activity diagrams
• Sequential transitions
• Concurrent transitions
• Choices
• However, the modelling of other categories of
  transition may be complex
• Optional transitions
• Order independent transitions
• Repeatable transitions

Connect
GetDetails
new SelectHist
SelectHist
Select
GetName in SelectHist
GetPassord in SelectHist
GetName
GetPassword
GetName
GetPassword
GetName GetPassword in SelectHist
TryConnection
SelectFunction
10
UMLi UI BehaviourSelection States

• UMLi introduces the SelectionState constructors
  for modelling
• Optional transitions
• Order independent transitions
• Repeatable transitions

Connect
GetDetails
GetName
GetPassword
TryConnection
SelectFunction
11
UMLi UI BehaviourInteraction Object Flows

• UMLi introduces 5 categories of stereotyped
  Object Flows for modelling Interaction Object
  data flow.

Interaction object dataflow stereotype
Connect
Interaction object
ltltpresentsgtgt
new UserQuery
GetDetails

ltltinteractsgtgt
ltltinteractsgtgt
uq.setLogin(getValue())
loginText
UserDetails
ltltconfirmsgtgt
ltltinteractsgtgt
uq.setPassword(getValue())
passwordText
false
ltltcancelsgtgt
uq.checkUser()
uqUserQuery
Cancel
user Person
SelectFunction
Obs ltltactivatesgtgt is not presented above.
12
Interaction Object Flows in UML
Or you may still wish to use standard UML only.
Connect
New UserQuery
InitiateConnectUI
GetDetails
ok.setActive(true)
udUserDetails
ud.setActive(true)
lgLoginText
okOK
ok.invokeAction()
lg.setActive(true)
ok.setActive(false)
pwPasswordText
pw.setActive(true)
cn.setActive(true)
ud.setActive(false)
uq.setLogin(lg.getValue())
cnCancel
cn.invokeAction()
lg.setActive(false)
login
Select
cn.setActive(false)
pw.setActive(false)
password
uq.setPassword(pw.getValue())
False
uqUserQuery
uq.CheckUser()
TerminateConnectUI
SelectFunction
13
ARGOi A UMLi-Based Tool

• Implemented in UCIs ARGO/UML.
• Based on the UMLi XMI DTD.
• Implementation details in
• http//img.cs.man.ac.uk/umli
• How could UMLi be exploited by a UML-Based
  tool?

A relevant question about UMLi, however, is
14
Modelling UI Diagrams
UI diagram constructors
The option to create a UI diagram
A UI diagram
15
Modelling Selection States
1.Select option
2. Automatic Transformation
3. Manual Refinement
16
Modelling Interaction Object Flows (1/2)
Select and create a ClassifierInState
Select and create an ObjectFlowState
Select a type for the ClassifierInState
Type filtering based on FreeConteiner context
17
Modelling Interaction Object Flows (2/2)

• ARGOi tries to preserve collabo-rations between
  interaction objects and non-interaction objects.

A message is raised if loginText,
passwordText or UserQuery are asked to be deleted.
18
Conclusions (1/2)

• UMLi specification can be implemented in a
  UML-based design environment.
• ARGOi can provide support for modelling a
  complete interactive application exploiting the
  UMLi specification.

19
Conclusions (2/2)

• In the context of user interfaces for data
  intensive applications ARGOi provides the
  following
• Integration of UI design with data modelling
  through class diagrams
• Support for the modelling of data flow during
  activities
• Support for form-based interfaces, which are
  predominant for most database interfaces
• Backward compability with existing UML models.

20
Future Work

• A design metric comparison between UML and UMLi
  based on an industrial case study.
• An implementation of UI software generation from
  UMLi models

21
Further Information

• Further information about UMLi can be obtained at
  
• http//img.cs.man.ac.uk/umli