Chapter 1
AGENERIC APPROACH FORMULTI-DEVICE
USER INTERFACE RENDERINGWITHUIML
Kris Luyten Kristof Thys Jo Vermeulen Karin Coninx
Hasselt University – transnationale Universiteit Limburg
Expertise Centre for Digital Media – IBBT
Wetenschapspark, 2
B3590 Diepenbeek (Belgium)
{Kris.Luyten,Kristof.Thys,Jo.Vermeulen,Karin.Coninx}@uhasselt.be
Abstract We present a rendering engine for displaying graphical user interfaces
on multiple devices. The renderer interprets a standardized XML-based
user interface description language: the User Interface Markup Lan-
guage (UIML). A generic architecture for the renderer is defined so that
deployment of the engine on different devices implies only little effort.
We show that our rendering engine can be used on iDTV set-top boxes,
mobile phones, PDAs and desktop PCs, and smoothly integrates with
both local and remote application logic. As a test bed for the UIML
specification we also explore support for extensions to UIML that enable
the user interface designer to maximize accessibility and target multiple
devices and different types of users at once.
1. Introduction and Motivation
There is a real need for user interface (UI) design tools to support
multi-device UI creation, even though there are many different existing
solutions for this purpose. Most solutions are limited however since they
specifically target a predefined range of platforms, e.g. a browser envi-
ronment like Mozilla XUL1, specific programming languages (e.g. bound
to Java like Jaxx2 or jXUL3) or a limited set of interaction modalities
(mostly graphical UIs). In contrast, UIML is a metalanguage that can
1http://developer.mozilla.org/en/docs/MDC:About
2http://www.jaxxframework.org
3http://jxul.sourceforge.net/

2be used to specify the four different aspects of a UI (structure, style,
content and behavior) independently [2]. None of these parts contain in-
formation that is related to a specific platform, programming language
or modality. Although the language is syntactically generic, it allows
some semantic constructs that imply a dependency on a certain plat-
form, programming language or modality. In this paper we show how
these limitations can be overcome and we discuss the foundations of the
UIML rendering engine we provide to the community.
To our knowledge, only little has been published about the actual
architecture of similar rendering engines. Roughly, there are two ap-
proaches for XML-based UI specification languages: the language can
target a generic but limited set of widgets or the language is very close
to the final widget set and thus specific for a certain type of platform.
The former is often used for multi-device UI description languages (e.g.
[3] and [7]), while the latter often relies on a certain rendering platform
such as a browser. Most implementations that are publicly or commer-
cially available are also limited to use with one particular programming
language (or, in many cases, one virtual machine) and widget set.
Section 2 provides an introduction to UIML and explains the basic
structure and constructs of this XML-based language. Section 3 gives
a short introduction and overview of the UIML rendering engine ar-
chitecture. Next, sections 4 and 5 discuss the extensions we created to
enhance support for multiple devices and multiple users. Finally, section
6 provides the conclusions.
2. The User Interface Markup Language
(UIML)
UIML [1] is a high-level markup language to describe the structure,
style, content and behavior of a UI. For a thorough discussion of the
UIML language we refer to the specification [1]: we will limit the UIML
overview in this paper to the essential constructs. UIML offers a clear
separation of concerns which is reflected in the four different aspects of
a UI that can be specified in this metalanguage. Figure 1.1 shows a
skeleton of a UIML document at the top of the figure.
In the past there were attempts to create a generic vocabulary by
Abrams et. al [3]. In our approach we try to support a generic set of
interactors that can be used across vocabularies, but also allow to use
vocabulary specific interactors. If the designer wants to differentiate the
interface for a platform because of the availability of certain widgets,
she or he can do so with our implementation. The multi-vocabulary
approach that our implementation supports is described in [4].