GMF Partitioning based on EuGENia

GMF allows the creation of diagram models by partitioning some of its components (See GMF Partitioning). Eugenia allows to create a GMF editor through a simple script (See GMF Editor using Eugenia).

Eugenia provides several options to create customized editors. However, sometimes the patitioning strategy is necessary in order to improve the visualization of the editor.

Basic GMF editor using Eugenia

In order to create one basic editor, next metamodel called model.ecore is used. The objective is creating one diagram that allows creating storages, which can have relations to containers, which can contain elements. Storages and elements has svg icons.

Next Emfatic Source script is created by selecting model.ecore -> richt click -> Generate Emfatic Source and complemented with the customized features of the editor

@namespace(uri="partitioning", prefix="partitioning")
package partitioning;

@gmf.diagram(model.extension="partitioning", diagram.extension="partitioning_diagram")
class Model {
  val Storage[*] storages;

  val Container[*] containers;
}

@gmf.node(figure="svg", svg.uri="platform:/plugin/emf.examples.partitioning/icons/storage.svg", label.icon="false", label="name", label.pattern="{0}", size="60,60")
class Storage {
  attr String[1] name;

  @gmf.link(target.decoration="arrow", source.decoration="none", style="dash", color="0,0,0")
  ref Container[*] storageContainers;
}

@gmf.node(figure="rounded", label.icon="false", label="name", label.pattern="{0}", size="200,200")
class Container {
  attr String[1] name;

  @gmf.compartment(layout="free")
  val Element[*] elements;
}

@gmf.node(figure="svg", svg.uri="platform:/plugin/emf.examples.partitioning/icons/element.svg", label.icon="false", label="name", label.pattern="{0}", size="60,60")
class Element {
  attr String[1] name;
}

Projects presented in next figure have been generated. SVG icons are located in the folder icons of the project emf.examples.partitioning

Next figure presents the editor created

Partitioning using Eugenia

Now, the purpose is creating one diagram that allows creating storages, which can have relations to containers. Moreover, if doble clicking the container, a new diagram will be opened for drawing elements. This partitioning can be done using GMF (See: GMF Partitioning); however, in this case Eugenia is useful in order to customize SVG icons.

Model editor (main diagram)

For creating the main diagram which can contain storages and containers, the Emfatic Source has been modified. In this case, the @gmf anotation for the class Element, and for the relation elements in the class Container have been removed. The script is as follows.

@namespace(uri="partitioning", prefix="partitioning")
package partitioning;

@gmf.diagram(model.extension="partitioning", diagram.extension="partitioning_diagram")
class Model {
  val Storage[*] storages;

  val Container[*] containers;
}

@gmf.node(figure="svg", svg.uri="platform:/plugin/emf.examples.partitioning/icons/storage.svg", label.icon="false", label="name", label.pattern="{0}", size="60,60")
class Storage {
  attr String[1] name;

  @gmf.link(target.decoration="arrow", source.decoration="none", style="dash", color="0,0,0")
  ref Container[*] storageContainers;
}

@gmf.node(figure="rounded", label.icon="false", label="name", label.pattern="{0}", size="200,200")
class Container {
  attr String[1] name;

  val Element[*] elements;
}

class Element {
  attr String[1] name;
}

Next figure presents the editor generated with this new script

Container editor (sub diagram)

In order to create the container diagram, a new EMF empty project has been created. In this project, The next Emfatic Source script called container.emf has been created. This script includes only the concepts Container and Element.

@namespace(uri="partitioning", prefix="partitioning")
package partitioning;

@gmf.diagram(model.extension="partitioningcontainer", diagram.extension="partitioningcontainer_diagram")
class Container {
  attr String[1] name;

  val Element[*] elements;
}

@gmf.node(figure="svg", svg.uri="platform:/plugin/emf.examples.partitioning/icons/element.svg", label.icon="false", label="name", label.pattern="{0}", size="60,60")
class Element {
  attr String[1] name;
}

Next figure presents the editor generated with this script

Linking Diagrams

So far, both editors are independent. In order to join both editors, the files container.gmftool and container.gmfgraph have been copied to the model editor in the folder model.

Based on the files model.ecore, container.gmftool and container.gmfgraph the file container.gmfmap is created (See GMF Partitioning).

