Towards employing UML Model Mappings
for Platform Independent User Interface Design
Tim Schattkowsky Marc Lohmann
C-LAB, Germany University of Paderborn, Germany
tim@c-lab.de mlohmann@uni-paderborn.de
Abstract The remainder of this paper is organized as follows:
The next section discusses related work before
While model based design of platform independent Section 3 introduces our approach. Finally, Section 4
application logic has already shown significant closes with a conclusion and future work.
success, the design of platform independent user
interfaces still needs further investigation. Nowadays, 2. Related Work
user interface design is usually platform specific or
based on C-level cross-platform libraries. In this UI design has been subject to research for quite some
paper, we propose a MDA like design approach for time now. However, model based methods are
user interfaces based on the transformation of UML discussed mainly in the context of XML.
models at different levels of abstraction. This enables The User Interface Markup Language (UIML) [1] is
platform independent design of user interfaces and a an XML language that aims at providing a meta
clear separation of UI and application logic design language for the declarative description of UIs. UIML
while enabling full use of native controls in the actual maps abstract UI elements to actual platform widgets
user interface implementation. and describes events on these elements. The mapping
is based on identifiers with no additional semantics and
1. Introduction must be done by the application. UIML does not
provide a generic mapping approach from a single
Providing individual User Interface (UI) abstract specification to different platforms.
implementations for each target platform of a Furthermore, the event mapping mechanism is quite
contemporary application becomes an increasing limited. This is addressed by [2] where a similar UI
burden as the number platforms as well as the size of description is complemented by more sophisticated
the applications increases. In the context of model- behavior specification. However, these are note
based design methods and the UML [5], a manual comparable to the expressiveness of UML’s behavior
implementation of different UI for each platform is models.
undesirable. The USer interface eXtensible Markup Language
Model Driven Architecture (MDA) [6] presents the (USIXML) [4] addresses the need for more abstraction
idea of mapping a platform independent model (PIM) in UI design, but still in an XML context. However, it
to a platform specific model (PSM) to separate the core introduces the idea to create an abstract UI model
implementation from the platform specific based on a domain model that is later refined to a
implementation aspects. Still, the UI is often concrete UI model consisting of existing widgets. This
considered to be platform specific although it seems to model is the basis for generating the final UI
be possible to provide a generic abstract description of implementation. The whole approach is based on XML
such an UI in terms of a platform independent model. and graph transformations [3]. It is not aligned with the
Furthermore, lack of abstraction in UI design forces UML or behavior modeling in general. However, the
large parts of the UI implementation into the approach could produce UML compliant output and a
responsibility of the software engineer rather than UI design tool based on the approach is available [11].
enabling the UI designer to work concurrently. A clear Finally, [7] discusses UI modeling using the UML.
separation of UI and application logic design is Different levels of abstraction exist in the form of a
desirable to improve both productivity and software fixed simple model for abstract UIs that is the
quality. foundation for manual refinement of the abstract model
to the actual application model.
P latform D ependent
Actual User Interface Implementation
3. Design Approach
Implementation Language
Code Generation
Our approach is driven by the idea to allow for a
complete separation of the UI and application logic Information Retrieval Model (IRM) Concrete User Interface Model (CUIM)
Platform
design. As in MDA, our approach starts with the Model
Transformation Rules (PM)
creation of a platform independent model. Before
generating a platform specific UI implementation, the View Composition Model (VCM)
P latform Independent
designer can configure the UI on multiple levels of
PIMs, each independent of a target platform. From the Information
View Composition
Retrieval
most detailed PIM we can generate a platform specific Definition Abstract
UI implementation (see Figure 1). Transformation Abstract User Interface Model (AUIM) UI Elements
Model
rules between the different models facilitate tool (AUIEM)
Transformation Rules
support for our UI development approach.
Our basic PIM is the Information Model (IM). This Information Model (IM) Information
Metamodel
class diagram provides an abstract definition of the
information and their logical dependencies. The goal is Figure 1: Platform Independent UI Design Flow
to develop a UI for presenting this information. It is
undistorted by technology information. Therefore, it The associations and attributes in the IM are marked
allows business experts to ascertain much better than to indicate different kinds of data. Generally, the
with a platform specific model and it provides an early stereotypes <> and <> mark
starting point for user interface design. associations and attributes as only displayable or
Figure 2 shows the IM of an administration interface editable. Attributes marked <> may have
of a simple Web server. The Web Server may have a their values altered at runtime while such associations
ContentHandler at a certain Port to which a may have links added and removed. If an association is
Connection can be made by a User to access the marked as <>, links may only be removed
in contrast to attributes, which may instead be marked
content of a Folder if he has the necessary
as <> indicating that their value may only
Permissions according to his Group be by the constructor, i.e., when creating a new
memberships. Furthermore, the pending Requests instance. If no stereotype is provided for an attribute or
and Responses are represented. association, <> is assumed.
ContentHandler Port Connection InternetAddress
* «editable» * + «creatable» Number: Integer «deletable» * 1 + Hostname: String
+ «creatable» UseSSL: Boolean + IPAddress: Integer [1..4] {ordered}
* 1
*
*
«editable» User
«editable»
+ «editable» Login: String Message
Body
+ «editable» Name: String = ""
+ Number: Integer
«root» + «editable» Password: String 0..1 + Length: Integer
«editable» * + + TimeStamp: DateTime
Serv er «editable» Description: String = ""
* 0..1
«editable»
* *
«editable» Group Request Response
*
+ «editable» Name: String + Method: String + «editable» CloseConnection: Boolean
1 0..1 + Code: Integer
Folder
* «editable» *
+ «editable» URI: String
+ «editable» BasePath: String
Permissions
* + «editable» Read: Boolean = false
+ «editable» Write: Boolean = false
+ «editable» List: Boolean = false
«editable»
+ «editable» Execute: Boolean = false
WebContentHandler MimeType
+ «editable» DefaultDocumentName: String [0..*] {ordered} «editable» * + «editable» FileExtensions: String [0..*] {ordered}
*
Figure 2: Web Server Configuration UI Example - Information Model
Type «UIElement» «UIElement» «UIElement» «UIElement»
Set Choice Item UITrigger
+type +choices +chosen
1 * 1 * 0..1 0..1
+type 1
Class
+class
«UIElement» «UIElement»
«UIElement» Link
1 * KillLinkTrigger
FilteredInstances +link
1 {redefines type}
1 *
«UIElement» «UIElement»
*
* +ownedAttribute FilteredLinks Instance
+target
Property +property «UIElement»
1 * AddLinkTrigger
1 *
+associationProperty
Figure 3: Excerpt from the AUIEM used for the Example Transformations
The data types used by the attributes in the IM are link, which is only present in the right hand side of the
fixed and range from primitive types (e.g. Integer, rule, is newly created and every object or link, which is
Float) to complex types defined by classes. Operations present only in the left hand side of the rule, is being
may define interface application logic that cannot be deleted. Objects or links which are present on both
captured by the data model, e.g., to send explicit sides are unaffected by the rule.
messages to the application aside from persistent data. The application order of rules is not determined.
The whole IM is a composition tree starting by a Furthermore, different rules with the same left-hand
<> class whose only instance represents the side may exist to provide alternative UI elements for
whole systems. This enables inference of aggregations the same structure. The actual choice of the desired
to automatically generate all levels of abstraction from mappings is an interactive design decision that can be
the IM without the need for user interaction. However, supported by tools. However, complete generation of
usually this is not desirable and the UI designer wants the AUIM based on the rules is possible. This could be
to provide these decisions manually at each level of interesting in the context of an UI style defining the
abstraction. actual mappings to be applied.
The PIM at the next level is the Abstract User
Interface Model (AUIM). It includes some aspects of L R
UI technology event though platform-specific details :Type :Type
are absent. Essentially, the AUIM combines the data
+type
from the IM with abstract UI elements to access and +type
manipulate that data. We have developed a metamodel :Property
«UIElement»
:FilteredLinks
–Abstract User Interface Elements Model (AUIEM)–
+choices
that defines different UI elements at an abstract level in :Class
:Property
terms of related data sets and triggers. This metamodel «UIElement» «UIElement»
:AddLinkTrigger :Choice
can be extended to project-specific needs by using the +memberEnd
UML profiling mechanism. +target +chosen
Figure 3 shows an excerpt from the AUIEM :Extension :Association
«UIElement» «UIElement»
:Item :Item
employed in our example. This excerpt defines the
+chosen +Link
Choice UIElement for selecting one Item from a
Set. Furthermore, it provides the necessary elements «UIElement» «UIElement»
+memberEnd :Choice :KillLinkTrigger
to employ the Choice to select an Instance of a
:ExtensionEnd :Property
Class or a Link from a Property. +choices
«UIElement»
These elements are used in a set of graph
:FilteredInstances
transformation rules [8] that facilitate tool support for
our approach. Each rule consists of a left hand side +class
(subgraph of the IM) and a right hand side (subgraph :Stereotype :Class :Class
of the respective AUIM to be created). In Figure 4 an name = "editable"
<> association is mapped to a set of
UIElements for deleting and adding links on the Figure 4: IM-AUIM Mapping Rule Example
association. The basic intuition is that every object or
The most detailed PIM is the View Composition and application logic by starting from a common
Model (VCM). It partitions the AUIM into several platform independent information model. Furthermore,
overlapping and navigable views. Each of these views due to our code generation mechanisms we can support
provides the scope of a class instance for the contained different target platforms from the same abstract
UIElements. Thus, master-detail-like views can be model. The approach has been outlined and discussed
implemented. Furthermore, navigation along Links can in the context of an interface of a Web.server.
be defined. Finally, views can be composed. Each We are currently implementing the results of the
contained view either inherits the scope from the manual execution of our approach for this example.
containing view or has the scope provided by links Future work will include a prototype implementation in
selected in the containing view. One root view must be the context of our work in the fields of executable
defined. Views enable the purposeful selection of models [10] and concurrent software components [9].
different platform UI elements for the same
UIElement depending on the overall context of a References
view while deriving the Concrete User Interface Model
(CUIM) representing the actual platform dependent [1] Abrams, M., Phanouriou, C., Batongbacal, A. L.,
user interface. Williams, S. M., Shuster, J. E.: UIML: an appliance-
independent xml user interface language. In Computer
The CUIM is defined by the Platform Model (PM),
Networks 31, Elsevier Science, 1999.
which contains a set of available native UI elements on [2] Bleul, S., Schäfer, R., Müller, W.: Multimodal Dialog
the target platform. Like in the AUIEM, these elements Description for Mobile Devices. In Proc. Workshop on
are combined with the elements form the Information XML-based User Interface Description Languages at
Metamodel. Thus, the translation between these AVI 2004, 2004.
models is based on the substitution of the UIElements [3] Limbourg, Q., Vanderdonckt, J.: Addressing the
from the AUIEM by native UI elements from the PM. Mapping Problem in User Interface Design with
The creation of the CUIM not only involves UsiXML. In Proc. of 3rd Int. Workshop on Task
mapping the UIElements to actual UI controls Models and Diagrams for user interface design
TAMODIA’2004, ACM Press, New York, 2004.
(widgets) on the target platform, but also providing [4] Limbourg, Q., Vanderdonckt, J., Michotte, B.,
additional layout and decoration. A GUI builder tool Bouillon, L., Lopez-Jaquero, V.: UsiXML: a Language
should support the whole task where the designer may Supporting Multi-Path Development of User
handpick individual mappings for UIElements. Interfaces. In Proc. EHCI-DSVIS'2004, 2004.
Transformation rules similar to the rules for the IM- [5] Object Management Group, The: Unified Modeling
AUIM transformation can be employed here. These Language: Infrastructure. OMG ad/2004-10-02, 2004.
rules map UIElements and their context to attributed [6] Object Management Group, The: Model Driven
Architecture (MDA). OMG ormsc/2001-07-01, 2001.
and annotated instances of platform specific UI classes.
[7] Pinheiro da Silva, P., Paton, N.: User Interface
The resulting CUIM has to be complemented by the Modelling with UML. In Proc. of the 10th European-
Information Retrieval Model (IRM) describing how the Japanese Conference on Information Modelling and
data processed by the UI is actually accessed. The IRM Knowledge Representation, 2000.
is a behavioral UML model (e.g. an activity diagram) [8] Rozenberg, G. et al (eds.): Handbook of Graph
giving an operational description how to retrieve the Grammars and Computing by Graph Transformation,
IM elements from the actual implementation. Thus, the Vol. 1. World Scientific, Singapore, 1997
IRM functions as an abstraction layer between the UI [9] Schattkowsky, T., Förster, A: A generic Component
and the application similar to database abstraction Framework for High Performance Locally Concurrent
Computing based on UML 2.0 Activities. In Proc. 12th
layers. However, the actual implementation of the IRM
Annual IEEE International Conference and Workshop
may vary and is not discussed here. on the Engineering of Computer Based Systems
To create the code for an Actual User Interface (ECBS), 2005.
Implementation, complete code generation takes place [10] Schattkowsky, T. Müller, W.: Model-Based Design of
combining the IRM and CUIM information to a Embedded Systems. In Proc. 7th IEEE International
working platform dependent UI. Again, we use a set of Symposium on Object-oriented Real-time distributed
graph transformation rules for the transformation. Computing (ISORC), 2004.
[11] Vanderdonckt, J.: A MDA-Compliant Environment for
4. Conclusion and Future Work Developing User Interfaces of Information Systems. In
Proc. of 17th Conf. on Advanced Information Systems
Engineering CAiSE'05 (Porto, 13-17 June 2005), O.
In this paper, we have proposed a model-driven Pastor & J. Falcão e Cunha (eds.), Lecture Notes in
design approach for user interfaces based on the UML. Computer Science, Vol. 3520, Springer-Verlag, Berlin,
This approach allows concurrent development of UI 2005.