Model Driven Engineering of Rich Internet Applications Equipped with Zoomable User Interfaces

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


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.


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


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


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)


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).


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.







ZUI example: Reading A Text…


Algorithm for generating ZUIs

Transform TTD into a ZUIT


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


A

B

C

Application of the coding schemes

2

Modifying the ZUIT


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


4

ZUI States


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


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


Case Study in ZUIT notation



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.


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.



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)

http://www.isys.ucl.ac.be/bchi

http://www.usixml.org/

http://itea.defimedia.be/usixml-france

Model Driven Engineering of Rich Internet Applications Equipped with Zoomable User Interfaces

Technology

Transcript of Model Driven Engineering of Rich Internet Applications Equipped with Zoomable User Interfaces