1. A first draft of a Model-driven Method for Designing Graphical User Interfaces of Rich Internet Applications Francisco J. Martínez-Ruiz 1, Jaime Muñoz Arteaga 2, Jean Vanderdonckt 3 and Juan M. González-Calleros 3 1Universidad Autónoma de Zacatecas. Departamento de Ingeniería en Computación, Avenida Ramón López Velarde No. 801, Zacatecas, Zac., 98060. México. jamaru@acm.org 2Universidad Autónoma de Aguascalientes. Centro de Ciencias Básicas Aguascalientes, México. jmunozar@correo.uaa.mx Aguascalientes, México. jmunozar@correo.uaa.mx 3Université catholique de Louvain, Belgian Lab. of Computer-Human Interaction {vanderdonckt, gonzalez}@isys.ucl.ac.be

2. 4th Latin American Web Congress October 25-27 2006 A first draft of a Model-driven Method for Designing Graphical User Interfaces of Rich Internet Applications 2 Agenda  Introduction  Problem Description  Method Outline  Study Case  Conclusions and Future Work

3. 4th Latin American Web Congress October 25-27 2006 A first draft of a Model-driven Method for Designing Graphical User Interfaces of Rich Internet Applications 3 Introduction Today a model-based design of interactive software applications is an approach which is gaining more acceptance. The increasing number of applications to be build and the growing number of conditions that applications should fulfill e.g., Web applications are made for a wide spectrum of users and requirements.

4. 4th Latin American Web Congress October 25-27 2006 A first draft of a Model-driven Method for Designing Graphical User Interfaces of Rich Internet Applications 4 Typical architecture of a RIA application The new Web applications that are emerging are called Rich Internet Applications (RIAs).

5. 4th Latin American Web Congress October 25-27 2006 A first draft of a Model-driven Method for Designing Graphical User Interfaces of Rich Internet Applications 5 Cameleon Framework  Building a model based application requires a framework to define the design steps needed for describe our computer system, including the features: Multi-level abstraction, Modality and independence, among others [2].  The Cameleon Reference framework [3] expresses these features to describe an application.

6. 4th Latin American Web Congress October 25-27 2006 A first draft of a Model-driven Method for Designing Graphical User Interfaces of Rich Internet Applications 6 Problem Description  First, typical web applications are built from back to front leaving to final stages the development of User Interfaces, this approach is changing, especially from the new multimedia overloaded RIA User Interfaces (RIAUI).  Second, RIAUIs construction blocks include a plethora of gadgets not available in typical desktop applications so it’s needed a new method to deal with these applications [16].

7. 4th Latin American Web Congress October 25-27 2006 A first draft of a Model-driven Method for Designing Graphical User Interfaces of Rich Internet Applications 7 Method Outline

8. 4th Latin American Web Congress October 25-27 2006 A first draft of a Model-driven Method for Designing Graphical User Interfaces of Rich Internet Applications 8 Study Case Our scenario is the design of a very basic e- commerce application, shown in Figures in the right section. This is build upon basic elements available in all of RIA languages [8, 9, 10, 11]

9. 4th Latin American Web Congress October 25-27 2006 A first draft of a Model-driven Method for Designing Graphical User Interfaces of Rich Internet Applications 9 Step 1.a: The Task model

10. 4th Latin American Web Congress October 25-27 2006 A first draft of a Model-driven Method for Designing Graphical User Interfaces of Rich Internet Applications 10 Step 1.b: The Domain model

11. 4th Latin American Web Congress October 25-27 2006 A first draft of a Model-driven Method for Designing Graphical User Interfaces of Rich Internet Applications 11 Step 2: Generation of the Abstract User Interface (AUI) The production of an AUI requires the definition of all the elements needed to fulfill the task; these elements are already defined in the previous models (Task&Domain).

12. 4th Latin American Web Congress October 25-27 2006 A first draft of a Model-driven Method for Designing Graphical User Interfaces of Rich Internet Applications 12 Step 2: Generation of the Abstract User Interface (AUI)