• Note 1: Be sure that the file container.gmfmap has been created properly. Compare with the file container.gmfmap created in the independet project.
• Note 2: The purpose of creating this file again, is because if this file is copied, it can point to the metamodel (in this case container.ecore) of the previous project, insted of the proper metamodel (in this case model.ecore).
• Note 3: If the file is copied, also it can be changed by replacing the name of the metamodel using one plain text editor. However, this solution can generate further errors.

Based on the file container.gmfmap the file continer.gmfgen is created (See GMF Partitioning).

The file container.gmfgen must be configured (See GMF Partitioning)

1. Select Gen Editor Generator
• Change Domain File Extension (e.g. partitioningcontainer)
• Change ModelID (e.g. PartitioningContainer)
• Change Package Name Prefix (e.g. partitioning.diagram.container)
2. Select Gen Editor Generator > Gen Plugin
• Change ID (e.g. emf.examples.partitioning.diagram.container)
• Change Name (e.g. Partitioning Container Plugin)
3. Select Gen Editor Generator > Gen Editor View
• Get the Editor View ID (It will be used in the next configuration). In this case
  partitioning.diagram.container.part.PartitioningDiagramEditorID

The file model.gmfgen must be configured (See GMF Partitioning)

1. Select Gen Editor Generator > Gen Diagram > Gen Top Level ContainerEditPart
2. Right click > New Child > Open Diagram Behaviour
3. Select Gen Editor Generator > Gen Diagram > Gen Top Level ContainerEditPart > Open Diagram Behaviour
• Set Diagram Kind with the Gen Editor Generator ModelID value of the container.gmfgen. In this case
  PartitioningContainer
• Set Editor ID with the Gen Editor View ID value of the container.gmfgen. In this case
  partitioning.diagram.container.part.PartitioningDiagramEditorID
• Change Edit Policy Class Name Editor. It has a default value. (e.g. OpenDiagramContainerEditPolicy)

Create Diagram Projects

Create both diagram projects

1. Select Generator Model of the main diagram. In this case model.gmfgen
2. Right click > Create diagram code
3. Select Generator Model of the sub diagram. In this case container.gmfgen
4. Right click > Create diagram code

If SVG icons are used, next dependences must be included: org.eclipse.gmf.runtime.lite and org.eclipse.gmf.runtime.lite.svg. Those dependences must be added in the file plugin.xml of the project diagram. These dependences require GMF SDK Experimental

Results

Now, it is posible to create models with storages and containers. By double clicking on containers, a new diagram is opened for creating elements inside the correspondent container.

GMF Partitioning

GMF allows the creation of diagram models by partitioning some of its components. It means, one diagram model can expand certain components (by double clicking) in order to visualize better those components.

For this purpose, next metamodel is used. The objective is creating one diagram that allows creating only containers. Double clicking on one container, a new diagram allows creating elements and relations

It is very important to set values to the package. In this case, the name is "partitioning"

EMF Editor Generation

The EMF Editor contains all necesary implentation for creating models. It can be created by the following steps

1. Create genmodel
• Select the metamodel. In this case model.ecore
• Right click > Generate EMF GenModel
2. Create Editor code
• Select the metamodel. In this case model.ecore
• Right click > Generate EMF editor

The genmodel file is created. In addition the projects edit, editor, and test are created as well

Model editor (main diagram)

This process allows creating the main diagram. In this case the main diagram is used for creating containers This diagram is based on the EClass Model

Generate Simple Graphical Definition Model (.gmfgraph)

1. Select the metamodel. In this case model.ecore
2. Right click > New > Other > Graphical Modeling Framework > Simple Graphical Definition Model
3. Select the root EClass. In this case Model

4. Only specify the EClasses of the nodes that will exist. In this case Container

Generate Simple Tooling Definition Model (.gmftool)

1. Select the metamodel. In this case model.ecore
2. Right click > New > Other > Graphical Modeling Framework > Simple Tooling Definition Model
3. Select the root EClass. In this case Model
4. Only specify the EClasses of the nodes that will exist. In this case Container

Generate Guide Mapping Model Creation (.gmfmap)

1. Select the metamodel. In this case model.ecore
2. Right click > New > Other > Graphical Modeling Framework > Guide Mapping Model Creation
3. Select Diagram Palette

4. Select Diagram Canvas

5. Select the nodes. In this case Container. Delete other nodes and links

Create Generator Model (.gmfgen) and Model Diagram Code

