A UML Profile for GUI Layout Master’s Thesis of Kai Blankenhorn May 23, 2004 A UML Profile for GUI Layout Master’s Thesis University of Applied Sciences Furtwangen Department of Digital Media Kai Blankenhorn Eidesstattliche Erklärung Ich erkläre hiermit an Eides statt, dass ich die vorliegende Master-Thesis selbständig und ohne unzulässige fremde Hilfe angefertigt habe. Alle verwendeten (Online-)Quellen und Hilfsmittel sind angegeben. Furtwangen, den 23.05.2004 I Abstract vii I Abstract The Unified Modeling Language (UML) is a visual language for modeling complex applications. Although most of today’s applications have some sort of graphical user interface (GUI), the UML does not specify a diagram capable of creating a model of a GUI’s visual appearance. How- ever, coupling GUI design to software design more tightly is desirable to create a complete model of an application prior to implementation, thus to avoid as much errors as possible. Hence, we have developed the UML 2.0 Profile for GUI layout to support modeling of GUIs in UML-based software development processes. In contrast to earlier approaches, our profile pro- vides an easily comprehensible abstract representation of an actual screen based on designers’ sketches. A GUI Layout Diagram consists of a Screen, which contains multiple ScreenAreas. Each may be decorated with one or more Stereotypes, representing performed functionalities like text, image or link. By nesting and arranging properly stereotyped ScreenAreas within each other, the developer is able to create an abstract version of a user interface. The Naviga- tional Diagram provides UML-based support for common design artifacts like storyboards and sitemaps. The diagrams created can be linked to Use Case modeling using existing UML mechanisms to specify requirements and context of a particular screen. Additionally, GUI Lay- out Diagrams may be used with Activities to model workflows and interaction. By aligning the architecture of our profile with UML’s extension mechanisms and by using the inherent layout information added to UML 2.0 by Diagram Interchange, we create a standards- based solution that should be easy to adopt for tool vendors. viii II Contents II Contents 1 Introduction...................................................................................................................................1 2 Basics...............................................................................................................................................3 2.1 UML ........................................................................................................................................3 2.2 Graphical User Interface Design...........................................................................................5 3 Analysis...........................................................................................................................................9 3.1 Software Design ................................................................................................................... 10 3.1.1 Software Design Processes...................................................................................... 10 3.1.2 Domains.................................................................................................................. 11 3.1.3 Artifacts................................................................................................................... 13 3.1.4 Tool Support .......................................................................................................... 14 3.2 GUI Design ........................................................................................................................... 15 3.2.1 GUI Design Process................................................................................................. 15 3.2.2 Domains.................................................................................................................. 16 3.2.3 Artifacts................................................................................................................... 17 3.2.4 Tool Support .......................................................................................................... 23 3.2.5 Low- vs. High-Fidelity Prototypes ......................................................................... 23 3.2.6 Observations ........................................................................................................... 26 3.3 Conclusion: Integrate Software and GUI Design.............................................................. 26 3.3.1 Why is it needed?..................................................................................................... 26 3.3.2 What will it do? ....................................................................................................... 27 3.4 Approaches to Integration.................................................................................................. 29 3.4.1 Using basic UML ..................................................................................................... 30 3.4.2 Other Approaches .................................................................................................. 35 3.4.3 Diagram Interchange............................................................................................. 37 4 Requirements and Goals............................................................................................................. 39 4.1 Requirements....................................................................................................................... 40 4.1.1 User Groups............................................................................................................ 40 4.1.2 Workflows............................................................................................................... 42 4.1.3 Summary of Requirements................................................................................... 42 4.2 Goals ..................................................................................................................................... 43 4.3 Evaluation of Existing Approaches..................................................................................... 43 II Contents ix 5 Design ........................................................................................................................................... 45 5.1 Classification of Stereotypes................................................................................................ 46 5.2 General Design Principles ................................................................................................... 47 5.3 Architectural Overview....................................................................................................... 49 5.3.1 Connection to UML............................................................................................... 49 5.3.2 Overview of Classes ................................................................................................ 49 5.4 Package GUILayout.............................................................................................................. 50 5.4.1 ScreenArea.............................................................................................................. 53 5.4.2 ContainerScreenArea............................................................................................. 57 5.4.3 Screen...................................................................................................................... 59 5.4.4 FunctionalScreenArea ........................................................................................... 60 5.4.5 UIFunctionality ...................................................................................................... 61 5.4.6 StaticUIFunctionality............................................................................................. 62 5.4.7 ActivatableUIFunctionality ................................................................................... 63 5.4.8 Form........................................................................................................................ 63 5.4.9 Link.......................................................................................................................... 64 5.4.10 Navigation............................................................................................................... 66 5.4.11 Workspace............................................................................................................... 67 5.4.12 Heading ................................................................................................................... 68 5.4.13 Image....................................................................................................................... 69 5.4.14 Logo......................................................................................................................... 70 5.4.15 Text.......................................................................................................................... 71 5.5 Package GUILayout::References ......................................................................................... 72 5.5.1 Reference ................................................................................................................ 72 5.5.2 LinkReference......................................................................................................... 74 5.5.3