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 tobackend?

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 Handling

Handle button-clickin 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