Model Driven Engineering of Rich Internet Applications Equipped with Zoomable User Interfaces
âąAls PPT, PDF herunterladenâą
0 gefĂ€llt mirâą440 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 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.
![Outline of the presentation ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],LAWEB 2009 (Nov 9-11, Merida, Mexico) Francisco Javier Martinez-Ruiz](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)
Empfohlen
Empfohlen
Weitere Àhnliche Inhalte
Ăhnlich wie Model Driven Engineering of Rich Internet Applications Equipped with Zoomable User Interfaces
Ăhnlich wie Model Driven Engineering of Rich Internet Applications Equipped with Zoomable User Interfaces (20)
Mehr von Jean Vanderdonckt
Mehr von Jean Vanderdonckt (20)
KĂŒrzlich hochgeladen
KĂŒrzlich hochgeladen (20)
Model Driven Engineering of Rich Internet Applications Equipped with Zoomable User Interfaces
- 1. 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
- 4. 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
- 5. 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
- 6. 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
- 8. 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.
- 9. LAWEB 2009 (Nov 9-11, Merida, Mexico) Algorithm for generating ZUIs
- 10. 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
- 11. Coding Schemes LAWEB 2009 (Nov 9-11, Merida, Mexico) Application of the coding schemes A B C 2
- 13. Exploring ZUI patterns LAWEB 2009 (Nov 9-11, Merida, Mexico) 4
- 14. 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
- 15. 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.
- 16. Case Study in CTT notation LAWEB 2009 (Nov 9-11, Merida, Mexico)
- 17. Case Study in ZUIT notation LAWEB 2009 (Nov 9-11, Merida, Mexico)
- 18. LAWEB 2009 (Nov 9-11, Merida, Mexico) Video of the prototype
- 21. 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)
Hinweis der Redaktion
- 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.