Reverse Engineering of Web Pages based on Derivations and Transformations

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

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

3
Properties of Reengineering
Separation of concerns
Flexible operationalization of reengineering logic
Language Neutrality

• Flexible usage of reengineering engine

Multi-level abstraction
Modality independence
the system should also produce a UI model that
remains independent of any modality of
interaction
the system should produce a reengineered final UI
from an initial UI so as to reach multiple
levels of abstraction.
a reengineering logic containing the
knowledge required to perform the reengineering
should be separated from the reengineering
engine applying this knowledge.
the engine should be controlled by reengineering
parameters so that the process can be made
observable and traceable to the designer.
means that any type of knowledge should be
specified explicitly in a way that remains
external to the engine so that the engine
remains autonomous when the logic changes.
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
4
Cameleon Reference Framework(2)

5
Cameleon Reference Framework(2)
6
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

7
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.

8
Derivation rules examples

• For a textbox in HTML
• ? x ? Ts x input ? (x.typetext ?
  typepassword ? x.typeNULL)
• ?Addnode (textComponent, idtext) where
  idtext? node ? Tt
• For a table in HTML
• ? x ? Ts x table ? x.bordergt0
• ?Addnode (table, idtable) where idtable ?
  node ? Tt
• ?? x ? Ts x table ? x.border0 ? Addnode
  (box, idbox) where idbox ? node ? Tt
• ? AddAttribute (idbox, type, vertical)

9
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)

10
Model Transformations Example
AGG Tool programming environment for graph
transformations
11
Properties of Model transformation

• Traceability
• Reversibility
• Multi-directional development (explicitly
  connects various levels)
• Powerfull and formal approach
• Graphcial / textual formalism

12
Software support

• ReversiXML
• TransformXML
• GrafiXML
• All these tools are available on http//www.
  usixml.org

13
ReversiXML

• Accessible on-line at http//www.isys.ucl.ac.be/r
  esearch/reversi/RevXMLUI.php
• Application developped in PHP 5 allowing to
  dynamically apply flexible reverse engineering of
  HTML pages.
• Short demonstration

14
ReversiXML (2)
15
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

16
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

17
Multi-path support for MDA
TransformiXML
IdealXML
FlashiXML
Rendering
UsiXML model Abstract user interface
UsiXML model Concrete user interface
UsiXML models task, domain
Graph transformations
Graph transformations
Final user interface
Generative programming
VisualiXML
Derivation rules
ReversiXML
GrafiXML VisiXML SketchiXML FormiXML
KnowiXML
18
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