AUTOMATIC GENERATION OF VISUAL PROGRAMMING ENVIRONMENTS A workflow Universidade do Minho, Departamento de Informática Nuno Oliveira, 2009

Context Textual Programming Languages: Require fine knowledge about their syntax; Small errors can make programming activity boring; Comprehension is very hard. Visual Programming Languages: Are intended to have a much simpler syntax, easier to recall and understand; Comprehesion should be easier; Require a sophisticated programming Env. 2 Universidade do Minho, Departamento de Informática Nuno Oliveira, 2009

Context Visual Programming Environments Usually are developed from scratch, without systematization ; Code written for their development is (most of the times) hard to maintain/evolve; But the environments are efficient and support large scale specifications. 3 Universidade do Minho, Departamento de Informática Nuno Oliveira, 2009

MOTIVATION Systematize the development of Visual Programming Environments, using Generators based on the Attribute Grammar of the underlying Visual Language. (work developed as a 2nd year MSc project (UCE-15)) 4 Universidade do Minho, Departamento de Informática Nuno Oliveira, 2009

OUTLINE The Generator Chosen: DEViL (an overview) The Case-Study: VisualLISA VPE Development: Workflow Attribute Grammar Specification Interaction Definition Semantic Analyzer Implementation Code Generation Generated Environment Conclusion 5 Universidade do Minho, Departamento de Informática Nuno Oliveira, 2009

DEViL OVERVIEW Visual Programming Environment generator ; AG-based; The AG spec is modular and symbol-oriented rather then production-oriented; Generates a simple and intuitive interface. 6 Universidade do Minho, Departamento de Informática Nuno Oliveira, 2009

DEViL – DEVELOPMENT ENVIRONMENT FOR VISUAL LANGUAGES Complex Installation; Disperse documen- tation and written in German; Generated Editor is only compatible with the SO where it was developed; Very good support; Many examples, addressing several DEViL features; Exists for MacOS, Windows and Linux; Allows programmers to extend capabilities. ConsPros 7 Universidade do Minho, Departamento de Informática Nuno Oliveira, 2009

Is a graphical front-end for LISA (an AG-based compiler generator). Used to visually edit LISA specifications: AGs; Aims at reducing mental effort when specifying AGs. 8 Universidade do Minho, Departamento de Informática Nuno Oliveira, 2009 Case-Study: VisualLISA

Should verify syntactical and semantically the visual specification of the AG; Should translate the same specification into one of: Simple BNF notation; Textual LISA specification; An XML notation designed to support AG specifications; 9 Universidade do Minho, Departamento de Informática Nuno Oliveira, 2009 VisualLISA – The Environment

VisualLISA – The Visual Language Language should be production-oriented and incremental; LHS symbols shape should be highlighted; Connection between LHS and RHS symbols should exist; Attributes should connect to LHS and RHS symbols; 10 Universidade do Minho, Departamento de Informática Nuno Oliveira, 2009

VisualLISA – The Visual Language (2) Semantic rules should be declared: over derivation rules (productions); separated from each others; reusing the productions structure; Functions, Lexemes and other base definitions should be allowed; The VL must hold all the generic AGs semantic constraints. 11 Universidade do Minho, Departamento de Informática Nuno Oliveira, 2009

12 Universidade do Minho, Departamento de Informática Nuno Oliveira, 2009

WORKFLOW 13 Universidade do Minho, Departamento de Informática Nuno Oliveira, 2009 Attribute Grammar Specification

ATTRIBUTE GRAMMAR Modular definition of symbols; Object Oriented Approach: Grammar symbols can be seen as classes; Symbol attributes can be seen as class attributes. Syntax is defined by relations between the classes; 14 Universidade do Minho, Departamento de Informática Nuno Oliveira, 2009

15 CLASS Root { name: VAL VLString; semprods: SUB Semprod*; definitions: SUB Definitions!; library: SUB Library?; } CLASS Root { name: VAL VLString; semprods: SUB Semprod*; definitions: SUB Definitions!; library: SUB Library?; }

ATTRIBUTE GRAMMAR Abstract classes are used to group symbols and refine syntactic aspects; Coupling of grammar symbols used to replicate structures. 16 Universidade do Minho, Departamento de Informática Nuno Oliveira, 2009

WORKFLOW 17 Universidade do Minho, Departamento de Informática Nuno Oliveira, 2009 Interaction Definition ButtonsSymbols L&F Attribute Grammar Specification

INTERACTION DEFINITION Development of several files where: Views of the VL are defined; Dock Buttons are created; L&F of buttons is declared (p.e. using images); The behavior of a button is defined; Tooltips can be added; Events can be programmed to add extra behavior to the buttons actions. 18 Universidade do Minho, Departamento de Informática Nuno Oliveira, 2009

19 Universidade do Minho, Departamento de Informática Nuno Oliveira, 2009 VIEW rootView ROOT Root { BUTTON IMAGE "img::btnSemprod" INSERTS Semprod INFO "Inserts a new Grammar Production"; } VIEW rootView ROOT Root { BUTTON IMAGE "img::btnSemprod" INSERTS Semprod INFO "Inserts a new Grammar Production"; } INTERACTION DEFINITION A VIEW DECLARATION

INTERACTION DEFINITION Definition of canvas L&F: Visual Patterns are associated to tree-grammar symbols to define their basic appearence; Computations are declared to implement the VPs; Icons are associated to symbols (SYNT.drawing) ; Semantic rules can be declare to assign values to the attributes of the symbols. 20 Universidade do Minho, Departamento de Informática Nuno Oliveira, 2009

