A Model-Based Approach for Developing Vectorial User Interfaces
-
Upload
jean-vanderdonckt -
Category
Technology
-
view
6 -
download
0
description
Transcript of 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.
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)