1

EXTENDING UML TO MODEL GUI: A NEW PROFILE

ABDUL RAUF MUHAMMAD RAMZAN

National university of Computer National university of Computer
& Emerging Sciences & Emerging Sciences
Islamabad, Pakistan Islamabad, Pakistan

MUHAMMAD ABDUL BASIT ARSHAD ALI SHAHID

UL RAHIM National university of Computer
National Institute of Electronics & Emerging Sciences
Islamabad, Pakistan Islamabad, Pakistan

ABSTRACT
Graphical user interfaces (GUIs) are fundamental part of software systems now
days. This provides user with a facility to interact with the system. It is very
important to clearly specify and precisely analyze GUI requirements before
implementation of any system. Traditionally UML is considered as one of
successful languages to model software requirements and specifications. But
UML does not provide a considerable help for modeling GUI, hence a
requirement is there to come through ideas where UML can be used for GUI
analysis purpose as well. Many efforts have been put already in this direction,
and this paper also makes such an attempt. Notations for commonly used GUI
objects have been revised and interaction between different GUI objects has
also been explained in this paper.

INTRODUCTION
Software models help us in understanding the system by hiding complicated
details of the system. The selection of what to model has huge consequences on
the problem understanding and figuring out the solution. Major advantages that
models provide are simplifications and communication between problem,
design, and its implementation. Models give different viewpoint to the system.
The needs and types of business application decide the choice of modeling
language and notation. The Unified Modeling Language (UML) is a visual
language for modeling software applications. Unified Modeling Language
(UML) is used for the analysis and processing of requirements as well as for the
software specifications. UML has been standardized by Object Management
Group (OMG) in 1997. UML provides a number of views (diagrams), UML2
put forwards 13 diagrams [1]. Most popular of these diagrams are use case
diagrams, class/object diagram, sequence diagram, collaboration diagram,
activity diagram, state diagram, component diagram, and deployment diagram.
UML has many advantages over other modeling methods. It is de facto standard
 2

in the context of objects oriented analysis and design. UML is frequently used at
software architecture and design stage and it is well specified and thorough and
helps to understand structure and supports the process. With the emergence of
model driven development (MDD), UML has gained more popularity as in such
environment, UML drives the entire design.
Almost every software application in use is providing some sort of
graphical interface for interaction, and in most cases they are the only part of the
system that is visible to the users and providing facility of interaction to users.
Hence GUIs becoming vital for users to interact with any software system. Also
GUIs have a big impact in terms of overall cost and productivity of software [2,
3]. GUIs are also important in terms of apprehension, as they make up about
50% of application code [3, 4]. Close coupling of GUI design and software
design is very helpful in creating a complete model of an application before
implementation. This complete model will help to avoid as many errors as
possible. Several developments have brought the UML to its current state.
Efforts have been made to model important aspects of software systems using
UML. These aspects are reflected in the diagrams provided by UML for
modeling. UML, despite being most popular modeling language today, does not
specify a diagram capable of creating a model of a GUI’s visual appearance. To
overcome this shortcoming of UML, graphics designers create non-UML
models of GUI [5], and layout is modeled using schematics or wireframes [5].
Although OMG declares UML as a “General purpose modeling language”
[1], but it is impossible to model GUI component layout with UML. Beside the
fact that UML does not present user-interface models, but UML is being used
for this purpose in some coercive ways through some extensions. UML offers
extensibility mechanisms that can be adopted to extend UML to new domains,
but it is quite evident that such extensions of UML with extra adornments are
consistently confusing rather than helpful. How can a model be completed if it
does not consider an aspect as important as graphical user interfaces?
The designer’s of UML acknowledged that UML is not always just right for
every aspect of modeling [6]. Hence they decided that there would be situations,
when the development process would be better served by capturing additional
information or by applying different semantics to certain modeling elements [6].
UML specification for version 2.1.2 describes this mechanism as “The Profiles
package contains mechanisms that allow metaclasses from existing metamodels
to be extended to adapt them for different purposes” [1, 8]. There are several
ways, how UML can be extended by using profiles. An extension may develop
when tailoring the UML Metamodel to new domains is required or metamodel
classes may be extended by using stereo types and additional semantics and
constrained syntax [1]. The extension mechanism allows the inclusion of new
attributes, tagged values, different semantics and additional constraints [7].
Previously stereotypes and tagged values were adopted in UML 1.1, as string-
based extensions that could be attached to UML model elements. In succeeding
versions of UML, the notion of a Profile was defined to facilitate more
formation and correctness to stereotypes and tagged values [9]. The UML2.0
infrastructure and superstructure specifications have defined it as a specific
meta-modeling technique. Stereotypes are specific metaclasses, tagged values
are standard metaattributes, and profiles are specific kinds of packages [9].
 3