INTERACTION DEFINITION A VIEW SYNTHESIS 21 Universidade do Minho, Departamento de Informática Nuno Oliveira, 2009 SYMBOL rootView_Root INHERITS VPRootElement, VPForm COMPUTE SYNT.drawing = ADDROF(rootViewDrawing); END; SYMBOL rootView_Root_semprods INHERITS VPFormElement, VPSimpleList COMPUTE SYNT.formElementName = "productions"; END; SYMBOL rootView_Root INHERITS VPRootElement, VPForm COMPUTE SYNT.drawing = ADDROF(rootViewDrawing); END; SYMBOL rootView_Root_semprods INHERITS VPFormElement, VPSimpleList COMPUTE SYNT.formElementName = "productions"; END;

WORKFLOW 22 Universidade do Minho, Departamento de Informática Nuno Oliveira, 2009 Semantic Analyzer Implementation Interaction Definition ButtonsSymbols L&F Attribute Grammar Specification

SEMANTIC ANALYZER IMPLEMENTATION DEViL offers tree-walker (function) named addCheck; Tree-walker executes in a given context; A tree-context is a symbol or attribute in the tree-grammar; Id-Tables, Lists, etc. can be implemented with ease; 23 Universidade do Minho, Departamento de Informática Nuno Oliveira, 2009

SEMANTIC ANALYZER IMPLEMENTATION 24 Universidade do Minho, Departamento de Informática Nuno Oliveira, 2009 Contextual Condition: A production must have one and only one root symbol checkutil::addCheck Semprod { set n [llength [c::getList {$obj.grammarElements.CHILDREN[LeftSymbol]}]] set symbName [c::get {$obj.name.VALUE}] if { $n == 0 } { eturn "Production '$symbName' must have one Root symbol! } elseif {$n > 1} { return "Production '$symbName' must have only one Root symbol! } return } checkutil::addCheck Semprod { set n [llength [c::getList {$obj.grammarElements.CHILDREN[LeftSymbol]}]] set symbName [c::get {$obj.name.VALUE}] if { $n == 0 } { eturn "Production '$symbName' must have one Root symbol! } elseif {$n > 1} { return "Production '$symbName' must have only one Root symbol! } return }

WORKFLOW 25 Universidade do Minho, Departamento de Informática Nuno Oliveira, 2009 Code Generation Semantic Analyzer Implementation Interaction Definition ButtonsSymbols L&F Attribute Grammar Specification

CODE GENERATION 26 Universidade do Minho, Departamento de Informática Nuno Oliveira, 2009 Templates for structuring the output are used ( IPTG/PTG Files ); Typical AG approach: Attributes can be associated to symbols of the tree- grammar; Semantic rules are declared to compute value for these attributes; Attributes can be referenced outside the context of the symbol; Auxiliary functions can be defined to aid the computations;

27 Universidade do Minho, Departamento de Informática Nuno Oliveira, 2009 bnfProd(lhs, rhs): [lhs] -> [rhs] bnfProd(lhs, rhs): [lhs] -> [rhs] SYMBOL bnfgen_Semprod: bnfLHS : PTGNode; SYMBOL bnfgen_Semprod: bnfRHS : PTGNode; SYMBOL bnfgen_Semprod: bnfCode : PTGNode; SYMBOL bnfgen_Semprod COMPUTE SYNT.bnfLHS = CONSTITUENTS bnfgen_LeftSymbol.pers_symbolName WITH(PTGNode, PTGNewLineSeq, PTGAsIs, PTGNull); SYNT.bnfRHS = PTGAsIs(VLString(SELECT(vlList( "printBNFOrderedRHSElements",THIS.objId),eval()))); SYNT.bnfCode = PTGbnfProd(THIS.bnfLHS, THIS.bnfRHS); END; SYMBOL bnfgen_Semprod: bnfLHS : PTGNode; SYMBOL bnfgen_Semprod: bnfRHS : PTGNode; SYMBOL bnfgen_Semprod: bnfCode : PTGNode; SYMBOL bnfgen_Semprod COMPUTE SYNT.bnfLHS = CONSTITUENTS bnfgen_LeftSymbol.pers_symbolName WITH(PTGNode, PTGNewLineSeq, PTGAsIs, PTGNull); SYNT.bnfRHS = PTGAsIs(VLString(SELECT(vlList( "printBNFOrderedRHSElements",THIS.objId),eval()))); SYNT.bnfCode = PTGbnfProd(THIS.bnfLHS, THIS.bnfRHS); END;

28

29

FILE REPRESENTATION OF THE WORKFLOW 30

31 Viag.XMODEL View.MODEL Code.HEAD Code.SPECS images.GDR Aux.TCL Code.LIDO Code.IPTG Code.MODEL View.LIDO Buttons.PNG Viag.DEFS Semantics.TCL Symbols.GIF Sync.TCL Edit.TCL Template.RES

THE GENERATED ENVIRONMENT 32

THE GENERATED ENVIRONMENT 33

34 Universidade do Minho, Departamento de Informática Nuno Oliveira, 2009 CONCLUSIONS Systematization is achieved using generators; Separation of concerns (with DEViL): Syntax; Interaction; Semantics; Code Generation; Less code produced; Ease on maintaining or evolving the code;

VisualLISA 35