1 / 32

ORCAS GUI Profile

This guide provides an in-depth exploration of the Orcas GUI Profile, a modeling approach for GUI design that emphasizes the layout and behavior of visual interfaces. It covers essential aspects, including GUI structure, navigation, and UI element classification. The guide discusses the importance of GUI in software systems, detailing how traditional software engineering processes often overlook GUI design. Additionally, it includes UML 2.0 profiling, layout diagrams, and practical examples for implementing the Orcas GUI Profile in various software development environments.

marja
Télécharger la présentation

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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. Agenda • Introduction • Motivation • GUI profile structure • GUILayout • GUIReferences • GUIBehavior • Using Orcas GUI Profile

  3. 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

  4. 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

  5. GUI profile structure

  6. 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

  7. GUILayout Package

  8. 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

  9. GUILayout Package • Example: Screen

  10. GUILayout Package • Example: Structure diagram

  11. GUILayout Package • Example: Layout diagram * No layout diagram in Borland Together

  12. GUILayout Package • Inheritance between ScreenAreas

  13. GUILayout Package • Inheritance between ScreenAreas

  14. GUILayout Package • ContainerArea layouts

  15. GUILayout Package • ContainerArea layouts • Grid layout • Flow layout • Box layout • Border layout • Details: http://www.webkinesia.com/online/oop/notes/java2.php

  16. GUILayout Package • Example: FlowLayout

  17. GUILayout Package

  18. 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

  19. 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

  20. GUILayout Package • Example: Screen

  21. GUILayout Package • Example: Structure

  22. 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

  23. GUIReferences Package

  24. GUIReferences Package • Example - EnlargePhotoLink

  25. GUIReferences Package • Examples – Links and storyboards

  26. GUIBehavior Package

  27. 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

  28. GUIBehavior Package • Kinds of behavior

  29. GUIBehavior Package • Example: mouse clicked on ButtonProxima

  30. 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

  31. 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

  32. Orcas GUI profile • Transparências: ~lfblj/orcas_gui_profile/ppt/OrcasGUIProfile_v0.4_1.0.ppt Fim

More Related