- 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
- Model-Based Approach for Vectorial User Interfaces
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
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:
-
-
- 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.
-
-
- rush to the code before designing anything
-
-
- difficult to design a UI for multiple contexts of use
-
-
- 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
-
- 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
- Model-Based Approach for Vectorial User Interfaces
November9-11, 2009 - Mrida,Mexico La-Web09 9. State of the art
November9-11, 2009 - Mrida,Mexico La-Web09
-
- Degrafa ( www.degrafa.org )
-
- NetBeans JavaFX( http://javafx.com/ )
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:
- Still some problems to develop a vectorial UI such as:
-
- Effects for window transitions
-
- Widgets must be started from scratch
17. Outline
- Model-Based Approach for Vectorial User Interfaces
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.
- Flash was chosen as a target Language for Vectorial UI
-
- Flash is a plug-in that can be installed in most computer
devices
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:
-
- 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
-
- 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
-
- PHP + MING library create SWF ("Flash") format
Client
- 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
-
-
- 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
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
-
- On Event if Condition then Action (ECA Rules)
-
- Events limited to those supported by Flash
-
- Conditions are Strings with logical operator
30. Software Tool support November9-11, 2009 - Mrida,Mexico
La-Web09
-
- ActionsWindows transitions
-
-
- Fade Out Windows transition
31. Software Tool support November9-11, 2009 - Mrida,Mexico
La-Web09
32. Outline
- Model-Based Approach for Vectorial User Interfaces
November9-11, 2009 - Mrida,Mexico La-Web09 33. Case Study
November9-11, 2009 - Mrida,Mexico La-Web09
LaunchDemo 34. Outline
- Model-Based Approach for Vectorial User Interfaces
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
-
- Support more dynamic changes
-
- Graceful degradation support
36.
-
- 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
-
- Support more dynamic changes
-
- Graceful degradation support
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)