1.November9-11, 2009 - Mrida,Mexico La-Web09 A Model-Based Approach for Developing Vectorial User Interfaces Jean Vanderdonckt,Josefina Guerrero-Garca ,Juan Manuel Gonzalez-Calleros Universit catholique de Louvain (UCL),Louvain School of Management (LSM) Information Systems Unit (ISYS) [email_address] [email_address] [email_address]

2. Outline

Introduction

State of the Art

Model-Based Approach for Vectorial User Interfaces

Case Study

Conclusion

November9-11, 2009 - Mrida,Mexico La-Web09 3.

A vectorial user interface exhibits the capability of being rescaled along any dimension without any loss of information.

Taking advantage of the characteristics offered by the context of use

• Shrink

• Grow

• Resizearbitrarily

Introduction November9-11, 2009 - Mrida,Mexico La-Web09 4.

The potential advantages of a vectorial UI for a web user are:

• Platform independence. The same UI can be rendered indifferently on any platform .

• User interface scalability. The same UI can be rescaled along any dimension.

Introduction November9-11, 2009 - Mrida,Mexico La-Web09 5.

Developing Vectorial UI still poses several challenges:

• For the developer:

• • Toolkit is needed (e.g. Adobe Flash)

• • Every widget should be individually drawn

• • Software development life cycle remains mostly an ad-hoc implementation.

• • Hard to achieve active support for dynamic content.

Introduction November9-11, 2009 - Mrida,Mexico La-Web09 6.

• For the designer:

• • rush to the code before designing anything

• • difficult to design a UI for multiple contexts of use

• • liquid design

• For the end user:

• • Slow rendering

• • resource-demanding

• • usability is not guaranteed

• • badly or incorrectly produced, or illegible

Introduction November9-11, 2009 - Mrida,Mexico La-Web09 7.

A model-based approach for developing a vectorial user interface of a web application is proposed:

• A model describes the vectorial user interface

• • Presentation + Behavior

• Model is independent of any context of use.

A rendering engine was built

• parses this model at run-time

• render the user interface

• Facilitating platform adaptation

Such adaptation for the benefit of the end user.

Introduction November9-11, 2009 - Mrida,Mexico La-Web09 8. Outline

Introduction

State of the Art

Model-Based Approach for Vectorial User Interfaces

Case Study

Conclusion

November9-11, 2009 - Mrida,Mexico La-Web09 9. State of the art November9-11, 2009 - Mrida,Mexico La-Web09

• Degrafa ( www.degrafa.org )

• ZK( www.zkoss.org )

• Adobe Flash Catalyst