1. Select Mapping Model. In this case model.gmfmap
2. Right click > Create generator model
3. Select Generator Model. In this case model.gmfgen
4. Right click > Create diagram code

Container editor (sub diagram)

This process allows creating the diagram for creating elements and relations. This diagram is based on the EClass Container. This diagram will be open by double clicking on one container from the Model diagram

Generate Simple Graphical Definition Model (.gmfgraph)

1. Select the metamodel. In this case model.ecore
2. Right click > New > Other > Graphical Modeling Framework > Simple Graphical Definition Model
3. Give a different name (e.g. container.gmfgraph)
4. Select the root EClass. In this case Container

5. Only specify the EClasses of the nodes that will exist. In this case Element and Relation

Generate Simple Tooling Definition Model (.gmftool)

1. Select the metamodel. In this case model.ecore
2. Right click > New > Other > Graphical Modeling Framework > Simple Tooling Definition Model
3. Give a different name (e.g. container.gmftool)
4. Select the root EClass. In this case Container
5. Only specify the EClasses of the nodes that will exist. In this case Element and Relation

Generate Guide Mapping Model Creation (.gmfmap)

1. Select the metamodel. In this case model.ecore
2. Right click > New > Other > Graphical Modeling Framework > Guide Mapping Model Creation
3. Give a different name (e.g. container.gmfmap)
4. Select Diagram Palette
5. Select Diagram Canvas
6. Select the nodes. In this case Element. Select the links. In this case Relation. Delete other nodes and links

Verify Guide Mapping Model

1. Open the mapping model. In this case container.gmfmap
2. Select Mapping > Top Node Reference > Node Mapping. Check the correct information for Element, Diagram Node, and Tool

3. Select Mapping > Top Node Reference > Link Mapping. Check the correct information for Containment Feature, Element, Source Feature, Target Feature, Diagram Node, and Tool

Create Generator Model (.gmfgen)

1. Select Mapping Model. In this case container.gmfmap
2. Right click > Create generator model

Linking Diagrams

Configure container.gmfgen

1. Open the generator model. In this case container.gmfgen
2. Select Gen Editor Generator
• Change Domain File Extension (e.g. partitioningcontainer)
• Change ModelID (e.g. PartitioningContainer)
• Change Package Name Prefix (e.g. partitioning.diagram.container)

3. Select Gen Editor Generator > Gen Plugin
• Change ID (e.g. emf.examples.partitioning.diagram.container)
• Change Name (e.g. Partitioning Container Plugin)

4. Select Gen Editor Generator > Gen Editor View
• Get the Editor View ID (It will be used in the next configuration). In this case
  partitioning.diagram.container.part.PartitioningDiagramEditorID

Configure model.gmfgen

1. Open the generator model. In this case model.gmfgen
2. Select Gen Editor Generator > Gen Diagram > Gen Top Level
3. Right click > New Child > Open Diagram Behaviour

4. Select Gen Editor Generator > Gen Diagram > Gen Top Level > Open Diagram Behaviour
• Set Diagram Kind with the Gen Editor Generator ModelID value of the container.gmfgen. In this case
  PartitioningContainer
• Set Editor ID with the Gen Editor View ID value of the container.gmfgen. In this case
  partitioning.diagram.container.part.PartitioningDiagramEditorID

• Change Edit Policy Class Name Editor. It has a default value. (e.g. OpenDiagramContainerEditPolicy)
• NOTE 1: This step is optional.
• NOTE 2: This step is necessary if the main editor (in this case, the one generated by partitioning.gmfgen) has concepts that contain other concepts.
• NOTE 3: If the main editor has concepts that contain other concepts, the other containing elements have by default the instance "Open Diagram Behaviour". I suggest to remove those instances; otherwise, the next exception can be presented when double clicking:

org.eclipse.core.commands.ExecutionException: Can't open diagram
  at iArchimate.diagram.edit.policies.OpenDiagramEditPolicy$OpenDiagramCommand. doExecuteWithResult(OpenDiagramEditPolicy.java:106)
  at org.eclipse.gmf.runtime.emf.commands.core.command.AbstractTransactionalCommand. doExecute(AbstractTransactionalCommand.java:247)
  at org.eclipse.emf.workspace.AbstractEMFOperation.execute(AbstractEMFOperation.java:150)
  at org.eclipse.core.commands.operations.DefaultOperationHistory.execute (DefaultOperationHistory.java:513)

