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

1 MDWE'2008, Toulouse, France , September 30, 2008

A Comparative Analysis of Transformation Engines for User Interface Development

Juan Manuel González Calleros1, Adrian Stanciulescu1, Jean Vanderdonckt1,Jean-Pierre Delacre1, Marco Winckler12

1Université catholique de Louvain (UCL)Louvain School of Management (LSM) - Information Systems Unit (ISYS)

Belgian Laboratory of Computer-Human Interaction (BCHI)http://www.isys.ucl.ac.be/bchi

2LIIHS-IRIT, Université Paul Sabatier


Context of the problem

• User interface development according to the Cameleon framework:– This framework has now gained consensus– Tasks and domain are expressed first for user-centered design– Abstract User Interface is derived from the tasks and domain– Concrete User Interface is then derived– Code generation was not taken into consideration here (out of

scope) Task & Concepts

Abstract UI

Concrete UI

Final UI

Task & Concepts

Abstract UI

Concrete UI

Final UI

Source platform Target platform

Task & Concepts

Abstract UI

Concrete UI

Final UI

Task & Concepts

Abstract UI

Concrete UI

Final UI




Task & Concepts

Abstract UI

Concrete UI

Final UI

Task & Concepts

Abstract UI

Concrete UI

Final UI


Task & Concepts

Abstract UI

Concrete UI

Final UI

Task & Concepts

Abstract UI

Concrete UI

Final UI


textInput button button

Window

AICfacet=control

AICfacet=control

AICfacet=control

AbstractIndividualContainer

textInput button button

Window

AICfacet=control

AICfacet=control

AICfacet=control

AbstractIndividualContainer



Model to Model

PlatformIndependentModel (PIM)

PlatformSpecific

Model (PSM)Model to Code Source code

MDA Components

Techniques proposed based on UsiXML

ComputingIndependentModel (CIM)

Model to Model

UsiXML model:Abstract user

interface

UsiXML model:Concrete user

interfaceRendering

Final userinterface

UsiXMLmodels: task,

domain

Graphtransformations

Graphtransformations


A development library stores (in UsiXML textual format) paths, steps and sub-steps definition and their associated transformation systems and transformation rules


Development step

Development step

Development sub-step


Development path

Development path

Transformation System


TransformationRule

TransformationRule

isComposedOf

isRealizedBy

isComposedOf

isComposedOf

*

1

*

1

1

*

1

0..1

Development step

Development step



Development path

Development path



TransformationRule

TransformationRule

isComposedOf

isRealizedBy

isComposedOf

isComposedOf

*

1

*

1

1

*

1

0..1

Methodological World

Development step

Development step



Development path

Development path



TransformationRule

TransformationRule

isComposedOf

isRealizedBy

isComposedOf

isComposedOf

*

1

*

1

1

*

1

0..1Transformation World

[Limbourg,2004]



Rule n

Transformation System 1

Rule 1

Rule 2

…

Rule n

Transformation System 2

Rule 1

Rule 2

…

Rule n

Transformation System ...

Rule 1

Rule 2

…

Rule n

Transformation System n

Rule 1

Rule 2

…

: when source terminates apply target

: execute development step

Development Step α


An example of a complex rule: one out of 163 transformation rules

NAC LHS RHS

::=

NAC LHS RHS

::=


Software support (on top of AGG)


<?xml version="1.0" encoding="UTF-8" standalone="yes"?><cuiModel name="MyModel"> <version modifDate="2004-03-24T17:09:17.402+01:00" xmlns="">7</version> <authorName xmlns="">Youri</authorName> <window height="500" width="600" name="Formulaire (2/5)" id="window_1"> <box relativeHeight="100" name="box1_0" id="box1_0"> <box type="vert" name="boxTodo" id="boxTodo"> ... <box type="horiz" name="box_2_2_2_1" id="box_2_2_2_1">

<textComponent defaultContent="Sexe" isBold="true" id="label_2"/><radioButton groupName=“grupo01" defaultContent="Femme"

defaultState="false" id="radiobutton_0"/><radioButton groupName="grupo01" defaultContent="Homme"

defaultState="true" id="radiobutton_1"/> </box> ... </box> </box> </window></cuiModel> Excerpt for an UsiXML CUI specification.

Example: interface adaptation





The UsiXML graph before applying any rule



LHSRHS

NAC

Rule 1: Create a new comboBox with the same id and name as the name of the group of radioButtons.


Rule 1: Create a new comboBox with the same id and name as the name of the group of radioButtons.

The UsiXML graph after applying the first rule




LHS RHS

::=

Rule 2: Convert every radioButton within the group “x” into an item for the comboBox “x”, we have just created.


Rule 2: Convert every radioButton within the group “x” into an item for the comboBox “x”, we have just created.

The UsiXML graph after applying the second rule



