Transformation of XAML schema for RIA using XSLT & UsiXML Fco. J. Martínez Ruiz 1, Jaime Muñoz Arteaga 2 and Jean Vanderdonckt 3. 1 Universidad Autónoma.

Slides:

Advertisements

Similar presentations

Introduction to the BinX Library eDIKT project team Ted Wen Robert Carroll

Advertisements

Context-aware Generation of User Interface Containers for Mobile devices Francisco J. Martínez Ruiz 1,2, Jean Vanderdonckt 1 and Jaime Muñoz Arteaga 3.

What is XML? a meta language that allows you to create and format your own document markups a method for putting structured data into a text file; these.

Dimitrios Kotsalis a George Vellis a Demosthenes Akoumianakis a Jean Vanderdonckt b a Department of Informatics Engineering, Technological Education Institution.

XML & Data Structures for the Internet Yingcai Xiao.

Database Systems: Design, Implementation, and Management Tenth Edition

Extensible Stylesheet Language (XSL) By Example Tony Wat 9 October 2002.

XML Language Family Detailed Examples Most information contained in these slide comes from: These slides are intended.

XML Technologies and Applications Rajshekhar Sunderraman Department of Computer Science Georgia State University Atlanta, GA 30302

September 15, 2003Houssam Haitof1 XSL Transformation Houssam Haitof.

1 DSV-IS’2006, July 2006 Visual Design of User Interfaces by (De)composition Sophie Lepreux (1,2), Jean Vanderdonckt (1), Benjamin Michotte (1) 1.

1 ICAS’2008 – Gosier, March 16-21, 2008 GrafiXML, A Multi-Target User Interface Builder based on UsiXML Benjamin Michotte, Jean Vanderdonckt Université.

Section 2.1 Compare the Internet and the Web Identify Web browser components Compare Web sites and Web pages Describe types of Web sites Section 2.2 Identify.

User Interfaces Composition with UsiXML Sophie LEPREUX (1), Jean VANDERDONCKT (2), Christophe KOLSKI (1) (1) LAMIH “Automated Reasoning and Human-Computer.

Formal Definition of Collaborative Spaces Sergio Arzola-Herrera Josefina Guerrero-García Juan Manuel González-Calleros Claudia Zepeda-Cortés Facultad de.

Reverse Engineering of Web Pages based on Derivations and Transformations L.Bouillon, Q.Limbourg, J.Vanderdonckt, B.Michotte Université catholique de Louvain,

XP Tutorial 7New Perspectives on Creating Web Pages with HTML, XHTML, and XML 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks.

1 The Architectural Design of FRUIT: A Family of Retargetable User Interface Tools Yi Liu, H. Conrad Cunningham and Hui Xiong Computer & Information Science.

XP New Perspectives on XML Tutorial 6 1 TUTORIAL 6 XSLT Tutorial – Carey ISBN

XP 1 CREATING AN XML DOCUMENT. XP 2 INTRODUCING XML XML stands for Extensible Markup Language. A markup language specifies the structure and content of.

NetTech Solutions Working with Web Elements Lesson 6.

1 Web Basics Section 1.1 Compare the Internet and the Web Compare Web sites and Web pages Identify Web browser components Describe types of Web sites Section.

George Vellis a Dimitrios Kotsalis a Demosthenes Akoumianakis a Jean Vanderdonckt b a Department of Applied Informatics & Multimedia, Technological Education.

Inés Pederiva 1, Jean Vanderdonckt 1,2, Sergio España 1, José Ignacio Panach 1 and Óscar Pastor 1 1 Universidad Politécnica de Valencia, Departamento de.

1 Belgian Laboratory of Computer-Human Interaction (BCHI) ::: UCL August 2007 Development Method for User Interfaces of Rich Internet Applications By Francisco.

