A Comparative Analysis of Transformation

1
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
2
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)

3
Context of the problem
4
Context of the problem
MDA Components
Platform Independent Model (PIM)
Platform Specific Model (PSM)
Computing Independent Model (CIM)
Source code
Model to Code
Model to Model
Model to Model
Techniques proposed based on UsiXML
Graph transformations
Graph transformations
UsiXML model Abstract user interface
UsiXML model Concrete user interface
UsiXML models task, domain
Final user interface
Rendering
5
Context of the problem
Methodological World
Development
Development
Development
Development
Development
Development
Development
Development
Development
Development
Development
Development
Development
Development
Development
Development
Development
Development
isComposedOf
isComposedOf
1
isComposedOf
isComposedOf
1
isComposedOf
isComposedOf
1
1
1
1
step
sub
-
step
path
step
sub
-
step
path
step
sub
-
step
path
step
sub
-
step
path
step
sub
-
step
path
step
sub
-
step
path






1
1
1
isRealizedBy
isRealizedBy
isRealizedBy
Transformation World
0..1
0..1
0..1
Transformation
Transformation
Transformation
Transformation
Transformation
Transformation
System
System
System
System
System
System
A development library stores (in UsiXML textual
format) paths, steps and sub-steps definition and
their associated transformation systems and
transformation rules
1
1
1
isComposedOf
isComposedOf
isComposedOf



Transformation
Transformation
Transformation
Transformation
Transformation
Transformation
Rule
Rule
Rule
Rule
Rule
Rule
Limbourg,2004
6
Context of the problem
7
An example of a complex rule one out of 163
transformation rules
8
Software support (on top of AGG)
9
Example interface adaptation
lt?xml version"1.0" encoding"UTF-8"
standalone"yes"?gt ltcuiModel name"MyModel"gt
ltversion modifDate"2004-03-24T170917.4020100"
xmlns""gt7lt/versiongt ltauthorName
xmlns""gtYourilt/authorNamegt ltwindow
height"500" width"600" name"Formulaire (2/5)"
id"window_1"gt ltbox relativeHeight"100"
name"box1_0" id"box1_0"gt ltbox
type"vert" name"boxTodo" id"boxTodo"gt
... ltbox type"horiz"
name"box_2_2_2_1" id"box_2_2_2_1"gt lttextCompone
nt defaultContent"Sexe" isBold"true"
id"label_2"/gt ltradioButton groupNamegrupo01"
defaultContent"Femme"
defaultState"false"
id"radiobutton_0"/gt ltradioButton
groupName"grupo01" defaultContent"Homme"

defaultState"true" id"radiobutton_1"/gt
lt/boxgt ... lt/boxgt
lt/boxgt lt/windowgt lt/cuiModelgt
Excerpt for an UsiXML CUI specification.
10
Example interface adaptation
11
Example interface adaptation
The UsiXML graph before applying any rule
12
Example interface adaptation
Rule 1 Create a new comboBox with the same id
and name as the name of the group of radioButtons.
NAC
RHS
LHS
13
Example interface adaptation
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
14
Example interface adaptation
Rule 2 Convert every radioButton within the
group x into an item for the comboBox x, we
have just created.
LHS
RHS

15
Example interface adaptation
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
16
Example interface adaptation
lt?xml version"1.0" encoding"UTF-8"
standalone"yes"?gt ltcuiModel name"MyModel"gt
ltversion modifDate"2004-03-24T170917.4020100"
xmlns""gt7lt/versiongt ltauthorName
xmlns""gtYourilt/authorNamegt ltwindow
height"500" width"600" name"Formulaire (2/5)"
id"window_1"gt ltbox relativeHeight"100"
name"box1_0" id"box1_0"gt ltbox
type"vert" name"boxTodo" id"boxTodo"gt
... ltbox type"horiz"
name"box_2_2_2_1" id"box_2_2_2_1"gt lttextCompone
nt defaultContent"Sexe" isBold"true"
id"label_2"/gt ltcomboBox id"comboBox001"
name"label_3" isDropDown"true"gt ltitem
id"radiobutton_0" name"radiobutton_0"
defaultContent"Femme"/gt ltitem
id"radiobutton_1" name"radiobutton_1"
defaultContent"Homme"/gt lt/comboBoxgt
... lt/boxgt
lt/boxgt lt/windowgt lt/cuiModelgt
Excerpt from the final transformated UsiXML
specification
17
Example interface adaptation
18
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 -gt graph -gt TransformiXML -gt AGG -gt UsiXML
• So the question is is it possible to find out a
  better transformation engine with excellent
  performance?

19
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

20
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

21
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

22
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

23
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

24
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

25
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

26
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

27
Yate sequence diagram
28
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

29
Yate
30
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

31
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

32
Virtual polling system model in AToM³
33
Virtual Polling system after execution of
transformation rules by AToM³
34
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.

35
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

36
AGG
37
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

38
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

39
Comparison table
40
What is the best trade-off?
41
Thank you very much for your attention
http//www.usixml.org User Interface eXtensible
Markup Language
http//www.similar.cc European network on
Multimodal UIs
For more information and downloading,http//www.i
sys.ucl.ac.be/bchi
Special thanks to all members of the team!