1 / 19

Francisco J. Martínez-Ruiz 1 , Jaime Muñoz Arteaga 2 ,

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

shantell-allen
Télécharger la présentation

Francisco J. Martínez-Ruiz 1 , Jaime Muñoz Arteaga 2 ,

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. A first draft of a Model-driven Method for Designing Graphical User Interfaces of Rich Internet Applications Francisco J. Martínez-Ruiz1, Jaime Muñoz Arteaga2, Jean Vanderdonckt3 and Juan M. González-Calleros3 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 3Université catholique de Louvain, Belgian Lab. of Computer-Human Interaction {vanderdonckt, gonzalez}@isys.ucl.ac.be

  2. Agenda • Introduction • Problem Description • Method Outline • Study Case • Conclusions and Future Work 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. 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). 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. 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]. A first draft of a Model-driven Method for Designing Graphical User Interfaces of Rich Internet Applications

  7. Method Outline 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] A first draft of a Model-driven Method for Designing Graphical User Interfaces of Rich Internet Applications

  9. Step 1.a: The Task model A first draft of a Model-driven Method for Designing Graphical User Interfaces of Rich Internet Applications

  10. Step 1.b: The Domain model 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). 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) 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) Table 1: Features of AIC that would aid in the selection of the correct CIC. A first draft of a Model-driven Method for Designing Graphical User Interfaces of Rich Internet Applications

  14. Resulting CUI UsiXML Specification <?xml version="1.0" encoding="UTF-8"?> <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"> <head> <version modifDate="2006-03-31T11:03:50.109-06:00">1</version> <authorName>Javier Martinez</authorName> <comment>Generated by GrafiXML 1.1.999 build id : 200602081036</comment> </head> <window id="window_component_0" name="window_component_0" width="400" height="350"> <box id="box_1" name="box_1" type="vertical"> <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"/> … </box> </window> 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. <?xml version="1.0" encoding="UTF-8"?> <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:wf="http://schemas.microsoft.com/2003/xaml/" version="1.0"> <xsl:output method="xml" omit-xml-declaration="yes" /> <xsl:template match="*|/"> <wf:UserControl Name="WebForm1" ClientSize="200, 200" xmlns="http://schemas.microsoft.com/2003/xaml/" xmlns:def="Definition" xmlns:wf="wf" def:Class="XamlonApplication8.WebForm1" def:CodeBehind="WebForm1.xaml.cs"> <xsl:apply-templates select="/cuiModel/window"/> </wf:UserControl> </xsl:template> <xsl:template match="window"> <wf:UserControl.Controls> <xsl:apply-templates select="/cuiModel/window/box/inputText"/> <xsl:apply-templates select="/cuiModel/window/box/button"/> <xsl:apply-templates select="/cuiModel/window/box/outputText"/> <xsl:apply-templates select="/cuiModel/window/box/slider"/> </wf:UserControl.Controls> </xsl:template> <xsl:template match="inputText"> <wf:TextBox Text="{@defaultContent}" TabIndex="1" Name="{@name}"/> </xsl:template> <xsl:template match="button"> <wf:Button Text="{@defaultContent}" TabIndex="1" Name="{@name}"/> </xsl:template> <xsl:template match="outputText "> <wf:Label Text="{@defaultContent}" TabIndex="1" Name="{@name}"/> </xsl:template> <xsl:template match="slider "> <wf:TrackBar Text="{@defaultContent}" TabIndex="1" Name="{@name}"/> </xsl:template> </xsl:stylesheet> A first draft of a Model-driven Method for Designing Graphical User Interfaces of Rich Internet Applications

  16. XAML Second resulting file <wf:UserControl xmlns:wf="wf" xmlns="http://schemas.microsoft.com/2003/xaml/" xmlns:def="Definition" Name="WebForm1" ClientSize="200, 200" def:Class="XamlonApplication8.WebForm1" def:CodeBehind="WebForm1.xaml.cs"> <wf:UserControl.Controls xmlns:wf="http://schemas.microsoft.com/2003/xaml/"><wf:TextBox Text="" TabIndex="1" Name="input_text_component_9"/><wf:TextBox Text="" TabIndex="1" Name="input_text_component_11"/><wf:TextBox Text="0.00" TabIndex="1" Name="input_text_component_13"/><wf:Button Text="Submit order" TabIndex="1" Name="button_component_14"/><wf:Label Text="Name" TabIndex="1" Name="output_text_component_8"/><wf:Label Text="Address" TabIndex="1" Name="output_text_component_10"/><wf:Label Text="Total to Pay:" TabIndex="1" Name="output_text_component_12"/> </wf:UserControl.Controls> </wf:UserControl> 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. • 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). 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. A first draft of a Model-driven Method for Designing Graphical User Interfaces of Rich Internet Applications

  19. A first draft of a Model-driven Method for Designing Graphical User Interfaces of Rich Internet Applications Francisco J. Martínez-Ruiz1, Jaime Muñoz Arteaga2, Jean Vanderdonckt3 and Juan M. González-Calleros3 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 3Université catholique de Louvain, Belgian Lab. of Computer-Human Interaction {vanderdonckt, gonzalez}@isys.ucl.ac.be

More Related