In a composite design pattern, different objects are linked to have an object

structure. Every object is treated uniformly and each object can be described in
one of three terms. These terms are single component, composite component, or
abstract representation. We have used composite design pattern to represent GUI
objects in terms of a hierarchy of objects. This hierarchy constitutes of single
components combining together to constitute a composite component. But each
of these objects has an abstract representation and can be accessed in same way
despite the complexity it has.
In this paper, we have developed a new profile for GUI layout to support
modeling of GUIs in UML-based software development processes. Our
approach provides new objects for GUI. These are most commonly used objects
and most of our interaction with GUI is based on these objects. Each object has
its own stereotype and with the help of these objects developer can create user
interface. Our profile provides access to each object of GUI in different UML
diagrams while it also provides an abstract representation of these objects
following composite design pattern. Our profile also facilitates to apply
conditions while drawing sequence diagram.
The major contributions of our proposed profile are following:
• New notations for GUI objects.
• Each object of GUI is accessible in use case, class diagram, and
sequence diagram.
• Properties or methods can be initialized while designing use cases
through stereo types.
• Conditions can be applied to different objects while designing
different diagram (e.g. sequence diagrams).
• Composite design pattern has been used to represent part-whole
hierarchies of GUI objects.
The remainder of the paper is organized as follows: In next Section, we
discuss related work in field of UML extensions and profiles for GUI. Section
after that describes proposed method in detail. While in next section, some
future directions have been presented and last section concludes the paper.

RELATED WORK
Different authors have proposed different techniques to design a GUI. But these
approaches are difficult to understand and design GUI. Mohammed Elkoutbi has
proposed a new approach for generation of UI prototypes from scenarios.
Scenarios are acquired as collaboration diagrams (CollDs) enriched with UI
information. These CollDs are transformed into dynamic specifications of the UI
objects involved in the system. Static and dynamic aspects of the UI are then
derived from the obtained dynamic specifications of the UI objects [10].
Kai Blankenhorn has presented a standard-conformant extension to UML 2.0 to
integrate GUI layout into software engineering. First, we have performed an in-
depth analysis of the situation both in software engineering and in GUI design
and found that modeling is a concept common to both of them. While software
engineers create rigid, geometrical models of software systems, GUI designers
do quick sketches of screen layouts using paper and pencil. We have found a
way to unify both approaches by creating geometrical abstractions of designers’
 4

sketches of GUI elements and combining them into models of complex screen
layouts. Our selection of elements has proven powerful enough to mapping all
GUI elements that can be created by popular GUI technologies to a construct of
our model [11].
Many researchers have worked for extending UML for specific purposes. Boger
et al has purposed diagram interchange in 2002 [12]. In diagram interchange,
every UML element has been assigned a graph element and it makes UML
diagrams layout aware. Designer Scribbles can also be considered as an
extension, in which hand written abstractions of a GUI’s design has been
used[11]. Designer scribbles use commonly used symbols for widgets and
consider common practices among designers [11]. Interactive sketching has also
been used for modeling GUI. On the other hand DENIM creates a complete
model of user interface. DENIM also uses sketch recognition but this also has
not been connected to UML [13].
UML based web engineering (UWE) was proposed by Hennicker and Koch in
2001 [14]. UWE is based on UML 1.X version and proposes a design process
for hypermedia design [14]. UWE uses its own notations and can be considered
as a best substitute for sketching [14]. OMMMA-L is visual language for the
object-oriented modeling of multimedia applications proposed by Sauer and
Engels in 1999. It can be considered as a heavyweight extension of UML with
static and dynamic elements [15]. Layout information has not been set up in the
metamodel in OMMMA-L [15].
In [16], author thinks UML’s inattention towards user interface development as
a severe crisis considering that the user interface is the system to most users.
Author thus suggested approaches to user interface flow modeling
(storyboarding) using UML, same kind of suggestions have already presented by
Craig Larman, Jim Connalen, Geri Winters [16]. UMLi approach defines
different graphical representations for domain elements and interactive elements
[17]. It provides different modeling for interaction objects and for tasks. UMLi’s
user interface diagram consists of 6 different constructors. These constructors
are for freecontainers, containers, inputters, displayers, editors and action
invokers. For abstract presentation models, UMLi also provides specialized
visualization [17].

