View
830
Download
2
Category
Tags:
Preview:
DESCRIPTION
The development of a Rich Internet Application is particularly challenging because its user interface can involve highly interactive techniques that require substantive programming that is mostly done by hand nowadays. This paper addresses this challenge by introducing a model-driven engineering approach where a zoomable user interface of such a Rich Internet Application is obtained successively by performing the following steps: the Computing Independent Model level consists of modeling a task for the future interface based on a list of canonical task types augmented by custom tasks, each task being mapped onto a domain model; the Platform Independent Model level consists of exploiting the structure and the temporal operators of this task model in order to generate one or many abstract user interfaces that will lead in turn to concrete user interfaces structured according to the principles of a zoomable user interface at the Platform Specific Model level.
Citation preview
LAWEB 2009 (Nov 9-11, Merida, Mexico)
Model Driven Engineering of Rich Internet Applications
equipped with Zoomable User Interfaces
Francisco Javier Martínez-Ruiz1,3, Jean Vanderdonckt1,
Juan Manuel Gonzalez-Calleros1 and Jaime Muñoz-Arteaga2
1Université catholique de Louvain (UCL)Louvain School of Management (LSM) - Information Systems Unit (ISYS)
Belgian Laboratory of Computer-Human Interaction (BCHI)
2Universidad Autonoma de Aguascalientes3Universidad Autonoma de Zacatecas
Fra
nci
sco
Ja
vie
r M
art
ine
z-R
uiz
Outline of the presentation
Introduction to RIAs Problem Description Case Study Method Description ZUI Patterns Conclusions Future work
LAWEB 2009 (Nov 9-11, Merida, Mexico)
Fra
nci
sco
Ja
vie
r M
art
ine
z-R
uiz
What are RIAs?
Rich Internet Applications (RIAs) These are web applications that offer similar features and capabilities to the software applications available in desktop applications, e.g., robustness, dynamic adaptation depending on users’ profiles and multimedia.
Also, their development introduces a series of problems: temporal constraints in terms of loading presentation elements
and application logic (encapsulated in an ECMAScript dialect mostly Javascript).
Most of the UI rendering is transferred to client-side.
LAWEB 2009 (Nov 9-11, Merida, Mexico)
Fra
nci
sco
Ja
vie
r M
art
ine
z-R
uiz
4 November 9-11, 2009 - Mérida, Mexico La-Web’09
Method
Environment T
Final userInterface T
Concrete userInterface T
Task and Domain T
Abstract userInterface T
T=Target context of use
Concrete userInterface S
Final userInterface S
Task and Domain S
Abstract userInterface S
S=Source context of use
Reification
Abstraction
Reflexion
Translation
http://www.plasticity.org
UsiXMLunsupported
model
UsiXMLsupported
model
User S Platform S Environment S Platform TUser T
Task tree Description limitations
LAWEB 2009 (Nov 9-11, Merida, Mexico)
Task Tree Descriptions display a monotonic nature (see the figure).
Trees are structured by hierarchies of nodes where the only semantic information to be collected is the relationship between children and parent nodes (i.e., deepness).
Fra
nci
sco
Ja
vie
r M
art
ine
z-R
uiz
Proposed Method
LAWEB 2009 (Nov 9-11, Merida, Mexico)
Create a TTD with idealXML tool
Transform TTD into ZUIT representation
Modify Weight scheme
Modify Color/Texture scheme
Modify ZUIT to fulfill application requirements
Zoom in and out navigation
Charge or add tasks
Inclusion of ZUI Container Patterns
1
2
3
4
Concrete userInterface level
Final userInterface Level
Task and Domain level
Abstract userInterface level
General Method
Fra
nci
sco
Ja
vie
r M
art
ine
z-R
uiz
What is a ZUIT?
Zoomable User Interface Task Hierarchy description (ZUIT)
LAWEB 2009 (Nov 9-11, Merida, Mexico)
ZUIs are a very well established study subject and they are applicable over large information sets.
We have proposed an alternative representation of the task tree (or hierarchy) in order to overcome or reduce the problematic of the Task tree. This representation is called: ZUIT.
The main feature is the zooming navigation. Zooming is utilized by users in multiple activities, for instance in the process of reading a newspaper since this activity includes a zooming out task (when titles are browsed).
LAWEB 2009 (Nov 9-11, Merida, Mexico)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin porttitor tincidunt
hendrerit. Phasellus porttitor, eros non condimentum adipiscing, arcu lorem ultricies orci, in dictum ipsum urna eget ligula.
Donec interdum pellentesque dolor, ac accumsan nunc blandit euismod. Etiam ac mattis sapien. Integer eget turpis at urna luctus dignissim. Fusce augue dui, ultricies vel vehicula eget, dignissim non tortor. Fusce lacus arcu, commodo non venenatis quis, lobortis id sem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin porttitor tincidunt hendrerit. Phasellus porttitor, eros non condimentum adipiscing, arcu lorem ultricies orci, in dictum ipsum urna eget ligula. Donec fringilla ipsum tortor sed augue. Ut imperdiet enim eu felis tempor pellentesque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In congue porttitor porta.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin porttitor tincidunt hendrerit. Phasellus porttitor, eros non condimentum adipiscing, arcu lorem ultricies orci, in dictum ipsum urna eget ligula. Donec fringilla ipsum tortor sed augue. Ut imperdiet enim eu felis tempor pellentesque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In congue porttitor porta.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin porttitor tincidunt hendrerit. Phasellus porttitor, eros non condimentum adipiscing, arcu lorem ultricies orci, in dictum ipsum urna eget ligula. Donec fringilla ipsum tortor sed augue. Ut imperdiet enim eu felis tempor pellentesque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In congue porttitor porta.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin porttitor tincidunt hendrerit. Phasellus porttitor, eros non condimentum adipiscing, arcu lorem ultricies orci, in dictum ipsum urna eget ligula. Donec fringilla ipsum tortor sed augue. Ut imperdiet enim eu felis tempor pellentesque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In congue porttitor porta.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin porttitor tincidunt hendrerit. Phasellus porttitor, eros non condimentum adipiscing, arcu lorem ultricies orci, in dictum ipsum urna eget ligula. Donec fringilla ipsum tortor sed augue. Ut imperdiet enim eu felis tempor pellentesque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In congue porttitor porta.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin porttitor tincidunt hendrerit. Phasellus porttitor, eros non condimentum adipiscing, arcu lorem ultricies orci, in dictum ipsum urna eget ligula. Donec fringilla ipsum tortor sed augue. Ut imperdiet enim eu felis tempor pellentesque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In congue porttitor porta.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin porttitor tincidunt hendrerit. Phasellus porttitor, eros non condimentum adipiscing, arcu lorem ultricies orci, in dictum ipsum urna eget ligula. Donec fringilla ipsum tortor sed augue. Ut imperdiet enim eu felis tempor pellentesque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In congue porttitor porta.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin porttitor tincidunt hendrerit. Phasellus porttitor, eros non condimentum adipiscing, arcu lorem ultricies orci, in dictum ipsum urna eget ligula. Donec fringilla ipsum tortor sed augue. Ut imperdiet enim eu felis tempor pellentesque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In congue porttitor porta.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin porttitor tincidunt hendrerit. Phasellus porttitor, eros non condimentum adipiscing, arcu lorem ultricies orci, in dictum ipsum urna eget ligula. Donec fringilla ipsum tortor sed augue. Ut imperdiet enim eu felis tempor pellentesque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In congue porttitor porta.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin porttitor tincidunt hendrerit. Phasellus porttitor, eros non condimentum adipiscing, arcu lorem ultricies orci, in dictum ipsum urna eget ligula. Donec fringilla ipsum tortor sed augue. Ut imperdiet enim eu felis tempor pellentesque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In congue porttitor porta.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin porttitor tincidunt hendrerit. Phasellus porttitor, eros non condimentum adipiscing, arcu lorem ultricies orci, in dictum ipsum urna eget ligula. Donec fringilla ipsum tortor sed augue. Ut imperdiet enim eu felis tempor pellentesque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In congue porttitor porta.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin porttitor tincidunt hendrerit. Phasellus porttitor, eros non condimentum adipiscing, arcu lorem ultricies orci, in dictum ipsum urna eget ligula. Donec fringilla ipsum tortor sed augue. Ut imperdiet enim eu felis tempor pellentesque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In congue porttitor porta.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin porttitor tincidunt hendrerit. Phasellus porttitor, eros non condimentum adipiscing, arcu lorem ultricies orci, in dictum ipsum urna eget ligula. Donec fringilla ipsum tortor sed augue. Ut imperdiet enim eu felis tempor pellentesque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In congue porttitor porta.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin porttitor tincidunt hendrerit. Phasellus porttitor, eros non condimentum adipiscing, arcu lorem ultricies orci, in dictum ipsum urna eget ligula. Donec fringilla ipsum tortor sed augue. Ut imperdiet enim eu felis tempor pellentesque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In congue porttitor porta.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin porttitor tincidunt hendrerit. Phasellus porttitor, eros non condimentum adipiscing, arcu lorem ultricies orci, in dictum ipsum urna eget ligula. Donec fringilla ipsum tortor sed augue. Ut imperdiet enim eu felis tempor pellentesque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In congue porttitor porta.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin porttitor tincidunt hendrerit. Phasellus porttitor, eros non condimentum adipiscing, arcu lorem ultricies orci, in dictum ipsum urna eget ligula. Donec fringilla ipsum tortor sed augue. Ut imperdiet enim eu felis tempor pellentesque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In congue porttitor porta.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin porttitor
tincidunt hendrerit. Phasellus porttitor, eros non condimentum adipiscing, arcu lorem ultricies orci, in dictum ipsum urna eget ligula. Donec fringilla ipsum tortor sed augue. Ut imperdiet enim eu felis tempor pellentesque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In congue porttitor porta.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin porttitor
tincidunt hendrerit. Phasellus porttitor, eros non condimentum adipiscing, arcu lorem ultricies orci, in dictum ipsum urna eget ligula. Donec fringilla ipsum tortor sed augue. Ut imperdiet enim eu felis tempor pellentesque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In congue porttitor porta.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin porttitor
tincidunt hendrerit. Phasellus porttitor, eros non condimentum adipiscing, arcu lorem ultricies orci, in dictum ipsum urna eget ligula. Donec fringilla ipsum tortor sed augue. Ut imperdiet enim eu felis tempor pellentesque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In congue porttitor porta.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin porttitor
tincidunt hendrerit. Phasellus porttitor, eros non condimentum adipiscing, arcu lorem ultricies orci, in dictum ipsum urna eget ligula. Donec fringilla ipsum tortor sed augue. Ut imperdiet enim eu felis tempor pellentesque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In congue porttitor porta.
ZUI example: Reading A Text…
LAWEB 2009 (Nov 9-11, Merida, Mexico)
Algorithm for generating ZUIs
Transform TTD into a ZUIT
LAWEB 2009 (Nov 9-11, Merida, Mexico)
The key difference between this approach and the TTD is a better handling of the space.
Because, even with big models, the area exposed to developers remains the same.
2
Coding Schemes
LAWEB 2009 (Nov 9-11, Merida, Mexico)
A
B
C
Application of the coding schemes
2
Modifying the ZUIT
LAWEB 2009 (Nov 9-11, Merida, Mexico)
The next step is modifying the Task model.
navigating through the ZUIT updating the structure modifying task weights
changing task importance.
This updating process currently, is not automatic and requires the full regeneration of the ZUIT.
3
Exploring ZUI patterns
LAWEB 2009 (Nov 9-11, Merida, Mexico)
4
ZUI States
LAWEB 2009 (Nov 9-11, Merida, Mexico)
The icon state is not always present. The preview alternative states are not a common practice now-a-days.
Nevertheless, the provided model could handle all the possible states of this kind of UIs.
4
Case Study
LAWEB 2009 (Nov 9-11, Merida, Mexico)
1. http://www.nespresso.com
Note: This site is built based on horizontal tabs
This case study models an already existing site1 which includes zooming in the form of tabular sections.
Case Study in CTT notation
LAWEB 2009 (Nov 9-11, Merida, Mexico)
Case Study in ZUIT notation
LAWEB 2009 (Nov 9-11, Merida, Mexico)
LAWEB 2009 (Nov 9-11, Merida, Mexico)
Video of the prototype
Conclusions
In this paper we introduced ZUIT, a novel approach to support model driven development of RIAs.
The Task Tree Modeling step is treated with a Zoomable User Interface based widget in order to help developers to browse and refine the different tasks that constitute their webapps.
Various levels of the task hierarchy are permanently available and can be reached promptly. The navigation is one of the strong attributes of this approach
A set of ZUI patterns is proposed.
Finally, a general algorithm for delivering Zoomable UIs is proposed.
LAWEB 2009 (Nov 9-11, Merida, Mexico)
Future work
Also, we are working in the creation of a prototype in order to test this approach with running projects. Current examples are using (JQuery) as primary development software (see Figure, with different configurations).
Also, we are preparing a full definition of the equation for calculate the weight. Finally, the process of updating is manual and we are working in automatic version.
LAWEB 2009 (Nov 9-11, Merida, Mexico)
LAWEB 2009 (Nov 9-11, Merida, Mexico)
Thank you very much for your attention
For more information and downloading,http://www.isys.ucl.ac.be/bchi
http://www.usixml.orgUser Interface eXtensible Markup Language
Special thanks to all members of the team!
http://itea.defimedia.be/usixml-france ITEA2 Call 3 project (2008026)
Recommended