automatic generation of visual programming environments
DESCRIPTION
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; - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: AUTOMATIC GENERATION OF VISUAL PROGRAMMING ENVIRONMENTS](https://reader035.vdocuments.us/reader035/viewer/2022062314/568147b5550346895db4fbfa/html5/thumbnails/1.jpg)
AUTOMATIC GENERATION OF VISUAL PROGRAMMING ENVIRONMENTSA workflow
Universidade do Minho, Departamento de InformáticaNuno Oliveira, 2009
![Page 2: AUTOMATIC GENERATION OF VISUAL PROGRAMMING ENVIRONMENTS](https://reader035.vdocuments.us/reader035/viewer/2022062314/568147b5550346895db4fbfa/html5/thumbnails/2.jpg)
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.
2Universidade do Minho, Departamento de Informática
Nuno Oliveira, 2009
![Page 3: AUTOMATIC GENERATION OF VISUAL PROGRAMMING ENVIRONMENTS](https://reader035.vdocuments.us/reader035/viewer/2022062314/568147b5550346895db4fbfa/html5/thumbnails/3.jpg)
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.
3Universidade do Minho, Departamento de Informática
Nuno Oliveira, 2009
![Page 4: AUTOMATIC GENERATION OF VISUAL PROGRAMMING ENVIRONMENTS](https://reader035.vdocuments.us/reader035/viewer/2022062314/568147b5550346895db4fbfa/html5/thumbnails/4.jpg)
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))
4Universidade do Minho, Departamento de Informática
Nuno Oliveira, 2009
![Page 5: AUTOMATIC GENERATION OF VISUAL PROGRAMMING ENVIRONMENTS](https://reader035.vdocuments.us/reader035/viewer/2022062314/568147b5550346895db4fbfa/html5/thumbnails/5.jpg)
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
5Universidade do Minho, Departamento de Informática
Nuno Oliveira, 2009
![Page 6: AUTOMATIC GENERATION OF VISUAL PROGRAMMING ENVIRONMENTS](https://reader035.vdocuments.us/reader035/viewer/2022062314/568147b5550346895db4fbfa/html5/thumbnails/6.jpg)
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.
6Universidade do Minho, Departamento de Informática
Nuno Oliveira, 2009
![Page 7: AUTOMATIC GENERATION OF VISUAL PROGRAMMING ENVIRONMENTS](https://reader035.vdocuments.us/reader035/viewer/2022062314/568147b5550346895db4fbfa/html5/thumbnails/7.jpg)
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
7Universidade do Minho, Departamento de Informática
Nuno Oliveira, 2009
![Page 8: AUTOMATIC GENERATION OF VISUAL PROGRAMMING ENVIRONMENTS](https://reader035.vdocuments.us/reader035/viewer/2022062314/568147b5550346895db4fbfa/html5/thumbnails/8.jpg)
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.
8Universidade do Minho, Departamento de Informática
Nuno Oliveira, 2009
Case-Study: VisualLISA
![Page 9: AUTOMATIC GENERATION OF VISUAL PROGRAMMING ENVIRONMENTS](https://reader035.vdocuments.us/reader035/viewer/2022062314/568147b5550346895db4fbfa/html5/thumbnails/9.jpg)
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;
9Universidade do Minho, Departamento de Informática
Nuno Oliveira, 2009
VisualLISA – The Environment
![Page 10: AUTOMATIC GENERATION OF VISUAL PROGRAMMING ENVIRONMENTS](https://reader035.vdocuments.us/reader035/viewer/2022062314/568147b5550346895db4fbfa/html5/thumbnails/10.jpg)
VisualLISA – The Visual Language
Language should be production-oriented and incremental;
LHS symbol’s shape should be highlighted; Connection between LHS and RHS symbols
should exist; Attributes should connect to LHS and RHS
symbols;
10Universidade do Minho, Departamento de Informática
Nuno Oliveira, 2009
![Page 11: AUTOMATIC GENERATION OF VISUAL PROGRAMMING ENVIRONMENTS](https://reader035.vdocuments.us/reader035/viewer/2022062314/568147b5550346895db4fbfa/html5/thumbnails/11.jpg)
VisualLISA – The Visual Language (2)
Semantic rules should be declared: over derivation rules (productions); separated from each others; reusing the production’s structure;
Functions, Lexemes and other base definitions should be allowed;
The VL must hold all the generic AG’s semantic constraints.
11Universidade do Minho, Departamento de Informática
Nuno Oliveira, 2009
![Page 12: AUTOMATIC GENERATION OF VISUAL PROGRAMMING ENVIRONMENTS](https://reader035.vdocuments.us/reader035/viewer/2022062314/568147b5550346895db4fbfa/html5/thumbnails/12.jpg)
12Universidade do Minho, Departamento de Informática
Nuno Oliveira, 2009
![Page 13: AUTOMATIC GENERATION OF VISUAL PROGRAMMING ENVIRONMENTS](https://reader035.vdocuments.us/reader035/viewer/2022062314/568147b5550346895db4fbfa/html5/thumbnails/13.jpg)
WORKFLOW
13Universidade do Minho, Departamento de Informática
Nuno Oliveira, 2009
![Page 14: AUTOMATIC GENERATION OF VISUAL PROGRAMMING ENVIRONMENTS](https://reader035.vdocuments.us/reader035/viewer/2022062314/568147b5550346895db4fbfa/html5/thumbnails/14.jpg)
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;
14Universidade do Minho, Departamento de Informática
Nuno Oliveira, 2009
![Page 15: AUTOMATIC GENERATION OF VISUAL PROGRAMMING ENVIRONMENTS](https://reader035.vdocuments.us/reader035/viewer/2022062314/568147b5550346895db4fbfa/html5/thumbnails/15.jpg)
15
CLASS Root { name: VAL VLString;
semprods: SUB Semprod*; definitions: SUB Definitions!; library: SUB Library?;
}
![Page 16: AUTOMATIC GENERATION OF VISUAL PROGRAMMING ENVIRONMENTS](https://reader035.vdocuments.us/reader035/viewer/2022062314/568147b5550346895db4fbfa/html5/thumbnails/16.jpg)
ATTRIBUTE GRAMMAR
Abstract classes are used to group symbols and refine syntactic aspects;
Coupling of grammar symbols used to replicate structures.
16Universidade do Minho, Departamento de Informática
Nuno Oliveira, 2009
![Page 17: AUTOMATIC GENERATION OF VISUAL PROGRAMMING ENVIRONMENTS](https://reader035.vdocuments.us/reader035/viewer/2022062314/568147b5550346895db4fbfa/html5/thumbnails/17.jpg)
WORKFLOW
17Universidade do Minho, Departamento de Informática
Nuno Oliveira, 2009
![Page 18: AUTOMATIC GENERATION OF VISUAL PROGRAMMING ENVIRONMENTS](https://reader035.vdocuments.us/reader035/viewer/2022062314/568147b5550346895db4fbfa/html5/thumbnails/18.jpg)
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 button’s actions.
18Universidade do Minho, Departamento de Informática
Nuno Oliveira, 2009
![Page 19: AUTOMATIC GENERATION OF VISUAL PROGRAMMING ENVIRONMENTS](https://reader035.vdocuments.us/reader035/viewer/2022062314/568147b5550346895db4fbfa/html5/thumbnails/19.jpg)
19Universidade 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";
}
INTERACTION DEFINITION A VIEW DECLARATION
![Page 20: AUTOMATIC GENERATION OF VISUAL PROGRAMMING ENVIRONMENTS](https://reader035.vdocuments.us/reader035/viewer/2022062314/568147b5550346895db4fbfa/html5/thumbnails/20.jpg)
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.
20Universidade do Minho, Departamento de Informática
Nuno Oliveira, 2009
![Page 21: AUTOMATIC GENERATION OF VISUAL PROGRAMMING ENVIRONMENTS](https://reader035.vdocuments.us/reader035/viewer/2022062314/568147b5550346895db4fbfa/html5/thumbnails/21.jpg)
INTERACTION DEFINITION A VIEW SYNTHESIS
21Universidade 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, VPSimpleListCOMPUTE
SYNT.formElementName = "productions";END;
![Page 22: AUTOMATIC GENERATION OF VISUAL PROGRAMMING ENVIRONMENTS](https://reader035.vdocuments.us/reader035/viewer/2022062314/568147b5550346895db4fbfa/html5/thumbnails/22.jpg)
WORKFLOW
22Universidade do Minho, Departamento de Informática
Nuno Oliveira, 2009
![Page 23: AUTOMATIC GENERATION OF VISUAL PROGRAMMING ENVIRONMENTS](https://reader035.vdocuments.us/reader035/viewer/2022062314/568147b5550346895db4fbfa/html5/thumbnails/23.jpg)
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;
23Universidade do Minho, Departamento de Informática
Nuno Oliveira, 2009
![Page 24: AUTOMATIC GENERATION OF VISUAL PROGRAMMING ENVIRONMENTS](https://reader035.vdocuments.us/reader035/viewer/2022062314/568147b5550346895db4fbfa/html5/thumbnails/24.jpg)
SEMANTIC ANALYZER IMPLEMENTATION
24Universidade 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 ””}
![Page 25: AUTOMATIC GENERATION OF VISUAL PROGRAMMING ENVIRONMENTS](https://reader035.vdocuments.us/reader035/viewer/2022062314/568147b5550346895db4fbfa/html5/thumbnails/25.jpg)
WORKFLOW
25Universidade do Minho, Departamento de Informática
Nuno Oliveira, 2009
![Page 26: AUTOMATIC GENERATION OF VISUAL PROGRAMMING ENVIRONMENTS](https://reader035.vdocuments.us/reader035/viewer/2022062314/568147b5550346895db4fbfa/html5/thumbnails/26.jpg)
CODE GENERATION
26Universidade 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;
![Page 27: AUTOMATIC GENERATION OF VISUAL PROGRAMMING ENVIRONMENTS](https://reader035.vdocuments.us/reader035/viewer/2022062314/568147b5550346895db4fbfa/html5/thumbnails/27.jpg)
27Universidade do Minho, Departamento de Informática
Nuno Oliveira, 2009
bnfProd(lhs, rhs): [lhs] -> [rhs]
SYMBOL bnfgen_Semprod: bnfLHS : PTGNode;SYMBOL bnfgen_Semprod: bnfRHS : PTGNode;SYMBOL bnfgen_Semprod: bnfCode : PTGNode;SYMBOL bnfgen_SemprodCOMPUTE
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;
![Page 28: AUTOMATIC GENERATION OF VISUAL PROGRAMMING ENVIRONMENTS](https://reader035.vdocuments.us/reader035/viewer/2022062314/568147b5550346895db4fbfa/html5/thumbnails/28.jpg)
28
![Page 29: AUTOMATIC GENERATION OF VISUAL PROGRAMMING ENVIRONMENTS](https://reader035.vdocuments.us/reader035/viewer/2022062314/568147b5550346895db4fbfa/html5/thumbnails/29.jpg)
29
![Page 30: AUTOMATIC GENERATION OF VISUAL PROGRAMMING ENVIRONMENTS](https://reader035.vdocuments.us/reader035/viewer/2022062314/568147b5550346895db4fbfa/html5/thumbnails/30.jpg)
FILE REPRESENTATION OF THE WORKFLOW
30
![Page 31: AUTOMATIC GENERATION OF VISUAL PROGRAMMING ENVIRONMENTS](https://reader035.vdocuments.us/reader035/viewer/2022062314/568147b5550346895db4fbfa/html5/thumbnails/31.jpg)
31
Viag.XMODEL
View.MODEL
Code.HEADCode.SPECS
images.GDR
Aux.TCL
Code.LIDO
Code.IPTG
Code.MODEL
View.LIDO
Buttons.PNG
Viag.DEFS
Semantics.TCL
Symbols.GIF
Sync.TCLEdit.TCL
Template.RES
![Page 32: AUTOMATIC GENERATION OF VISUAL PROGRAMMING ENVIRONMENTS](https://reader035.vdocuments.us/reader035/viewer/2022062314/568147b5550346895db4fbfa/html5/thumbnails/32.jpg)
THE GENERATED ENVIRONMENT
32
![Page 33: AUTOMATIC GENERATION OF VISUAL PROGRAMMING ENVIRONMENTS](https://reader035.vdocuments.us/reader035/viewer/2022062314/568147b5550346895db4fbfa/html5/thumbnails/33.jpg)
THE GENERATED ENVIRONMENT
33
![Page 34: AUTOMATIC GENERATION OF VISUAL PROGRAMMING ENVIRONMENTS](https://reader035.vdocuments.us/reader035/viewer/2022062314/568147b5550346895db4fbfa/html5/thumbnails/34.jpg)
34Universidade 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;
![Page 35: AUTOMATIC GENERATION OF VISUAL PROGRAMMING ENVIRONMENTS](https://reader035.vdocuments.us/reader035/viewer/2022062314/568147b5550346895db4fbfa/html5/thumbnails/35.jpg)
VisualLISA
35