ORCAS GUI Profile
32
description
ORCAS GUI Profile. Fábio Moura Pereira [email protected] Luiz Francisco Lacerda [email protected]. Agenda. Introduction Motivation GUI profile structure GUILayout GUIReferences GUIBehavior Using Orcas GUI Profile. Introduction. ORCAS GUI Profile - PowerPoint PPT Presentation
Transcript of ORCAS GUI Profile
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
