A UML Profile for GUI Layout Kai Blankenhorn, Mario Jeckle †

Erfurt, 27.-30.09.2004

A UML Profile for GUI Layout - Kai Blankenhorn, Mario Jeckle Motivation Foundation Previous Work Metamodel Situation Importance of GUIs Problems in daily work

3/26 Example Goals

Situation Z Z Z

Z Z

UML 2 knows 13 diagrams ”General purpose modeling language” (OMG 2003a) Impossible to model GUI layout with UML Graphics designers create non-UML models of GUIs (Newman & Landay 2000) Layout is modeled using schematics or wireframes (Newman & Landay 2000)

A UML Profile for GUI Layout - Kai Blankenhorn, Mario Jeckle Motivation Foundation Previous Work Metamodel Situation Importance of GUIs Problems in daily work

4/26 Example Goals

Importance of GUIs Z Z Z

The most obvious part of a software system Big impact on overall cost and productivity (Myers 1993; Galitz 2002) Realization: UI code makes up about 50% of application code

(van der Veer &

van Vliet 2001; Galitz 2002)

Z

Especially important for the success of web pages 1998)

Z

Central aspect of usability efforts

Z

Yet little support by UML

(Shneiderman 1997; Lohse & Spiller

A UML Profile for GUI Layout - Kai Blankenhorn, Mario Jeckle Motivation Foundation Previous Work Metamodel Situation Importance of GUIs Problems in daily work

5/26 Example Goals

Problems in daily work Z

Application design separated into two fields: X X

Software design – made by software engineers GUI design – made by graphics designers

Z

Difficult to coordinate them efficiently

Z

How to specify and discuss GUI layout ideas? X X

Z

Customer‘s ideas Dedicated layout specification phase prior to creating mockups

A model without the GUI is incomplete X X

Harder for programmers to know what to do Less control over application development

A UML Profile for GUI Layout - Kai Blankenhorn, Mario Jeckle Motivation Foundation Previous Work Metamodel Situation Importance of GUIs Problems in daily work

6/26 Example Goals

Goals Z

Extension of the UML X X

Interaction and dynamics: modeled using traditional UML diagrams Create a new diagram for GUI layout

Z

Standards conformant

Z

UML look and feel

Z

Easy to apply in existing processes

Z

Mimic designer sketches

A UML Profile for GUI Layout - Kai Blankenhorn, Mario Jeckle Motivation Foundation Previous Work Metamodel UML 2 Diagram Interchange Designer Scribbles

7/26 Example

UML 2 Z

Object oriented general purpose modeling language

Z

UML metamodel: model of the UML in MOF

Z

Extended using profiles: X X

(OMG 2003a)

Tailor the UML metamodel to new platforms or domains Metamodel classes may be extended using stereotypes X X X

X

(OMG 2003a)

Additional semantics Constrained syntax Different presentation through stereotype icons

Directly supported by UML tools (theoretically)

A UML Profile for GUI Layout - Kai Blankenhorn, Mario Jeckle Motivation Foundation Previous Work Metamodel UML 2 Diagram Interchange Designer Scribbles

8/26 Example

Diagram Interchange Z

Integral part of UML 2.0 (OMG 2003b)

Z

Originated from XMI

Z

Makes UML diagrams layout aware X

(Boger et al. 2002)

Every UML Element is assigned a GraphElement GraphElement

«DataType» Point

+position: Point

+x : Double +y : Double

GraphEdge

GraphNode

+Waypoints {ordered} [2..*] : Point

+size [0..1] : Dimension

«DataType» Dimension +width : Double +height : Double

A UML Profile for GUI Layout - Kai Blankenhorn, Mario Jeckle Motivation Foundation Previous Work Metamodel UML 2 Diagram Interchange Designer Scribbles

9/26 Example

Designer Scribbles

Z

Hand-drawn abstraction of a GUI’s design Design ideas and considerations Common practice among designers Commonly used symbols for widgets

Z

Sometimes abstracted into wireframes

Z Z Z

A UML Profile for GUI Layout - Kai Blankenhorn, Mario Jeckle Motivation Foundation Previous Work Interactive Sketching UWE OMMMA-L

Metamodel

10/26 Example

Interactive Sketching Z

Pinto-Albuquerque (2000) X X X X

Z

DENIM X X X X

Z

Layout documents with hand-drawn shapes using shape recognition Emphasis on converting sketches into HTML documents No formal model is created Notation of its own

(Lin et al. 2000)

Sketch recognition Emphasis on creating a complete model of the UI Formal model not connected to UML Notation derived from designer sketches

Can be used for sketching UML diagrams

A UML Profile for GUI Layout - Kai Blankenhorn, Mario Jeckle Motivation Foundation Previous Work Interactive Sketching UWE OMMMA-L

Metamodel

11/26 Example

UWE Z Z Z Z

UML-based Web Engineering (Hennicker & Koch 2001) Proposes a design process and models for hypermedia design Based on a UML 1.x profile Presentational model: X X X X

Structural organization of the presentation Substitute for sketching Notation of its own Layout information not established in the metamodel

A UML Profile for GUI Layout - Kai Blankenhorn, Mario Jeckle Motivation Foundation Previous Work Interactive Sketching UWE OMMMA-L

Metamodel

12/26 Example

OMMMA-L Z Z Z

Visual Language for the Object-Oriented Modeling of MultiMedia Applications (Sauer & Engels 1999) Heavyweight extension of UML Presentation diagram: X X X

Static and dynamic elements Bounding boxes mark areas on the screen Layout information not established in the metamodel

A UML Profile for GUI Layout - Kai Blankenhorn, Mario Jeckle Motivation Foundation Previous Work Metamodel General structure Stereotypes GUI Layout package

Example ScreenArea Inheritance

13/26 References Package

General Structure Z

Technically X X X X

Z

Division of a Screen into ScreenAreas X X

Z

Stereotypes of Class contained in a UML 2.0 profile Interrelated using stereotyped Associations User-defined stereotype icons Semantics modelled using OCL constraints on the stereotypes

ContainerScreenArea: contains other ScreenAreas FunctionalScreenArea: owns one or more UIFunctionalities

UIFunctionalities X X

StaticUIFunctionalities: Text, Image, Heading, Logo ActivatableUIFunctionalities: Link, Form, Navigation, Workspace

A UML Profile for GUI Layout - Kai Blankenhorn, Mario Jeckle Motivation Foundation Previous Work Metamodel General structure Stereotypes GUI Layout package

14/26

Example ScreenArea Inheritance

General Structure

References Package

(cont'd)

Z

Top level element in a model: Screen

Z

Screen and ContainerScreenAreas form a hierarchy X X

Similar to the window metaphor Position relative to parent position

A UML Profile for GUI Layout - Kai Blankenhorn, Mario Jeckle Motivation Foundation Previous Work Metamodel General structure Stereotypes GUI Layout package

Example ScreenArea Inheritance

15/26 References Package

Stereotypes used Z Z

Extracted and abstracted from designer sketches ScreenArea X X

Z

Represents an area within a screen of a graphical user interface that serves a purpose (think of tissue as an analogy) Subclasses: FunctionalScreenArea, ContainerScreenArea (notation basically the same)

Screen X X X

Contains all ScreenAreas that are displayed at a time Special type of ContainerScreenArea Must not be contained in any other ScreenArea

A UML Profile for GUI Layout - Kai Blankenhorn, Mario Jeckle Motivation Foundation Previous Work Metamodel General structure Stereotypes GUI Layout package

Example ScreenArea Inheritance

Stereotypes used Z

16/26 References Package

(cont'd)

StaticUIFunctionalities: static, no behaviour or interaction X

Image: static image, movie or animation

X

Text: continuous text with any alignment

X

Heading: short headline in a larger or otherwise distinct font

X

Logo: pictorial corporate design element

A UML Profile for GUI Layout - Kai Blankenhorn, Mario Jeckle Motivation Foundation Previous Work Metamodel General structure Stereotypes GUI Layout package

Example ScreenArea Inheritance

Stereotypes used Z

17/26 References Package

(cont'd)

ActivatableUIFunctionalities: may have behaviour and can be activated X

Link: navigable link to another ScreenArea

X

Form: requests information from the user

X

Navigation: provides links to all major parts of the system different semantics than a group of links

X

Workspace: interactively manipulating data often a blank area on the screen with special importance

A UML Profile for GUI Layout - Kai Blankenhorn, Mario Jeckle Motivation Foundation Previous Work Metamodel General structure Stereotypes GUI Layout package

18/26

Example ScreenArea Inheritance

References Package

GUI Layout package «stereotype» ScreenArea

Class

+position: Point {subsets position} +size: Dimention {subsets size} +isVisible: Boolean = false +isExternal: Boolean = false

{subsets nestedClassifier} +contained *

DiagramInterchange:: Point DiagramInterchange:: Dimension

{subsets class} 0..1 +container «stereotype» FunctionalScreenArea +owner 1 {subsets class} {subsets nestedClassifier} +functionality

«stereotype» ContainerScreenArea

1..*

«stereotype» UIFunctionality

Class

«stereotype» Screen { self.container->isEmpty() }

«stereotype» ActivatableUIFunctionality

«stereotype» Form

«stereotype» Navigation

«stereotype» Link

«stereotype» Workspace

«stereotype» StaticUIFunctionality

«stereotype» Heading

«stereotype» Image

«stereotype» Logo

«stereotype» Text

A UML Profile for GUI Layout - Kai Blankenhorn, Mario Jeckle Motivation Foundation Previous Work Metamodel General structure Stereotypes GUI Layout package

Example ScreenArea Inheritance

ScreenArea Inheritance Z

ScreenAreas can be abstract X

Z

ScreenAreas can specialize other ScreenAreas X X

Z

Cannot be instanciated

Inheriting their parent, size and position Overwriting their contents

See the following example…

19/26 References Package

A UML Profile for GUI Layout - Kai Blankenhorn, Mario Jeckle Motivation Foundation Previous Work Metamodel General structure Stereotypes GUI Layout package

20/26

Example ScreenArea Inheritance

ScreenArea Inheritance

References Package

(cont'd)

ContentMain CouponForm

OrderConfirmation

OrderForm

OrderSummary

RegistrationForm

A UML Profile for GUI Layout - Kai Blankenhorn, Mario Jeckle Motivation Foundation Previous Work Metamodel General structure Stereotypes GUI Layout package

Example ScreenArea Inheritance

21/26 References Package

References Package Z

Package merged with GUI Layout package

Z

Allow modeling of additional semantics using References X X

LinkReference ScreenFlow

Z

Each Reference targets a ScreenArea

Z

Enables modeling web specific aspects: X X X

Link targets Flow of navigation Sitemaps

A UML Profile for GUI Layout - Kai Blankenhorn, Mario Jeckle Motivation Foundation Previous Work Metamodel General structure Stereotypes GUI Layout package

22/26

Example ScreenArea Inheritance

References Package

References Package (cont'd) «class» Association

«stereotype» Reference

«stereotype» LinkReference {subsets ownedAttribute} +reference

«stereotype» ScreenFlow {subsets ownedAttribute} +reference {subsets classifier} +source

+source {subsets classifier}

*

0..1

«stereotype» ActivatableUIFunctionality

*

0..1

«stereotype» Screen

«stereotype» Form

«stereotype» Navigation

«stereotype» Link { reference->size()