Reverse Engineering of Declarative User Interfaces Laurent Bouillon
Reverse Engineering of Declarative User Interfaces Laurent Bouillon Ph. D. in Management Sciences Information systems Examination committee: Prof. Bernard Fortz, Université catholique de Louvain, Examiner Prof. Jean-Luc Hainaut, Facultés Universitaires Notre-Dame de la Paix, Reader Prof. Manuel Kolp, Université catholique de Louvain, Examiner Prof. Christophe Kolski, Université de Valenciennes et du Hainaut-Cambrésis, Reader Prof. Jean Vanderdonckt, Université catholique de Louvain, Advisor Louvain-la-Neuve, 21/6/2006 1
Presentation Outline 1. 2. 3. 4. 5. 6. The reengineering problem Objectives and working hypotheses Reference framework Retargeting Our notation for RE rules Reverse engineering of 1. 2. 3. 7. 8. Web pages (HTML) Phone interfaces (WML & Voice. XML) Windows applications (resource files) Results evaluation Conclusion Reverse engineering of declarative user interfaces – Thesis – Louvain-la-Neuve - 21/06/2006 2
1. The Reengineering Problem n Interactive Software evolution: context of use =(U, P, E) Language Platform User Environment time Reverse engineering of declarative user interfaces – Thesis – Louvain-la-Neuve - 21/06/2006 3
1. The Reengineering Problem n n Reengineering of information systems Focuses on reverse engineering n n Forward engineering has been achieved in several other researches Centered on UI n n n It represents 50% of the total code of an information system Other aspects of information systems are already treated Less portable code which has most of time to be rewritten entirely Functional core Communication Data Base User Interface Reverse Engineering Source Information System Functional core Communication Data Base User Interface Abstract Representation Forward Engineering Functional core Communication Data Base User Interface Target Information System Reverse engineering of declarative user interfaces – Thesis – Louvain-la-Neuve - 21/06/2006 4
1. Shortcomings of Current Approaches n n n Lack of generality : approaches are generally dedicated to peculiar couples of languages or limited scope. Lack of flexibility : RE rules and techniques are applied in a rigid way Lack of controllability : designer can not control the process in the RE / nonexplicit transformations Reverse engineering of declarative user interfaces – Thesis – Louvain-la-Neuve - 21/06/2006 5
2. Objectives and Working Hypotheses “The reverse engineering of UI at a higher level of abstraction than the code level supports UI reengineering with more flexibility while preserving predictability, more generality and controllability in the process than with code-to-code (transcoding) approaches or current reverse engineering approaches. ” n Working Hypotheses n n n Scope: declarative languages (HTML, WML, Voice. XML, resources files) Methodology: model-based approach / model recovery Technique: static analysis Output language: XML compliant UI description language Context: focus on platform Reverse engineering of declarative user interfaces – Thesis – Louvain-la-Neuve - 21/06/2006 6
3. Reference Framework for Multi-Context UIs Reverse engineering of declarative user interfaces – Thesis – Louvain-la-Neuve - 21/06/2006 7
4. Retargeting n Retargeting: RE rules tailored for a specific context of use. Œ Task & Concepts Abstract UI ‘ Abstract UI Ž Concrete UI ’ Concrete UI Final UI “ Final UI Source platform Target platform Reverse engineering of declarative user interfaces – Thesis – Louvain-la-Neuve - 21/06/2006 8
Retargeting (2) n Gain n n Reduce the scope of possible results and translation operations: gain in efficiency Benefits from code to refine RE and allows to remove code know as platform specific: gain in adequacy to the new context of use Allow automated reengineering(no human intervention) Loss n n n Loss of generality and maintanability Loss of distinction of RE and translation Loss of the platform independence of the produced model Reverse engineering of declarative user interfaces – Thesis – Louvain-la-Neuve - 21/06/2006 9
5. Our notation for RE rules n Requirements n n Make explicit the reverse engineering process Use of a common representation for rules for various source (declarative) UIs Outline rules categories reusable for several types of UIs. Other techniques were considered (UMLOCL, TXL, graph transformation…) Reverse engineering of declarative user interfaces – Thesis – Louvain-la-Neuve - 21/06/2006 10
5. Our notation for RE rules n n Based on several notations and on graph / tree theories. Notation consists of derivation rules (described thanks to sets of operations-functions) applied on tree reprensentation of UI. Derivation rules consider the source language of the FUI and abstract it to another level, allowing to recover a CUI or AUI model thanks to a series of mappings between languages meta-models. Set of basic operations n n Addnode(x), Modify. Attribute(x. a), Delete. Arc(x, y)… Set of functions n Parent. Node(x), Is. Leaf(x), Is. In. Path(x)… Reverse engineering of declarative user interfaces – Thesis – Louvain-la-Neuve - 21/06/2006 11
5. Example of Derivation Rules n Examples: n For a textbox in HTML/WML x Ts : x = input ٨ (x. type=“text” ٧ x. type=“password” ٧ x. type=NULL) Addnode (“text. Component”, idtext) where idtext= Node. Amount(Tt) n � For a table in HTML/WML x Ts : x = table ٨ x. border>0 Input Text. Component Addnode (“table”, idtable) where idtable = Node. Amount(Tt) Name=in 1 Maxlength=15 x Ts : x = table ٨ x. border=0 Value=login default. Content=login Addnode (“box”, idbox) where idbox = Node. Amount(Tt) Type=text Id=in 1 Add. Attribute (idbox, “type”, “vertical”) Element Y Element B Reverse engineering of declarative user interfaces – Thesis – Louvain-la-Neuve - 21/06/2006 12
5. Derivation rules categories n Rules can be classified into different categories, outlining the common issues in a RE process for various source UIs. Element recovery Attribute detection Layout / temporal ordering analysis Dialog recuperation Hierarchy recovery Multi-model transformations Element 3 Horizontal box Retargeting operations Vertical box Layout Analysis n Element 1 Element 2 Line Break Element 3 x to Tti , y to Tt 0: x = window ٨ (y=box ٧ y=window) ٨ x. filename =y. targetfile n Clone. Node(x. id, idnew, Tt 0) where idnew =∑ node Tt 0 ٨ x Tt: x=bix ٨ ((rigth. Sibling(x)!=table ٧ Remove. Node(x, x. id) ٨ Remove. Arc(Parent. Node(x). id, x. id) ٨ z=root(Tti) ٨ rigth. Sibling(x)!=bix ٧ rigth. Sibling(x)!=cell ٧ n Remove Node(z, z. id) ٨ Add. Arc(y. id, idnew) rigth. Sibling(x)!=box) ٨ rigth. Sibling(x)!=NULL) x to Tti , y to Tt 0: x = vocal. Group ٨ y=Vocal. Group ٨ x. filename =y. insert. File Clone. Node (right. Sibling(x). id, idnew) ٨ n Clone. Node(x. id, idnew, Tt 0) where idnew =∑ node Tt 0 ٨ Remove. Node (right. Sibling(x), right. Sibling(x). id) Element 1 Element 2 Remove. Node(x, x. id) ٨ Remove. Arc(Parent. Node(x). id, x. id) ٨ ٨ Remove. Arc (Parent. Node(right. Sibling(x)), n z=root(Tti) ٨ Remove Node(z, z. id) ٨ Horizontal box right. Sibling(x)) ٨ Add. Arc(x. id, idnew) where Add. Arc(y. id, idnew) Multi-model transformations idnew =∑ node Tt n n Reverse engineering of declarative user interfaces – Thesis – Louvain-la-Neuve - 21/06/2006 13
6. 1. RE of Web Pages: Vaquita n First RE study with the following major working hypotheses: n Focus on presentational aspects n No recovery of layout and dialog n XIML presentation model as ouput n Static flexible RE of Web Pages Reverse engineering of declarative user interfaces – Thesis – Louvain-la-Neuve - 21/06/2006 14
6. 1. RE of Web Pages: Vaquita Flexibility ensured thanks to reverse engineering options - Implemented in VB 6 - About 10, 000 LOC - Local Web page as input Reverse engineering of declarative user interfaces – Thesis – Louvain-la-Neuve - 21/06/2006 15
6. 1. Reengineering with Envir 3 D HTML Page Vaquita: reverse engineering XIML Page Envir 3 D: virtualisation of non-virtual user interface VRML 97/X 3 D file <Presentation_element Id="First(give_Label-8"> <Name>a Label</Name><Features> <Attribute_Statement Definition="Label. String"> First (given) name: </Attribute_Statement> <Attribute_Statement Definition="Label. Size"> 7</Attribute_Statement> <Attribute_Statement Definition="Label. Font"> sans-serif</Attribute_Statement> <Attribute_Statement Definition="Label. Color"> #000000</Attribute_Statement> <Attribute_Statement Definition="Label. Style"> normal</Attribute_Statement> <Attribute_Statement Definition="Label. Justif"> Left</Attribute_Statement> <Attribute_Statement Definition="Margin"> 0</Attribute_Statement></Features> </Presentation_element> VRML 97 -enabled browser Reverse engineering of declarative user interfaces – Thesis – Louvain-la-Neuve - 21/06/2006 16
6. 1. RE of Web Pages: Reversi. XML § 2 nd reverse engineering tool to overcome shortcomings of Vaquita § Modified working hypothesis: Shortcomings Vaquita Requirements Reversi. MXL Licensed usage of XIML Free usage of Usi. XML, open-source UIDL Limited recovery of the presentation Complete recovery of CUI (& AUI) including layout and dialog, (but not scripts or CSS) Off-line process permitting no context awareness On-line and off-line tool / on-line process allows the detection of the context of use Interactive & batch Almost no interoperability with other tools Interoperability with several tools (Ideal. XML, Qtk. XML, Grafi. XML…) Reverse engineering of declarative user interfaces – Thesis – Louvain-la-Neuve - 21/06/2006 17
6. 1. RE of Web Pages: Reversi. XML 1. Web Page Extraction Server UI Model DB Tidy Configuration DB Temporary Pages 2. Syntax Correction 3. Selection of Options 4. Global Scan 5. Local Scan Who. Am. I Temporary Information 6. Layout Relations 7. Dialog Relations 8. Model Correction UI Model DB 9. Context Model Context DB 10. Save Model Reverse engineering of declarative user interfaces – Thesis – Louvain-la-Neuve - 21/06/2006 18
6. 1. RE of Web Pages: Reversi. XML n n Written in php 5 On-line RE About 12, 000 LOC Set of libraries Reverse engineering of declarative user interfaces – Thesis – Louvain-la-Neuve - 21/06/2006 19
6. 2. RE of Phone Interfaces n Major working hypotheses n n n Static RE of WML 1. 1 and voice. XML 2. 0 up to the CUI in USIXML 1. 4. 6 Recovery of the layout and hierarchy/temporal ordering. Dialog-Navigation analyzed (but not scripts) No retargeting operations Similar method to HTML applied for WML & Voice. XML reverse engineering n Description of languages meta-models and derivation rules. Reverse engineering of declarative user interfaces – Thesis – Louvain-la-Neuve - 21/06/2006 20
6. 2. RE of Phone Interfaces n WML n n n Several derivation rules identical - or less constraining- to HTML (combined rules starts with TH/W) RE prototype developed in [Cui 05] Voice. XML Derivation rules completely different from HTML and WML n Several losses due to ecmascripts integration (conditions, events…). Reverse engineering of declarative user interfaces – Thesis – Louvain-la-Neuve - 21/06/2006 n 21
![6. 2. RE of WML Phone Interfaces n Example n n Prototype [Cui 05]](http://slidetodoc.com/presentation_image/ee39eb01ba1d522b44d61d298dbe0616/image-22.jpg "6. 2. RE of WML Phone Interfaces n Example n n Prototype [Cui 05]")
6. 2. RE of WML Phone Interfaces n Example n n Prototype [Cui 05] using XSLT + XPATH Local process allowing no design alternatives WML USIXML <p> Yahoo! ID: <text. Component id= <input name="login" value="" "text. Component_1" glue. Horizontal format="*m" />Password: ="left“ is. Visible="true" is. Enabled= <input type="password" "true" default. Content="Yahoo! ID: name= "passwd" value="" <text. Component id= format="*m" /> "text. Component_2" glue. Horizontal= <anchor title="OK">Submit "left" default. Content="" is. Editable= <go method="post" "true" is. Visible="true"/> href="/raw? "> Reverse engineering of declarative user interfaces – Thesis – Louvain-la-Neuve - 21/06/2006 22
6. 3. RE of Windows Interfaces n Major working hypothesis n n n Static RE of. RC files up to the CUI in USIXML 1. 4. 6 No recovery of dialog No layout, hierarchy and retargeting not covered Resource file have to be modified in order to obtain a tree structure, so that derivation rules can be applied Major difficulties n n Compact attribute specifications: shortcuts notations / hexadecimal Layout expressed in absolute positions / overlapping elements Hierarchy of elements not clearly defined Attributes values defined/modified in the functional core Reverse engineering of declarative user interfaces – Thesis – Louvain-la-Neuve - 21/06/2006 23
7. Results of the Evaluation n Theoretical validation of the HTML RE approach n Coverage n n Coherence n n Coherent application of rules and, by analogy, of the entire rules set Performance n n n 93% of HTML tags recovered 20 web pages reverse engineered in a classical RE and with retargeting 25% (up to 65%) of size reduction thanks to retargeting and 20% of process time diminution Correction Manual RE of 5 web pages n Most important categories are always fully recovered n. Reverse engineering of declarative user interfaces – Thesis – Louvain-la-Neuve - 21/06/2006 Retargeting preserve correctness of models n 24
7. Results of the Evaluation n Exploratory Study n n n qualitative study achieved by 17 students of LINF 2356 course Case studies illustrating various HTML RE techniques Study of reengineering of the Sedan-Bouillon Website thanks to two FE tools: Teresa and Qtk. XML Reverse engineering of declarative user interfaces – Thesis – Louvain-la-Neuve - 21/06/2006 25
7. Results of the Evaluation n With Teresa RE applied without retargeting n USIXML CUI model used as input in Teresa that performs translations for another context of use n Produces the Web site designed for Pocket PC (XHTML) Reverse engineering of declarative user interfaces – Thesis – Louvain-la-Neuve - 21/06/2006 n 26
7. Results of the. Evaluation n With Qtki. XML Reengineered UI Original UI Reverse engineering of declarative user interfaces – Thesis – Louvain-la-Neuve - 21/06/2006 27
8. Conclusion - Contributions n Conceptualization n Development of a flexible method in a modelbased approach addressing the problem of declarative UI RE process[Boui 2 a] Retargeting concept [Boui 02 b] Operationalization n n 2 HTML RE tools [RIHM, Boui 02 c, Boui 03] Study of full reengineering with Teresa, Envir 3 D[Boui 04], Qtki. XML Reverse engineering of declarative user interfaces – Thesis – Louvain-la-Neuve - 21/06/2006 28
8. Conclusion - Contributions(2) n Test n n n The validation against four criterion (coverage, coherence, correction, performance) Exploratory study of the use of the tool and RE/retargeting evaluation Generalization n n Semi-formal notation for RE derivation rules Meta-models and derivation rules for XIML, HTML, WML, Voice. XML, Windows resource files and identification of common RE subproblems [Boui 05]. Reverse engineering of declarative user interfaces – Thesis – Louvain-la-Neuve - 21/06/2006 29
8. Conclusion - Projects Contributions n Cameleon (2002 -2005): n n n Approach for Web RE and tool support Contributions to USIXML Similar (2005 -2006): n n Extension of the approach to phone UI and windows applications Extension of USIXML Reverse engineering of declarative user interfaces – Thesis – Louvain-la-Neuve - 21/06/2006 30
8. Conclusion - limitations n n n Dialog aspects of the UI (imperative language). Static RE implies losses, dynamicity needed to complete models. Retargeting concept. Notation for declarative UI with simple CF and representable as a tree. Limited automated reengineering (usability). Reverse engineering of declarative user interfaces – Thesis – Louvain-la-Neuve - 21/06/2006 31
8. Perspectives n Short term n n Extend the coverage of the RE sub-problems for windows UI. Implement two new tools to RE Voice. XML and Windows resources files. Expand the existing implementation of Reversi. XML. Long term n n Widen scope of sources languages (Visual Basic, Delphi…). RE of scripts to recover dialogue entirely. Explore new RE techniques. Complete RE of context model. Study of RE to other languages (UIML…) Reverse engineering of declarative user interfaces – Thesis – Louvain-la-Neuve - 21/06/2006 32
Perspectives Begin VB. Form Calculator Border. Style = 1 'Fixed Single Caption = "Calculator" Client. Height = 2970 Client. Left = 2580 Client. Top = 1485 Client. Width = 3270 Clip. Controls = 0 'False Begin. Property Font name = "System" charset = 1 weight = 700 size = 9. 75 underline = 0 'False italic = 0 'False strikethrough = 0 'False End. Property Height = 3375 Icon = "CALC. frx": 0000 Left = 2520 Link. Mode = 1 'Source Link. Topic = "Form 1" Max. Button = 0 'False Scale. Height = 2970 Scale. Width = 3270 Top = 1140 Width = 3390 Begin VB. Command. Button Number Caption = "7" Height = 480 Index = 7 Left = 120 USIXML <Window id=“ 1” name=“ 1” is. Visible=“true” is. Enabled=“true” default. Border. Title=“Calculator” border. Width=“ 1”height=“ 358” width=“ 309”> <Box id=“ 2” name=“ 2” type =“verticall” is. Visible=“true” is. Enabled=“true”> <button is. Enabled=“true” … Reverse engineering of declarative user interfaces – Thesis – Louvain-la-Neuve - 21/06/2006 33
The interactive systems of today are the legacy systems of tomorrow. Therefore, reverse engineering of information systems will never become an obsolete problem itself. THANK YOU FOR YOUR ATTENTION Reverse engineering of declarative user interfaces – Thesis – Louvain-la-Neuve - 21/06/2006 34
Reverse engineering of declarative user interfaces – Thesis – Louvain-la-Neuve - 21/06/2006 35
6. 1. RE of Web Pages: Vaquita Web page extraction HTML Page Tidy Reverse Engineering XML File Manual modification Detection VAQUITA Msxml 3. dll Structuration Translation XIML Presentation model New DOM writing User Interface Generator WML, Voice. XML, HTM files Forward Engineering . RES Resource file Reverse engineering of declarative user interfaces – Thesis – Louvain-la-Neuve - 21/06/2006 36
6. 3. RE of Windows Interfaces <Box id=“ 18” name=“ 18” type=“vertical” is. Visible=“true” is. Enabled=“true” height=“ 90” 14: GROUPBOX "Direction", -1, 135, 22, 60, 34, WS_GROUP width=“ 55” default. Border. Title=“Direction”> 15: AUTORADIOBUTTON "&Up", 234, 140, 30, 45, 12, NOT <Box id=“ 19” name=“ 19” type=“horizontal” is. Visible=“true” is. Enabled=“true”> WS_TABSTOP | WS_GROUP <radtio. Button id=“ 20” name=“ 234” is. Visible=“true” is. Enabled=“true” default. Mnemonic=“u” /> 16: AUTORADIOBUTTON "&Down", 235, 140, 42, 45, 12, <text. Component id=“ 21” name=“ 9” default. Content=“Up” is. Visible=“true” is. Enabled=“true” NOT WS_TABSTOP text. Size=“ 8” text. Font=“Ms Shell Dlg” /> </box> <Box id=“ 22” name=“ 22” type=“ horizontal” is. Visible=“true” is. Enabled=“true”> <Radio. Button id=“ 23” name=“ 235” is. Visible=“true” is. Enabled=“true” default. Mnemonic=“d” /> <text. Component id=“ 24” name=“ 24” default. Content=“Down” is. Visible=“true” is. Enabled=“true” text. Size=“ 8” text. Font=“Ms Shell Dlg” /> </box> <button id=“ 25” name=“ 205” is. Visible=“true” is. Enabled=“true” default. Mnemonic=“f” default. Content=“Find Next” /> Reverse engineering of declarative user interfaces – Thesis – Louvain-la-Neuve - 21/06/2006 37
6. 3. RE of Windows Interfaces UI detection Windows. RC file Elements recovery Attribute recuperation Decompilation Windows. RES file KB of shortcut notations Hierarchy detection Layout deduction Dialog relations Save model USIXML CUI Reverse engineering of declarative user interfaces – Thesis – Louvain-la-Neuve - 21/06/2006 38
Architecture Reversi. XML 1. 0 -1. 1 Reverse engineering of declarative user interfaces – Thesis – Louvain-la-Neuve - 21/06/2006 39
Architecture Reversi. XML 1. 2 Reverse engineering of declarative user interfaces – Thesis – Louvain-la-Neuve - 21/06/2006 40
UIML – other languages n n n Valable car USIXML a des capacités d’expression très similaire à UIML (+contexte). Peu de changement conceptuellement, les principes restent les mêmes (détections éléments, attributs, layout…) Différences majeures: n n UIML plus proche du FUI (incorporation de « code » ). Plus grande séparation entre présentation et contenu - (mais resource model en USIXML). Connections avec les autres parties de l’interface et comportement des objets plus précis USIXML plus riche en termes de modèles, différents niveaux d’abstraction et outils non-commerciaux. Reverse engineering of declarative user interfaces – Thesis – Louvain-la-Neuve - 21/06/2006 41
Conclusion Contributions categorized into four levels n In the conceptualization: n The development of a flexible method thanks to a model-based approach addressing the problem of declarative UI RE process n The adaptation of the RE definitions to the UI domain and their positions in the conceptual framework (section 2. 2). n The retargeting concept (section 2. 3) and some retargeting rules (appendix G). n The constitution of a state of the art in RE (chapter 3) n The identification of shortcomings of the output language that led to modifications of the USIXML language. n The specification of meta-models illustrating the complete structure of XIML, HTML, WML, Voice. XML, Windows resources files in UML class diagrams (appendix A and B). Reverse engineering of declarative user interfaces – Thesis – Louvain-la-Neuve - 21/06/2006 42
Conclusion (2) The development of derivation rules based on these metamodels for HTML (6. 3), WML (7. 1. 3), Voice. XML (7. 2. 3), Windows resource files (section 8. 3) completed by appendix C. Derivation tables for HTML towards XIML presentation model were also described (5. 3). For the operationalization: n Vaquita for the static flexible RE of HTML files into an XIML presentation model. n Reversi. XML an online tool allowing the flexible RE of HTML files into a CUI or AUI model expressed in USIXML. n A prototype of RE tool able to extract a CUI model from WML files. In the test phase: n The validation against four criterion: coverage, correction, coherence and performance(section 9. 1) n n n Reverse engineering of declarative user interfaces – Thesis – Louvain-la-Neuve - 21/06/2006 43
Conclusion (3) An exploratory study describing a qualitative evaluation of the produced models, the tool, and the advantages of using retargeting (section 9. 2. 1). n Three case studies of various complexities (section 9. 2. 2) n An investigation of the full reengineering by combining the results of Reversi. XML with Teresa. XML and Qtk. XML (section 9. 2. 2) and the reengineering in a virtualization process is also described in section 5. 1. 4. For the last step of generalization: n A semi-formal notation for RE derivation rules (chapter 4 and appendix C) for various source UI. n A generalization of the reverse engineering method thanks to an analysis of the process applied to a large scope of UI and the identification of common RE tasks to be achieved (section 4. 4. 8). n n Reverse engineering of declarative user interfaces – Thesis – Louvain-la-Neuve - 21/06/2006 44
Reversi. XML Shortcomings n n n n CSS support Javascript RE Embedded components (flash, java. . . ) Universal access Box reduction Use of statistics to refine RE Pursue implementation n n Site RE Evolution to architecture 1. 2 Context model & selection mechanism Complete the RE of AUI Reverse engineering of declarative user interfaces – Thesis – Louvain-la-Neuve - 21/06/2006 45
6. 2. RE of Phone Interfaces WML or Voice. XML file Elements & attribute recovery Hierarchy/temporal sequence detection Temporary Information Dialog relations Model Correction Model links Save model USIXML CUI Reverse engineering of declarative user interfaces – Thesis – Louvain-la-Neuve - 21/06/2006 46
1. The Reengineering Problem n Benefits of reengineering n n Importance of reengineering n n Practical benefits Economical benefits Theoretical benefits Amount of legacy systems (60%) New needs for reengineering n New context of use (internet enabled platforms) Reverse engineering of declarative user interfaces – Thesis – Louvain-la-Neuve - 21/06/2006 47
Integration with other works Graceful Degration, Transformi. XML Task& Concepts ŒTask& Concepts Task Abstract UI ‘ Abstract UI UIUI Concrete ŽConcrete. UIUI ’ Concrete Final UI “ Final UI Transformi. XML Reverse engineering and retargeting Grafixml Reverse engineering of declarative user interfaces – Thesis – Louvain-la-Neuve - 21/06/2006 48
7. Results Evaluation n Exploratory Study n n qualitative study achieved by 17 students of LINF 2356 course Aim: use Reversi. XML and Grafi. XML to produce previews of UI suited for mobile phones and pocket PC, by using: n n n retargeting operations manual modifications Conclusion: n n Produces correct and expected results with various configuration Flexible process/retargeting really important as it allows to save time and efforts during the reengineering process Reverse engineering of declarative user interfaces – Thesis – Louvain-la-Neuve - 21/06/2006 49
MDA compliance n n Models are expressed in a unified notation and form the cornerstone to understanding software systems (semantics of the models are based on meta-models). Usi. XML models are well-formed models based on XML schema. The semantics of the models are based on meta-models expressed in terms of UML diagrams, from which the XML schema is derived. The building of software systems can be organized around a set of models by applying a series of transformations between models, organized into an architectural framework of layers and transformation. Model-to-model transformations are specified in Usi. XML. Model-tocode transformations are ensured thanks to a set of forward engineering tools. Code-to-model transformations are achieved by derivation rules that are based on the mapping between the metamodel of the source language and the meta-model of Usi. XML. Reverse engineering of declarative user interfaces – Thesis – Louvain-la-Neuve - 21/06/2006 50
MDA Compliance (2) n n A formal underpinning for describing models in a set of meta-models facilitates meaningful integration and transformation among models, and is the basis for automation All transformations are explicitly defined, based on a series of predefined semantic relationship and a set of the primitive ones (abstraction, reification and translation). Acceptance and adoption of this model-driven approach requires industry standards to provide openness to consumers, and foster competition among vendors. The last principle is on the way, as the potential wide adoption of the above techniques will validate the principle. Four levels of abstraction are almost similar with the various layers of MDA. Reverse engineering of declarative user interfaces – Thesis – Louvain-la-Neuve - 21/06/2006 51
8. Conclusion: rules categories n Elements and attributes n n Layout / Temporal ordering n n 6 rules sets Multi-Model transfomation n n 11 rules sets Hierarchy n n 6 rules sets/ 10 rules sets Dialog n n 46 rules sets Retargeting 14 rules sets n Reverse engineering of declarative user interfaces – Thesis – Louvain-la-Neuve - 21/06/2006 52
MDE n n n Attention focuses first on the application's business functionality and behavior Same principle but focus on processing/communication UML + MOF Reverse engineering of declarative user interfaces – Thesis – Louvain-la-Neuve - 21/06/2006 53
Ideal. XML Transformi. XML Flashi. XML Rendering Usi. XML models: task, domain Graph transformations Usi. XML model: Graph Concrete user Abstract user Generative transformations interface programming Final user interface Visuali. XML Derivation rules Knowi. XML Grafi. XML Visi. XML Sketchi. XML Formi. XML Reverse engineering of declarative user interfaces – Thesis – Louvain-la-Neuve - 21/06/2006 54
QVT n n n n UML to UML mappings Too complex for the objectives of our notation Tools applies on UML diagrams, based on UML meta-models, not on code based on UML meta-models Open question, as released recently Reverse engineering of declarative user interfaces – Thesis – Louvain-la-Neuve - 21/06/2006 55
- Slides: 55