1 / 34

Mir Farooq Ali Computer Science, Virginia Tech May 9, 2003

Building Multi-platform User Interfaces using UIML. Mir Farooq Ali Computer Science, Virginia Tech May 9, 2003. Outline. Multi-platform User Interface (UI) problem User Interface Markup Language (UIML) Task Modeling Future Research. Introduction. Variety of Hardware

eneighbors
Download Presentation

Mir Farooq Ali Computer Science, Virginia Tech May 9, 2003

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Building Multi-platform User Interfaces using UIML Mir Farooq Ali Computer Science, Virginia Tech May 9, 2003

  2. Outline • Multi-platform User Interface (UI) problem • User Interface Markup Language (UIML) • Task Modeling • Future Research

  3. Introduction • Variety of Hardware • Variety of target platforms Internet Explorer 6.0 for HTML Netscape 6.1 for HTML Java Swing

  4. Introduction • Users want access to the same applications and data • Traditional approaches are geared towards a single platform • New approach is needed to build multi-platform UIs

  5. Goals for UIML • Able to describe implementations of UIs that are • Multi-platform • Multi-lingual • Usable for non-traditional UIs: voice, etc • Same expressive power as target languages (Java, HTML, WML, …)

  6. UIML • UIML is an XML-based markup language • Meta-language for UIs • Can be used currently in conjunction with platform-specific vocabularies to create Uis • A vocabulary is defined to be the set of UI widgets, their properties and events for one specific platform

  7. UIML (Cont’d…) • Provides complete description of a UI • Renderers are needed to take UIML file and render it to UI • Rendering can be done through • Interpretation • Translation • Renderers are available for Java, HTML, WML, VoiceXML and PalmOS

  8. Look and feel Widgets Events associated with widgets Example UI

  9. Separation of Concerns • UIML considers an UI to be composed of 4 sections • structure • style • behavior • content

  10. UIML (Cont’d…) • Skeleton of UIML document <?xml version="1.0" encoding="ISO-8859-1" ?><!DOCTYPE uiml PUBLIC "-//UIT//DTD UIML 2.0 Draft//EN" "UIML2_0g.dtd"> <uiml> <head>...</head> <interface><structure>...</structure> <style>...</style> <behavior>...</behavior> <content>...</content> </interface> <peers>...</peers> <template>...</template></uiml>

  11. UIML <structure> • Structure section indicates the hierarchical relationship between various ‘parts’ <structure> <part id="BigFrame" class="JFrame"> <part id="label1" class="JLabel"/> </part> </structure> Widget

  12. UIML <style> • Style section describes “look and feel” of UI using properties for individual parts <style> <property part-name="BigFrame" name="title">UIML Example</property> <property part-name="label1" name="text">Hello World!</property> </style>

  13. UIML <behavior> • Behavior section defines what happens when you perform any action on the parts <behavior> <rule> <condition> <event class="actionPerformed" part-name="topButton"/> </condition> <action> <property part-name="label1" name="text">Top button pressed.</property> </action> </rule> </behavior>

  14. UIML Examples • Hello World example • Java Swing • WML • HTML • UI with events • UIML with Java Swing vocabulary • Actual Java Swing program

  15. Example: UI for 3 Platforms Date book: Java WML Palm OS

  16. What UIML Is and Is Not • UIML: is a language for implementing UIs • UIML: is not a language for UI design (We assume UIML is generated by a model, specification language, design tool, or even manually)

  17. Example: Vocabularies & Mappings • Recall:<part class=“Button” name=“submit”> <style><property name=“title”>OK!</property></style></part> • Vocabulary: class, property, event names (e.g., “Button”) • Mapping: <d-class name=“Button" … maps-to="javax.swing.JButton">… </d-class> versus <d-class name="Button" … maps-to=“html:input">… </d-class>

  18. How UIML Addresses Multi-Platform UIs • Tree structure (cascading):describe a family of UIs as in tree form • Generic vocabulary + transformation • Building block of overall methodology

  19. 1. Tree Structure Factor out common elements to UIs on all platforms in form of an XML tree • Structure: changes across families • Style: changes across families • Content: may change across families • Behavior: may largely remain intact • Logic: API to logic unchanged • Presentation: differs by family

  20. 2. Generic Vocabulary + Transformation • Vocabulary is defined outside UIML • Vocabulary represents set of abstractions. Abstractions could be… • identical to UI toolkit (“Platform-Specific vocabulary”) • cross UI toolkits (e.g., generic across Java/HTML, VoiceXML, WML) • domain-specific (e.g., abstractions to build UIs for news articles -- title, abstract, body, navigation)

  21. Sample Generic Vocabulary (#2 in Previous List)

  22. Transformations • Transformation maps UIML document with generic vocabulary to UIML document with platform-specific vocabulary <part class=G:TopContainer> <part class=H:html> <part class=H:head>... <part class=H:title>......<part class=body>...

  23. Example of How UIML Is Used UIML describing application with generic vocabulary Transform Engine UIML/HTML vocabulary UIML/Java vocabulary HTML Renderer Java Renderer HTML for Web browser Java for Swing toolkit

  24. 3. UIML as Building Block Platform-Specific UIML Generic UIML UIML for Java Swing UIML Family Model for desktop platform UIML for HTML UIML Family Model for Voice platform Task Model UIML for VoiceXML UIML Family Model for WML platform UIML for WML Model->UIMLTransformation 1 UIML->UIMLTransformation

  25. Multi-platform UIs • Family model is in UIML using generic vocabulary • Generic vocabulary contains UI widgets like G:TopContainer, G:Label, etc.

  26. Task Model • Using ConcurTaskTree notation • Developed by Fabio Paterno, CNUCE-C.N.R., Pisa, Italy • Hierarchical tree-like structure • Each node in tree indicates a task • Temporal operator exists between adjacent sibling tasks

  27. Task Types • Four different task types • User • Interaction • Abstract • Application • Eight different kinds of temporal operators

  28. Use of Task Model • Developer builds task model specifying task types and temporal operators • Transformation done by system to create generic UIML, mapping • tasks to UIML ‘parts’ or widgets • temporal operators to UIML ‘behavior’

  29. Sample Task Model

  30. Task Model-centric Interaction Design UIML for Java Swing Family Model for desktop platform Task Model UIML for HTML Family Model for Voice platform UIML for VoiceXML Family Model for phone platform UIML for WML Interaction design Interaction s/w impl. Interaction s/w design Task/Domain analysis Traditional Usability Engineering

  31. Future Research • Accessibility • Treat accessible toolkits as a separate platform • TIDE • Enhance the current version • Introduce more platforms

  32. TIDE

  33. Publications • CADUI’2002 Full Paper • CHI’2002 Short Paper • Book chapter in edited book “Multi-Device User Interfaces: Engineering and Application Frameworks”

  34. Questions?

More Related