ORCAS GUI Profile Fábio Moura Pereira fabio.mpereira@gmail.com Luiz Francisco Lacerda luiz.francisco.lacerda@gmail.com.

ORCAS GUI Profile

Fábio Moura Pereira

fabio.mpereira@gmail.com

Luiz Francisco Lacerda

luiz.francisco.lacerda@gmail.com

Agenda

Introduction Motivation GUI profile structure GUILayout GUIReferences GUIBehavior Using Orcas GUI Profile

Introduction

ORCAS GUI Profile A modeling approach to GUI design Suports MDA (or will; it’s our goal!) Focuses on GUI layout and behavior modeling It’s an ongoing work Consists of

UML 2 profile Diagrams for GUI structure, layout, navigation and

behavior

Motivation

GUI is very important part of a software system

Can be critical for commercial sucess SE processess care little about GUI design,

handing it to GUI designers without process, modeling or integration

UML does not provide means to model GUI aspects of systems

GUI profile structure

GUILayout Package

Screen Contains all elements of a GUI that are displayed

by an output device in a moment of time ScreenArea

An area within an Screen ContainerScreenArea

A ScreenArea that can contain other ScreenAreas FunctionalScreenArea

A ScreenArea that contain one or more funcionalities

GUILayout Package

GUILayout Package

Diagrams Structural: class diagram showing the structure of

the Screen elements Layout: class diagram showing the disposition

and size of the Screen elements

GUILayout Package

Example: Screen

GUILayout Package

Example: Structure diagram

GUILayout Package

Example: Layout diagram

* No layout diagram in Borland Together

GUILayout Package

Inheritance between ScreenAreas

GUILayout Package

Inheritance between ScreenAreas

GUILayout Package

ContainerArea layouts

GUILayout Package

ContainerArea layouts Grid layout Flow layout Box layout Border layout Details:

http://www.webkinesia.com/online/oop/notes/java2.php

GUILayout Package Example: FlowLayout

GUILayout Package

GUILayout Package

ActivableUIElements Button

An area of the Screen that triggers something when activated

Link An area of the Screen that takes to another Screen or

ScreenArea when activated

Menu item An option from a menu that triggers something when activated

Workspace A GUI element that is used to interactively edit arbitrary data

GUILayout Package

NonActivableUIElements Text

A continuous text of arbitrary size

Image A screen area that displays a static or moving non-interactive

image

Form Stores temporarily input data from user through text boxex,

data selectors etc.

Menu A set of menu items

GUILayout Package

Example: Screen

GUILayout Package

Example: Structure

GUIReferences Package

LinkReference A link between an activable UI element and a Screen

or ScreenArea Navigation diagram

A layout diagram that shows the navigation paths between the system screens and screen areas

Elements should be specified previously in the structure diagram

Only the elements involved in the navigation should be presented

GUIReferences Package

GUIReferences Package

Example - EnlargePhotoLink

GUIReferences Package

Examples – Links and storyboards

GUIBehavior Package

GUIBehavior Package

Kinds of behavior Activity

The specification of behavior as the coordinated sequencing of subordinate units whose individual elements are actions

Interaction A unit of behavior that focuses on the observable exchange of

information between conectable elements

StateMachine Expresses behavior as a graph of state nodes connected by

transition arcs, which are triggered by event occurrencesStateMachine

OpaqueBehavior A behavior with implementation-specific semantics

GUIBehavior Package

Kinds of behavior

GUIBehavior Package

Example: mouse clicked on ButtonProxima

Using Orcas GUI profile

Profile for RSM Download file:

~lfblj/orcas_gui_profile/files/rsm/OrcasGUIProfile_v0.4.epx

In RSM Right-click model > Properties Select ‘AppliedProfile’ option Click ‘Insert New Profile’ button ( ) Select downloaded file

Using the profile Create an UML element Select ‘Stereotypes’ tab in ‘Properties’ panel Click ‘Add Stereotypes’ button and add the desired

stereotype for the element

Using Orcas GUI profile

Profile for Together Download file:

~lfblj/orcas_gui_profile/files/together/OrcasGUIProfile_v0.4.zip

Unzip it in the following Together folder: Borland\Together\Architect2006\eclipse\plugins\

Run Together Right-click project > Properties Select ‘UML Profiles’ option Select ‘OrcasGUIProfile_v0.4’

Using the profile Create an UML element Select ‘Stereotypes’ tab in ‘Properties’ panel Click ‘...’ and add the desired stereotype to the element

Orcas GUI profile

Transparências: ~lfblj/orcas_gui_profile/ppt/OrcasGUIProfile_v0.4_1.0.ppt

Fim