1 Reverse Engineering of Declarative User Interfaces 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 Laurent Bouillon Ph.D. in Management Sciences Information systems
55
Embed
1 Reverse Engineering of Declarative User Interfaces Examination committee: Prof. Bernard Fortz, Université catholique de Louvain, Examiner Prof. Jean-Luc.
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
1
Reverse Engineering of Declarative User
Interfaces
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, ExaminerProf. Christophe Kolski, Université de Valenciennes et du Hainaut-
Cambrésis, ReaderProf. Jean Vanderdonckt, Université catholique de Louvain, Advisor
Louvain-la-Neuve, 21/6/2006
Laurent Bouillon
Ph.D. in Management SciencesInformation systems
2 Reverse engineering of declarative user interfaces – Thesis – Louvain-la-Neuve - 21/06/2006
Presentation Outline1. The reengineering problem 2. Objectives and working hypotheses 3. Reference framework4. Retargeting 5. Our notation for RE rules 6. Reverse engineering of
1. Web pages (HTML)2. Phone interfaces (WML & VoiceXML)3. Windows applications (resource files)
7. Results evaluation8. Conclusion
3 Reverse engineering of declarative user interfaces – Thesis – Louvain-la-Neuve - 21/06/2006
1.The Reengineering Problem
Interactive Software evolution: context of use =(U,P,E)
time
Platform
User
Environment
Language
4 Reverse engineering of declarative user interfaces – Thesis – Louvain-la-Neuve - 21/06/2006
1.The Reengineering Problem
Reengineering of information systems Focuses on reverse engineering
Forward engineering has been achieved in several other researches Centered on UI
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
ReverseEngineering
Forward Engineering
Functional coreCommunication
Data BaseUser Interface
Source Information System Target Information System
Functional coreCommunication
Data BaseUser Interface
AbstractRepresentation Functional core
CommunicationData Base
User Interface
5 Reverse engineering of declarative user interfaces – Thesis – Louvain-la-Neuve - 21/06/2006
1. Shortcomings of Current Approaches
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 / non-explicit transformations
6 Reverse engineering of declarative user interfaces – Thesis – Louvain-la-Neuve - 21/06/2006
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.”
Working Hypotheses Scope: declarative languages (HTML, WML, VoiceXML,
resources files) Methodology: model-based approach / model recovery Technique: static analysis Output language: XML compliant UI description language Context: focus on platform
7 Reverse engineering of declarative user interfaces – Thesis – Louvain-la-Neuve - 21/06/2006
3.Reference Framework for Multi-Context UIs
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
Source platform Target platform
textInput button button
Window
AICfacet=input
AICfacet=control
AICfacet=control
AbstractIndividualContainer
textInput button button
Window
AICfacet=input
AICfacet=control
AICfacet=control
AbstractIndividualContainer
8 Reverse engineering of declarative user interfaces – Thesis – Louvain-la-Neuve - 21/06/2006
4.Retargeting
Retargeting: RE rules tailored for a specific context of use.
Œ 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
Source platform Target platform
9 Reverse engineering of declarative user interfaces – Thesis – Louvain-la-Neuve - 21/06/2006
Retargeting (2) Gain
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 Loss of generality and maintanability Loss of distinction of RE and translation Loss of the platform independence of the
produced model
10 Reverse engineering of declarative user interfaces – Thesis – Louvain-la-Neuve - 21/06/2006
5. Our notation for RE rules
Requirements 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
(UML-OCL, TXL, graph transformation…)
11 Reverse engineering of declarative user interfaces – Thesis – Louvain-la-Neuve - 21/06/2006
5. Our notation for RE rules
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 Addnode(x), ModifyAttribute(x.a), DeleteArc(x,y)…
Set of functions ParentNode(x), IsLeaf(x), IsInPath(x)…
catch
event : string... help noinput nomatch error
initial
filled
mode : stringnamelist : string...
blockmenu
id : stringscope : stringdtmf : stringaccept : string
12 Reverse engineering of declarative user interfaces – Thesis – Louvain-la-Neuve - 21/06/2006
5.Example of Derivation Rules
Examples: For a textbox in HTML/WML
x Ts : x = input ٨ (x.type=“text” ٧ x.type=“password” ٧ x.type=NULL) Addnode (“textComponent”, idtext)
where idtext= NodeAmount(Tt)
For a table in HTML/WML
x Ts : x = table ٨ x.border>0 Addnode (“table”, idtable) where idtable = NodeAmount(Tt)
x Ts : x = table ٨ x.border=0 Addnode (“box”, idbox) where idbox = NodeAmount(Tt)
AddAttribute (idbox, “type”, “vertical”)
Input
Name=in1Maxlength=15Value=loginType=text
Element B
TextComponent
Name=in1Maxlength=15defaultContent=loginId=in1
Element Y
13 Reverse engineering of declarative user interfaces – Thesis – Louvain-la-Neuve - 21/06/2006
5.Derivation rules categories 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 Retargeting operations
14 Reverse engineering of declarative user interfaces – Thesis – Louvain-la-Neuve - 21/06/2006
6.1.RE of Web Pages:Vaquita
First RE study with the following major working hypotheses: Focus on presentational aspects No recovery of layout and dialog XIML presentation model as ouput Static flexible RE of Web Pages
15 Reverse engineering of declarative user interfaces – Thesis – Louvain-la-Neuve - 21/06/2006
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
16 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
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 THANK YOU FOR YOUR ATTENTIONATTENTION
35 Reverse engineering of declarative user interfaces – Thesis – Louvain-la-Neuve - 21/06/2006
36 Reverse engineering of declarative user interfaces – Thesis – Louvain-la-Neuve - 21/06/2006
6.1.RE of Web Pages:Vaquita
Web page extraction
HTML Page
Tidy
Msxml3.dll
XML File
XIML Presentationmodel
.RESResource file
Detection
Structuration
Manual modification
VAQUITA
Translation
New DOM writing User Interface Generator
WML, VoiceXML,HTM files
ReverseEngineering
ForwardEngineering
37 Reverse engineering of declarative user interfaces – Thesis – Louvain-la-Neuve - 21/06/2006
38 Reverse engineering of declarative user interfaces – Thesis – Louvain-la-Neuve - 21/06/2006
6.3.RE of Windows Interfaces
Windows .RCfile
Elements recovery
Attribute recuperation
Hierarchy detection
Layout deduction
Dialog relations
Save model USIXML CUI
KB of shortcutnotations
Windows .RES fileDecompilationUI detection
39 Reverse engineering of declarative user interfaces – Thesis – Louvain-la-Neuve - 21/06/2006
Architecture ReversiXML 1.0-1.1
ReversiXML
LAMP server
HTML page
Forward Engineering
tool
2
3
1
4
5
ReversiXML
LAMP server
HTML page
Forward Engineering
tool
3
5
11
9
6
1
2
Configuration DB
Web server
4
Reverse engineerdUI DB
TemporaryPages
7
12
10
8
1413
40 Reverse engineering of declarative user interfaces – Thesis – Louvain-la-Neuve - 21/06/2006
Architecture ReversiXML 1.2
ReversiXML
LAMP server
HTML page
Forward Engineering
tool
3
6
14
7
1
2
Configuration DB
Web server
Reverse engineerdUI DB
TemporaryPages
8
15
13
11
1716
HTML page
Archive.org
910
Context DB
User
Designer
5
4
12
41 Reverse engineering of declarative user interfaces – Thesis – Louvain-la-Neuve - 21/06/2006
UIML – other languages 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: 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.
42 Reverse engineering of declarative user interfaces – Thesis – Louvain-la-Neuve - 21/06/2006
ConclusionContributions categorized into four levels In the conceptualization:
The development of a flexible method thanks to a model-based approach addressing the problem of declarative UI RE process
The adaptation of the RE definitions to the UI domain and their positions in the conceptual framework (section 2.2).
The retargeting concept (section 2.3) and some retargeting rules (appendix G).
The constitution of a state of the art in RE (chapter 3) The identification of shortcomings of the output language
that led to modifications of the USIXML language. The specification of meta-models illustrating the
complete structure of XIML, HTML, WML, VoiceXML, Windows resources files in UML class diagrams (appendix A and B).
43 Reverse engineering of declarative user interfaces – Thesis – Louvain-la-Neuve - 21/06/2006
Conclusion (2) The development of derivation rules based on these meta-models
for HTML (6.3), WML (7.1.3), VoiceXML (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: Vaquita for the static flexible RE of HTML files into an XIML
presentation model. ReversiXML an online tool allowing the flexible RE of HTML files
into a CUI or AUI model expressed in USIXML. A prototype of RE tool able to extract a CUI model from WML files.
In the test phase: The validation against four criterion: coverage, correction,
coherence and performance(section 9.1)
44 Reverse engineering of declarative user interfaces – Thesis – Louvain-la-Neuve - 21/06/2006
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).
Three case studies of various complexities (section 9.2.2)
An investigation of the full reengineering by combining the results of ReversiXML with TeresaXML and QtkXML (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: A semi-formal notation for RE derivation rules (chapter
4 and appendix C) for various source UI. 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).
45 Reverse engineering of declarative user interfaces – Thesis – Louvain-la-Neuve - 21/06/2006
ReversiXML Shortcomings
CSS support Javascript RE Embedded components (flash, java...) Universal access Box reduction Use of statistics to refine RE Pursue implementation
Site RE Evolution to architecture 1.2 Context model & selection mechanism Complete the RE of AUI
46 Reverse engineering of declarative user interfaces – Thesis – Louvain-la-Neuve - 21/06/2006
6.2.RE of Phone InterfacesWML or
VoiceXML file
Elements & attribute recovery
Hierarchy/temporal sequence detection
Dialog relations
Model Correction
Model links
Save model USIXML CUI
Temporary Information
47 Reverse engineering of declarative user interfaces – Thesis – Louvain-la-Neuve - 21/06/2006
1.The Reengineering Problem Benefits of reengineering
Importance of reengineering Amount of legacy systems (60%)
New needs for reengineering New context of use (internet enabled platforms)
48 Reverse engineering of declarative user interfaces – Thesis – Louvain-la-Neuve - 21/06/2006
Integration with other works
ŒTask & Concepts
Abstract UI
Ž Concrete UI
Final UI
Task & Concepts
‘ Abstract UI
’ Concrete UI
“ Final UI
Task & Concepts
Abstract UI
Concrete UI
Task & Concepts
Concrete UI
Final UI
Reverse engineeringand retargeting
Graceful Degration, TransformiXML
Grafixml
TransformiXML
Abstract UI
Final UI
49 Reverse engineering of declarative user interfaces – Thesis – Louvain-la-Neuve - 21/06/2006
7.Results Evaluation Exploratory Study
qualitative study achieved by 17 students of LINF2356 course
Aim: use ReversiXML and GrafiXML to produce previews of UI suited for mobile phones and pocket PC, by using:
retargeting operations manual modifications
Conclusion: 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
50 Reverse engineering of declarative user interfaces – Thesis – Louvain-la-Neuve - 21/06/2006
MDA compliance Models are expressed in a unified notation and form the
cornerstone to understanding software systems (semantics of the models are based on meta-models). UsiXML 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 UsiXML. Model-to-code 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 meta-model of the source language and the meta-model of UsiXML.
51 Reverse engineering of declarative user interfaces – Thesis – Louvain-la-Neuve - 21/06/2006
MDA Compliance (2) 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.
52 Reverse engineering of declarative user interfaces – Thesis – Louvain-la-Neuve - 21/06/2006
8.Conclusion: rules categories Elements and attributes
46 rules sets Layout / Temporal ordering
6 rules sets/ 10 rules sets Dialog
11 rules sets Hierarchy
6 rules sets Multi-Model transfomation
6 rules sets Retargeting
14 rules sets
3 drop down list boxes
Radio button
Table Extended edit box Edit box
53 Reverse engineering of declarative user interfaces – Thesis – Louvain-la-Neuve - 21/06/2006
MDE
MDE Attention focuses first on the application's
business functionality and behavior Same principle but focus on
processing/communication UML + MOF
54 Reverse engineering of declarative user interfaces – Thesis – Louvain-la-Neuve - 21/06/2006
UsiXML model:Abstract user
interface
UsiXML model:Concrete user
interface
Rendering
Final userinterface
UsiXMLmodels: task,
domainGenerative
programming
Graphtransformations
Graphtransformations
Derivation rules
IdealXML
ReversiXML
FlashiXML
VisualiXML
TransformiXML
GrafiXMLVisiXML
SketchiXMLFormiXML
KnowiXML
55 Reverse engineering of declarative user interfaces – Thesis – Louvain-la-Neuve - 21/06/2006
QVT
QVT 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