orcas gui profile fábio moura pereira [email protected] luiz francisco lacerda...
TRANSCRIPT
![Page 2: ORCAS GUI Profile Fábio Moura Pereira fabio.mpereira@gmail.com Luiz Francisco Lacerda luiz.francisco.lacerda@gmail.com](https://reader034.vdocuments.us/reader034/viewer/2022051620/56649eda5503460f94bea1e5/html5/thumbnails/2.jpg)
Agenda
Introduction Motivation GUI profile structure GUILayout GUIReferences GUIBehavior Using Orcas GUI Profile
![Page 3: ORCAS GUI Profile Fábio Moura Pereira fabio.mpereira@gmail.com Luiz Francisco Lacerda luiz.francisco.lacerda@gmail.com](https://reader034.vdocuments.us/reader034/viewer/2022051620/56649eda5503460f94bea1e5/html5/thumbnails/3.jpg)
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
![Page 4: ORCAS GUI Profile Fábio Moura Pereira fabio.mpereira@gmail.com Luiz Francisco Lacerda luiz.francisco.lacerda@gmail.com](https://reader034.vdocuments.us/reader034/viewer/2022051620/56649eda5503460f94bea1e5/html5/thumbnails/4.jpg)
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
![Page 5: ORCAS GUI Profile Fábio Moura Pereira fabio.mpereira@gmail.com Luiz Francisco Lacerda luiz.francisco.lacerda@gmail.com](https://reader034.vdocuments.us/reader034/viewer/2022051620/56649eda5503460f94bea1e5/html5/thumbnails/5.jpg)
GUI profile structure
![Page 6: ORCAS GUI Profile Fábio Moura Pereira fabio.mpereira@gmail.com Luiz Francisco Lacerda luiz.francisco.lacerda@gmail.com](https://reader034.vdocuments.us/reader034/viewer/2022051620/56649eda5503460f94bea1e5/html5/thumbnails/6.jpg)
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
![Page 7: ORCAS GUI Profile Fábio Moura Pereira fabio.mpereira@gmail.com Luiz Francisco Lacerda luiz.francisco.lacerda@gmail.com](https://reader034.vdocuments.us/reader034/viewer/2022051620/56649eda5503460f94bea1e5/html5/thumbnails/7.jpg)
GUILayout Package
![Page 8: ORCAS GUI Profile Fábio Moura Pereira fabio.mpereira@gmail.com Luiz Francisco Lacerda luiz.francisco.lacerda@gmail.com](https://reader034.vdocuments.us/reader034/viewer/2022051620/56649eda5503460f94bea1e5/html5/thumbnails/8.jpg)
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
![Page 9: ORCAS GUI Profile Fábio Moura Pereira fabio.mpereira@gmail.com Luiz Francisco Lacerda luiz.francisco.lacerda@gmail.com](https://reader034.vdocuments.us/reader034/viewer/2022051620/56649eda5503460f94bea1e5/html5/thumbnails/9.jpg)
GUILayout Package
Example: Screen
![Page 10: ORCAS GUI Profile Fábio Moura Pereira fabio.mpereira@gmail.com Luiz Francisco Lacerda luiz.francisco.lacerda@gmail.com](https://reader034.vdocuments.us/reader034/viewer/2022051620/56649eda5503460f94bea1e5/html5/thumbnails/10.jpg)
GUILayout Package
Example: Structure diagram
![Page 11: ORCAS GUI Profile Fábio Moura Pereira fabio.mpereira@gmail.com Luiz Francisco Lacerda luiz.francisco.lacerda@gmail.com](https://reader034.vdocuments.us/reader034/viewer/2022051620/56649eda5503460f94bea1e5/html5/thumbnails/11.jpg)
GUILayout Package
Example: Layout diagram
* No layout diagram in Borland Together
![Page 12: ORCAS GUI Profile Fábio Moura Pereira fabio.mpereira@gmail.com Luiz Francisco Lacerda luiz.francisco.lacerda@gmail.com](https://reader034.vdocuments.us/reader034/viewer/2022051620/56649eda5503460f94bea1e5/html5/thumbnails/12.jpg)
GUILayout Package
Inheritance between ScreenAreas
![Page 13: ORCAS GUI Profile Fábio Moura Pereira fabio.mpereira@gmail.com Luiz Francisco Lacerda luiz.francisco.lacerda@gmail.com](https://reader034.vdocuments.us/reader034/viewer/2022051620/56649eda5503460f94bea1e5/html5/thumbnails/13.jpg)
GUILayout Package
Inheritance between ScreenAreas
![Page 14: ORCAS GUI Profile Fábio Moura Pereira fabio.mpereira@gmail.com Luiz Francisco Lacerda luiz.francisco.lacerda@gmail.com](https://reader034.vdocuments.us/reader034/viewer/2022051620/56649eda5503460f94bea1e5/html5/thumbnails/14.jpg)
GUILayout Package
ContainerArea layouts
![Page 15: ORCAS GUI Profile Fábio Moura Pereira fabio.mpereira@gmail.com Luiz Francisco Lacerda luiz.francisco.lacerda@gmail.com](https://reader034.vdocuments.us/reader034/viewer/2022051620/56649eda5503460f94bea1e5/html5/thumbnails/15.jpg)
GUILayout Package
ContainerArea layouts Grid layout Flow layout Box layout Border layout Details:
http://www.webkinesia.com/online/oop/notes/java2.php
![Page 16: ORCAS GUI Profile Fábio Moura Pereira fabio.mpereira@gmail.com Luiz Francisco Lacerda luiz.francisco.lacerda@gmail.com](https://reader034.vdocuments.us/reader034/viewer/2022051620/56649eda5503460f94bea1e5/html5/thumbnails/16.jpg)
GUILayout Package Example: FlowLayout
![Page 17: ORCAS GUI Profile Fábio Moura Pereira fabio.mpereira@gmail.com Luiz Francisco Lacerda luiz.francisco.lacerda@gmail.com](https://reader034.vdocuments.us/reader034/viewer/2022051620/56649eda5503460f94bea1e5/html5/thumbnails/17.jpg)
GUILayout Package
![Page 18: ORCAS GUI Profile Fábio Moura Pereira fabio.mpereira@gmail.com Luiz Francisco Lacerda luiz.francisco.lacerda@gmail.com](https://reader034.vdocuments.us/reader034/viewer/2022051620/56649eda5503460f94bea1e5/html5/thumbnails/18.jpg)
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
![Page 19: ORCAS GUI Profile Fábio Moura Pereira fabio.mpereira@gmail.com Luiz Francisco Lacerda luiz.francisco.lacerda@gmail.com](https://reader034.vdocuments.us/reader034/viewer/2022051620/56649eda5503460f94bea1e5/html5/thumbnails/19.jpg)
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
![Page 20: ORCAS GUI Profile Fábio Moura Pereira fabio.mpereira@gmail.com Luiz Francisco Lacerda luiz.francisco.lacerda@gmail.com](https://reader034.vdocuments.us/reader034/viewer/2022051620/56649eda5503460f94bea1e5/html5/thumbnails/20.jpg)
GUILayout Package
Example: Screen
![Page 21: ORCAS GUI Profile Fábio Moura Pereira fabio.mpereira@gmail.com Luiz Francisco Lacerda luiz.francisco.lacerda@gmail.com](https://reader034.vdocuments.us/reader034/viewer/2022051620/56649eda5503460f94bea1e5/html5/thumbnails/21.jpg)
GUILayout Package
Example: Structure
![Page 22: ORCAS GUI Profile Fábio Moura Pereira fabio.mpereira@gmail.com Luiz Francisco Lacerda luiz.francisco.lacerda@gmail.com](https://reader034.vdocuments.us/reader034/viewer/2022051620/56649eda5503460f94bea1e5/html5/thumbnails/22.jpg)
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
![Page 23: ORCAS GUI Profile Fábio Moura Pereira fabio.mpereira@gmail.com Luiz Francisco Lacerda luiz.francisco.lacerda@gmail.com](https://reader034.vdocuments.us/reader034/viewer/2022051620/56649eda5503460f94bea1e5/html5/thumbnails/23.jpg)
GUIReferences Package
![Page 24: ORCAS GUI Profile Fábio Moura Pereira fabio.mpereira@gmail.com Luiz Francisco Lacerda luiz.francisco.lacerda@gmail.com](https://reader034.vdocuments.us/reader034/viewer/2022051620/56649eda5503460f94bea1e5/html5/thumbnails/24.jpg)
GUIReferences Package
Example - EnlargePhotoLink
![Page 25: ORCAS GUI Profile Fábio Moura Pereira fabio.mpereira@gmail.com Luiz Francisco Lacerda luiz.francisco.lacerda@gmail.com](https://reader034.vdocuments.us/reader034/viewer/2022051620/56649eda5503460f94bea1e5/html5/thumbnails/25.jpg)
GUIReferences Package
Examples – Links and storyboards
![Page 26: ORCAS GUI Profile Fábio Moura Pereira fabio.mpereira@gmail.com Luiz Francisco Lacerda luiz.francisco.lacerda@gmail.com](https://reader034.vdocuments.us/reader034/viewer/2022051620/56649eda5503460f94bea1e5/html5/thumbnails/26.jpg)
GUIBehavior Package
![Page 27: ORCAS GUI Profile Fábio Moura Pereira fabio.mpereira@gmail.com Luiz Francisco Lacerda luiz.francisco.lacerda@gmail.com](https://reader034.vdocuments.us/reader034/viewer/2022051620/56649eda5503460f94bea1e5/html5/thumbnails/27.jpg)
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
![Page 28: ORCAS GUI Profile Fábio Moura Pereira fabio.mpereira@gmail.com Luiz Francisco Lacerda luiz.francisco.lacerda@gmail.com](https://reader034.vdocuments.us/reader034/viewer/2022051620/56649eda5503460f94bea1e5/html5/thumbnails/28.jpg)
GUIBehavior Package
Kinds of behavior
![Page 29: ORCAS GUI Profile Fábio Moura Pereira fabio.mpereira@gmail.com Luiz Francisco Lacerda luiz.francisco.lacerda@gmail.com](https://reader034.vdocuments.us/reader034/viewer/2022051620/56649eda5503460f94bea1e5/html5/thumbnails/29.jpg)
GUIBehavior Package
Example: mouse clicked on ButtonProxima
![Page 30: ORCAS GUI Profile Fábio Moura Pereira fabio.mpereira@gmail.com Luiz Francisco Lacerda luiz.francisco.lacerda@gmail.com](https://reader034.vdocuments.us/reader034/viewer/2022051620/56649eda5503460f94bea1e5/html5/thumbnails/30.jpg)
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
![Page 31: ORCAS GUI Profile Fábio Moura Pereira fabio.mpereira@gmail.com Luiz Francisco Lacerda luiz.francisco.lacerda@gmail.com](https://reader034.vdocuments.us/reader034/viewer/2022051620/56649eda5503460f94bea1e5/html5/thumbnails/31.jpg)
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
![Page 32: ORCAS GUI Profile Fábio Moura Pereira fabio.mpereira@gmail.com Luiz Francisco Lacerda luiz.francisco.lacerda@gmail.com](https://reader034.vdocuments.us/reader034/viewer/2022051620/56649eda5503460f94bea1e5/html5/thumbnails/32.jpg)
Orcas GUI profile
Transparências: ~lfblj/orcas_gui_profile/ppt/OrcasGUIProfile_v0.4_1.0.ppt
Fim