1 / 82

GUI Modeling with UML2

GUI Modeling with UML2. Fábio M. Pereira fmp2@cin.ufpe.br. GUI Modeling with UML2. Introduction ORCAS UML2 Profile for GUI Modeling The 2D Package A Model Driven Component Based Development Process for GUI Engineering. User Interface Design.

sequoia
Download Presentation

GUI Modeling with UML2

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. GUI Modelingwith UML2 Fábio M. Pereira fmp2@cin.ufpe.br

  2. GUI Modelingwith UML2 • Introduction • ORCAS UML2 Profile for GUI Modeling • The 2D Package • A Model Driven Component Based Development Process for GUI Engineering GUI Modeling with UML2

  3. User Interface Design • Is the design of computers, gadgets, appliances, machines, mobile communication devices, software applications, and websites with the focus on the user's experience and interaction • The goal of user interface design is to make the users’ interaction experience as simple and intuitive as possible – what is often called user-centered design • The user interface must fit the users’ ways of thinking about and performing their work GUI Modeling with UML2

  4. The Core Characteristics of GUID • Users should be involved through the development of the project • Goals need to be identified, clearly documented and agreed upon at the beginning of the project • Iteration is needed through the core activities because the first design is almost never right • Classic process: GUI Modelingwith UML2

  5. Prototyping • Prototyping is an iterative development technique in which users are actively involved in the mocking-up of the User Interface for a system • Prototypes have several purposes: • (1) as an analysis artifact that enables to explore the problem space with stakeholders; • (2) as a design artifact that enables to explore the solution space of the system; • (3) a basis from which to explore the usability of the system; • (4) a vehicle to communicate the possible User Interface design(s) of the system; and • (5) a potential foundation from which to continue developing the system. GUI Modeling with UML2

  6. Prototypes with different levels of details

  7. ORCAS UML2 Profile for GUI Modeling GUI Modeling with UML2

  8. ORCAS UML2 Profile for GUI Modeling • Model Driven GUI Development • Component Based Development - KobrA2 • GEF Editorsfor development of non-standard diagrams (GUI Layout) • Import from different tools • XML based tools • IDE tools • 1st version: Lacerda’s master thesis “UML2 Profile and Process for Component Based Model Driven GUID” • Improves the previous approaches to user interface design using UML (Koch, N. & Blankenhorn, K.) GUI Modeling with UML2

  9. Architecture provides presentation and user dialog logic User Domain Presentation Tier User Interface provides the user’s model, which may include user session logic and user-side representations of processes and information, and local persistence services User Service Business Domain Business Logic Tier provides enterprise-level services, and is responsible for protecting the integrity of enterprise resources at the business logic level Data Tier provides global persistence services, typically in the form of databases GUI Modeling with UML2

  10. ORCAS GUI Profile Package Structure Inspect for user actions Color, Font and Border configuration Screen or Frame transitions Receive or group Controls and Containers Screen Widgets 2D graphics representation GUI Modeling with UML2

  11. Visual X Real Representation OCL contextGUIElement::container :Bag(Container) derive: self.base_Class. ownedAttribute-> ... GUI Modeling with UML2

  12. The Layout Package Abstract stereotype that represents any structural element of the GUI GUI Modeling with UML2

  13. Constraints • GUIElement • Derived association container: contextGUIElement::container : Bag(Container) derive: self.base_Class.ownedAttribute-> select(isComposite).association.endType-> select(oclIsKindOf(Container)).oclAsType(Container)-> first() • Only Window and PopupMenu elements do not need to be into a Container: ifself.oclIsKindOf(Window) orself.oclIsKindOf(PopupMenu) thenself.container.oclIsUndefined() elsenotself.container.oclIsUndefined() endif • Dimension inv: width >= 0 and height >= 0 • Point inv: x > = 0 and y >= 0 GUI Modeling with UML2

  14. The Styles Package GUI Modeling with UML2

  15. Constraints • Border inv: width >= 0 • Font inv: size >= 8 • Color inv: r >= 0 and r <= 255 inv: g >= 0 and g <= 255 inv: b >= 0 and b <= 255 context Color::BLACK derive Color(0, 0, 0) context Color::WHITE derive Color(255, 255, 255) ... GUI Modeling with UML2

  16. The Containers Package GUI Modeling with UML2

  17. Container • Abstract stereotype that represents any GUIElement that can contain other GUIElement (Container or Control) • Constraints • Derived association contained: context Container::contained : OrderedSet(GUIElement) derive: self.base_Class.ownedAttribute-> select(isComposite).association.endType-> select(oclIsKindOf(GUIElement)).oclAsType(GUIElement) ->asOrderedSet() • A container cannot contain itself: inv: notself.contained->includes(self) GUI Modeling with UML2

  18. Window Abstract stereotype that represents a Window – an area of the screen, usually rectangular in shape, defined by a border GUI Modeling with UML2

  19. Types of Windows • The type of window used will depend on the nature and flow of the task • Primary Window • Is the first one that appears on a screen when an activity or action is started • It is required for every function or application GUI Modeling with UML2

  20. Types of Windows • Secondary Window • Secondary windows are supplemental windows • Obtain or display supplemental information that is usually related to the objects that appear in a primary window • Secondary windows may be dependent upon a primary window or displayed independently of the primary window GUI Modeling with UML2

  21. Types of Windows • Dialog Boxes • Secondary window • Use for presenting brief messages • Use for requesting specific, transient actions • Use for performing actions that: • Take a short time to complete • Are not frequently changed • Command buttons to include: • OK, Cancel, Others as necessary • Common dialog boxes interfaces: • Open/Replace/Find • Save As/Print/Print Setup • Page Setup/Font/Color GUI Modeling with UML2

  22. Other Types of Secondary Windows • Property Inspectors • To display the most common or frequently accessed properties of a current selection, usually of a particular type of object • Property Sheets • For presenting the complete set of properties for an object • Message Boxes • To provide information about a particular situation or condition (Information/Warning/Critical) • Palette Windows • To present a set of controls such as palettes or toolbars • Pop-Up Windows • To display additional information when an abbreviated form of the information is the main presentation GUI Modeling with UML2

  23. Window Abstract stereotype that represents a Window – an area of the screen, usually rectangular in shape, defined by a border GUI Modeling with UML2

  24. Frames • Multiple Web screen panes that permit the displaying of multiple documents on a page • These documents can be independently viewed, scrolled, and updated • The documents are presented in a tiled format • Guidelines: • Use only a few frames (three or less) at a given time • Choose sizes based upon the type of information to be presented • Never force viewers to resize frames to see information • Never use more than one scrolling region on a page GUI Modeling with UML2

  25. Frames Represents a group of frames that occupy the same screen area (Container) A screen area containing tabbed dividers that create pages or sections A general-purpose container for lightweight components A lightweight object that provides many of the features of a native window, including dragging, closing, becoming an icon, resizing, title display, and support for a menu bar GUI Modeling with UML2

  26. Constraints • FrameSet • It must contain only frames and at least two: inv: contained->forAll(oclIsTypeOf(Frame)) inv: contained->size() >= 2 • TabControl • It must contain only frames: inv: contained->forAll(oclIsTypeOf(Frame)) • Derived association activeFrame: contextTabControl::activeFrame : Frame derive: self.contained->select(f | f.oclAsType(Frame).isActive) ->first() • Frame • It must exist only one active frame per time: inv: container.oclIsTypeOf(FrameSet) or container. oclIsTypeOf(TabControl) implies container.contained-> one(i | i.oclAsType(Frame).isActive) GUI Modeling with UML2

  27. Other Containers (1) A panel that contains a set of controls to provide easy and fast access to most frequently used commands or options across multiple screens A menu provides a space-saving way to let the user choose one of several options. A small window that pops up and displays a series of choices Represents each cell of a grid It is used to display and edit regular two-dimensional tables of cells GUI Modeling with UML2

  28. Constraints • A ToolBar can contain only controls, combo boxes or other toolbars: inv: contained->forAll( oclIsKindOf(Control) ) or contained->forAll( oclIsTypeOf(ComboBox) ) or contained->forAll( oclIsTypeOf(ToolBar) ) • Menu • It must be contained into a window or frame: inv: oclIsTypeOf(Menu) impliescontainer.oclIsKindOf(Window) orcontainer.oclIsKindOf(Frame) • It must contain only other menus, menu items, separators, check boxes or radio groups: inv: contained->forAll(oclIsTypeOf(Menu) or oclIsTypeOf(MenuItem) oroclIsTypeOf(Separator) or oclIsTypeOf(CheckBox) oroclIsTypeOf(RadioGroup)) GUI Modeling with UML2

  29. Constraints • Grid • It must contain only grid cells: inv: contained->forAll(oclIsTypeOf(GridCell)) • Its size equals the number of rows times the number of columns: inv: contained->size() <= self.rows * self.columns • GridCell • It must be contained into a grid: inv: container.oclIsTypeOf(Grid) • It must contain only one element: inv: contained->size() <= 1 GUI Modeling with UML2

  30. Other Containers (2) A group of radio buttons A group of related elements It combines a button or editable field and a drop-down list. The user can select a value from the drop-down list. It can include an editable field into which the user can type a value A set of hierarchical data It displays a list of objects and allows the user to select one or more items A node of a tree GUI Modeling with UML2

  31. Constraints • RadioGroup must contain only radio buttons and at least two: inv: contained->forAll(oclIsTypeOf(RadioButton)) inv: contained->size() >= 2 • Tree must contain only tree nodes: inv: contained->forAll(oclIsTypeOf(TreeNode)) • TreeNode • It must contain only tree nodes: inv: contained->forAll(oclIsTypeOf(TreeNode)) • It must be contained into a tree or tree node: inv: container.oclIsTypeOf(Tree) or container.oclIsTypeOf(TreeNode) GUI Modeling with UML2

  32. Constraints • ComboBox • It must contain only items: inv: contained->forAll(oclIsTypeOf(Item)) • Derived association selectedItem: contextComboBox::selectedItem : Item derive: self.contained->select( i | i.oclAsType(Item).selected) ->first() • ListBox • It must contain only items: inv: contained->forAll(oclIsTypeOf(Item)) • Derived association selectedItems: contextListBox::selectedItems : Bag(Item) derive: self.contained->select( i | i.oclAsType(Item).selected) .oclAsType(Item)->asBag() • If it is not multi-select then only one item can be selected: inv: not self.multiSelectimplies self.selectedItems->size() <= 1 GUI Modelingwith UML2

  33. The Controls Package GUI Modeling with UML2

  34. The Controls Package • Controls(sometimes called widgets) are the elements of a screen that constitute its body • A control may: • Permit the entry or selection of a particular value • Permit the changing or editing of a particular value • Display only a particular piece of text, value, or graphic • Cause a command to be performed • Possess a contextual pop-up window • Three extremely important principles regarding controls: • A control must look the way it works and must work the way it looks • A control must be used exactly as its design intended • A control must be presented in a standard manner GUI Modeling with UML2

  35. Controls (1) provides a general purpose component for implementing divider lines - most commonly used as a divider between menu items that breaks them up into logical groupings a generic way of representing images in different formats A button that has two states: pressed or not pressed Displays an external web page into the application A square or rectangular-shaped control with a label inside that indicates action to be accomplished GUI Modeling with UML2

  36. Controls (2) An item that can be selected or deselected, and which displays its state to the user. By convention, any number of check boxes in a group can be selected A component that visually displays the progress of some task An item that can be selected or deselected, and which displays its state to the user. Used with a RadioGroup object to create a group of buttons in which only one button at a time can be selected A component that lets the user graphically select a value by sliding a knob within a bounded interval GUI Modeling with UML2

  37. Constraints • Image transparency must be between 0 and 100: inv: transparency >= 0 and transparency <= 100 • RadioButton must be contained into a RadioGroup: inv: container.oclIsTypeOf(RadioGroup) GUI Modeling with UML2

  38. Controls (3) A display area for a short text string It allows to easily input a date A control, usually rectangular in shape, in which text may be entered or edited An item of a Menu It lets the user choose from a range of values A ComboBox or ListBox item It adds support to specify the valid set of characters that can be typed in a text field A multiple line text box GUI Modeling with UML2

  39. Constraints • MenuItem • It must be contained into a menu: inv: container.oclIsKindOf(Menu) • The mnemonic must be unique to a menu group: inv: container.contained->select(oclIsTypeOf(MenuItem))-> isUnique( mit | mit.oclAsType(MenuItem).mnemonic) • Item • It must be contained into a combo box or list box: inv: container.oclIsTypeOf(ComboBox) or container.oclIsTypeOf(ListBox) • If it is contained into a combo box or into a not multi select list box then just one item can be selected per time: inv: container.oclIsTypeOf(ComboBox) implies container.contained->select(i | i.oclAsType(Item). selected)-> size() <= 1 inv: container.oclIsTypeOf(ListBox) andnot container.oclAsType(ListBox).multiSelectimplies container.contained->select(i | i.oclAsType(Item). selected)->size() <= 1 GUI Modeling with UML2

  40. Constraints • Spinner does not have phone and password format types: inv: type <> FormatType::PHONE and type <> FormatType::PASSWORD GUI Modeling with UML2

  41. The Navigation Package An association between a container (Window, FrameSet or InternalFrame) and another container (Window or Frame) or external resource GUI Modeling with UML2

  42. Constraints • Link • The association must have two ends: inv: base_Association.memberEnd->size() = 2 • It must have just one owned end: inv: base_Association.ownedEnd->size() = 1 • The owned end must be a container: inv: base_Association.ownedEnd->forAll(e | e.oclIsTypeOf(Container)) • Derived association source: context Link::source : Container derive: base_Association.ownedEnd->first() .type.oclAsType(Container) • The source must be a window, a frame set or an internal frame: inv: source.oclIsKindOf(Window) or source.oclIsTypeOf(FrameSet) or source.oclIsTypeOf(InternalFrame) GUI Modeling with UML2

  43. Constraints • Link (cont.) • Derived association target: context Link::target : Class derive: ( self.base_Association.memberEnd – self.base_Association.ownedEnd )->asOrderedSet()-> first().type.oclAsType(Class) • The target must be a window, a frame or an external resource: inv: target.oclIsKindOf(Window) or target.oclIsKindOf(Frame) or target.oclIsTypeOf(ExternalResource) • If the target is a frame then the transition type must be simple: inv: target.oclIsKindOf(Frame) implies self.transitionType = TransitionType::SIMPLE • If the target is a dialog box then the transition type must lock the source window: inv: target.oclIsKindOf(DialogBox) implies self.transitionType = TransitionType::LOCK_SOURCE_WINDOW GUI Modeling with UML2

  44. The Events Package GUI Modeling with UML2

  45. The Events Package • IListener is an abstract interface that represents a mechanism to watch changes (or acts) in the user interface • It enables to control the behavior of the system in response to user actions • A GUI element that wants to react to some user action must implement its operations • It is classified into: • General event (ActionListener); • Keyboard events; • Mouse events; • Focus events; and • Window events GUI Modeling with UML2

  46. Events (1) This operation defines the reaction to a general event An action listener defines what should be done when an action is performed by the user (clicks a button, chooses a menu item, presses Enter in a text field, etc.) This operation is invoked when a component loses the keyboard focus Focus events are fired whenever a component gains or loses the keyboard focus This operation is invoked when a component gains the keyboard focus GUI Modeling with UML2

  47. Constraints • IActionListener • Derived association ownedOperation that redefines ownedOperation from the UML Interface: contextIActionListener::ownedOperation : ActionPerformed derive: base_Class.ownedOperation.oclAsType(ActionPerformed) ->asBag() • All operations must be of the ActionPerformed type: inv: base_Class.ownedOperation-> forAll(oclIsKindOf(ActionPerformed)) • ActionPerformed • Its interface must be an IActionListener: inv: base_Operation.interface.oclIsTypeOf(IActionListener) • Its modifier cannot be the CAPS LOCK key: inv: modifier <> ModifierKey::CAPS_LOCK GUI Modeling with UML2

  48. Constraints • IFocusListener • Derived association ownedOperation: contextIFocusListener::ownedOperation : FocusEvent derive: base_Class.ownedOperation.oclAsType(FocusEvent) ->asBag() • All operations must be of the FocusEvent type: inv: base_Class.ownedOperation-> forAll(oclIsKindOf(FocusEvent)) • FocusEvent interface must be an IFocusListener: inv: base_Operation.interface.oclIsTypeOf(IFocusListener) GUI Modeling with UML2

  49. Events (2) Key events indicate when the user is typing at the keyboard. Specifically, key events are fired by the component with the keyboard focus when the user presses or releases keyboard keys This operation is called just after the user types a character Called just after the user presses a key Called just after the user releases a key GUI Modeling with UML2

  50. Constraints • IKeyboardListener • Derived association ownedOperation: contextIKeyboardListener::ownedOperation : KeyboardEvent derive: base_Class.ownedOperation.oclAsType(KeyboardEvent) ->asBag() • All operations must be of the KeyboardEvent type: inv: base_Class.ownedOperation-> forAll(oclIsKindOf(KeyboardEvent)) • KeyboardEvent interface must be an IKeyboardListener: inv: base_Operation.interface.oclIsTypeOf(IKeyboardListener) GUI Modeling with UML2

More Related