PROPOSED METHOD
A Profile is a kind of Package that extends a reference metamodel [9]. The
primary extension construct is the Stereotype, which is a trimming that helps us
in defining new semantic implications of a modeling element. A profile can be
considered as a limited outline of a metamodel that ought to be connected to a
reference metamodel, and a profile cannot be used without its reference
metamodel [9]. Key value couples, called tagged values are associated with a
modeling element which allows to "tag" any value onto a modeling element.
[18]. Constraints are rules and can be expressed as free form text or with the
more formal Object Constraint Language (OCL) [18]. Our diagrams can be used
 5

as an alternative of sketches, or can be used as basis for a basic model of layout.

Expressing visual ideas with written language is often difficult and can cause
inconsistency between the writer’s and the reader’s understanding of the text
[19]. So we need to express visual interactions with visual diagrams in such a
way that a reader has no miscommunication and inconsistency regarding that.
For this purpose we have to rectify such diagrams for visual interactions which
are simple, non-confusing and meaningful as well.
Due to limitation for GUI designing of existing UML, new objects are being
introduced. These objects help the designer to design GUI and provide access to
individual objects in different diagrams. The responsibility of each GUI can be
shown by defining boundaries for each GUI. Now the following objects that are
mostly used GUI designing can be used with UML. We have listed and
diagramed these new objects on the basis of frequent use of objects. 12 visual
objects were first identified and then their diagrammatic icons and stereotypes
have been defined. These twelve objects are check box, combo box, command
box, frame, horizontal scroll, vertical scroll, label, list box, picture box, radio
button, text box and timer. Table 1 list down these objects with their
corresponding diagrams. Also a special diagrammatic symbol has been defined
for form as well.

Form

Form

Table 1: GUI objects for modified profile

 6

Composite pattern is one of the partitioning design patterns available in software

architecture. The major intention of the composite pattern is to handle group of
objects as a single object and this task is performed with the help of creating an
abstraction of these objects. The objective of composite is to "compose" objects
into tree structures to correspond to part-whole hierarchies [20]. When there is a
need to ignore the differences between compositions of objects and individual
objects, composite pattern is the obvious choice to be used [20]. Composite
pattern reduces complexity by treating crude and compound objects uniformly.
Many graphic applications use this phenomenon while drawing diagrams, i.e.
building very complex and large diagrams from relatively simpler block diagram
components and using simple objects to form these block components. A simple
implementation could define classes for graphical primitives such as Text and
Lines plus other classes that act as containers for these primitives.
In figure 1, the GUI diagram shows that simpler GUI objects have been
combined using Composite Pattern to form relatively complex Form component.
Participants of composite in this case are forms, leaf objects, and composition
object. Form can be considered as a single component which declares an
interface for accessing and managing its child components, while all child
objects are being considered as leaf and composite is implementing child parent
relationship between form and leaf objects.

1 Form

* Compon Contain

Text Butt Choi Scro Picture

Fig 1: GUI Objects in Composite Pattern

 7

FUTURE WORK
In this paper, we have presented a new profile for GUI layout to support
modeling of GUIs in UML-based software development processes. We have
also introduced new notations for commonly used GUI and given diagrams to
show the interaction between these objects. But all this work needs a lot of
manual effort. In future, we are planning to develop a tool for direct interaction
with single components in composite components. Also we can generate code
from different diagrams like sequence diagrams and hierarchical representation
of different objects. Code generated from diagrams will include all properties,
methods and conditions applied at design time.

CONCLUSION
UML is very popular language, being used for analysis and requirements
specifications purposes. It is a standardized diagramming language by Object
Management Group. UML provides a number of diagrams to model proposed
software from different prospective but it is not as helpful while modeling GUI
interactions. On the other hand GUIs are vital to the users of any software
system, as they are the only part of the system that is visible to the users and
they provide facility of interaction to users. In this research paper, we have tried
to present some new notations for commonly used GUI objects and proposed a
method to interact with simple single components in complex composite objects.
Also an example has been given in diagrammatic representation of sequence and
class diagram to explain the idea presented in proposed method.