13. 4th Latin American Web Congress October 25-27 2006 A first draft of a Model-driven Method for Designing Graphical User Interfaces of Rich Internet Applications 13 Step 3: Generation of the Concrete User Interface (CUI) AICFacet Specification Relevant Information Possible CIC “Start”  Control  Feedback A trigger “Select a Fruit”  Select attribute value  Values are known  Data type  Domain Characteristics Images “Drop it to basket”  Create attribute value  Data type  Domain Characteristics  Selection Value Image “Insert Name”  Create attribute value  Data type  Domain Characteristics An output text “Insert Address”  Create attribute value  Data type  Domain Characteristics An output text “Show total”  Output (Value unknown)  Data type  Domain Characteristics An output text “Submit Order”  Control  Feedback A trigger Table 1: Features of AIC that would aid in the selection of the correct CIC.

14. 4th Latin American Web Congress October 25-27 2006 A first draft of a Model-driven Method for Designing Graphical User Interfaces of Rich Internet Applications 14 Resulting CUI UsiXML Specification <uiModel xmlns="http://www.usixml.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.usixml.org/ http://www.usixml.org/spec/UsiXML-ui_model.xsd" id="FruitStore_31" name="FruitStore" creationDate="2006-03-31T11:03:50.109-06:00" schemaVersion="1.6.3" xsi:type="uiModel"> 1 Javier Martinez Generated by GrafiXML 1.1.999 build id : 200602081036 <window id="window_component_0" name="window_component_0" width="400" height="350"> <imageComponent id="image_component_2" name="image_component_2" tooltip="/uiModel/resourceModel/cioRef[@cioId='image_component_2']/resource/@tooltip" defaultTooltip="Apples (£5)" content="/uiModel/resourceModel/cioRef[@cioId='image_component_2']/resource/@content" defaultContent="/resources/00/" isVisible="true" isEnabled="true" textColor="#000000"/> …

15. 4th Latin American Web Congress October 25-27 2006 A first draft of a Model-driven Method for Designing Graphical User Interfaces of Rich Internet Applications 15 Step 4: Generation of the Final User Interface (FUI) This section describes the way XSL transformations are applied to generate XAML output. This section describes the way XSL transformations are applied to generate XAML output. <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:wf="http://schemas.microsoft.com/2003/xaml/" version="1.0">

16. 4th Latin American Web Congress October 25-27 2006 A first draft of a Model-driven Method for Designing Graphical User Interfaces of Rich Internet Applications 16 XAML Second resulting file XAML Second resulting file

17. 4th Latin American Web Congress October 25-27 2006 A first draft of a Model-driven Method for Designing Graphical User Interfaces of Rich Internet Applications 17 Conclusions In this paper we have presented a novel method for designing Graphical User Interfaces of RIAs.  The process can produce an automatic generated UI that follows the principles of the Model Driven Engineering. 2. Beginning with the recompilation of the user requirements an abstract model of the UI is created and using a iterative series of XSLT transformations the model is successively translated to more concrete model to finally arrive to a Platform Specific model (PSM).

18. 4th Latin American Web Congress October 25-27 2006 A first draft of a Model-driven Method for Designing Graphical User Interfaces of Rich Internet Applications 18 Future Work  Right now we are compiling a repository of all the UI gadgets (components) defined in XAML for complete the XSLT translation sheet in a java implemented prototype called RIAXML but in this early stage of development, some interesting features are still non included e.g., how to deal with alternatives in the widgets selection and define the most suitable.  While we concretize the template model of our application more details have to be included. For instance, width and length of each element, colors, position within the containers, among others. So, how to define this set of attributes? It’s a question that requires the aid of ergonomic criteria to be answered.  Furthermore, the presented solution is targeted to XAML in future versions, the final implementation code should be a free choice of developers.

19. A first draft of a Model-driven Method for Designing Graphical User Interfaces of Rich Internet Applications Francisco J. Martínez-Ruiz 1, Jaime Muñoz Arteaga 2, Jean Vanderdonckt 3 and Juan M. González-Calleros 3 1Universidad Autónoma de Zacatecas. Departamento de Ingeniería en Computación, Avenida Ramón López Velarde No. 801, Zacatecas, Zac., 98060. México. jamaru@acm.org 2Universidad Autónoma de Aguascalientes. Centro de Ciencias Básicas Aguascalientes, México. jmunozar@correo.uaa.mx Aguascalientes, México. jmunozar@correo.uaa.mx 3Université catholique de Louvain, Belgian Lab. of Computer-Human Interaction {vanderdonckt, gonzalez}@isys.ucl.ac.be