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. LA-WEB 2005 – Buenos Aires, Oct. 31 – Nov. 2 nd Introduction Forward and reverse engineering following four paths:  Code-to-code  Code-to-model  Model-to-code  Model-to-model

3. LA-WEB 2005 – Buenos Aires, Oct. 31 – Nov. 2 nd Properties of Reengineering Flexible operationalization of reengineering logic Flexible usage of reengineering engine Language Neutrality Modality independence Multi-level abstraction Separation of concerns a reengineering logic containing the knowledge required 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 specified explicitly in a way that remains external to the engine so that the engine remains autonomous when the logic changes. 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.

4. LA-WEB 2005 – Buenos Aires, Oct. 31 – Nov. 2 nd Cameleon Reference Framework(2)

5. LA-WEB 2005 – Buenos Aires, Oct. 31 – Nov. 2 nd Cameleon Reference Framework(2)

6. LA-WEB 2005 – Buenos Aires, Oct. 31 – Nov. 2 nd 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. LA-WEB 2005 – Buenos Aires, Oct. 31 – Nov. 2 nd 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. LA-WEB 2005 – Buenos Aires, Oct. 31 – Nov. 2 nd 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”)

9. LA-WEB 2005 – Buenos Aires, Oct. 31 – Nov. 2 nd 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. LA-WEB 2005 – Buenos Aires, Oct. 31 – Nov. 2 nd Model Transformations Example AGG Tool : programming environment for graph transformations

11. LA-WEB 2005 – Buenos Aires, Oct. 31 – Nov. 2 nd Properties of Model transformation Traceability Reversibility Multi-directional development (explicitly connects various levels) Powerfull and formal approach Graphcial / textual formalism

12. LA-WEB 2005 – Buenos Aires, Oct. 31 – Nov. 2 nd Software support ReversiXML TransformXML GrafiXML All these tools are available on http://www. usixml.orghttp://ww

13. LA-WEB 2005 – Buenos Aires, Oct. 31 – Nov. 2 nd ReversiXML Accessible on-line at: http://www.isys.ucl.ac.be/research/rev ersi/RevXMLUI.php http://www.isys.ucl.ac.be/research/rev ersi/RevXMLUI.php Application developped in PHP 5 allowing to dynamically apply flexible reverse engineering of HTML pages. Short demonstration

14. LA-WEB 2005 – Buenos Aires, Oct. 31 – Nov. 2 nd ReversiXML (2)

15. LA-WEB 2005 – Buenos Aires, Oct. 31 – Nov. 2 nd 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. LA-WEB 2005 – Buenos Aires, Oct. 31 – Nov. 2 nd 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. LA-WEB 2005 – Buenos Aires, Oct. 31 – Nov. 2 nd Multi-path support for MDA UsiXML model: Abstract user interface UsiXML model: Concrete user interface Rendering Final user interface UsiXML models: task, domain Generative programming Graph transformations Graph transformations Derivation rules IdealXML ReversiXML FlashiXML VisualiXML TransformiXML GrafiXML VisiXML SketchiXML FormiXML KnowiXML

18. LA-WEB 2005 – Buenos Aires, Oct. 31 – Nov. 2 nd 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