REFERENCES
[1] OMG 2003a: UML 2.0 Infrastructure Final Adopted Specification (ptc/03-09-15).
[2] Myers 1993: Why are Human-Computer Interfaces Difficult to Design and Implement? Carnegie
Mellon University Technical Report CMU-CS-93-183, July 1993.
[3] Galitz 2002: The Essential Guide to User Interface Design, Second Edition. New York: John
Wiley & Sons.
[4] van der Veer & van Vliet 2001: A Plea for a Poor Man's HCI Component in Software
Engineering and Computer Science Curricula. In: Computer Science Education, Vol. 13, no 3
(Special Issue on Human-Computer Interaction), pp. 207-226.
[5] Newman & Landay 2000: Sitemaps, Storyboards, and Specifications: A Sketch of Web Site
Design Practice. In: Boyarski, D.; Kellogg, W. A. (Eds.): Proceedings of the Conference on
Designing Interactive Systems: Processes, Practices, Methods, Techniques. New York: ACM
Press, pp. 263-274.
[6] Hamadou Zourmba. (1999). Automating Management tasks within a distributed Network
Computing environment, Diploma Thesis, Institut fuer Kommunikations- und Softwaretechnik
, Fachgebiet Offene Kommunikationssystem (OKS) Franklinstrasse 28-29 , [Berlin].
[7] Jim Conallen. " Modeling Web Application Design with UML" itemweb. 8 Oct. 2009 <
http://www.itmweb.com/essay546.htm>.
[8] OMG 2003b: Unified Modeling Language: Diagram Interchange, version 2.0. Final Adopted
Specification (ptc/03-09-01).
 8

[9] UML 2.1.2 Superstructure Specification, Object Management Group, Nov. 2007;
www.omg.org/spec/UML/2.1.2.
[10] Mohammed Elkoutbi , Rudolf K. Keller, User Interface Prototyping based on UML Scenarios
and High-level Petri Nets, In Application and Theory of Petri Nets 2000 (Proc. of 21 st Intl.
Conf. on ATPN), Springer-Verlag LNCS 1825.
[11] Blankenhorn, K. (2004): A UML Profile for GUI Layout. Master’s Thesis, Department of
Digital Media,
University of Applied Sciences Furtwangen.
[12] Boger et al. 2002: Diagram Interchange for UML. In: Jézéquel, J.-M. ; Hussmann, H.; Cook, S.
(Eds.): UML 2002 – The Unified Modeling Language 5th International Conference, Dresden,
Germany, September 30–October 4, 2002, Springer LNCS vol. 2460.
[13] Lin 2000: DENIM: Finding a Tighter Fit Between Tools and Practice For Web Site Design. In:
CHI Letters: Human Factors in Computing Systems, CHI 2000, pp. 510-517.
[14] Hennicker & Koch 2001: Modeling the User Interface of Web Applications with UML. In:
Evans, A.; France, R.; Moreira, A. (eds.) (2001): Practical UML-Based Rigorous Development
Methods - Countering or Integrating the eXtremists, Workshop of the pUML-Group at the
UML 2001. Gesellschaft für Informatik, Köllen Druck+Verlag, October 2001, pp. 158-172.
[15] Sauer & Engels 1999: Extending UML for modeling of multimedia applications, Proc. IEEE
Symposium on Visual Languages, Tokyo, September 13-16, 1999.
[16] Scott Ambler, “What's New in UML 2” Dr. Doob’s Portal, Feb 01, 2004
http://www.ddj.com/architect/184415097
[17] da Silva, P. P. and Paton, N. W. 2003. User Interface Modeling in UMLi. IEEE Softw. 20, 4
(Jul. 2003), 62-69. DOI= http://dx.doi.org/10.1109/MS.2003.1207457
[18] Conallen, J. 1999. Modeling Web application architectures with UML. Commun. ACM 42, 10
(Oct. 1999), 63-70. DOI= http://doi.acm.org/10.1145/317665.317677
[19] K. Blankenhorn and W. Walter, “Extending UML to GUI Modeling,” Mensch & Computer, pp.
307–308, 2004.
[20] Paulo S. C. Alencar, Donald D. Cowan, Carlos José Pereira de Lucena: A Formal Approach to
Architectural Design Patterns. FME 1996: 576-594