Create Diagram Projects

Create both diagram projects

1. Select Generator Model of the main diagram. In this case model.gmfgen
2. Right click > Create diagram code
3. Select Generator Model of the sub diagram. In this case container.gmfgen
4. Right click > Create diagram code

Test

1. Launch an eclipse application
2. Create a Project
3. Create a Diagram. In this case Partitioning Diagram

4. Open the diagram
5. Draw containers

6. Select one created container and double click. The container editor will be opened.
7. Draw elements and relations.

8. Select other created container and double click. The container editor will be opened.
9. Draw elements and relations.

10. Open the model.

GMF Editor using EuGENia

Eugenia allows to create a GMF editor through a simple script. This script is called "Emfatic Source". It can be generated selecting the metamodel -> right click -> Generate Emfatic Source.

For instance, based on the next metamodel, it is posible to define basic graphical components for each concept in the metamodel. Eugenia GMF Tutorial has information about these components

In this case, the Emfatic Source school.emf was created and next script has been done to set a rounded rectangle for Professor and Student, and a rectangle for Meeting and Lecture.

@namespace(uri="school", prefix="school")
package school;

@gmf.diagram(model.extension="school")
class School {
  val Person[*] persons;
  val Activity[*] activities;
}

class Person {
  attr String name;
  @gmf.link(target.decoration="arrow", source.decoration="none", style="dash", color="0,0,0")
  ref Activity[*] personActivities;
}

@gmf.node(figure="rounded", label.icon="false", label="name", label.pattern="{0}", size="100,60")
class Professor extends Person {
}

@gmf.node(figure="rounded", label.icon="false", label="name", label.pattern="{0}", size="100,60")
class Student extends Person {
}

class Activity {
  attr String name;
}

@gmf.node(figure="rectangle", label.icon="false", label="name", label.pattern="{0}", size="100,60")
class Meeting extends Activity {
}

@gmf.node(figure="rectangle", label.icon="false", label="name", label.pattern="{0}", size="100,60")
class Lecture extends Activity {
}

Next editor is generated by selecting the Emfatic Source (in this case school.emf) -> right click -> Eugenia -> Generate GMF Editor

In addition, if you want to use a customized graphical component, you must to define the path of the graphical component using the attribute "figure". This component must be SVG, so the attribute "svg.uri" must be added. Next script has the modifications for the concept Student

@gmf.node(figure="svg", svg.uri="platform:/plugin/emf.examples.school/icons/person.svg", label.icon="false", label="name", label.pattern="{0}", size="100,60")
class Student extends Person {
}

This function requires GMF SDK Experimental, which is a component of GMF Tooling.

Also, for this example, the svg file must be located in the folder icons. This folder must be created as well.

The new editor is:

Moreover, icons in the palette can be changed. For this example, new icons (with extension gif) must be located in the folder emf.examples.school.edit\icons\full\obj16 (This project is generated). Also, the icon can be showed in the component label modifying label.icon="true". Next script has the changes for the concept Meeting.

@gmf.node(figure="rectangle", label.icon="true", label="name", label.pattern="{0}", size="100,60")
class Meeting extends Activity {
}

The new editor is:

Finally, if you need to modify the palette, it is necessary to create an EOL script named ECore2GMF.eol in the same folder than the emfatic file. In this example, the file ECore2GMF.eol has been created in the folder model.

Next script creates a new tool group named Activities. Also, the concepts Meeting and Lecture are moved into this tool group.

var palette := GmfTool!Palette.all.first();

var toolGroupActivities= new GmfTool!ToolGroup;
toolGroupActivities.title := 'Activities';
toolGroupActivities.collapsible := true;
palette.tools.add(toolGroupActivities);

var toolGroupObjects = GmfTool!ToolGroup.all.selectOne(r|r.title = 'Objects');
var toolGroupConnections = GmfTool!ToolGroup.all.selectOne(r|r.title = 'Connections');

var toolEntry; 
toolEntry = toolGroupObjects.tools.selectOne(r|r.title = 'Meeting');
toolGroupActivities.tools.add(toolEntry);

toolEntry = toolGroupObjects.tools.selectOne(r|r.title = 'Lecture');
toolGroupActivities.tools.add(toolEntry);

The new editor is: