Download - A Model-Based Approach for Developing Vectorial User Interfaces

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.

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.

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

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

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

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.

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

Adding Behavior (Cont)

ActionsWindows transitions

- Fade Out Windows transition

Context Adaptation

Resize the screen

Graceful degradation

- Widgets replacement

- Widgets removal

Multilingual support

32. Outline

Introduction

State of the Art

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

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)

Download - A Model-Based Approach for Developing Vectorial User Interfaces

Top Related