Article ID | Journal | Published Year | Pages | File Type |
---|---|---|---|---|
523664 | Journal of Visual Languages & Computing | 2008 | 26 Pages |
The Unified Modeling Language (UML) [OMG, Unified Modeling Language Specification, Version 2.0, Technical Report, Object Management Group 〈〈http://www.omg.org/technology/documents/formal/uml.htm〉〉, 2005] provides system architects working on analysis and design (A&D) with one consistent language for specifying, visualizing, constructing, and documenting the artifacts of software systems, as well as for the business modeling. The user interface (UI), as a significant part of most applications, should be modeled using UML, and automatic CASE tools may help to generate UIs from UML designs. In this paper, we describe how to use and specialize UML diagrams in order to describe the UIs of a software system based on WIMP (Windows, Icons, Menus and Pointers). Use case diagrams are used for extracting the main UIs. Use cases are described by means of user-interaction diagrams, a special kind of activity diagrams in which states represent data output actions and transitions represent data input events. Input and output interactions in the user-interaction diagrams help the designer to extract the UI components used in each UI. We obtain a new and specialized version of the use case diagram for the UI modeling (called UI diagram) and a class diagram for UI components—called UI-class diagram. The user-interaction, UI and UI-class diagrams, can be seen as the UML-based UI models of the system. Finally, UI prototypes can be generated from UI-class diagrams with CASE tool support. As case study of our technique, we will describe an Internet book shopping system.