Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

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

on

  • 1,039 views

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

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.

Statistics

Views

Total Views
1,039
Slideshare-icon Views on SlideShare
1,039
Embed Views
0

Actions

Likes
0
Downloads
16
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • In software engineering, specification-based (or model-driven) approach relies in the power of models to construct and reason about software systems. This approach is based on models. The goal of model-based approach, for user interface development is to propose a set of abstractions, development processes and tools enabling a engineering approach of user interface development. The characteristics of an engineering approach are its systematic (development based of rational principles), its reproducibility, its orientation towards quality criteria. Figure 1. The Simplified Cameleon Reference Framework . Our methodology (Figure 1) structures development processes into four development steps: Task & Concepts (T&C): describe the various user’s tasks to be carried out and the domain-oriented concepts as they are required by these tasks to be performed. Abstract UI (AUI): defines abstract containers (AC) and individual components (AIC) two forms of Abstract Interaction Objects (AIO) [2] by grouping subtasks according to various criteria (e.g., task model structural patterns, cognitive load analysis, semantic relationships identification), a navigation scheme between the container and selects abstract individual component for each concept so that they are independent of any modality. Concrete UI (CUI): concretizes an abstract UI for a given context of use into Concrete Interaction Objects (CIOs) [4] so as to define widgets layout and interface navigation. It abstracts a FUI into a UI definition that is independent of any computing platform. Final UI (FUI): is the operational 3DUI i.e. any 3DUI running on a particular computing platform either by interpretation (e.g., through a Web browser) or by execution (e.g., after compilation of code in an interactive development environment. Model-Driven Development (MDD) approach has been selected for its characteristics, including but not limited to: Modifiability of the models, Complexity support, Rigorousness, some reasoning is possible to be understandable for humans.
  • enormous structures where developers are disoriented by the visual ambiguity of the repeating structures which observation could not lead us to the recovery of patterns nor semantic inferences.

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

  • LAWEB 2009 (Nov 9-11, Merida, Mexico) Model Driven Engineering of Rich Internet Applications equipped with Zoomable User Interfaces Francisco Javier Martínez-Ruiz 1,3 , Jean Vanderdonckt 1 , Juan Manuel Gonzalez-Calleros 1 and Jaime Muñoz-Arteaga 2 1 Université catholique de Louvain (UCL) Louvain School of Management (LSM) - Information Systems Unit (ISYS) Belgian Laboratory of Computer-Human Interaction (BCHI) 2 Universidad Autonoma de Aguascalientes 3 Universidad Autonoma de Zacatecas Francisco Javier Martinez-Ruiz
  • 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) Francisco Javier Martinez-Ruiz
  • 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) Francisco Javier Martinez-Ruiz
  • Method November 9-11, 2009 - Mérida, Mexico La-Web’09 Final user Interface T Concrete user Interface T Task and Domain T Abstract user Interface T T=Target context of use Concrete user Interface S Final user Interface S Task and Domain 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
  • 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). Francisco Javier Martinez-Ruiz
  • 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 General Method Francisco Javier Martinez-Ruiz 1 2 3 4 Concrete user Interface level Final user Interface Level Task and Domain level Abstract user Interface level
  • 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. ZUI example: Reading A Text… 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.
  • 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) Application of the coding schemes A B C 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 site 1 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)
  • Thank you very much for your attention LAWEB 2009 (Nov 9-11, Merida, Mexico) For more information and downloading, http://www.isys.ucl.ac.be/bchi http://www.usixml.org User Interface eXtensible Markup Language Special thanks to all members of the team! http://itea.defimedia.be/usixml-france ITEA2 Call 3 project (2008026)