• NetBeans JavaFX( http://javafx.com/ )

• Eclipse4SL

• .

Several IDEs to develop Vectorial UI: 10. Artistic Resizing: [Dragicevic 2005] ( http://www.intuilab.com/artresize)A scenario 11. Artistic ResizingA scenario 12. Artistic ResizingA scenario 13. Artistic ResizingA scenario 14. Artistic ResizingA scenario 15. Artistic ResizingA scenario ? 16. State of the art November9-11, 2009 - Mrida,Mexico La-Web09

From the literature review we found:

• Platform independency

• Multi-Device support

Still some problems to develop a vectorial UI such as:

• Time consuming

• Extensibility

• UIDL missing or not open

• Effects for window transitions

• Widgets must be started from scratch

17. Outline

Introduction

State of the Art

Model-Based Approach for Vectorial User Interfaces

Case Study

Conclusion

November9-11, 2009 - Mrida,Mexico La-Web09 18.

Developing Vectorial UI is an activity that would benefit from the application of a methodology which is typically composed of:

• a set ofmodelsgathered in an ontology,

• amethodmanipulating the involved models based on guidelines,

• alanguagethat express models in the method.

• atool supportsupporting the method

Model-Based Approach for Vectorial User Interfaces November9-11, 2009 - Mrida,Mexico La-Web09 19. Method November9-11, 2009 - Mrida,Mexico La-Web09 Final user Interface T Concrete user Interface T Task andDomain T Abstract user Interface T T=Target context of use Concrete user Interface S Final user Interface S Task andDomain S Abstract user Interface S S=Source context of use http://www.plasticity.org UsiXML unsupported model UsiXML supported model User S User T Environment T Reification Abstraction Reflexion Translation Platform S Environment S Platform T 20. Models November9-11, 2009 - Mrida,Mexico La-Web09

A Concrete User Interface Model for Vectorial Ui:

• A Hierarchy of concrete interaction objects (CIOs) + behavior

• Graphical CIO = containers (window, dialog box,menu bar ) or individual (data chooser, text input, check box). Compliant with any toolkit + custom widgets

21. Lanuguage November9-11, 2009 - Mrida,Mexico La-Web09

A User Interface Description Language (UIDL) is needed

UsiXML was chosen among other reasons because:

• Coverage of elements and models for Model-Driven UI development.

• Quality of the semantic definition of the language.

• Open, Extensible.

Flash was chosen as a target Language for Vectorial UI

• Flash is a plug-in that can be installed in most computer devices

• • Multiplatform

• • Multi device

22. Software Tool support November9-11, 2009 - Mrida,Mexico La-Web09

A software tool was develop in order to support the rendering of Vectorial User Interfaces with the following characteristics:

• Multilingual UI

• Event handling triggering behavior defined internally (windows transitions) and externally (scripts)

• The possibility to execute programs locally (client oriented) or remotely (server oriented)

• The portability due to the use of a standard target language.

23. Software Tool support November9-11, 2009 - Mrida,Mexico La-Web09

Server Apache Server

• PHP + MING library create SWF ("Flash") format

Client Web Browser + Flash Player FlashiXML Script File text UsiXML Flash Running File 24. Software Tool support November9-11, 2009 - Mrida,Mexico La-Web09

Server Apache Server

• PHP + MING library create SWF ("Flash") format

Client

System parameters

Language Parameters

Navigation Manager

Parameters of the graphical elements of the User Interface

• Rules for the correct rendering of the widgets

• • Average size of widgets for rendering

• • Average number of characters for text components

Web Browser + Flash Player FlashiXML Script File text UsiXML Flash Running File 25. Software Tool support

From UsiXML to Flash there were some:

• Direct Correspondences ( button, check box, date chooser, loader component, menu, radio button, dialog box, tree, window )

• • No need for new attributes

• No direct correspondence

• • combo boxwith its attribute is drop down=true is a a flash combo box otherwise a flash list

November9-11, 2009 - Mrida,Mexico La-Web09 26. Software Tool support

• No direct correspondence (Cont)

• • Text component along with its attributes can be:

November9-11, 2009 - Mrida,Mexico La-Web09 Label Text Field PasswordField Text area 27. Software Tool support

• No correspondence at all

• • Box layout

November9-11, 2009 - Mrida,Mexico La-Web09 28. Software Tool support November9-11, 2009 - Mrida,Mexico La-Web09

Positioning Graphical Elements

• Widgets are located based on the hierarchy of the UsiXML

• Boxes and Windows are useful for the layout

BT0 BT1 29. Software Tool support November9-11, 2009 - Mrida,Mexico La-Web09

Adding Behavior

• On Event if Condition then Action (ECA Rules)

• Events limited to those supported by Flash

• Conditions are Strings with logical operator

• Actions, Call to methods

30. Software Tool support November9-11, 2009 - Mrida,Mexico La-Web09

Adding Behavior (Cont)

• ActionsWindows transitions

• • Fade Out Windows transition

31. Software Tool support November9-11, 2009 - Mrida,Mexico La-Web09

Context Adaptation

• Resize the screen

• Graceful degradation

• • Widgets replacement

• • Widgets removal

• Multilingual support

32. Outline

Introduction

State of the Art

Model-Based Approach for Vectorial User Interfaces

Case Study

Conclusion

November9-11, 2009 - Mrida,Mexico La-Web09 33. Case Study November9-11, 2009 - Mrida,Mexico La-Web09

Demos

LaunchDemo 34. Outline

Introduction

State of the Art

Model-Based Approach for Vectorial User Interfaces

Case Study

Conclusion

November9-11, 2009 - Mrida,Mexico La-Web09 35. Conclusion November9-11, 2009 - Mrida,Mexico La-Web09

The present work contributes to the development Life-Cycle of Vectorial UIs

Relying on Flash assures the support for portability multiplatform adaptation

UIDL independency of the context of use

Future work:

• Improve script support

• Support more dynamic changes

• Graceful degradation support

• UI mutation

• RIAs

36.

Disadvantages

• non-correspondence between the source and target language which means that any change in the target language need an adaptation of the system

• once rendered, there is no way to adapt the UI but just relying on the supported adaptation to screen size provided by Flash.

• accessibility barriers for many people with physical disabilities

November9-11, 2009 - Mrida,Mexico CLIHC09 Conclusion 37. Conclusion November9-11, 2009 - Mrida,Mexico La-Web09

Future work:

• Improve script support

• Support more dynamic changes

• Graceful degradation support

• UI mutation

• RIAs

38.CLIHC 2009, November 9-11,2009. Mrida, Yucatn, Mexico. Thank you very much for your attention For more information and downloading, http://www.isys.ucl.ac.be/bchi http://www.usixml.org User Interface eXtensible Markup Language http://www.uaa.mx http://itea.defimedia.be/usixml-france ITEA2 Call 3 project (2008026)