Device-Independence with
UIML
(User Interface Markup Language)
Marc Abrams
abrams@harmonia.com
uiml.org
W3C Workshop on Web Device Independent Authoring
October 2000
Quotes from Position Papers
• New XML language should
– Allow author-once-deploy many scenarios
– Achieve clean separation between behavior, content,
presentation [Ruud Siebelink]
• Issue is interaction not presentation [Paul Smethers, WAP]
• Ideal solution: write well-formed code once [Jansen]
• Semantics [meaning of Web content] must be
made clear at primary design level [William Loughborough]
• Must adapt to new devices not envisioned
[Ralph Case, Stephane Maes]
Where UIML Fits In
Application database
Content (XML, audio,…)
Device Adaption
Using CC/PP
UIML
XHTML
VoiceXML
XHTML
VoiceXML
UIML… One Part of a Solution
•
•
•
•
•
•
3+ years in development at Harmonia,
Center for HCI at Virginia Tech
Tools downloaded in 40+ countries
Compile to anything
Anyone can freely implement UIML
Objective is open standard
One canonical representation of UI for
any device, language, OS, UI-metaphor
Problem with Existing
Approaches
• Suggested way to annotate existing markup:
<card>
<select class=“DISPLAY_SMALL”>
…
</card>
Key Concept:
UIML is a “Meta” Language
• XML
– Doesn’t define tags (<P>,…)
– Must add doc type definition to make it useful
– No need to change XML as new tag sets invented
• UIML
–
–
–
–
Doesn’t define tool-kit specific tags (<Menu>,…)
Uses a few powerful tags (<part>, <property>,…)
Must add toolkit vocabulary to make it useful
No need to change UIML as new devices invented
UIML Model
Underlying principle of single authoring is MVC [to separate
content/structure] [Ralph Case, Stephane Maes]
Device / Platform
UI Metaphor
Presentation
Application
Interface
Structure
Style
Content
Logic
Behavior
6-way separation of UI description (vs. 3-way MVC)
UIML Skeleton
<?xml version="1.0" ... ?>
<uiml version="2.0">
<interface>
<structure>
<part class=“Button”> … </part>
...
</structure>
</interface>
</uiml>
What parts comprise the UI &
what’s their relationship?
UIML Skeleton
<?xml version="1.0" ... ?>
<uiml version="2.0">
<interface>
<structure>…</structure>
<style>…</style>
<content>…</content>
<behavior>…</behavior>
What presentation
style
What content for each part?
for
each
part?
How(text,
to connect
to
outside
world?
sounds,
image,
…)
What behavior do parts have?
(business logic, UI toolkit object)
</interface>
<peers>...</peers>
</uiml>
<peers> Maps Classes
to Targets
<d-class name="JButton" … maps-to="javax.swing.JButton">
…
</d-class>
Versus
<d-class name="JButton" … maps-to=“html:input">
…
</d-class>
This part is written once, like a device driver for an OS.
Events and calls to outside world handled similarly.
NxM Problem
• App composed on
• M “pages”
• accessed via N devices
• requires NxM authoring steps
[Ralph Case, Stephane Maes]
HTML
XML
Reduces to N+M
UIML
...
Java
UIML Permits
Development Continuum
Richest user
experience
Use
device-specific
vocabulary:
<part Class=“JPopupMenu”>
versus
<part Class=“Select”>
Fastest to build
Use
generic
vocabulary:
<part Class=“Menu” >
UIML Permits Families of UIs
Another Perspective…
Device-independent markup
Device-dependent markup
Scripting languages
“High-level” language (C++, Java)
Assembly language
Machine language
Still…
UIML is Not a Silver Bullet…
Some open problems:
• Aid/enforce accessibility guidelines [Jon Wu]
• Support auto adaptation/personalization
[Ruud Siebelink]
• Reorganizing UI:
– Many apps will need to be re-designed entirely
[Guido Grassel]
– 1 page in a desktop Web browser might be split
into 2 screens for TV [Peter Ferne]
European Workshop on UIML –
January 2001 in Paris
(see uiml.org)
Supplemental Slides
Quote
• Level 0 represents universal content, level 1
content with knowledge of device
capability,… [Jon C.S. Wu]
More Quotes
• Assumption that there is primordial
content… forming single original
document…
• These assumptions are false…
• A news story in one paragraph in tabloid is
not same as an extended column in a
broadcast [Miles Sabin]
More Quotes
• WML/WMLScript differs significantly from …
HTML/JavaScript. Hence format used
needs to be expressive enough [Guido Grassel]
• Identification of content should be deviceindependent
• Text may be represented … in [either] fullyformated… [or] paraphrased versions [Gimson]
More Quotes
• Choice between template-driven & contentdriven presentation generation [Sebastian Nykopp]
• Issue is interaction not presentation [Paul
Smethers on WAP]
Application 2
Application 3
UI 5
UI 9
UI 6
UI 10
UI 7
UI 11
UI 8
UI 12
Toward N + M
…you normally need to create 12 user interfaces.
But with Harmonia’s UIML Toolkit...
Application 1
Application 2
Application 3
Style Sheet 1
Device 1
Style Sheet 2
Device 2
Style Sheet 3
Device 3
Style Sheet 4
Device 4
UI Defn 1
UI Defn 2
UI Defn 3
...you only need to write 3 templates plus 4 style sheets. Furthermore, to add a new application, you only need one
more template, no matter how many devices you need to support.
Figure A1. Saving Time by Building Interfaces for Multiple Devices with UIML.