1

Introduction to User Interface Markup Language

(UIML)

2

What is a Device?

3

A Scenario: A Hospital

• Doctor• reviews schedule on office PC• makes rounds with handheld• checks patient status from voice phone

• Patient has relapse• Info system locates device closest to doctor• Text pager alerts message• Doctor orders tests via smart phone

4

Problem: Tower of Babel

Devicevariety

Platform (Language & OS)

variety

Trouble !+ =

5

Troubles for Developers• Multiple source bases

(WML, Java, C++, SpeechML, XUL, ...)

• Keeping UIs consistent across devices

• Tracking changes in too many languages

• Learning to use too many interface technologies (voice, handwriting, …)

• Vendor risk

6

Trouble for System Admins

• Need to install new releases of software for multiple devices

7

Perspective

• Situation today is analogous to PC industry 20 years ago:

– Many types of devices, many APIs– Eventually operating systems shielded

developers from device-specific APIs

• UIML provides similar shield for devices

8

Another PerspectiveMachine language

Assembly language

“High-level” language (C++, Java)

Scripting languages

Device-dependent markup

Device-independent markup

9

UIML Objective

Universal, device-independent language

– Able to describe family of UIs

– Maps language to devices via style sheets

– Works even for devices not yet invented

10

Other UIML Objectives

• Naturally separates UI from rest of application• Facilitates

– rapid prototyping– accessibility– internationalization

• Usable by non-programmers• Extensible

11

UIML has 5 Key Concepts...

12

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 peer definition to make it useful– No need to change UIML as new devices invented

Concept 1:

13

UI description:<part name=“Line” class=“MenuItemOrIcon”>

Style:<property class=”MenuItemOrIcon"

name="rendering” value="java.awt.MenuItem” />

Events are handled similarly.

UIML’s Approach

14

Two approaches to cross-device language:

• Least common denominator

• Preserve full capability of each device(Each device UI is a different view into a rich backend

application)

No Loss of PowerConcept 2:

15

• Which UI elements present for device X? • What presentation style for X?• What words/sounds/images?• What interface events?• How to connect to

backend?

Specifying Any UI Answers 5 ?s...Concept 3:

16

UIML Skeleton<?xml version="1.0" ...?><uiml version="2.0b"> <interface> <structure name=“PC”>…</structure> <style>…</style> <content>…</content> <actions>…</actions> </interface> <logic>...</logic>

<toolkit-peers> ... </toolkit-peers>

</uiml>

UI description

UI/backend connection

Map to Java, etc.

17

E volution of Event HandlingHandle button-click

in C++, VB code

Handle it inscripting language

Handle it declarative(in UIML itself)

Concept 4:

18

• Facilitates internationalization:– Note that you didn’t see text for menuitem yet– Text for menu tag is in <data> section.– Multiple texts for multiple languages

• Helps expert/novice UI problem

UI = Elements + Style + ContentConcept 5:

19

Credits

UIML is an evolution from lots of good ideas:

• HTML/CSS/XSL separation of style• UI management systems from HCI community• The “X” in XML• ...

20

To learn more...

• uiml.org:tutorial, spec, Java renderer source code

• Try it! Downloadable Java renderer

• In progress:

– SpeechML, WML, WinCE subset renderers

– Dynamic interface server

21

22

Family of Interfaces

23

Rapid Prototyping Example

• One UI definition• Two presentation

styles

24

25

No Scripting or Java codefor Events...

26

27