1. 1 MDWE'2008, Toulouse, France, September 30, 2008 A Comparative Analysis of Transformation Engines for User Interface Development Juan Manuel González Calleros 1, Adrian Stanciulescu 1, Jean Vanderdonckt 1, Jean-Pierre Delacre 1, Marco Winckler 12 1 Université 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 2 LIIHS-IRIT, Université Paul Sabatier

2. 2 MDWE'2008, Toulouse, France, September 30, 2008 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. 3 MDWE'2008, Toulouse, France, September 30, 2008 Context of the problem

4. 4 MDWE'2008, Toulouse, France, September 30, 2008 Context of the problem Model to Model Platform Independent Model (PIM) Platform Specific Model (PSM) Model to Code Source code MDA Components Techniques proposed based on UsiXML Computing Independent Model (CIM) Model to Model UsiXML model: Abstract user interface UsiXML model: Concrete user interface Rendering Final user interface UsiXML models: task, domain Graph transformations Graph transformations

5. 5 MDWE'2008, Toulouse, France, September 30, 2008 A development library stores (in UsiXML textual format) paths, steps and sub-steps definition and their associated transformation systems and transformation rules Context of the problem Development step Development step Development sub-step Development sub-step Development path Development path Transformation System Transformation System Transformation Rule Transformation Rule isComposedOf isRealizedBy isComposedOf * 1 * 1 1 * 1 0..1 Development step Development step Development sub-step Development sub-step Development path Development path Transformation System Transformation System Transformation Rule Transformation Rule isComposedOf isRealizedBy isComposedOf * 1 * 1 1 * 1 0..1 Methodological World Development step Development step Development sub-step Development sub-step Development path Development path Transformation System Transformation System Transformation Rule Transformation Rule isComposedOf isRealizedBy isComposedOf * 1 * 1 1 * 1 0..1 Transformation World [Limbourg,2004]

6. 6 MDWE'2008, Toulouse, France, September 30, 2008 Context of the problem 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 α

7. 7 MDWE'2008, Toulouse, France, September 30, 2008 An example of a complex rule: one out of 163 transformation rules

8. 8 MDWE'2008, Toulouse, France, September 30, 2008 Software support (on top of AGG)

9. 9 MDWE'2008, Toulouse, France, September 30, 2008 7 Youri... <radioButton groupName=“grupo01" defaultContent="Femme" defaultState="false" id="radiobutton_0"/> <radioButton groupName="grupo01" defaultContent="Homme" defaultState="true" id="radiobutton_1"/>... Excerpt for an UsiXML CUI specification. Example: interface adaptation

10. 10 MDWE'2008, Toulouse, France, September 30, 2008 Example: interface adaptation

11. 11 MDWE'2008, Toulouse, France, September 30, 2008 Example: interface adaptation The UsiXML graph before applying any rule

12. 12 MDWE'2008, Toulouse, France, September 30, 2008 Example: interface adaptation LHS RHS NAC Rule 1: Create a new comboBox with the same id and name as the name of the group of radioButtons.

13. 13 MDWE'2008, Toulouse, France, September 30, 2008 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 Example: interface adaptation

14. 14 MDWE'2008, Toulouse, France, September 30, 2008 Example: interface adaptation LHSRHS ::= Rule 2: Convert every radioButton within the group “x” into an item for the comboBox “x”, we have just created.

15. 15 MDWE'2008, Toulouse, France, September 30, 2008 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 Example: interface adaptation

16. 16 MDWE'2008, Toulouse, France, September 30, 2008 7 Youri...... Example: interface adaptation Excerpt from the final transformated UsiXML specification

17. 17 MDWE'2008, Toulouse, France, September 30, 2008 Example: interface adaptation

18. 18 MDWE'2008, Toulouse, France, September 30, 2008 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?

19. 19 MDWE'2008, Toulouse, France, September 30, 2008 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. 20 MDWE'2008, Toulouse, France, September 30, 2008 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. 21 MDWE'2008, Toulouse, France, September 30, 2008 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. 22 MDWE'2008, Toulouse, France, September 30, 2008 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. 23 MDWE'2008, Toulouse, France, September 30, 2008 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. 24 MDWE'2008, Toulouse, France, September 30, 2008 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. 25 MDWE'2008, Toulouse, France, September 30, 2008 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. 26 MDWE'2008, Toulouse, France, September 30, 2008 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. 27 MDWE'2008, Toulouse, France, September 30, 2008 Yate: sequence diagram

28. 28 MDWE'2008, Toulouse, France, September 30, 2008 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. 29 MDWE'2008, Toulouse, France, September 30, 2008 Yate

30. 30 MDWE'2008, Toulouse, France, September 30, 2008 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. 31 MDWE'2008, Toulouse, France, September 30, 2008 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. 32 MDWE'2008, Toulouse, France, September 30, 2008 Virtual polling system model in AToM³

33. 33 MDWE'2008, Toulouse, France, September 30, 2008 Virtual Polling system after execution of transformation rules by AToM³

34. 34 MDWE'2008, Toulouse, France, September 30, 2008 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. 35 MDWE'2008, Toulouse, France, September 30, 2008 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. 36 MDWE'2008, Toulouse, France, September 30, 2008 AGG

37. 37 MDWE'2008, Toulouse, France, September 30, 2008 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. 38 MDWE'2008, Toulouse, France, September 30, 2008 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. 39 MDWE'2008, Toulouse, France, September 30, 2008 Comparison table

40. 40 MDWE'2008, Toulouse, France, September 30, 2008 What is the best trade-off?

41. 41 MDWE'2008, Toulouse, France, September 30, 2008 Thank you very much for your attention For more information and downloading, http://www.isys.ucl.ac.be/bchi http://www.isys.ucl.ac.be/bchi http://www.usixml.org User Interface eXtensible Markup Language http://www.similar.cc European network on Multimodal UIs Special thanks to all members of the team!