Towards supporting the user interfaces design using composition rules Sophie Lepreux, Jean Vanderdonckt {lepreux,

1 MDWE'2008, Toulouse, France, September 30, 2008 A Comparative Analysis of Transformation Engines for User Interface Development Juan Manuel González.

1 November 9-11, Mérida, Mexico La-Web’09 A Model-Based Approach for Developing Vectorial User Interfaces Jean Vanderdonckt, Josefina Guerrero-García,

XML A web enabled data description language 4/22/2001 By Mark Lawson & Edward Ryan L’Herault.

CITA 330 Section 6 XSLT. Transforming XML Documents to XHTML Documents XSLT is an XML dialect which is declared under namespace "

IST 221 Internet Concepts and Applications Introduction to XML II CSS and XSLT Style Sheets.

Lecture 11 XSL Transformations (part 1: Introduction)

CS 3131 Introduction to Programming in Java Rich Maclin Computer Science Department.

1EMODE workshop – September 2007 Automatic Usability Assessment of Multimodal User Interfaces Based on Ergonomic Rules Adrian Stanciulescu Jean Vanderdonckt.

Reference WPx/Tx.y/YY-MM-DD/PP Distributed User Interfaces in Space and Time Jérémie Melchior Université catholique de Louvain Doctoral Consortium at EICS2011.

1 Workshop on Business-Driven Enterprise Application Design & Implementation Cristal City, Washington D.C., USA, July 21, 2008 How to Describe Workflow.

Design Options for Multimodal Web Applications Adrian Stanciulescu and Jean Vanderdonckt {stanciulescu, UCL/IAG/BCHI.

1 Cascading Dialog Modeling with UsiXML Marco Winckler 1,2,Jean Vanderdonckt 2, Adrian Stanciulescu 2, Francisco Trindade 3 1 IRIT, Université Toulouse.

CHAPTER 7 Form & PHP. Introduction All of the following examples in this section will require two web pages. The first page retrieves information posted.

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.

Introduction to XML This presentation covers introductory features of XML. What XML is and what it is not? What does it do? Put different related technologies.

EIS'2007 (Salamanca, Spain, March 22-24, 2007) 1 Towards an Extended Model of User Interface Adaptation: the ISATINE framework 1 Víctor M. López Jaquero,

1 November 9-11, Mérida, Mexico CLIHC’09 Towards Canonical Task Types for User Interface Design Juan Manuel Gonzalez-Calleros, Josefina Guerrero-

Model-Driven Engineering of Behaviors in User Interfaces Efrem Mbaki & Jean Vanderdonckt Université catholique de Louvain (UCL) Louvain School of Management.

McGraw-Hill/Irwin © 2004 by The McGraw-Hill Companies, Inc. All rights reserved. Applying eXtensible Style Sheets (XSL) Ellen Pearlman Eileen Mullin Programming.

1 CLIHC 2009, November 9-11,2009. Mérida, Yucatán, Mexico. A Theoretical Survey of User Interface Description Languages: Preliminary Results Josefina Guerrero.

A model-based development for 3D User Interfaces Juan Manuel Gonzalez Calleros Université catholique de Louvain, School of Management (IAG) Information.

1 Overview of XSL. 2 Outline We will use Roger Costello’s tutorial The purpose of this presentation is  To give a quick overview of XSL  To describe.

A model-based development for 3D User Interfaces Juan Manuel Gonzalez Calleros 1, Jean Vanderdonckt 1, Jaime Muñoz Arteaga 2 1. Université catholique de.

XML Presented by Kushan Athukorala. 2 Agenda XML Overview Entity References Elements vs. Atributes XML Validation DTD XML Schema Linking XML and CSS XSLT.

Reference WPx/Tx.y/YY-MM-DD/PP UsiXML project # Generating User Interface for Information Applications from Task, Domain and User models.

Personal Project. Topic Modeling and Presenting Data from a Publication Objectives –Using XML related techniques to model and present data from a publication.

Nathalie Aquino 1, Jean Vanderdonckt 2, Francisco Valverde 1, Oscar Pastor 1 1 Department of Information Systems and Computation, Valencia University of.

A Transformational Approach for Multimodal Web User Interfaces based on UsiXML Adrian Stanciulescu, Quentin Limbourg, Jean Vanderdonckt, Benjamin Michotte.

Murielle Florins 1, Francisco Montero Simarro 2, Jean Vanderdonckt 1, Benjamin Michotte 1 1 Université catholique de Louvain 2 Universidad de Castilla-la-Mancha.

Cooperative Computing & Communication Laboratory A Survey on Transformation Tools for Model-Based User Interface Development Robbie Schäfer – Paderborn.

© TAMODIA’061 The Comets Inspector: Towards Run Time Plasticity Control based on a Semantic Network Alexandre Demeure, Gaëlle Calvary, Joelle Coutaz, Jean.

1 Interaccion 2008, IX Congreso de Interacción Persona-Ordenador, Albacete, 9-12 June 2008 ECOOL: Generation of Collaborative Multiplatform Scenarios with.

UML Profile BY RAEF MOUSHEIMISH. Background Model is a description of system or part of a system using well- defined language. Model is a description.

Yu, et al.’s “A Model-Driven Development Framework for Enterprise Web Services” In proceedings of the 10 th IEEE Intl Enterprise Distributed Object Computing.

Université catholique de Louvain (UCL) Belgian Laboratory of Computer-Human Interaction (BCHI) Place des Doyens, 1 B-1348 Louvain-la-Neuve (Belgium) Presented.

1 February 1-7, Cancun, Mexico ACHI’09 A structured approach to support 3D User Interface Development Juan Manuel Gonzalez-Calleros, Jean Vanderdonckt.

Subject: Internationalization of AJAX applications using ITS and XML, Best practices and application. Doctoral Program in Technology and Software Engenieering.

Rendering XML Documents ©NIITeXtensible Markup Language/Lesson 5/Slide 1 of 46 Objectives In this session, you will learn to: * Define rendering * Identify.

1 Introduction to HTML. 2 Definitions  W W W – World Wide Web.  HTML – HyperText Markup Language – The Language of Web Pages on the World Wide Web.

Defects of UML Yang Yichuan. For the Presentation Something you know Instead of lots of new stuff. Cases Instead of Concepts. Methodology instead of the.

Project 1 Introduction to HTML.

Displaying XML Data with XSLT

Module: Software Engineering of Web Applications

XML Data Introduction, Well-formed XML.

Presentation transcript:

Transformation of XAML schema for RIA using XSLT & UsiXML Fco. J. Martínez Ruiz 1, Jaime Muñoz Arteaga 2 and Jean Vanderdonckt 3. 1 Universidad Autónoma de Zacatecas. Departamento de Ingeniería en Computación, Av. López Velarde No. 801, Zacatecas, Zac., México. 2 Universidad Autónoma de Aguascalientes. México. 3 Université Catholique de Louvain. Belgium.

Francisco Javier Martínez Ruiz Congreso Internacional ANIEI Agenda  Introduction  Problem Description  Contribution  Study Case  Conclusions and Future Work

Francisco Javier Martínez Ruiz Congreso Internacional ANIEI 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.

Francisco Javier Martínez Ruiz Congreso Internacional ANIEI Typical architecture of a RIA application The new Web applications that are emerging are called Rich Internet Applications (RIAs).

Francisco Javier Martínez Ruiz Congreso Internacional ANIEI 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.

Francisco Javier Martínez Ruiz Congreso Internacional ANIEI Problem Description  Our study problem is a well known scenario for developer teams: After embracing a technology if you must build (or migrate) an application but in another technology is mandatory recoding most of the project even with RIAs.  Inside these technologies resides a XML- compliant Description Language, e.g., LZX, XUL and now XAML.

Francisco Javier Martínez Ruiz Congreso Internacional ANIEI Problem Description (cont.)   These languages are similar but no interchangeable so there is a problem when is needed “retargeting”. .  The underlying problem is the translation from language 1 to language 2.

Francisco Javier Martínez Ruiz Congreso Internacional ANIEI Contribution We proposed the construction and settling of the rules needed to construct an XSLT specification to transform a source GUI defined in UsiXML into a GUI defined in XAML. The considered schema will be described in the next slide.

Francisco Javier Martínez Ruiz Congreso Internacional ANIEI Contribution (cont.) The widgets are recognizable UI elements still not attached to a particular toolkit at section 1. After using the rules of section 2 though a XSLT processor, the UI is targed to a specific toolkit and it’s produced a Final UI (section 4) which is the production of UI code to be compiled or interpreted, here in XAML.

Francisco Javier Martínez Ruiz Congreso Internacional ANIEI Study Case Our scenario is the design of a minimalist polling system. A basic form available in all of RIA languages composed by a text label, three radio selectors and a submit button. What sci-fi author is your favorite? Isaac ASimov Arthur C. Clark H.G. Wells send

Francisco Javier Martínez Ruiz Congreso Internacional ANIEI <radioButton id="radiobutton_component_2" name="radiobutton_component_2" defaultContent="Isaac ASimov" isVisible="true" isEnabled="true" textColor="#000000" groupName="asking"/> <radioButton id="radiobutton_component_3"name="radiobutton_component_3" defaultContent="H.G. Wells" isVisible="true" isEnabled="true" textColor="#000000" groupName="asking"/> <radioButton id="radiobutton_component_4" name="radiobutton_component_4" defaultContent="Arthur C. Clark" isVisible="true" isEnabled="true" textColor="#000000" groupName="asking"/> <button id="button_component_5" name="button_component_5" defaultContent="send" isVisible="true" isEnabled="true" textColor="#000000"/> <outputText id="output_text_component_6" name="output_text_component_6" defaultContent="What sci-fi author is your favorite?" isVisible="true" isEnabled="true" isBold="true" textColor="#000000"/> The UsiXML presentation of this UI is :

Francisco Javier Martínez Ruiz Congreso Internacional ANIEI Conversion to XAML We just add here the needed rules to process our study case since the XML source document is very different to the final document. Note: Some of the code is restricted to default values (specially, values that normally are defined by programmers at design time for instance, widget positions).

Francisco Javier Martínez Ruiz Congreso Internacional ANIEI Examples of XSLT rules <xsl:stylesheet xmlns:xsl=" xmlns:wf=" version="1.0"> <wf:Form Text="Form1" Name="Form1" ClientSize="400, 400" xmlns=" xmlns:def="Definition" xmlns:wf="wf" def:Class="XamlonApplication1.Form1" def:CodeBehind="Form1.xaml.vb"> … … Examples of rules are marked with red boxes

Francisco Javier Martínez Ruiz Congreso Internacional ANIEI Polling System example XAML output <wf:Form xmlns:wf="wf" xmlns=" xmlns:def="Definition" Text="Form1" Name="Form1" ClientSize="400, 400" def:Class="XamlonApplication1.Form1" def:CodeBehind="Form1.xaml.vb"> <wf:RadioButton Text="Isaac ASimov" TabIndex="3" Name="radiobutton_component_2"/> <wf:Label Text="What sci-fi author is ypur favorite?" TabIndex="4" Name="output_text_component_6"/></wf:Form.Controls></wf:Form>

Francisco Javier Martínez Ruiz Congreso Internacional ANIEI Conclusions In this paper we have presented an approach for translating UIs defined in UsiXML to XAML documents with XSL transformations in our preliminary evaluation we have had satisfactory results. The result is a practical solution to the development of platform independent RIA applications as was shown in our study case.

Francisco Javier Martínez Ruiz Congreso Internacional ANIEI Future work  the process of reaching final implementation levels needs complementary information not available in more abstract levels.  We are compiling a repository of all the UI gadgets (components) defined in XAML in order to complete the XSLT translation sheet.  Width, length of each element, colors, position within the containers. How to define these attributes? It’s a question that requires the aid of ergonomic criteria to be answered.

Transformation of XAML schema for RIA using XSLT & UsiXML Fco. J. Martínez Ruiz 1, Jaime Muñoz Arteaga 2 and Jean Vanderdonckt 3. 1 Universidad Autónoma de Zacatecas. Departamento de Ingeniería en Computación, Av. López Velarde No. 801, Zacatecas, Zac., México. 2 Universidad Autónoma de Aguascalientes. México. 3 Université Catholique de Louvain. Belgium.