<?xml version="1.0" encoding="UTF-8" standalone="yes"?><cuiModel name="MyModel"> <version modifDate="2004-03-24T17:09:17.402+01:00" xmlns="">7</version> <authorName xmlns="">Youri</authorName> <window height="500" width="600" name="Formulaire (2/5)" id="window_1"> <box relativeHeight="100" name="box1_0" id="box1_0"> <box type="vert" name="boxTodo" id="boxTodo"> ... <box type="horiz" name="box_2_2_2_1" id="box_2_2_2_1">

<textComponent defaultContent="Sexe" isBold="true" id="label_2"/><comboBox id="comboBox001" name="label_3" isDropDown="true"> <item id="radiobutton_0" name="radiobutton_0" defaultContent="Femme"/> <item id="radiobutton_1" name="radiobutton_1" defaultContent="Homme"/></comboBox>

... </box> </box> </window></cuiModel>


Excerpt from the final transformated UsiXML specification




What is the problem with that?

• AGG + TransformiXML

– Pros• Separation of concerns, MDE• Rigorousness

– Contras• Not efficient enough• Not powerful enough, in particular at run-time• Why? Too many conversions

– UsiXML -> graph -> TransformiXML -> AGG -> UsiXML• So the question is: is it possible to find out a better transformation

engine with excellent performance?


Objective and Methodology

• The objective is to compare tools used to create transformation rules for the development of user interface.

• The methodology is decomposed into the following steps:• 1) Selection of a User Interface Description Language

– We chose UsiXML as meta-model• 2) Selection of User Interface Development Method

– Cameleon reference framework• 3) Selection of case study

– A simple example: Virtual Polling System• 4) Selection of transformation rules• 5) Selection of the tools and execution of the rules in the tools


Outline

• Introduction• Transformation engines for User Interface

Development – Case Study: Virtual Polling System– YATE Implementation – AToM³ Implementation

– AGG Implementation

– TransformiXML Implementation

• Comparative Analysis of Transformation Engines• Conclusion


UIDL Selection

• Many different UIDLs exist: XUL, UIML, XIML, UsiXML, XAML,…• We chose UsiXML as meta-model because

– Based on a transformational approach– Underlying graph-based syntax– MDA-compliant– Not a software vendor product: accessibility


Transformation rules

• The same set of rules set were used in each tool– From Task and Domain Models to AUI Model

• 19 transformation rules – From AUI Model to CUI Model

• 17 transformation rules

• Three tools, representative of three different approaches, are compared:– Graphical approach: AToM³, AGG, TransformiXML– Programmatic approach: java


Outline

• Introduction• Transformation engines for User Interface Development

– Case Study: Virtual Polling System– YATE Implementation – AToM³ Implementation





Outline







Yate

• Transformation engine entirely coded using java– External projects like JMI exist to help programmer create a

transformation engine, but we did not use them– Also, external projects exist to help use pattern matching, but we

did not use them either; rules are thus coded in Java, and it is not possible to use UsiXML rules with our java transformation engine

• Takes a UsiXML file as input, returns the resulting UsiXML file as output


Yate transformation engine: architecture

• Transformation rules are implemented in the « Rules » class• Functions to help implementing the rules in the «

RulesHelpers » class• « RulesTree » class contains a list of the rules, showed in the

GUI• A « Main » class to

– Transform the UsiXML file into java objects– Call the transformation rules selected by the user

• A graphical user interface to – Open the source UsiXML file – Choose the transformation rules to execute– Show the resulting model and save it in a UsiXML file


Yate: sequence diagram


Yate

• Transformation engine in java complex to implement and maintain– Took us 3 man-months to implement– About 2800 lines of Java code– Modifying the application (modify rules, add rules, …) was also

very long and complex• Three classes to modify: main, rules and rulesTree• The rules have to be coded in Java


Yate


Outline







AToM³

• Graphical syntax:– Meta-model as a UML diagram but with some restrictions: no

composition relation.– Graph grammar for transformation rules

• Rule composed of a LHS and a RHS graphically designed (UML-like) but

• No NAC, the precondition is here implemented as a Python algorithm

• No distinction between source and target model:– The model is graphically designed and– The model is directly modified by the transformation rules


Virtual polling system model in AToM³


Virtual Polling system after execution of transformation rules by

AToM³


AToM³

• AToM³ is easy to use and understand but• Complex and difficult-to-read graphs can result from even

quite small models• Despite simplicity, it is quite long to implement the rules

– Learning to use AToM³ is very fast, but – the implementation itself is quite long– Meta-model and rules took us about 3 months to implement, but

with no skills in transformation rules in general.


Outline







AGG


Outline







Outline







Comparison table


What is the best trade-off?


Thank you very much for your attention

For more information and downloading,http://www.isys.ucl.ac.be/bchi

http://www.usixml.orgUser Interface eXtensible Markup Language

http://www.similar.ccEuropean network on Multimodal UIs

Special thanks to all members of the team!

Documents

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