Introduction to User Interface Markup Language UIML 1

Introduction to User Interface Markup Language (UIML) 1

What is a Device? 2

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 3

Problem: Tower of Babel Device variety + Platform = (Language & OS) variety Trouble ! 4

Troubles for Developers • Multiple source bases (WML, Java, C++, Speech. ML, XUL, . . . ) • Keeping UIs consistent across devices • Tracking changes in too many languages • Learning to use too many interface technologies (voice, handwriting, …) • Vendor risk 5

Trouble for System Admins • Need to install new releases of software for multiple devices 6

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 7

Another Perspective Machine language Assembly language “High-level” language (C++, Java) Scripting languages Device-dependent markup Device-independent markup 8

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 9

Other UIML Objectives • Naturally separates UI from rest of application • Facilitates – rapid prototyping – accessibility – internationalization • Usable by non-programmers • Extensible 10

UIML has 5 Key Concepts. . . 11

Concept 1: 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 12

UIML’s Approach UI description: <part name=“Line” class=“Menu. Item. Or. Icon”> Style: <property class=”Menu. Item. Or. Icon" name="rendering” value="java. awt. Menu. Item” /> Events are handled similarly. 13

Concept 2: No Loss of Power 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) 14

Concept 3: Specifying Any UI Answers 5 ? s. . . • • • Which UI elements present for device X? What presentation style for X? What words/sounds/images? What interface events? How to connect to backend? 15

UIML Skeleton <? xml version="1. 0". . . ? > <uiml version="2. 0 b"> <interface> UI description <structure name=“PC”>…</structure> <style>…</style> <content>…</content> <actions>…</actions> </interface> <logic>. . . </logic> <toolkit-peers> </uiml> UI/backend connection. . . </toolkit-peers> Map to Java, etc. 16

Concept 4: E volution of Event Handling Handle button-click in C++, VB code Handle it in scripting language Handle it declarative (in UIML itself) 17

Concept 5: UI = Elements + Style + Content • 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 18

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. . . 19

To learn more. . . • uiml. org: tutorial, spec, Java renderer source code • Try it! Downloadable Java renderer • In progress: – Speech. ML, Win. CE subset renderers – Dynamic interface server 20

21

Family of Interfaces 22

Rapid Prototyping Example • One UI definition • Two presentation styles 23

24

No Scripting or Java code for Events. . . 25

26

27