Orcas gui profile
This presentation is the property of its rightful owner.
Sponsored Links
1 / 32

ORCAS GUI Profile PowerPoint PPT Presentation


  • 58 Views
  • Uploaded on
  • Presentation posted in: General

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

Download Presentation

ORCAS GUI Profile

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Orcas gui profile

ORCAS GUI Profile

Fábio Moura Pereira

[email protected]

Luiz Francisco Lacerda

[email protected]


Agenda

Agenda

  • Introduction

  • Motivation

  • GUI profile structure

  • GUILayout

  • GUIReferences

  • GUIBehavior

  • Using Orcas GUI Profile


Introduction

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

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

GUI profile structure


Guilayout package

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 package1

GUILayout Package


Guilayout package2

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 package3

GUILayout Package

  • Example: Screen


Guilayout package4

GUILayout Package

  • Example: Structure diagram


Guilayout package5

GUILayout Package

  • Example: Layout diagram

    * No layout diagram in Borland Together


Guilayout package6

GUILayout Package

  • Inheritance between ScreenAreas


Guilayout package7

GUILayout Package

  • Inheritance between ScreenAreas


Guilayout package8

GUILayout Package

  • ContainerArea layouts


Guilayout package9

GUILayout Package

  • ContainerArea layouts

    • Grid layout

    • Flow layout

    • Box layout

    • Border layout

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


Guilayout package10

GUILayout Package

  • Example: FlowLayout


Guilayout package11

GUILayout Package


Guilayout package12

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 package13

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 package14

GUILayout Package

  • Example: Screen


Guilayout package15

GUILayout Package

  • Example: Structure


Guireferences package

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 package1

GUIReferences Package


Guireferences package2

GUIReferences Package

  • Example - EnlargePhotoLink


Guireferences package3

GUIReferences Package

  • Examples – Links and storyboards


Guibehavior package

GUIBehavior Package


Guibehavior package1

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 package2

GUIBehavior Package

  • Kinds of behavior


Guibehavior package3

GUIBehavior Package

  • Example: mouse clicked on ButtonProxima


Using orcas gui profile

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 profile1

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 profile1

Orcas GUI profile

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

    Fim


  • Login