Tiger Project

Version 1.2.0

User Manual

TU Berlin – Tiger Project Team:

Gabi Taentzer, Karsten Ehrig, Claudia Ermel, Eduard Weiss

Email: mailto:tigerprj@cs.tu-berlin.de

Homepage: http://tfs.cs.tu-berlin.de/tigerprj

Contents

1 Overview 2

2 Installation 3

2.1 Installation via the Update Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

2.2 Installation via the CVS Repository . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

3 Visual Language Specification (VLSpec) 4

3.1 The Abstract Syntax Package . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

3.2 The Layout Package . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

3.3 The Rules Package . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

4 The Designer 10

4.1 Start of the Designer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

4.2 The Designer-GUI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

4.2.1 The Abstract Syntax Editor . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

4.2.2 The Concrete Syntax Editor . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

4.2.3 The Rule Editor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

4.2.4 The Start Graph Editor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

4.3 Definition of a Visual Language with the Designer . . . . . . . . . . . . . . . . . . . 17

4.3.1 Definition of the Abstract Syntax . . . . . . . . . . . . . . . . . . . . . . . . . 17

4.3.2 Definition of the Concrete Layout . . . . . . . . . . . . . . . . . . . . . . . . 20

4.3.3 Definition of Syntax Rules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

4.3.4 Definition of a Start Graph . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26

5 The Generator 27

6 Model Transformation 27

7 Generated Editor Plug-In 29

7.1 Start of the Generated Editor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29

7.2 Using the Generated Editor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29

7.3 Internal Structure of the Generated Editor . . . . . . . . . . . . . . . . . . . . . . . . 30

8 Examples 31

References 31

1 Overview

TIGER (Transformation based generation of modeling environments) supports the generation ofvisual editors from visual language specifications. Up to now we only allow graph-like languageslike e.g. Petri Nets, simple activity diagrams or automata. Graph-like means that you have a setof nodes connected by edges via links. The TIGER tool environment combines the advantages ofprecise visual language (VL) specification techniques (offered by the underlying graph transforma-tion engine Agg) with sophisticated graphical editor development features (offered by the EclipseGraphical Editor Framework (GEF)) [GEF06]. Tiger extends the Agg Engine by a concrete visualsyntax definition for flexible means for visual model representation.

In the following, we give a short overview of the TIGER architecture, and after that in thesubsequent sections the specific components are explained in detail. The two major parts of theTIGER environment are the Designer and the Generator (see Fig. 1). A visual language is definedby the Designer which stores this model in specific format (*.vls). The format belongs to a Vlspecwhich contains all necessary classes to define a visual language. The Vlspec is divided into threeparts: one for defining the abstract syntax, one for creating the concrete syntax of the correspondingabstract elements and finally one for defining the rules which define the syntax of the VL.

In order to generate an editor for a visual language, you define your language with the Designerand after that you call the Generator to generate an editor as Eclipse plug-in based on GEF.

Figure 1: Architecture of the Tiger Project

The rest of the documentation is structured as follows:

• In Section 2 we present two different ways how to install the TIGER Project in your Eclipseworkbench.

• In Section 3 we give an overview of the structure Vlspec used to define a visual language.

• In Section 4 follows the presentation of using the Designer.

• Section 5 deals with the generator and the usage of the generated editor.

• The last section gives an overview for interested readers of the generated editor plug-in, i.e.its structure with all generated elements.

2

2 Installation

Before you can install the TIGER Project you have to fulfill the following software requirements:

• Java [Jav04] Runtime Environment in version 5.0

• Eclipse [Ecl07] in version 3.1.0

• GEF [GEF06] in version 3.1.0

• EMF [EMF06] in version 2.1.0

First of all you have to install the Java Runtime Environment and then Eclipse . How this isdone can be read in the Eclipse documentation on Eclipse web site. Furthermore this projectrequires the GEF and EMF plug-in which are technology projects of the Eclipse platform. Apart of EMF namely JET is used for the code generation and GEF is used for the generatedgraphical editor.

The TIGER Project can be installed in two different ways. On the one hand you have thepossibility to install it via the Eclipse Update Site and on the other hand you have the opportunityto get it from the CVS repository. But be aware that the version of the CVS repository couldcontain an unstable version of the project for this project is continuously under development.

2.1 Installation via the Update Site

For using this mechanism in Eclipse you have to select Help > Software Updates > Find andInstall ... . Then a dialog is opened in which you select the option Search for new features to installand click on Next. In the following dialog you have to define a New Remote Site ... . In Fig. 2 itis shown what you have to put into the dialog as name and as URL.

Figure 2: Remote Site Definition dialog

After that you click on Finish and the remote sites’ settings are checked. If the connection isvalid, a dialog appears in which you select the TIGER Project, confirm to a license agreementand press finish. After that the TIGER Project will be installed and is ready to be used after arestart of the Eclipse workbench.

2.2 Installation via the CVS Repository

In the CVS perspective of Eclipse, it is possible to check out the current development status ofTiger. We warn the user that the updates available under CVS may be in an unstable state, as thismethod to get the newest release is meant mainly for the Tiger developers. Nevertheless, in orderto try out a brandnew feature it might be necessary to check out the latest version via CVS. Todo this for the very first time, go to the CVS Repository Exploring perspective, and select the view

3

Figure 3: Checking out Tiger via CVS

CVS Repositories. In this view, open the folder HEAD in the CVS navigation tree, and select thesite de.tuberlin.tiger. Via the context menu, you can now check out the Tiger project (see Fig. 3).

For subsequent updates, it is sufficient to select the project in the Package Explorer of the Javaperspective, and to choose Team > Update in the context menu.

3 Visual Language Specification (VLSpec)

In this section we want to introduce our Vlspec to give you an overview of the componentswhich define a visual language. A VL specification (VLSpec) consists of an Alphabet containingthe available symbols and links of the VL, a RuleSet containing syntax rules which define editingoperations, and a StartGraph, defining the initial diagram the syntax rules are applied to. Inalphabets, rules and diagrams we distinguish the abstract syntax (the internal representation ofdiagrams as graphs without layout information) from the concrete syntax (describing additionallythe layout properties and constraints).

