Reverse Engineering of Web Pages based on Derivations and Transformations L.Bouillon, Q.Limbourg, J.Vanderdonckt, B.Michotte Université catholique de Louvain,

Reverse Engineering of Web Pages based on Derivations and Transformations

L.Bouillon, Q.Limbourg, J.Vanderdonckt, B.Michotte

Université catholique de Louvain, School of Management (IAG)Information Systems Unit (ISYS)

LA-WEB 2005 – Buenos Aires, Oct. 31 – Nov. 2nd

Introduction

Forward and reverse engineering following four paths: Code-to-code Code-to-model Model-to-code Model-to-model


Properties of ReengineeringInitial User Interface

Reengineering engineReengineeringparameters

Reengineeringlogic

Final User Interface

Reengineering system

Initial User Interface

Reengineering engineReengineeringparameters

Reengineeringlogic

Final User Interface

Reengineering system

Flexible operationalization of reengineering logicFlexible usage of reengineering engineLanguage NeutralityModality independenceMulti-level abstractionSeparation of concerns

a reengineering logic containing the knowledgerequired to perform the reengineering should be separated from the reengineering engine applying this knowledge.

the system should also produce a UI model that remains independent of any modality of interaction

a consequence of the platform independence is that, in principle, the system should be developed so as to accommodate UI programming in multiple languages whether they are imperative, declarative or markup

means that any type of knowledge should be specifiedexplicitly in a way that remains external to the engine so that the engine remains autonomous when the logicchanges.

the engine should be controlled by reengineering parameters so that the process can be made observable and traceable to the designer.

the system should produce a reengineered final UI from an initial UI so as to reach multiple levels of abstraction.


Cameleon Reference Framework(2)

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



Cameleon Reference Framework(2)

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



Usixml Graph transformation based language Usixml model collection:

AUI model CUI model Task model Domain model Mapping model uiModel Context model

User model Platform model Environment model


Derivations rules (1)

Set of rules developped to recover CUI and AUI from several FUIs

(HTML, WML, VoiceXML…) Examine language patterns of the

source code and create a corresponding structure in terms of UI graph.


Derivation rules examples

For a textbox in HTML x Ts : x = input ٨ (x.type=“text” ٧ type=“password” ٧ x.type=NULL) Addnode (“textComponent”, idtext) where idtext=∑ node Tt

For a table in HTML x Ts : x = table ٨ x.border>0

Addnode (“table”, idtable) where idtable = ∑ node Tt x Ts : x = table ٨ x.border=0

Addnode (“box”, idbox) where idbox = ∑ node Tt AddAttribute (idbox, type, “vertical”)


Model Transformations

Graph Transformation

Graph rewriting rules

(conditions: attribute

& negative application)

When LHS matches into G (and NAC does not) then LHS is replaced by RHS in G’.

LHS can also compare value (attibute condition)


Model Transformations Example

NAC LHS RHS

::=

NAC LHS RHS

::=

AGG Tool : programming environment for graph transformations


Properties of Model transformation

Traceability Reversibility Multi-directional development

(explicitly connects various levels) Powerfull and formal approach Graphcial / textual formalism


Software support

ReversiXML TransformXML GrafiXML

All these tools are available on http://www. usixml.org


ReversiXML

Accessible on-line at: http://www.isys.ucl.ac.be/research/reversi/RevXMLUI.php

Application developped in PHP 5 allowing to dynamically apply flexible reverse engineering of HTML pages.

Short demonstration


ReversiXML (2)


TransformiXML Tool developped in

Java, based on the AGG tool engine

Accept as input UsiXML specifications and allows to apply rules to transform models

Export transformed UsiXML specifications


GrafiXML

Java-based forward engineering tool Allows to graphically draw a UI and

generates the correspond UI code in Java, XHTML or XUL.

Allows to apply complete reengineering thanks to the three tools: ReversiXML, TransformiXML and GrafiXML


Multi-path support for MDA

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


Conclusion

120 derivations rules incorporated in ReversiXML (not for scripts & .css)

Flexible application of rules: observable, traceable and controllable

Multiple level of abstraction More levels of abstraction available with

transformiXML Generability of rules used in transformiXML

Documents

Reverse Engineering of Web Pages based on Derivations and Transformations L.Bouillon, Q.Limbourg, J.Vanderdonckt, B.Michotte Université catholique de Louvain,