1. 1 November 9-11, 2009 - Mérida, Mexico La-Web’09 A Model-Based Approach for Developing Vectorial User Interfaces Jean Vanderdonckt, Josefina Guerrero-García, Juan Manuel Gonzalez-Calleros Université catholique de Louvain (UCL), Louvain School of Management (LSM) Information Systems Unit (ISYS) jean.vanderdonckt@uclouvain.be josefina.guerrero@uclouvain.be juan.m.gonzalez@uclouvain.be

2. 2 November 9-11, 2009 - Mérida, Mexico La-Web’09 Outline 1.Introduction 2.State of the Art 3.Model-Based Approach for Vectorial User Interfaces 4.Case Study 5.Conclusion

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 –Resize arbitrarily 3 November 9-11, 2009 - Mérida, Mexico La-Web’09 Introduction

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. 4 November 9-11, 2009 - Mérida, Mexico La-Web’09 Introduction

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. 5 November 9-11, 2009 - Mérida, Mexico La-Web’09 Introduction

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 6November 9-11, 2009 - Mérida, Mexico La-Web’09 Introduction

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. 7 November 9-11, 2009 - Mérida, Mexico La-Web’09 Introduction

8. 8 November 9-11, 2009 - Mérida, Mexico La-Web’09 Outline 1.Introduction 2.State of the Art 3.Model-Based Approach for Vectorial User Interfaces 4.Case Study 5.Conclusion

9. 9 November 9-11, 2009 - Mérida, Mexico La-Web’09 State of the art Degrafa (www.degrafa.org)www.degrafa.org ZK (www.zkoss.org)www.zkoss.org Adobe Flash Catalyst NetBeans JavaFX (http://javafx.com/)http://javafx.com/ Eclipse4SL ……. Several IDE’s to develop Vectorial UI:

10. 10 Artistic Resizing: [Dragicevic 2005] (http://www.intuilab.com/artresize) A scenario

11. 11 Artistic Resizing A scenario

12. 12 Artistic Resizing A scenario

13. 13 Artistic Resizing A scenario

14. 14 Artistic Resizing A scenario

15. 15 Artistic Resizing A scenario

16. 16 November 9-11, 2009 - Mérida, Mexico La-Web’09 State of the art 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. 17 November 9-11, 2009 - Mérida, Mexico La-Web’09 Outline 1.Introduction 2.State of the Art 3.Model-Based Approach for Vectorial User Interfaces 4.Case Study 5.Conclusion

18. Developing Vectorial UI is an activity that would benefit from the application of a methodology which is typically composed of: –a set of models gathered in an ontology, –a method manipulating the involved models based on guidelines, –a language that express models in the method. –a tool support supporting the method 18 November 9-11, 2009 - Mérida, Mexico La-Web’09 Model-Based Approach for Vectorial User Interfaces

19. 19 November 9-11, 2009 - Mérida, Mexico La-Web’09 Method Environment T Final user Interface T Concrete user Interface T Task and Domain T Abstract user Interface T T=Target context of use Concrete user Interface S Final user Interface S Task and Domain S Abstract user Interface S S=Source context of use Reification Abstraction Reflexion Translation http://www.plasticity.org UsiXML unsupported model UsiXML supported model User S Platform SEnvironment SPlatform T User T

20. 20 November 9-11, 2009 - Mérida, Mexico La-Web’09 Models 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. 21 November 9-11, 2009 - Mérida, Mexico La-Web’09 Lanuguage 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. 22 November 9-11, 2009 - Mérida, Mexico La-Web’09 Software Tool support 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. 23 November 9-11, 2009 - Mérida, Mexico La-Web’09 Software Tool support Server – Apache Server PHP + MING library create SWF ("Flash") format Client Web Browser + Flash Player FlashiXML Script File text UsiXML Flash Running File

24. 24 November 9-11, 2009 - Mérida, Mexico La-Web’09 Software Tool support Server – Apache Server PHP + MING library create SWF ("Flash") format Client Web Browser + Flash Player FlashiXML Script File text UsiXML Flash Running File 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

25. 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 box with its attribute is drop down=true is a a flash combo box otherwise a flash list 25 November 9-11, 2009 - Mérida, Mexico La-Web’09 Software Tool support

26. No direct correspondence (Cont…) Text component along with its attributes can be: 26 November 9-11, 2009 - Mérida, Mexico La-Web’09 Software Tool support Label Text Field Password Field Text area

27. No correspondence at all Box layout 27 November 9-11, 2009 - Mérida, Mexico La-Web’09 Software Tool support

28. 28 November 9-11, 2009 - Mérida, Mexico La-Web’09 Software Tool support Positioning Graphical Elements Widgets are located based on the hierarchy of the UsiXML Boxes and Windows are useful for the layout BT0BT1

29. 29 November 9-11, 2009 - Mérida, Mexico La-Web’09 Software Tool support 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. 30 November 9-11, 2009 - Mérida, Mexico La-Web’09 Software Tool support Adding Behavior (Cont…) Actions Windows transitions Fade Out Windows transition

31. 31 November 9-11, 2009 - Mérida, Mexico La-Web’09 Software Tool support Context Adaptation Resize the screen Graceful degradation Widgets replacement Widgets removal Multilingual support

32. 32 November 9-11, 2009 - Mérida, Mexico La-Web’09 Outline 1.Introduction 2.State of the Art 3.Model-Based Approach for Vectorial User Interfaces 4.Case Study 5.Conclusion

33. 33 November 9-11, 2009 - Mérida, Mexico La-Web’09 Case Study Demos Launch Demo

34. 34 November 9-11, 2009 - Mérida, Mexico La-Web’09 Outline 1.Introduction 2.State of the Art 3.Model-Based Approach for Vectorial User Interfaces 4.Case Study 5.Conclusion

35. 35 November 9-11, 2009 - Mérida, Mexico La-Web’09 Conclusion 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 36 November 9-11, 2009 - Mérida, Mexico CLIHC’09 Conclusion

37. 37 November 9-11, 2009 - Mérida, Mexico La-Web’09 Conclusion Future work: Improve script support Support more dynamic changes Graceful degradation support UI mutation RIAs

38. 38 CLIHC 2009, November 9-11,2009. Mérida, Yucatán, Mexico. Thank you very much for your attention For more information and downloading, http://www.isys.ucl.ac.be/bchi 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)