This presentation starts with the vlspec package and continues with the abstract syntax, theconcrete syntax and the rules package.

The vlspec contains a class VLSpec (see Fig. 4) which represents the root for all other elementsof our Vlspec .

Class VLSpec has an attribute called fileExtension of the type String which contains the fileextension for the file for a generated editor. Moreover, you can see the relationship to all otherpackages for the class VLSpec references to the classes Alphabet, RuleSet and StartGraph.

4

Figure 4: Structure of VL Specifications

3.1 The Abstract Syntax Package

This package contains all necessary classes for defining the abstract syntax of a visual alphabet.A VL alphabet consists of SymbolTypes and LinkTypes. In our approach, graph-like languagesconsist of node symbol types, defined by role NODE (e.g. activities in activity diagrams), andedge symbol types, defined by role EDGE (e.g. Next-relations in activity diagrams). Edge symboltypes are connected to node symbol types by LinkTypes. Symbol types may be attributed by anordered list of AttributeTypes e.g. to model the state names in automata. Classes AttributeType,SymbolType and LinkType have directly corresponding node and edge types in AGG forming theabstract syntax representation. Fig. 5 shows package abstractsyntax, where the abstract syntax ofalphabets is defined.

Figure 5: Package Abstract Syntax

3.2 The Layout Package

The graphical layout (the concrete syntax) is given by additional classes extending the class diagramshown in Fig. 5. The Tiger Designer stores the concrete layout information for symbols and linksin the designer model based on the meta model shown in Fig. 6 which is closely connected to thelayout relations of Eclipse GEF [GEF06].

Node symbols are layouted as CompoundFigure, edge symbols as Connection. Both Compound-Figures and Connections may contain Figures again, e.g. for activity diagrams, we have two circlesnested into each other in for layouting a final activity, and we have a text figure (the activity name)as child figure of a simple activity figure. The figure layout is defined by Shape which kind could

5

Figure 6: Package Concrete Syntax

be a Rectangle, Ellipse, Polyline, ... The figure arrangement is done by GEF standard layout stylessuch as StackLayout, BorderLayout, XYLayout, and FlowLayout. Connection Anchors describe therelation between Shapes and Connections. ContainmentConstraints handle the layout positionsinside of Figures, for example a Text Figure is located inside an Ellipse figure.

After starting the Eclipse environment the user can switch to the Tiger Designer Perspectiveto see the arrangement of the Designer views for visual VL specification. Fig. 7 shows the Designerenvironment for defining a VL for simple activity diagrams.

While the tree view on the left-hand side 1 shows the symbol types of the automata alphabet,the syntax rules and the start graph of the automata syntax grammar, the abstract syntax can bedefined in the abstract syntax panel to the right 2 , where the abstract syntax of the automataalphabet is shown. The concrete layout of a symbol type is defined via a graphical editor shown atthe bottom of the right-hand side 3 . The layout for the StartFinalState symbol (a start state whichis a final state as well) is given by an invisible rectangle, containing the start marker (a polygon),and an outer and inner ellipse selected from the shapes menu of the editor Palette. Moreover, anattribute name is represented by a text figure, connected via an anchor to the inner ellipse figure.The Properties View at the left side of the bottom 4 shows the layout properties like text widthand style of the current selected symbol in the graphical editor. In the same way NormalState,StartState, and State are defined where the last one represents thother states via an inheritancerelation defined in the abstract syntax.

Edges are created in a quite similar way. For a Transition two Links are defined in the tree viewfor connecting the Transition with a State. The concrete layout is given by Transition Connectiondefining a line connection with a closed arrow decoration from the editor Palette (see Fig. 8).An inscription attribute inscr is located at the center point of the transition line via a layoutconstraint. This is realized by the class ConnectionConstraint whose attribute kind can have threedifferent predefined values: AT SOURCE, AT MIDDLE and AT TARGET. So a TextFigure maybe positioned at the beginning, at the center or at the end of a Connection. The Properties Viewshows the layout properties of the TransitionConnection with black color, solid line style, andnormal width.

6

Figure 7: Defining an Alphabet for Activity Diagrams

Figure 8: Defining the Layout of a Next Edge

7

3.3 The Rules Package

Language constraints restricting the set of valid diagrams over an alphabet are modeled by restrict-ing the set of editing commands, i.e. the generated editors are syntax-directed. An editor commandis modeled as a graph rule (typed over the language’s alphabet) being applied to the abstract syn-tax graph of the current diagram. The graph transformation approach to language definition isa constructive one, since syntax rules are used to build up all language instances from an initialstate (the start graph). The start graph together with the set of syntax rules and the underlyingVL alphabet, are called VL syntax grammar because it defines the complete syntax of the visuallanguage.

Syntax-directed editing based on a syntax grammar allows to edit syntactically correct diagramsonly. Besides, syntax rules can specify complex editing commands like the insertion of a completesub-diagram in one step.

For rule-based editing we use graph transformation as formally defined in [EEPT06]. Rulesconsist of LHS and RHS, called left-hand and right-hand side. Symbols and links appearing inthe LHS are matched with the elements of the current editor diagram and deleted or preservedaccording to their mapping to the RHS of the rule. New symbols and links are created if they onlyappear in the RHS of the rule.

Fig. 9 shows package rules, where the start graph and the syntax rules are defined. The left- andrighthand sides of a rule are graphs. Additionally, a rule may contain a set of negative applicationconditions (NACs), which model situations in which the rule is not applicable. Moreover, a rulemay have a set of input parameters defined by the user when the rule is applied, and variables forperforming attribute computations.

Figure 9: Package Rules

In the Tiger rule editor in Fig. 10, an editor operation for syntax directed editing of activitydiagrams is defined. The rule addSimple inserts a simple state between two arbitrary States rep-resented by solid white circles. In fact, the abstract node type AbstractActivity preserves the userfrom defining different rules for each possible pair of concrete activity figures, for example to connecta StartActivity with a SimpleActivity. The LHS of the rule defines the nodes to be selected by theuser as input parameters of the rule (the upper activity marked by in=0 ). After rule application aSimpleActivity with the inscription name is inserted between the previous AbstractActivities, wherethe mapping between the LHS and RHS is indicated with m=0 and m=1. The new SimpleActivity

8

is connected to the AbstractActivities by two new Next edges. The activity name inscription nameis listed as parameter in the view parameters in rule and is defined as input parameter of data typejava.lang.String. For such attribute input parameters, a dialog window pops up when performingthe corresponding editor operation in the generated environment, e.g. allowing the user to specifythe transition activity name.

Figure 10: Defining a Syntax Rule Adding a Simple Activity

In the Properties View the kind attribute specifies the rule behavior:

• The name of a create rule will appear as entry in the editor palette of the generated editorfor inserting a new symbol or a larger structure consisting of several symbols (a pattern) inthe editor panel.

• A delete rule appears as an entry in the context menu of a symbol for deletion of the symbolor an associated sub-diagram.

• A move rule is associated with a symbol to change the layout position in the editor view bymouse dragging.

• An edit rule appears as another context menu entry which allows to change the properties ofthe associated symbol.

9

4 The Designer

With the Designer we provide a powerful tool for defining a visual language in TIGER. In thissection we show you how to start and handle the Designer followed by a presentation of the tool’sstructure. After that we give a detailed description how to define a visual language and finally wepresent a visual language definition for simple activity diagrams. This example can also be found inour examples de.tuberlin.tiger.examples in the folder ActivityDiagrams. So you have the opportunityto discover all features of the Designerwithout the knowledge of creating single elements.

4.1 Start of the Designer

According to the Eclipse technology each file belongs to a project. For creating a VL-Designerfile you should use or create a simple Java-Project or a VL-Project. This is necessary because ofthe usage of Java types for the AttributeTypes.

The creation of a Java-Project can be read in detail in the Eclipse documentation. For creatinga new VL-Project you have to call the context menu in the navigation view and select New > Project....

Figure 11: Navigator context menu

In the opening wizard you select Tiger > Visual Language Project and click on Next. On thenext page (see Fig. 12) you have to put in a name for the project, a filename and a name for thealphabet and press on Finish. Now the file is opened in the editor view and the newly createdproject can be found in the navigation view.

For creating only a file for a visual language definition instead of a whole project, you have tosimply call in the navigator view the context menu and select the entry New > visual languagefile... . In the opening wizard you have to put in only a filename and a name for the alphabet.After that you have to press Finish and the file is opened in the editor view similar to the creationof a project.

10

Figure 12: VL-Wizard

4.2 The Designer-GUI

In order to have the full Designer functionality with all views, we have developed an own TIGERperspective which has the following views:

1. The navigation view facilitates the handling of files. Clicking on a VL specification file〈name〉 .vls opens an Vlspecpage, which gives an overview of the created Vlspec elements;

2. the abstract syntax view provides a visual editor to edit the abstract syntax of the alphabetin form of an attributed type graph with inheritance;

3. the layout container provides a tree view presenting the layout figures for the abstract symbols,

4. the properties view shows the properties of a selected symbol type, a shape figure or a rule;

5. two views for variables and parameters in rules allow to edit variable names, values or oper-ations on variables of a selected rule.

The TIGER views can be evoked if needed like common Eclipse views via Window > ShowView and rearranged in a flexible way on the Eclipse surface of the TIGER perspective accordingto the user’s preferences.

The central TIGER component is the VLSpec page. It provides a tree view over all Vl-speccomponents, i.e. the symbol types comprising the alphabet, the syntax rules and the startgraph from the syntax grammar. In the Vlspecpage, tree nodes have a name and a correspondingicon which represent a certain element of the alphabet. Fig. 13 shows the VLSpec page of theactivity diagrams VL (left) and an overview over the used icons (right).

The root element of the tree is the name of the VL specification you have defined when creatingthe visual language file. It consists of the the three compartments Alphabet, Rule Set and StartGraph. In the Alphabet tree, the defined node symbol types are listed under Nodes, and the edgesymbol types are listed under Edges Each symbol type has two branches: Links and Attributes.

11

Figure 13: VlspecPage for the Activity Diagram VL (left) and Icon Overview (right)

The Links container contains all LinkTypes starting or ending at the current symbol type. TheAttributes container contains all the symbol type’s attribute types.

In the Rule Set tree, the rules are listed. Each rule has a left-hand side (LHS), a right-hand side(RHS) and a set of negative application conditions (NACs).

The properties of a selected element in the tree view can be edited in the properties-view.

As basic components, TIGER offers visual editor panels to define the concrete syntax of symbols,and to define the rules and the start graph. The concrete syntax editor allows to edit figures andconnections, anchor points, nesting of figures, and to define link constraints between figures andconnections. The rule editor supports the editing of rule graphs in their concrete syntax, and rulemorphisms from the LHS of a rule to its RHS, as well as from the LHS to its NACs.

A desired visual editor is evoked via the VLSpec page. The abstract syntax editor is evokedby double-clicking on the entry Alphabet ; the concrete syntax editor for the layout is started whenclicking on the name of a symbol type, either in the Nodes or in the Edges container; the rule editoris shown when selecting the name of a rule in the rule set container; the start graph editor is evokedby clicking on the Start graph entry.

With the visual editor you are able to define your alphabet, the rules and the start graph in avisual way. All visual editors provide standard tools like delete, copy, paste, undo and redo. Whichtools are available depends on the selection of an editor object. These tools can be found in themenu, toolbar and the contextmenu, but they can be called via the keyboard, too. (see Table 1).

delete Delcopy Ctrl + Cpaste Ctrl + Vundo Ctrl + Zredo Ctrl + Y

Table 1: keyboard commands

12

In the following, we present the visual editors and the views of the TIGER perspective in moredetail.

4.2.1 The Abstract Syntax Editor

The definition of a VL specification usually starts with the specification of the alphabet, beginningwith the abstract syntax. Fig. 14 shows the abstract syntax editor panel and palette for the ActivityVL.

Figure 14: Abstract Syntax Editor for the Activity VL

