automatic generation of visual programming environments

AUTOMATIC GENERATION OF VISUAL PROGRAMMING ENVIRONMENTSA workflow

Universidade do Minho, Departamento de InformáticaNuno 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.

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


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


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


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.


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


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.


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;


Nuno Oliveira, 2009

VisualLISA – The Environment

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;


Nuno Oliveira, 2009

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.


Nuno Oliveira, 2009


Nuno Oliveira, 2009

WORKFLOW


Nuno Oliveira, 2009

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;


Nuno Oliveira, 2009

15

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.


Nuno Oliveira, 2009

WORKFLOW


Nuno Oliveira, 2009

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.


Nuno Oliveira, 2009


Nuno Oliveira, 2009

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.


Nuno Oliveira, 2009

INTERACTION DEFINITION A VIEW SYNTHESIS


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;

WORKFLOW


Nuno Oliveira, 2009

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;


Nuno Oliveira, 2009

SEMANTIC ANALYZER IMPLEMENTATION


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 ””}

WORKFLOW


Nuno Oliveira, 2009

CODE GENERATION


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;


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;

FILE REPRESENTATION OF THE WORKFLOW

30

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

THE GENERATED ENVIRONMENT

32

THE GENERATED ENVIRONMENT

33


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

automatic generation of visual programming environments

Documents