1. 1 Introduction to User Interface Markup Language (UIML)

2. 2 What is a Device?

3. 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. 4 Problem: Tower of Babel Device variety Platform (Language & OS) variety Trouble !+=

5. 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. 6 Trouble for System Admins Need to install new releases of software for multiple devices

7. 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. 8 Another Perspective Machine language Assembly language “High-level” language (C++, Java) Scripting languages Device-dependent markup Device-independent markup

9. 9 UIML Objective Universal, device-independent language –Able to describe family of UIsfamily –Maps language to devices via style sheets –Works even for devices not yet invented

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

11. 11 UIML has 5 Key Concepts...

12. 12 UIML is a “Meta” Language XML –Doesn’t define tags (,…) –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 (,…) –Uses a few powerful tags (,,…) –Must add toolkit peer definition to make it useful –No need to change UIML as new devices invented Concept 1:

13. 13 UI description: Style: <property class=”MenuItemOrIcon" name="rendering” value="java.awt.MenuItem” /> Events are handled similarly. UIML’s Approach

14. 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 Power Concept 2:

15. 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. 16 UIML Skeleton …... UI description UI/backend connection Map to Java, etc.

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

18. 18 Facilitates internationalization: –Note that you didn’t see text for menuitem yet –Text for menu tag is in section. –Multiple texts for multiple languages Helps expert/novice UI problem UI = Elements + Style + Content Concept 5:

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

22. 22 Family of Interfaces

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

24. 24

25. 25 No Scripting or Java code for Events...

26. 26

27. 27