With the editor palette on the right, you have the possibility to create node or edge symboltypes, to put attribute types into a symbol node, and to define an inheritance hierarchy for nodesymbol types. This means that you are allowed to define abstract node symbol types which willnot appear in any concrete diagram. Nevertheless, abstract node symbol types also have to get alayout definition as they might be used in the syntax rules.

4.2.2 The Concrete Syntax Editor

After the abstract syntax for a VL has been specified, each symbol type gets its concrete layoutdefinition. Fig. 15 shows the concrete syntax editor panel and palette for the symbol type EndAc-tivity from the Activity VL, which was evoked by doubleclicking on the EndActivity entry in theVlspec page.

Shapes like Rectangle, Rounded Rectangle, Ellipse and Polygon can be selected in the editorpalette to the right. Properties for the selected shapes are defined in the Properties view. InFig. 15, the properties for the outer ellipse of the figure are shown. Figures can be nested intoeach other. This is done by selecting a shape (the child figure) and then clicking onto anotherfigure in the editor panel (the parent figure) to nest the child into the parent figure. In Fig. 15, asmaller black ellipse has been nested into a bigger white one. The layout managers available via theProperties view realize different ways of nesting. Moreover, Anchors for the position of links canbe also defined for a figure. An anchor is of the kind ChopboxAnchor, EllipseAnchor or XYAnchor.

Figures are named in the Properties view or in the layout container view. Here, the nesting offigures is visualized as a tree view.

The Properties View The view will only be enabled if an object is selected in the tree view oron the editor panel. In this view you can see all attributes of the selected object with their namesin the first column and their values in the second column. Let’s select an arbitrary ShapeFigureswitch to the properties view (see Fig. 16). Now you can see all your defined attributes for this

13

Figure 15: Concrete Syntax Editor for the Activity VL

Figure 16: properties-view for a ShapeFigure

ShapeFigure. In order to change the attribute value, click into the column for setting values andsimply change the value. There are three different possibilities for changing these values.

• LabelIn this case you can put in an arbitrary expression into the cell. But you must pay attentionto the type of the attribute. If it is a number you are only allowed to put in only a number.A String must start and end with a quotation mark and an empty String must have twoquotation marks. Even if you try to put in a wrong value the value will not be accepted. Theold value remains and an errormessage appears in the status bar of the workbench.

14

• ComboboxIn the Combobox you can choose one of several given valid values. So the selection of invalidvalues is not possible.

• DialogThe editing of a value is done by a dialog. Therefore you have to click on the button of theright side of the value cell. Then a dialog is opened in which you can edit your values.

4.2.3 The Rule Editor

After the concrete syntax for a VL has been specified, rules can be edited in the rule editor. Therule editor is evoked by clicking on a rule name, after a rule has been added to the rule set containerin the Vlspec page (by the create rule entry in the context menu of the rule set). Fig. 17 shows therule editor panel and palette for the rule DeleteSimpleActivity. A rule editor panel consists eitherof the two obligatory panels for the LHS and the RHS, or it has an additional panel for one of theNACs. The NAC depicted in this third panel is the one currently selected in the Vlspec page. ANAC may be given a name either in the Vlspec page or in its Properties view.

Figure 17: Rule Editor for the Activity VL

In the editor palette, the Vlspec specific node and edge symbol types can be selected to bedrawn in one of the rule panels. Mappings from symbols in the LHS to symbols in the RHS or aNAC can be defined by selecting the entry mapping in the editor panel, and afterwards clickingfirst on the source figure in the LHS and then on the target figure in the RHS or in one of theNACs. Note that mappings may be defined either between symbols of the same type, or betweenan abstract symbol and a symbol contained in its inheritance tree. In Fig. 17, a simple activity nodeis deleted if the abstract node symbols before and after the simple activity are not decision nodes.The mapping from the LHS to the NAC decisionException is a mapping from an AbstractActivity toa DecisionActivity. This is allowed because AbstractActivity is a generalization of DecisionActivityin the alphabet definition (see Fig. 14.

Parameter and Variable View With these two views (see Fig. 18) you have the possibility todefine variables or input parameters for a rule. These variables are always bound to an attribute

15

of a symbol. This view has three columns: the first one describes the row entry (either ”new” or”par” resp. ”var” that indicates that it is a parameter / variable), the second one contains thename of the parameter and in the third one is the type. Note that, these entries appear only if thecorresponding rule was selected.

Figure 18: Parameter-View and Variable-View for Rules

Variables and Parameters are typed. The type can be selected in the Type dialog (see Fig. 19),in which you can find all types of the Javaruntime environment and all types that are included inyour project.

Figure 19: Type-Dialog

4.2.4 The Start Graph Editor

Last but not least, the VL syntax grammar is completed by defining a start graph (which may beleft empty). The start graph is displayed in the generated editor when you open it at the first time.Fig. 20 shows the start graph editor panel and palette for the Activity VL, which was evoked by

16

doubleclicking on the start graph entry in the Vlspec page. The palette of the start graph editordiffers from the rule editor palette only in the fact that it does not contain the entries mappingand unmapping. In the Properties views of the start graph elements, you have to set the attributesof your drawn symbols. All attributes must be set in the start graph, otherwise rules can not beapplied to it.

Figure 20: Start Graph Editor for the Activity VL

The start graph of the Activity VL contains a StartActivity, connected by a Next relation to anEndActivity.

4.3 Definition of a Visual Language with the Designer

After presenting the structure of the Designer in the previous section we will now go to describe thefunctionalities of the Designer by showing how to define a visual language. The section assumesthat you have already read Section 3 in which the Vlspec was presented in detail.

For defining a visual language you have to create at first an alphabet and then the grammar, i.e.the rules and optionally a startgraph. So we start with the definition of the abstract syntax, thatmeans the creation of node symbol types , edge symbol types and AttributeTypes. Then we go onin defining the concrete layout for these elements of the abstract syntax followed by the creation ofrules for the behavior in the editor.

4.3.1 Definition of the Abstract Syntax

In this section we consider the creation of the alphabets’ elements. So you have to create a newvisual language project with a name for the specification. After that you open the Designer byclicking on the generated visual language file and switch to Tiger perspective.

Node Symbol Types For creating a node symbol type you select the Nodes container in thetree view of the alphabet and open the context menu. There you can find an entry called CreateNodeSymbolType (see left part of Fig. 4.3.1). Then a wizard opens in which you have to put in aname for the node symbol type (see left part of Fig. 4.3.1). After pressing Finish you can see thecreated node symbol type in the tree view.

If you want to change the name, you have to go to the properties-view and select this nodesymbol type whose name you want to change.

17

Figure 21: Creation of a Node Symbol Type using the VLSpec Context Menu and the Node SymbolType Creation Wizard

Alternatively, a node symbol type can be created in the abstract syntax view by drawing a nodefor the node symbol type in the editor panel. A name for the node symbol type can be defined byclicking on its default name in the editor panel.

Edge Symbol Types The precondition for defining edge symbol types is that you have definedone node symbol type at least. Its creation includes also the definition of two LinkTypes thatdetermine which node symbol type is at the beginning and which at the end. The creation consistsof three steps:

• a name for the edge symbol type

• a name for the LinkType which connects the edge symbol type with node symbol type at thebeginning

• a name for the LinkType which connects the edge symbol type with node symbol type at theend.

These steps are supported by a wizard with three pages. But first of all you have to select Edgesin the tree view (see Fig. 22) and choose the entry Create an EdgeSymbolType.

Figure 22: Edge Symbol Type Creation via the Context Menu

Consequently, the next wizard page is opened, where you define name for your edge symbol type(see Fig. 23). A node symbol type for the definition of the LinkTypes can be chosen in combobox.In this combobox all defined node symbol types of a specification can be found. Alternatively, anedge can be drawn in the abstract syntax view by clicking on the palette entry Edge Symbol Type,and then clicking first on the source node symbol type, and afterwards on the target node symboltype in the editor panel. Names for the edge symbol type and the link types can be defined bydoubleclicking on the default names.

18

Figure 23: Wizard for Edge Symbol Type Creation

The name’s definition of node symbol types and edge symbol types has to be unique. But youdo not need to take care of this, because the wizard pays attention to this fact. After the creationyou can see two leaves in the tree view for the edge symbol type . Links contain both LinkTypeswhose names can only be changed in the properties-view, but not their relation to the node symboltypes . Attributes contains the AttributeTypes whose creation is explained in the following section.

A symbol type can be deleted via the context menu. But be aware that the edge symbol type towhich the deleted node symbol type belongs to is also deleted. Note that deleting a symbol type inthe abstract syntax view removes it only from the view, but not from the alphabet. This means, thesymbol type gets invisible in the abstract syntax view, but it still exists. To remove it permanentlyfrom the alphabet, it has to be deleted from the alphabet tree in the VLSpec page.

AttributeTypes AttributeTypes define attributes for our SymbolTypes. They have a name anda type, which can be determined with our TypeDialog. Their definition differs from node symboltypes to edge symbol types , so we start explaining the creation of AttributeTypes for node symboltypes.

For moving ShapeFigures of node symbol types in the generated editor we must have positionattributes. So with the creation of node symbol types two layout AttributeTypes are created asdefault. One is called ”x” and the other one ”y”. Both have the type int. Position attributescannot be changed in the properties-view but by moving a symbol in the generated editor usingthe mouse. In contrast to node symbol types , edge symbol types do not need any predefinedAttributeTypes.

To create a new AttributeType, you have to select the node Attributes and call the context menu(see left part of Fig. 24).

Figure 24: Creation of AttributeTypes with the context menu

19

After that, a wizard opens in which you must put in a name for the AttributeType and choosea type via the TypeDialog (see right part of Fig. 24). All types that are included in your visuallanguage project are offered for choice. After pressing Finish you can see the created AttributeTypein the tree view.

Again, the alternative is to add an attributed to a symbol type in the abstract syntax view byclicking on the attribute type entry of the editor palette, and afterwards clicking on the correspondingsymbol type in the editor panel. The name and the type of AttributeTypes are edited in theproperties-view. You have to select the AttributeType in the tree-view to display its name and typein the properties-view.

AttributeTypes can only be deleted via the context menu in the tree view (or removed from theabstract syntax view via the editor context menu).

Inheritance Hierarchy Node symbol types can be defined as sub-types of existing node symboltypes. This is done best in the abstract syntax view, where generalization arcs can be drawn fromsub-types to super-types. A sub-type can inherit only from one super-type, i.e. we do not allowmultiple inheritance. In the tree view, the inheritance hierarchy is defined in the properties-viewof a selected node symbol type, by giving a value to its super type property using a combobox.Note that if a generalization arc is deleted, only the obligatory position attribute types x and y arecopied to the sub-type, but not the other attribute types from the super-type.

Having finished the definition of the abstract syntax we can go on to the definition of the concretelayout for the defined symbol types and their link types.

4.3.2 Definition of the Concrete Layout

In the section we present the concrete layout definition for our abstract syntax elements. Aspresented in Section 3, a node symbol type can have one or more ShapeFigures, an edge symboltype must have one Connection and an AttributeType can have no or one TextFigure.

ShapeFigures For creating a new ShapeFigure you have to select the symbol type in the treeview to open the concrete syntax editor for the layout of the symbol type. In the editor palette,you select one simple figure of the creation palette, click in the editor panel, keep the left mousebutton pressed and drag the mouse cursor until the desired size of the ShapeFigure is reached. Anexception are the polygons, there you have to click on the drawing panel until all points of yourpolygon are set. For polygons, the start and the end point have to be the same.

In this first step you have drawn a figure which was initialised with default values. In order tochange these values you have to select the figure in the window or in the layout container viewand go to the properties-view where you can set a lot of attributes that influence the layout of theShapeFigure. In Table 2 you find an overview of these properties and the way they can be changed.

Note that if you want the background color to take effect, you have to set the attribute opaqueto true, otherwise the color is not considered.

Besides creating and editing of ShapeFigures you can also delete them. Therefore you have toselect the ShapeFigure either in the tree view or in the corresponding window you want to deletein the tree view and call the deletion command in the context menu. Note that all children of aShapeFigure are also deleted afterwards. You are also able to build complex figures. This procedureis explained in the following paragraph.

Nesting of ShapeFigures With the Designer you can build up complex figures from the givenset of simple figures. First of all you have to create one figure as described in the paragraph above.This figure forms a kind of container for the complex figure. Then you can decide which figure you

20

Attributs Name Tool for editingName LabelBorder Color Color-DialogBorder Style Combo-BoxBorder-Width LabelDefault-Size LabelMaximum-Size LabelKind of Shape not editableFill-Color Color-DialogLayout-Manager Layout-DialogOpaque Combo-Box

Table 2: ShapeFigureAttribute

put in the drawn figure. You choose it from the creation palette and click inside the already drawnfigure. While the mouse cursor is moving over the drawn figure, which changes its background coloryou can press the left mouse button and drag it to the desired size of the new figure. After that thenew figure is inside the old one. Meanwhile a new leaf was created as sub-figure of the old figure inthe layout container view.

Furthermore you can influence the alignment of the inner figures by choosing an appropriatelayoutmanager. For this purpose we provide four different layoutmanagers: XYLayout, StackLayout,FlowLayout and BorderLayout. These ones correspond to the layoutmanagers of Draw2d. For

Figure 25: Layout-Dialog

the last two ones you can set additional values in a dialog by clicking on ”advanced >> ”. For theFlowLayout (see Fig. 25) you can set the following ones:

• alignment for the entire row / column (majoralignment)

• alignment for figures within a row / column (minoralignment)

• space in pixels to be used between children figures in the direction parallel to the orientation(horizontal / vertical) (majorspacing)

21

• space between the figures in a row / column (minorspacing)

• horizontal or vertical alignment of the flowlayout

and for the BorderLayout you can set the following values:

• the distance between children horizontally aligned (horizontal spacing)

• the distance between children vertically aligned (vertical spacing)

Anchors In order to be able to create Connections at least one of the nested ShapeFigures mustpossess an Anchor. In the creation palette you have the choice between three different ones: XYAn-chor which can be used for arbitrary figures, EllipseAnchor which can be used for ellipses or circlesand ChopboxAnchor which is adequate for figures that look like rectangles.

For placing an Anchor you have to switch to the layout level for the corresponding ShapeFigureby selecting it and choosing anchor pane in the context menu. Then the background changes to theinverted defined background color (see Fig. 26), so that you can see that you are in this mode. Nowyou can choose an Anchor from the creation palette, move the mouse cursor to the ShapeFigureand click into the figure. The Anchor is set, if a red cross with a black border is displayed.

Figure 26: Anchor Container

For XYAnchors you can set values for their position. These values are of the type double for aprecise definition. The position of the other two ones can not be changed. They are always in themiddle of a figure. Moreover, you have the opportunity to delete an Anchor again. Therefore youselect the red cross and choose delete in the context menu.

TextFigure TextFigures are the visualisation of AttributeTypes. Each AttributeType can havenone or one TextFigure. This TextFigure is represented by a Label in the generated editor. Thecreation of TextFigures differs for ShapeFigures and Connections, and it is assumed that you havealready defined a ShapeFigure or a Connection.

TextFigures for ShapeFigures can be created by selecting an AttributeType in the VLSpec pageand use the drag and drop tool, i.e. drag it to the figure you want to place it in and click into thisShapeFigureor on the Connection.

The alignment of the TextFigure depends on the layoutmanager of the parent figure. If theparent figure has an XYLayout for instance, you can move the TextFigure to the desired position,otherwise it is determined by the layoutmanager’s constants.

Connections can have TextFigures at three predefined positions, namely at the source, at themiddle or at the end of a Connection. For creating a TextFigure at a connection you choose anAttributeType of an edge symbol type . Then you use the drag and drop tool, move the mouse

22

cursor to the window for a connection creation and click on the drawing panel. After that, you willnotice that the look of the mouse cursor has changed, that means you have to choose now on whichposition the TextFigure shall be placed. If you move the mouse cursor along your Connection youwill see these three possible positions as the mouse cursor indicates this by being enabled. Afterthat, when you have determined a position you must click on the drawing panel and the TextFigureappears at the desired position.

You can define several layout attributes for a TextFigure as listed in Table 3. You can change

Attribute name Tool for editingborderColor color dialogborderStyle Combo-BoxborderWidth labelfillColor color dialogfont font dialogname labelopaque combobox

Table 3: attributes for a TextFigure

the look of the TextFigure’s border, the background color, the kind of the font, the name and theopaque attribute. Note that the background color will only take effect if the opaque attribute is setto true.

TextFigures can be deleted by selecting the TextFigure in the layout container view or in theeditor panel and choose the ”delete” entry in the context menu.

Connections A Connection represents the visualisation of an edge symbol type . For creatinga Connection you have to doubleclick on an edge symbol type in the tree view to open the concretesyntax editor for connections. From the palette, you choose between three ConnectionRouters(none, ManhattanRouter, BendpointRouter) and draw a connection line in the editor’s drawingpanel. The beginning and end of the connection are indicated by yellow arrows (which do not belongto your connection definition but only help you to find the right connection end when choosing anarrowhead or positioning an attribute). For the layout of Connections a set of attributes is availablevia the Properties view (see Table 4).

Attribute name Tool for editingName LabelColor Color-DialogRouter Combo-BoxStyle Combo-BoxWidth Label

Table 4: attributes for a TextFigure

You can define a name for the Connection, a color for the line, choose between different predefinedline styles (solid, dash, dash dot, dash dot dot, dot), can determine a width for the line and havethe possibility to

The connection can be deleted out of the tree view or you select it in the drawing panel anddelete via the context menu.

Connection End Shapes Arrows and polygons for an end of a Connection may be defined intwo ways: The easiest way is to select one of the predefined figures in the decorations part of theeditor palette, where closed polygons (triangles) are offered, optionally in black and white and intwo sizes, as well as open arrows and diamond shapes. The shapes have to be activated by clicking

23

into the corresponding combobox. The second method to define a (more complex) connection endfigure, is to select the connection figure in the layout container (e.g. click on layout of NextEdge),and then select the context menu entry create template shape pane. A new entry template appearsas leaf in the layout tree. A doubleclick on the new template entry opens the concrete syntax editorto draw a polygon for the connection end figure. In Fig. 27, we draw a polygon with red fill color.The layout properties for a connection end shape are the same as for ShapeFigures.

Figure 27: Defining a Connection End Shape as Polygon

Now you open the window in which your Connection is defined, and drag the figure of the newtemplate from the layout container to the editor panel. Let it drop to the panel and connect it bythe rubber band mouse pointer to the connection end you want to decorate (left part of Fig. 28).After releasing the mouse button, the connection shape appears with the new end decoration (rightpart of Fig. 28).

Figure 28: Linking a Connection End Shape to a Connection

In the layout container, a copy of the template shape has been added as leaf to the Connectiontree. The template itself may now be deleted. Note that the definition of a triangle arrowheadrequires that you start with the peak of the arrowhead at the rightmost side and continue thepolygon to the left (as if the underlying arrow is oriented horizontally, directed rightwards and youstart at the very end of the connection).

24

4.3.3 Definition of Syntax Rules

In this section we present the definition of syntax rules, which define the operations of the generatededitor. To define a rule, new leaf of the rule set has to be created in the VLSpec page by selectingthe context menu entry create rule of the rule set container. Then a wizard is opened in which youmust put in a unique name for the rule (see Fig. 29).

Figure 29: Wizard for Creating a Syntax Rule

After that, a new node with that rule name is displayed with three leaves: LHS, RHS and NACs.For filling these parts with content you have doubleclick on the rulename, so that these parts areopened on the drawing panel. A rule can be one of four different kinds:

• create → these are rules whose left hand side contains less elements than the right hand side.The names of these rules are displayed in the palette and in the context menu of the generatededitor.

• edit → these are rules for editing the attributes except the layout attributes x, y and kind.The rules can be applied in the generated editor via the context menu for a selected element.

• move → These are rules which change the position attributes. Move rules must be defined foreach ShapeFigure, so that it can be moved in the generated editor by dragging the ShapeFigurewith the mouse.

• delete → These are rules that delete or replace something. Delete rules can be found in thecontext menu with a red cross next to the rule name.

On the right side of the rule editor you find a creation palette in which you can find all ShapeFig-ures and Connections that have been defined in your alphabet. The ShapeFigures are sorted by theirnode symbol types they belong to. So you can define your rules using the concrete layout instead ofthe abstract syntax like in AGG. Note that you can also use abstract symbols in the rules, which maylead to a significant reduction of the number of rules. An example for this is the rule MoveActivity(see Fig. 30), where the abstract symbol AbstractActivity is used to specifiy the move operation forall possible kinds of activities. When this rule is applied, the AbstractActivity is matched to an ac-tivity of a type from {StartActivity, EndActivity,DecisionActivity, SimpleActivity}. Obviously,abstract symbols should be used only in rules but never in in the start graph.

Editing of the Rules Sides You can draw your rule sides by selecting a ShapeFigure of thecreation palette. Then you move to the corresponding rule side and click on it. Then the Shape-Figure, in the rule context called Symbol, is inserted. For editing your attributes you have to selectthe Symbol and change the values in the properties-view.

Concerning attributes, note that for all symbols on the right-hand side all attributes have to beset, if the corresponding Symbol is not mapped by a morphism from the left-hand side (indicatedby equal number for m).

25

Figure 30: Example for a Move Rule using an Abstract Symbol

When you define a rule, you have to mark the symbols which shall be selected for a rule matchwhen the rule is applied in the generated editor. This is done by selecting the entry ”parameterize”in the context menu. The order of the chosen objects determines the order for the elements whichwill be selected in the generated editor, otherwise the rule is not applicable later. For example, foredit rules you mark the node whose attributes shall be changed. Here are some aspects you haveto take into account for the correct behavior in the generated editor.

• all attributes of the RHS must have a value except their Symbol is the image of a morphismfrom the LHS

• for each ShapeFigure a move rule has to be defined in which the layout attributes have to bechanged.

4.3.4 Definition of a Start Graph

The start graph you define here will be also created for the file you generate for opening thegenerated editor. The definition of a start graph is optional, but it can be necessary if you definesyntax directed rules. The start graph editor is evoked by the context menu of the start graph entryin the VLSpec page.

In the creation palette of the editor you can find all your defined ShapeFigures and Connections,similar to the creation palette of the rule editor.

Please note that all attributes of a Symbol in the start graph need a value, otherwise the applica-tion of rules is not possible. For the layout attributes x and y, values are assigned automatically inthat way that these values are taken from the current position of the Symbol in the drawing panel.All other values can be set in the properties-view.

26

5 The Generator

The Generator can be started in two ways, namely via the menu or via the toolbar which has anentry (a Tiger head) if a Vlspec is opened with the Designer (see Fig. 31).

Figure 31: Tiger Icon in the Tool Bar for Starting the Generator

The other way is to start it via the Eclipse New menu: You select the New menu via the toolbaror the menu (New > Other > TIGER-Editor Generator). There you select the entry ’TIGER -editor generator’ and click on Next. After that you can see the wizard page in Fig. 32 where youenter a project name and the location of the VLSpec.

Figure 32: Wizard for Generator Start

In contrast to previous versions of the generator, the file extension is now set as a property. Bypressing Finish the editor generation process is started. At the bottom of the wizard a process barappears which indicates the current steps of the generation.

6 Model Transformation

In Tiger we provide the possibility to integrate a model transformation component in a generatededitor (see also [EEH05]). A model transformation in TIGER consists of three different parts: asource VLSpec, a target VLSpec and a transformation grammar which has been created with AGGIn Fig. 33 you can see the preference page dialog of Eclipse with the entry TIGER. There youhave to put in the location of the source VLSpec, the target VLSpec and the location of the AGGmodel transformation grammar. After that you go on with the generation of editors for the sourceand target VLSpec. During the generation of the source VLSpec editor an empty project is createdwhich contains the corresponding AGG grammar for the target VLSpec (see Fig. 34). The locationsfor these ggx files are hard-coded in the generated editor in the file ModelTransformation.java. Soif you change these paths, you have to change them also in this file.

27

Figure 33: Settings for a Model Transformation in the Preference Page

Figure 34: Folder for the Target grammar

When you open your generated editor in a Runtime-Workbench you can see the menu entry forModelTransformation (see Fig. 35), which shows the transformation direction, in this case fromActivity diagrams to Petri Nets.

Figure 35: Generated Editor including Model Transformation Feature

The diagram you have drawn with the source VL editor is taken as input for the model trans-formation. After starting the model transformation via the menu entry, a dialog opens showingthe progress of the transformation and the rules that are applied. If the transformation finishessuccessfully a new simple project will be created which has a file containing the resulting graph.This graph can now be viewed and further edited in the generated editor for the target VL (e.g.the editor for Petri Nets).

28

7 Generated Editor Plug-In

7.1 Start of the Generated Editor

Figure 36: Wizard for creating an editor file

In order to test a generated editor plug-in it is necessary to start a new Eclipse-Runtime-Workbench instance. Before starting the editor, a file has to be generated which includes thetype information and the start graph. This is done with a wizard in Eclipse (see left part ofFig. 36), which is called as follows: New > Other > Tiger Editor Creation Wizard. By expandingthis entry you will see the name of the generated editor plug-in and the description Diagram . Afterthat you can either select an already existing project or you put in an other project name. Then anew empty project will be generated. Moreover you can see a text field in which a name for the fileto be generated is proposed with the extension you have put in before generating the editor (seeright part of Fig. 36).

7.2 Using the Generated Editor

The editor palette shows icons for the GEF standard features select (select a single symbol) andmarquee (select a set of symbols). VL-specific creation operations are grouped into the categoriesSymbols (for creating symbols), Connections (for creating connections between two symbols) andPatterns (for creating patterns consisting of more than one symbol). Fig. 37 shows the generatededitor plug-in for finite automata, where we have rules in all operation categories.

Note that for our Activity Diagram example, the generated editor shown in Fig. 35 offers onlypatterns in the palette, since we did not define rules creating single symbols for Activity Diagrams.

After a creation operation (e.g. addTransition) has been selected in the palette, the requiredmatch symbols have to be selected in the editor panel (e.g. the source and target state for thetransition have to be clicked on). If an input parameter is defined for the syntax rule, a dialogpops up and asks for an attribute value (e.g. the transition inscription has to be given). Now,the underlying creation rule is applied, i.e. the transition is inserted between the two states. Notethat addLoop is a creation pattern, because internally, a loop consists of three connections and twobendpoints (see the loop at the start state in Fig. 37). Thus, the bendpoints can be moved by theuser to readjust the loop. Move rules are applied simply when a symbol (or a set of symbols markedby Marquee) is dragged by the mouse. A Move rule may also be defined for a symbol pattern. Forexample, in the automata VL, we defined a move rule moving a state node together with a loop.Delete rules and Edit rules appear in the context menu which is evoked by the right mouse button

29

Figure 37: Generated Automata Editor Plug-in in Eclipse

after a symbol (defined as input parameter of the rule) has been selected. Fig. 37 shows the contextmenu for the final state q010, where it is now possible to evoke the operation editStateName, whichprompts the user for a new name, and changes the name of the state accordingly.

7.3 Internal Structure of the Generated Editor

In Fig. 38 you can see a sample generated editor plug-in for simple activity diagrams.

Figure 38: Project Structure of the Generated Editor

30

The generated editor plug-in contains the following components:

• src folder which contains the Javasource code for the editor

• all needed libraries (Java, and all libraries needed from AGG)

• icons folder which appears in the wizard for creating an editor file.

• Activities.ggx a file in AGG format which contains all rules, a typegraph generated from theabstract syntax and the startgraph

• build.properties, plugin.xml internal files for the plug-in adminstration

8 Examples

The Tiger project comes with a set of examples. When installing Tiger, the examples are unpackedin the Eclipse plugin directotry. They can be imported into the user workspace by Import > ExistingPlugIns and Fragments.

Here is an overview of the current set of examples available with Tiger:

• Ludo: This example is a contribution to the Tool Contest of AGTIVE 2007. The generatededitor visualizes a Ludo game board provides rules to throw the die, move tokens, and to kickout other player’s tokens, according to the Ludo game rules.

• Activity: generates an editor for simple activity diagrams.

• Automata: generates an editor for automata.

• Network: generates an editor for computer networks consisting of servers and clients.

• Petrinet: generates a Petri net editor.

• SRML: generates an editor for the Sensoria Reference Modelling Language.

• Timeline: generates an editor for timeline diagrams (similar to message sequence charts)

• Railway: generates an editor for drawing toy railway and for simulating train movements onthe railway net.

References

[Ecl07] Eclipse Consortium. Eclipse – Version 3.2.1, 2007. http://www.eclipse.org.

[EEH05] K. Ehrig, C. Ermel, and S. Hansgen. Towards Model Transformation in GeneratedEclipse Editor Plug-Ins. In Proc. International Workshop on Graph and Model Transfor-mation (GraMoT’05), volume 152 of ENTCS, Tallinn, Estonia, September 2005. ElsevierScience.

[EEPT06] H. Ehrig, K. Ehrig, U. Prange, and G. Taentzer. Fundamentals of Algebraic GraphTransformation. EATCS Monographs in Theoretical Computer Science. Springer Verlag,2006.

[EMF06] Eclipse Consortium. Eclipse Modeling Framework (EMF) – Version 2.2.0, 2006. http://www.eclipse.org/emf.

[GEF06] Eclipse Consortium. Eclipse Graphical Editing Framework (GEF) – Version 3.2, 2006.http://www.eclipse.org/gef.

[Jav04] Sun Microsystems. Java – Version 1.5, 2004. http://java.sun.com.

31