Skip to main content

Notice: this Wiki will be going read only early in 2024 and edits will no longer be possible. Please see: https://gitlab.eclipse.org/eclipsefdn/helpdesk/-/wikis/Wiki-shutdown-plan for the plan.

Jump to: navigation, search

Difference between revisions of "Graphical Modeling Framework/Tutorial/Part 1"

(Graphical Definition)
m (changed CVS to Git since the provided link points to git.)
 
(134 intermediate revisions by 13 users not shown)
Line 1: Line 1:
This tutorial will introduce the Graphical Modeling Framework ([http://www.eclipse.org/gmf GMF]), an Eclipse Technology subproject which aims to provide a generative bridge between the Eclipse Modeling Framework ([http://www.eclipse.org/emf EMF]) and Graphical Editing Framework ([http://www.eclipse.org/gef GEF]). In this tutorial, a mindmap application will be developed, as described here. This tutorial describes the functionality provided by GMF in its current state, using this build ([http://download.eclipse.org/technology/gmf/downloads/drops/S-1.0M4-200601131500/index.php 1.0M4]). It is expected that this tutorial will evolve with GMF to introduce new functionality as it is developed.
+
{{GMF}}
 +
 
 +
This tutorial will introduce the '''[[GMF|Graphical Modeling Framework]]''' ([http://www.eclipse.org/gmf GMF]), an Eclipse Modeling Project project that aims to provide a generative bridge between the [[EMF|Eclipse Modeling Framework]] ([http://www.eclipse.org/emf EMF]) and [[GEF|Graphical Editing Framework]] ([http://www.eclipse.org/gef GEF]).  
 +
 
 +
In this tutorial, a [http://en.wikipedia.org/wiki/Mind_map mindmap] application will be developed, as described [http://www.eclipse.org/gmf/requirements.php#scenarios here]. This tutorial describes the functionality provided by GMF in version 2.0.1. It is expected that this tutorial will evolve with GMF to introduce new functionality as it is developed. New functionality will be covered by installments added to this tutorial, each with a corresponding viewlet. A '''viewlet''' for this installment of the tutorial can be found [http://www.eclipse.org/gmf/tutorial/viewlets/tutorial.html here]. The complete solution to this tutorial is maintained in [[Git]] [http://git.eclipse.org/c/gmf-tooling/org.eclipse.gmf-tooling.git/tree/examples  here].
  
 
== Overview of GMF ==
 
== Overview of GMF ==
The use of both EMF and GEF for building Eclipse-based functionality is quite common. Many references below provide information on how to utilize these frameworks together, some of which inspired the GMF project itself. Before diving into a new GMF project, let's explore a little of how GMF approaches the task of utilizing EMF and GEF in a generative manner. Another article focusing on the runtime portion of GMF is found here.
+
The use of both EMF and GEF for building Eclipse-based functionality is quite common. Many references below provide information on how to utilize these frameworks together, some of which inspired the GMF project itself. Before diving into a new GMF project, let's explore a little of how GMF approaches the task of utilizing EMF and GEF in a generative manner. Another article focusing on the runtime portion of GMF is found [http://www.eclipse.org/articles/Article-Introducing-GMF/article.html here].
  
The GMF project has adopted the term 'toolsmith' to refer to developers that use GMF to build plug-ins, while 'user' is typically refered to those who utilize said plug-ins, and who may also be developers. From a usability perspective, the number and types of 'models' utilized by GMF internally should be obfuscated to the greatest extent possible. However, it is likely that most toolsmiths are interested in knowing what is going on under the covers, so a description of each model is presented in this tutorial.
+
The GMF project has adopted the term 'toolsmith' to refer to developers that use GMF to build plug-ins, while 'practitioner' is used to referred to those who utilize said plug-ins, and who may also be developers. From a usability perspective, the number and types of 'models' utilized by GMF internally should be hidden to the greatest extent possible. However, it is likely that most toolsmiths are interested in knowing what is going on under the covers, so a description of each model is linked from the [[GMF Documentation]] page.
  
[[Image:overview.png|frame|right|GMF Overview]]
+
[[Image:overview.png|frame|center|GMF-Tooling workflow]]
  
This is a diagram that illustrates the main components and models used during GMF-based development. Core to GMF is the concept of a graphical definition model. This model contains information related to the graphical elements that will appear in a GEF-based runtime, but have no direct connection to the domain models for which they will provide representation and editing. An optional tooling definition model is used to design the palette and other periphery (overview, zoom, etc.), while read-only surfaces would not require no such a model.
+
This is a diagram that illustrates the main components and models used during GMF-based development. Core to GMF is the concept of a graphical definition model. This model contains information related to the graphical elements that will appear in a GEF-based runtime, but have no direct connection to the domain models for which they will provide representation and editing. An optional tooling definition model is used to design the palette and other periphery (menus, toolbars, etc.).
  
It is expected that the graphical and tooling definitions may work equally well for several domains (for the most part). For example, the UML class diagram has many counterparts, all of which are strikingly similar in their basic appearance and structure. A goal of GMF is to allow the graphical definition to be reused for several domains. This is achieved by using a separate mapping model to link the graphical and tooling definitions to the desired domain model(s).
+
It is expected that a graphical or tooling definition may work equally well for several domains. For example, the UML class diagram has many counterparts, all of which are strikingly similar in their basic appearance and structure. A goal of GMF is to allow the graphical definition to be reused for several domains. This is achieved by using a separate mapping model to link the graphical and tooling definitions to the selected domain model(s).
  
Once the appropriate mappings are defined, GMF provides a generator model to allow implementation details to be defined for the generation phase. The production of plug-ins based on these generator, definition, and mapping models will target a final model; that is, the diagram runtime (or "notation") model. This model is used to bridge the diagram and domain model(s) when a user is working with a diagram and also provides for persistence of both. An important aspect of this runtime is that it provides a services-based approach to GEF functionality and is also able to be leveraged by non-generated applications.
+
Once the appropriate mappings are defined, GMF provides a generator model to allow implementation details to be defined for the generation phase. The production of an editor plug-in based on the generator model will target a final model; that is, the diagram runtime (or "notation") model. The runtime will bridge the notation and domain model(s) when a user is working with a diagram, and also provides for the persistence and synchronization of both. An important aspect of this runtime is that it provides a services-based approach to EMF and GEF functionality and is able to be leveraged by non-generated applications.
  
 
With the basics of GMF covered, let's now walk through the process of using GMF in the development of a graphical editing surface for a particular domain. First, you will need to install GMF and its dependencies.
 
With the basics of GMF covered, let's now walk through the process of using GMF in the development of a graphical editing surface for a particular domain. First, you will need to install GMF and its dependencies.
 +
<br style="clear:both;"/>
  
 
== Setup ==
 
== Setup ==
This version of the tutorial was written using this build of GMF ([http://download.eclipse.org/technology/gmf/downloads/drops/S-1.0M4-200601131500/index.php 1.0M4]). Note that the prerequisites are listed on the build page, which must be installed prior to installing GMF, either from the [http://download.eclipse.org/technology/gmf/downloads download] page, or from the update manager [http://download.eclipse.org/technology/gmf/downloads/index.php site]. The TaiPan example referenced below is maintained in CVS and should remain functional with the latest builds of GMF, even if the tutorial is not quite up-to-date.
+
[[Image:europa_gmf.png|right]]
 +
This version of the tutorial was written using this build of GMF 2.0.1.
  
==== Quick Start ====
+
However, it is advised to use GMF Runtime 1.5.x with GMF Tooling 2.4.0, respectively from the following update sites: [http://download.eclipse.org/releases/indigo/ Indigo Repository] and [http://download.eclipse.org/modeling/gmp/gmf-tooling/updates/releases/ GMF Tooling latest release site].
[[Image:checkout.png|right]]
+
If you're anxious to see GMF in action, check out the Taipan example projects into your workspace from CVS by switching to the CVS Repository Exploring perspective and adding a repository location as shown in the image below. Otherwise, you can skip to the next section.
+
  
Navigate to /HEAD/org.eclipse.gmf/examples and select the three org.eclipse.gmf.examples.taipan.* modules. Right-click and select Check Out. Switch to the Plug-in Development perspective and open the models folder within the org.eclipse.gmf.examples.taipan project. Explore each of the models found here, particularly the taipan.gmfgraph and taipan.gmfmap models and their element properties.
+
The TaiPan example referenced below is maintained in [http://dev.eclipse.org/viewcvs/viewvc.cgi/org.eclipse.gmp/org.eclipse.gmf.tooling/examples/?root=Modeling_Project CVS] and should remain functional with the latest builds of GMF, even if the tutorial is not quite up-to-date. If not, please open a bug.
  
We will look at each of the models in turn, but just to validate your configuration, you should be able to run this sample in a runtime workspace (simply accept the defaults for a new 'Eclipse Application' run configuration). In the runtime workspace, create an empty project and a new 'TaiPan Diagram' found in the Examples folder of the New dialog. Name it whatever you wish and click Finish. The generated diagram editor should open for you to explore.
+
== Taipan Example ==
 +
[[Image:checkout.png|right]]
 +
If you're anxious to see GMF in action, check out the Taipan example projects into your workspace from CVS by switching to the CVS Repository Exploring perspective and adding a repository location as shown in the image to the right. Otherwise, you can skip to the next section.
  
[[Image:taipan_diagram.png|center]]
+
Navigate to [http://dev.eclipse.org/viewcvs/viewvc.cgi/org.eclipse.gmp/org.eclipse.gmf.tooling/examples/?root=Modeling_Project&content-type=text%2Fvnd.viewcvs-markup&revision=HEAD /HEAD/org.eclipse.gmp/org.eclipse.gmf.tooling/examples] and select the org.eclipse.gmf.examples.taipan.* modules. Right-click and select Check Out. If you are not using the latest build and prerequisites of GMF, you can always check out the version of the Taipan by date to correspond with the version you're using. The important point is that you'll need to work with synchronized versions of the GMF SDK and the Taipan example. To do this, after checkout you can right-click on the projects and selecting 'Team | Switch to Another Branch or Version...' and then choose 'Select the tag from the following list' and use the 'Add Date...' button at the bottom to enter the date of the GMF 2.0.1 release (28 September 2007). Press Finish and you're set.
  
This concludes the quick start portion of this tutorial. What follows next is a more detailed look at each of the models shown above during the creation of a mindmap modeling surface.
+
Switch to the Plug-in Development perspective and open the models folder within the org.eclipse.gmf.examples.taipan project. Explore each of the models found hereand their element properties.  You'll notice that there are full and RCP versions of the generated Taipan examples to explore.
  
==== A New Project ====
+
We will look at each of the models in turn during the tutorial, but just to validate your configuration, you should be able to run this sample in a runtime workspace (simply accept the defaults for a new 'Eclipse Application' run configuration). In the runtime workspace, create an empty project and a new 'TaiPan Diagram' found in the Examples folder of the New dialog. Name it whatever you wish and click Finish. The generated diagram editor should open for you to explore. Some things to note in particular are:
  
As described [http://www.eclipse.org/gmf/requirements.php#scenarios here], one of the usage scenarios for GMF includes producing a graphical surface for a mindmap application, to be complemented with an alternative view of its temporal information (likely a Gantt chart). This section of the tutorial will demonstrate GMF's capabilities toward this end, and will continue to evolve as the project matures. If you'd prefer to follow along using a set of projects representing the complete solution to this tutorial, you can find a zip of them [http://www.eclipse.org/gmf/tutorial/mindmap.zip here].
 
  
Begin by creating an "Empty EMF Project" found under 'Eclipse Modeling Framework' in the New dialog (Ctrl+N). Name the project 'org.eclipse.gmf.examples.mindmap' and create a new folder named 'model' in its root.
+
{| border="1"
 +
|
 +
* tool palette and overview
 +
* layout and selection tools
 +
* diagram image export (svg, bmp, jpeg, gif)
 +
* tabbed properties view
 +
* font and color options for selected element
 +
* link routing and style options
 +
* pop-up bars and connection handles
 +
* notes and geometric shapes
 +
* animated zoom and layout
 +
* diagram printing
 +
| [[Image:taipan_diagram.png|center]]
 +
|}
  
== Domain Model Definition ==
+
Create a new launch configuration to run the TaiPanApplication and select just the Taipan *.rcp plug-in and its dependencies on the Plug-ins tab to run Taipan as a standalone RCP diagram editor.
 +
[[Image:taipan_diagram_rcp.png|center]]
  
Although it may seem necessary to begin with the domain model, it is not in the case of GMF where the diagram definition is kept separate from the domain. However, we will begin with the domain in the tutorial as it is likely familiar to most, and will allow us to jumpstart our diagram definition from the domain model when the appropriate wizard is available from GMF.
+
This concludes the quick start portion of this tutorial. What follows next is a more detailed look at each of the models shown above during the creation of a mindmap modeling surface.
  
GMF currently uses standard EMF facilities for working with domain models, but it is planned to provide a graphical ECore modeling surface for the 1.0 release. To begin, create a new mindmap.genmodel from the mindmap.ecore file found here using the New > Eclipse Modeling Framework > EMF Model wizard. You may wish to change the 'Base Package' property for the genmodel's 'Mindmap' package to org.eclipse.gmf.examples to have your generated packaging match the project name.
+
== Your first diagram editor, step by step : Mindmap editor ==
  
<blockquote>
+
=== Screen recording ===
<font color="darkblue">'''Tip''' :</font> Be sure to give your genmodel file the same name as your domain model (i.e. both mindmap.*), as GMF currently expects this naming convention to identify the genmodel for the mapped domain model.
+
</blockquote>
+
  
Taking a quick look at our domain model, you can see that it's rather simple. There is a Topic class, with associated Resource, Comment, and sub-Topic classes. These are contained in a Map class, with Topics able to be linked using a Relationship class.
+
The screen recording in Eclipse Helios, Mac OSX is available at this URL: [http://www.youtube.com/watch?v=coZ03ZqUSf4 Mindmap Tutorial Part 1 Screen Recording]
  
[[Image:domain.png|frame|center|Mindmap domain model]]
+
=== Tutorial ===
  
<blockquote>
+
Before we start, you should specify for your workspace (or at least for your GMF projects) 1.5 compiler settings. In Window... Preferences... Java...Compiler options, make sure you have selected a Compliance Level of 1.5.
<font color="darkblue">'''Tip''' :</font> The image above was produced using the aforementioned GMF plug-in for graphically editing ECore (*.ecore) models. This plug-in is included with the examples download (as of Jan 18th) or can be found in CVS [http://dev.eclipse.org/viewcvs/index.cgi/org.eclipse.gmf/examples/org.eclipse.gmf.ecore.editor/?cvsroot=Technology_Project here].
+
</blockquote>
+
  
Generate the model and edit code using the right-click menu available from the root of the generator model. There is no need to create an editor or tests, but you are welcome to do so if you'd like. Now, we're ready to begin creating the graphical and mapping definitions for our mindmap application.
+
As described [http://www.eclipse.org/gmf/requirements.php#scenarios here], one of the usage scenarios for GMF includes producing a graphical surface for a mindmap application, to eventually be complemented with an alternative view of its temporal information (likely a Gantt chart - feel free to contribute this to the wiki). This section of the tutorial will demonstrate GMF's capabilities toward this end, and will continue to evolve as the project matures. If you'd prefer to follow along using a set of projects representing the complete solution to this tutorial, you can find a set of mindmap projects in CVS under the [http://dev.eclipse.org/viewcvs/index.cgi/org.eclipse.gmp/org.eclipse.gmf,tooling/examples/?root=Modeling_Project org.eclipse.gmf/examples] module.  Note that if you choose to grab all mindmap projects, you'll need to install the Experimental SDK in order for all projects to compile.
  
== Graphical Definition ==
+
[[Image:cheatsheet_project.png|right]]
[[Image:graphical-thumbnail.png|frame|right|thumbnail|Graphical Definition Model, view in  [[Media:graphical.png|actual size]].]]
+
A graphical definition model is used to define the figures, nodes, links, etc. that you will display on your diagram. The model you will work with to do this is seen at the right.
+
  
Right-click on the model folder within your project and select 'New > Other... > Example EMF Model Creation Wizards > GMFGraph Model' and name it 'mindmap.gmfgraph'. On the last page of the wizard, select 'Canvas' for Model Object. Note that the use of EMF's generated default wizards and editors is temporary for the diagram and mapping definitions.
+
GMF comes with a Tutorial Cheat Sheet found under 'Help | Cheat Sheets...' (Note that if you've installed GMF onto a platform without the SDK, i.e. using Europa's update manager, you will need to open the Cheat Sheets view from the Window | Show View... | Other... menu and then open the GMF Tutorial Cheat Sheet from the view menu).  If you open this cheat sheet and follow through each step, you can accomplish most of this first tutorial segment, while taking advantage of some actions that will launch and pre-populate wizards to get you started.  Try this now to create your new project.
  
 +
Alternatively, you can begin by creating an "New GMF Project" found under 'Graphical Modeling Framework' in the New dialog (Ctrl+N). Name the project 'org.eclipse.gmf.examples.mindmap' and create a new folder named 'model' in its root.
 
<br style="clear:both;"/>
 
<br style="clear:both;"/>
  
<blockquote>
+
==== Domain Model Definition ====
<font color="darkblue">'''Tip''' :</font> You may have noticed the 'GMF' folder in the 'New' dialog, and within it, wizards for creating graphical, tooling, and mapping definitions. These are new to 1.0M4 and we'll utilize them to a greater extent in future installments of the tutorial. For now, we'll do things the old-fashioned way in order to better understand the workings of GMF.
+
</blockquote>
+
  
[[Image:diagram_definition.png|right]]
+
Although it may seem necessary to begin with the domain model, it is not in the case with GMF, as the diagram definition is maintained separate from the domain. However, we will begin with the domain in the tutorial as it is likely familiar to most, and will allow us to jumpstart our diagram definition from the domain model using a wizard in the next section.
<br style="clear:both;"/>
+
  
Give your Canvas element a name (e.g. 'MindmapDiagram') using the properties view. Then, right-click the canvas element and select 'New Child > Figure Gallery'. Give a name, e.g. 'Default'. A Figure Gallery will contain elements which correspond to GEF figures, with the idea being that these figures can be reused and/or provided in libraries for use in multiple graphical definitions. To the gallery, add a new Rectangle using the right-click menu. Give it the name 'BasicRectangle'.
+
A basic domain model for our mindmap is found in an Ecore version [http://dev.eclipse.org/viewcvs/index.cgi/org.eclipse.gmp/org.eclipse.gmf.tooling/examples/org.eclipse.gmf.examples.mindmap/model/mindmap.ecore?rev=HEAD&cvsroot=Modeling_Project&content-type=text/vnd.viewcvs-markup here]. Following the cheat sheet, in the section "Domain Model", select the Model Importers ... Ecore Model .... On the next panel, copy the URL from the download link found on the [http://dev.eclipse.org/viewcvs/index.cgi/org.eclipse.gmp/org.eclipse.gmf.tooling/examples/org.eclipse.gmf.examples.mindmap/model/mindmap.ecore?rev=HEAD&cvsroot=Modeling_Project&content-type=text/vnd.viewcvs-markup Ecore file] and select the "Load" button.
  
Now, right-click on the Canvas element and select 'New Child > Node' and set the name attribute to TopicNode. For the 'Figure' property, select your 'BasicRectangle' element. We're done with the graphical definition for now, so let's move on to the tooling definition. This is what your mindmap.gmfgraph should look like.
+
(Alternatively, you may start with an XSD of the mindmap model, found [http://dev.eclipse.org/viewcvs/index.cgi/org.eclipse.gmp/org.eclipse.gmf.tooling/examples/org.eclipse.gmf.examples.mindmap/model/mindmap.xsd?rev=HEAD&cvsroot=Modeling_Project&content-type=text/vnd.viewcvs-markup here] (you'll need to install the XSD feature from EMF in this case). Copy this file into your 'model' folder and feel free to examine the model, if you wish. GMF provides a (bootstrapped) graphical editor to complement the standard EMF generated editors, and is packaged in the SDK.  
  
<blockquote>
+
To render the mindmap.ecore (or any *.ecore model) with the editor, simply right-click the file and select 'Initialize ecore_diagram diagram file' from the menu.
<font color="darkblue">'''Tip''' :</font> There is a basic.gmfgraph model included with GMF for use in your graphical definitions. It contains a basic Figure Gallery, along with generic Node, Compartment, Connection, and Child elements that you can load into your *.gmfgraph model by using "Load Resource..." and entering <code>platform:/plugin/org.eclipse.gmf.graphdef/models/basic.gmfgraph</code> for the Resource URI.
+
</blockquote>
+
  
== Tooling Definition ==
+
[[Image:domain.png|frame|center|Mindmap domain model]]
[[Image:tooling-thumbnail.png|frame|right|thumbnail|Tooling Definition Model, view in  [[Media:tooling.png|actual size]].]]
+
As mentioned above, the tooling definition model is used to specify the palette, creation tools, actions, etc. for your graphical elements. To the right is a diagram of the model.
+
  
Let's utilize a wizard to get us started with our tooling definition. Right-click your mindmap.ecore file and select 'New > Other... > GMF > GMFTool Simple Model'. Press 'Next' and accept the default name of mindmap.gmftool for the model. The mindmap.ecore file is preselected in the next page. On the last page, we'll let the wizard create tools for all elements in our domain model, although we've only created a TopicNode so far.
+
To continue, create a new mindmap.genmodel from the mindmap.ecore file using the New > Eclipse Modeling Framework > EMF Model wizard. You may wish to change the 'Base Package' property for the genmodel's 'Mindmap' package to org.eclipse.gmf.examples to have your generated packaging match the project name. These steps are also covered in the next step of the cheat sheet.
<br style="clear:both;"/>
+
[[Image:tooling_model.png|right]]
+
Looking at the model provided for us, we see there is a top-level 'Tool Registry' element, under which we find a Palette. The palette contains a Tool Group with Creation Tool elements for each of the domain model elements identified by the wizard, and which we see in the figure above. We will reorganize these and modify them a bit in the future, but for now we'll leave the defaults and move on to the mapping definition. Feel free to browse this model and inspect its properties to familiarize yourself with tooling definitions, but be aware that this model is subject to change.
+
  
<br style="clear:both;"/>
+
Generate the model and edit code using the right-click menu available from the root of the generator model. There is no need to create an editor or tests, but you are welcome to do so if you'd like. Now, we're ready to begin creating the graphical and mapping definitions for our mindmap application.
  
== Mapping Definition ==
+
==== Graphical Definition ====
[[Image:mapping-thumbnail.png|frame|right|thumbnail|Tooling Definition Model, view in  [[Media:mapping.png|actual size]].]]
+
A graphical definition model is used to define the figures, nodes, links, etc. that you will display on your diagram. The model you will work with to do this is seen at the right.
  
The mapping definition model will let us bind the three models we have so far: the domain, the graphical definition, and the tooling definitionTo the right is an image of this model.
+
Continuing on with the next step in the cheat sheet, we will create a new graphical definition model. The cheat sheet will launch the Simple Graphical Definition Model wizard, which is found in the Graphical Modeling Framework folder of the New (Ctrl + N) dialog. Select the 'model' folder under your org.eclipse.gmf.examples.mindmap project for the mindmap.gmfgraph model, and on the next page of the wizard use 'Browse' to locate your mindmap.ecore fileSelect our Map class as the Diagram element.
  
Right-click on the model folder again, and select 'New > Other... > EMF Model Creation Wizards > GMFMap Model' from the New dialog. Give it the name 'mindmap.gmfmap' and select 'Mapping' for the Model Object.
+
On the last page of the wizard, select a minimal set of element, link, and label options for our Topic class as shown in the image. Later on, feel free to experiment with this wizard and observe its output. For now, we're just interested in getting a minimal set of models to get started. Click 'Finish' to complete.
  
<br style="clear:both;"/>
+
If you examine the model, you will find a Canvas at the root with a Figure gallery containing basic Rectangle, Label, and Polyline Connection elements. These are used by corresponding Node, Diagram Label, and Connection  elements to represent our Topics from the domain model. We can leave the defaults as-is for now and continue with our tooling definition in the next step of the cheat sheet.
  
[[Image:load_resource.png|right]]
+
[[Image:cheatsheet_graph.png]]
  
In order to map between the graphical definition model and the domain model, you'll need to load these resources into the editor (a wizard will eventually replace this step when creating mapping models in the future). Right-click in the editor of mindmap.gmfmap and select 'Load Resource...' to bring up the selection dialog. Using the 'Browse Workspace...' option, select your mindmap.ecore, mindmap.gmfgraph, and mindmap.gmftool models before closing the 'Load Resource' dialog.
+
[[Image:cheatsheet_graph2.png]]
 
<br style="clear:both;"/>
 
<br style="clear:both;"/>
[[Image:canvas_mapping.png|right]]
 
 
<br/>
 
Now, we can map between diagram elements and domain elements, and assign a tool for creation of elements to the palette. First, select the root 'Mapping' element and right-click to create a 'New Child > Canvas Mapping' element. Configure its properties as shown in the image here:
 
 
Before moving on, let's pause to describe the mappings. In the case of the 'Diagram Canvas' property under 'Visual representation,' it's straightforward as the only option should be for our 'Canvas MindmapDiagram'. For the 'Domain Model' property under 'Domain meta information', we want to define mappings on this canvas for those elements found in the 'EPackage mindmap' domain model, although the list will also provide you with an 'ecore' option. 'Element' is the property we need to assign to a domain element that will represent the diagram itself. From the list, select 'EClass Map' to indicate that an instance of our Map is represented by a new diagram. Finally, under 'Misc' we see that our 'Palette' from the tooling definition is mapped to the 'Pallete' element under 'Misc'.
 
 
<br style="clear:both;"/>
 
 
[[Image:node_mapping.png|right]]
 
 
We only have a single node to map so far. Right-click on the Canvas Mapping element and select 'New Sibling > Node Mapping' and again set its properties to the values shown here:
 
 
Now, to explain the node mappings. The 'Diagram Node' maps easily to our only node from the graphical definition, 'Node TopicNode'. For its 'Tool' property, we select the 'Creation Tool Topic' from our tooling definition model. The 'Domain meta information > Element' in this case maps to the 'EClass Topic' as you'd expect, with its 'EAttribute name' mapped to the 'Edit Feature' property. Thus, when working with instances of Topic classes in our domain model, which are represented as instances of TopicNode elements on our diagram, the label of the graphical elements will be represented by the name attribute of the domain model class. Finally, the 'Containment Feature' is mapped to the element in the domain model which holds the instances of these new Topic classes, which in our case is the 'EReference topics' attribute of our Map class.
 
 
<br style="clear:both;"/>
 
 
 
<blockquote>
 
<blockquote>
<font color="darkblue">'''Tip''' :</font> Note that it is important to select the proper element when defining mappings at this stage; that is, before GMF does the proper filtering and validation. A good way to ensure you have selected the element you intended (as several may have the same name), open the mapping definition (*.gmfmap) file in a text editor.
+
<font color="darkblue">'''Tip''' :</font> There are several figure galleries intended for reuse and included with GMF. You can load these into your *.gmfgraph model (or *.gmfmap model) by using "Load Resource..." and entering <code>platform:/plugin/org.eclipse.gmf.graphdef/models/basic.gmfgraph</code> for the Resource URI. Others available include <code>classDiagram.gmfgraph</code> and <code>stateDiagram.gmfgraph</code>.
 
</blockquote>
 
</blockquote>
  
== Generation ==
+
==== Tooling Definition ====
[[Image:generation-thumbnail.png|frame|right|thumbnail|Tooling Definition Model, view in  [[Media:generation.png|actual size]].]]
+
As mentioned above, the tooling definition model is used to specify the palette, creation tools, actions, etc. for your graphical elements. To the right is a diagram of the model.
The last model to cover in this tutorial, and the one that is not as critical to understand at this point, is the GMF generator model. See the diagram to the right if you're interested in examining this model.
+
 
+
Now that the minimal graphical elements and mappings are defined, we can generate the code needed to test our work so far. To accomplish this, we will first create a generator model (*.gmfgen) in order to set the properties for code generation, similar to the familiar EMF genmodel. To accomplish this, right-click the mapping file and select 'Create generator model...' as shown below. When prompted, keep the default name 'mindmap.gmfgen'.
+
  
 +
The cheat sheet will guide you through a very similar process for getting started with our Simple Tooling Definition Model. In fact, the two steps are virtually identical, as the mindmap domain model is loaded and examined for possible tooling needs. We will simply select the same options we did for the graphical definition, save a tool for the Topic name label, and begin with a very simple palette for our Topic elements.
 
<br style="clear:both;"/>
 
<br style="clear:both;"/>
 
+
[[Image:cheatsheet_tool.png]]
[[Image:create_gmfgen.png|right]]
+
 
+
Now, we can examine the generator model to see what it includes (if you're the curious type). We'll keep all the default values for now and right-click the mindmap.gmfgen file and select 'Generate diagram code' to proceed. If all goes well, you will see a "Code generation completed successfully." message dialog. Dismiss the dialog, opting to never see it again, and notice the new org.eclipse.gmf.examples.mindmap.gmf.editor plug-in in your workspace.
+
 
<br style="clear:both;"/>
 
<br style="clear:both;"/>
  
== Running the Diagram ==
+
Looking at the model provided for us, we see there is a top-level 'Tool Registry' element, under which we find a Palette. The palette contains a Tool Group with Creation Tool elements for both Topic nodes and links for subtopic elements that were identified by the wizard. We will reorganize these and modify them a bit in the future, but for now we'll leave the defaults and move on to the mapping definition. Feel free to browse this model and inspect its properties to familiarize yourself with tooling definitions.
Now that we have generated the plug-in needed for our diagram, let's launch a new runtime workspace and test the diagram. The default settings of a new Eclipse Application runtime configuration should work fine, while you may opt to run a minimal configuration that includes only your generated plug-ins and their runtime dependencies within an org.eclipse.platform.ide configuration.
+
  
Create an empty project and invoke the New... dialog (Ctrl+N). Under 'Examples' you'll notice your new Mindmap Diagram. Create a new diagram and explore its functionality, and look for the creation of the domain model instance as you add and save diagram elements. Of course, we've only specified enough in our diagram definition to allow for simple Topic elements. Next, we'll look at how to add connections and compartments...
+
==== Mapping Definition ====
  
[[Image:basic_mindmap.png|center]]
+
The mapping definition model will let us bind the three models we have so far: the domain, the graphical definition, and the tooling definition.  To the right is an image of this model. This is a key model to GMF development and will be used as input to a transformation step which will produce our final model, the generation model.
  
== Compartments and Connections ==
+
Continuing on with our cheat sheet, follow the instructions to launch the Guide Mapping Model Creation wizard. We will again select the 'model' folder to hold our mindmap.gmfmap file and move on to load each of the preselected mindmap.ecore, mindmap.gmfgraph, and mindmap.gmftool models. On the next page, select 'Map' as the Diagram Root Element, accept the mindmapPalette from the selected tooling model, and then accept the selected mindmap diagram canvas. Finally, make the last page look like the image below. Note that you can adjust the properties for the selected node or link by using the 'Change...' button in the dialog.
[[Image:comment.png|right]]
+
Let's return to our diagram definition and add a compartment to our TopicNode to allow for Comment elements to be added. First, add a new child for Comment elements to the Canvas by adding a 'New Child > Child' and name it CommentChild. For its Figure, select your new 'BasicRectangle'. Now we need to add a Compartment to hold the CommentChild elements. To do this, right-click on the Canvas element and select 'New Child > Compartment'. In the properties view, give it a name 'CommentCompartment'. Target your BasicRectangle figure by selecting it for the 'Figure' property.
+
<br style="clear:both;"/>
+
  
[[Image:compartment.png|right]]
+
[[Image:cheatsheet_map.png]]
  
While we're here, let's go ahead and add a Connection element, as we'd like to indicate a subtopic relationship between Topic nodes on our diagram. In the Figure Gallery, add a new 'Polyline Connection' with a simple 'BasicLine' name and adjust the other properties as you see fit. Add the link we'll need between topics by right-clicking on the Canvas element and selecting 'New Child > Connection'. Give it the name 'TopicLink', selecting our new BasicLine from the gallery.
 
 
<br style="clear:both;"/>
 
<br style="clear:both;"/>
  
[[Image:link_mapping.png|right]]
+
[[Image:label_mapping.png|right]]
 +
One thing we need to do manually is create a Label Mapping for our TopicNameLabel from the graphical definition. The result should look like the image to the right.  While in the properties view, check the mapping of the TopicNode Node Mapping as well, to make sure it has the desired values.  Because of [https://bugs.eclipse.org/bugs/show_bug.cgi?id=189410 bug 189410], carefully check that the mapping wizard assigned the proper tool to both the Topic node and the Subtopics link: click on the Topic and Subtopic node mappings, and ensure that the "Tool" in the properties is the one you created for Topics in your .gmftool.
  
Now, reopen the mapping model so that we can associate this new link and compartment with our domain elements and assign them tooling. Begin by right-clicking on the Mapping element and selecting 'New Child > Link Mapping'. Fill in the Link Mapping's properties in accordance with the image below, and also add a Creation Tool child element:
+
Before moving on, let's pause to describe the mappings. We'll start with the Label Mapping, as it's the one we're looking at here. It's a straightforward mapping, with the Diagram Label property set as we discussed and a mapping to the 'EAttribute name' feature on our Topic element in the domain model.
<br style="clear:both;"/>
+
  
 +
Moving up to the Node Mapping, we see that our Diagram Node is mapped to the TopicNode of our graphical definition with its corresponding domain model element mapped to our Topic class. The Topic creation tool is also specified in the mapping.
  
In this case, the mapping is rather simple. The 'Diagram Link' maps to our only 'Connection' element, 'TopicLink'. The 'Domain meta information > Target Feature' is required and maps to the 'EReference subtopics' element, meaning that the target of the connection (another Topic element) will be added to this reference list within the source Topic. Finally, our Tool used for creating the links is mapped to the 'Creation Tool TopicSubtopics' element from our tooling definition.
+
Above the Node Mapping you will find a Top Node Reference. Its Containment Feature is set to the 'EReference rootTopics' feature of our Map class. So, when new Topic nodes are added to the diagram, the instance of our domain Topic will be added to the rootTopics containment reference of our Map class. The label of the node will display the 'name' attribute of the Topic.
 
+
<blockquote>
+
<font color="darkblue">'''Tip''' :</font> A level of validation is available for mapping definitions and will take place prior to creation of the generator model. For example, remove the mapping for 'Target Feature' on a Link Mapping and attempt to create the mindmap.gmfgen model. When you do, you will receive an error message indicating that the property is required.
+
</blockquote>
+
 
+
[[Image:compartment_mapping.png|right]]
+
 
+
To explain the mappings, starting with the properties of the 'Compartment Mapping' element, we see that 'Visual representation > Compartment' maps to our only option, 'Compartment Mapping <CommentCompartment>'. The property 'Misc > Child Nodes' was filled in for us when we selected 'CommentCompartment' for the 'Misc > Compartment' property of the 'Child Node Mapping'.
+
 
+
Let's now look at the remainder of its mappings, as shown above. The domain model element 'EClass Comment' is selected for the 'Domain meta information > Element', with its 'EAttribute body' selected for the 'Edit Feature'. As with the Topic mappings described above, this is simply saying that elements of the Comment compartment are representations of Comment domain model instances in a diagram, with their 'body' attribute displaying as the element's editable field in the compartment. The 'Containment Feature' maps to the 'EReference comments' element, as new Comments added to the compartment will be added to this list held within a Topic. Finally, the 'Diagram Node' itself and its 'Tool' map as you would expect to the 'Child CommentChild' and 'Creation Tool Comment' elements, respectively.
+
 
+
<blockquote>
+
<font color="darkblue">'''Tip''' :</font> Don't forget to assign a 'Tool' for your mapped diagram elements!
+
</blockquote>
+
  
[[Image:complink.png|center]]
+
The Map class itself is represented by the Canvas. Select the Canvas Mapping element to see this defined, along with the map to the Palette in our tooling definition. Finally, if you select the Link Mapping, you will observe that connections represented by our TopicSubtopicsLink are mapped to the 'EReference subtopics' feature of our Topic class, and are created with our TopicSubtopics Creation Tool.
<br style="clear:both;"/>
+
 
+
Now we're ready to regenerate the mindmap.gmfgen model and the code for our plug-in. Do this as before and test the new compartment and connection capabilities for the diagram.
+
 
<br style="clear:both;"/>
 
<br style="clear:both;"/>
  
 
<blockquote>
 
<blockquote>
<font color="darkblue">'''Tip''' :</font> Try this: if you'd like to create a diagram from an existing instance of a domain model, right-click the file and select 'Initialize xxx diagram file' where 'xxx' represents your domain_diagram editor extension. Note that an 'Arrange all' is likely your next step.
+
<font color="darkblue">'''Tip''' :</font> It is important to select the proper element when defining mappings at this stage; that is, before GMF does more complete filtering and validation. A good way to ensure you have selected the element you intended (as several may have the same name), open the mapping definition (*.gmfmap) file in a text editor, when in doubt.
 
</blockquote>
 
</blockquote>
  
== Constraints ==
+
==== Code Generation ====
[[Image:link2self.png|right]]
+
The last model to cover in this tutorial, and the one that is not as critical to understand at this point, is the GMF generator model. See the diagram to the right if you're interested in examining this model.
  
Currently, the diagram will allow you to make a subtopic link from one Topic to itself, as seen below. Clearly, this does not make sense for our Mindmap, so we'd like to prevent this somehow.
+
Now that the minimal graphical elements and mappings are defined, we can generate the code needed to test our work so far. To accomplish this, we will first create a generator model (*.gmfgen) in order to set the properties for code generation, similar to the familiar EMF genmodel. To accomplish this, right-click the mapping file and select 'Create generator model...' as shown below. When prompted, keep the default name 'mindmap.gmfgen'.
  
<blockquote>
 
<font color="darkblue">'''Tip''' :</font> Before continuing on with this section, be sure you have copied the antlr.jar file into the 'lib' folder of the plug-in, as referenced on the download page for GMF. The OCL capabilities are temporarily dependent on ANTLR, which is not bundled with GMF. Also, note that the EMF Technology (EMFT) project now has downloads and more information on the OCL and model validation components [http://www.eclipse.org/emft here].
 
</blockquote>
 
 
<br style="clear:both;"/>
 
<br style="clear:both;"/>
[[Image:link_constraint.png|right]]
 
  
Let's return to our mapping definition, and to the 'Link Mapping' we created earlier. To add a constraint, we begin by right-clicking on the 'Link Mapping' and selecting 'New Child > Link Constraints'. To the Link Constraint, right-click and select 'New Child > Source End Constraint'. The 'Language' property defaults to 'ocl' and we'll need to add the following OCL statement to the 'Body' property: self <> oppositeEnd, as seen in the image below. Then, go through the usual regeneration of mindmap.gmfgen and diagram code and try it out. You will no longer be able to make a link from a Topic to itself.
+
[[Image:create_gmfgen.png|right]]
  
So, now to explain what is happening here. As you can tell from the context above, we've added a constraint to the creation of a link, based on its source end; that is, the Topic element from which a link is being created. In the OCL we've specified the only condition that will evaluate to true, and therefore allow the link to be created, is the condition where the source element is not equal to the 'oppositeEnd' of the link (the target). In this case, the context of 'self' is the source Topic, and 'oppositeEnd' is a custom variable added to the parser environment for link constraints.
+
Now, we can examine the generator model to see what it includes (if you're the curious type). We'll keep all the default values for now and right-click the mindmap.gmfgen file and select 'Generate diagram code' to proceed. If all goes well, you will see a "Code generation completed successfully." message dialog. Dismiss the dialog, opting to never see it again, and notice the new org.eclipse.gmf.examples.mindmap.diagram plug-in in your workspace.
  
Clearly, this is a very simple constraint, and one that could very well have been defined in the domain model itself and respected by the graphical editor automatically. We will look more closely at constraints in future versions of this tutorial as support for their use matures.
+
Up to this point, the models used have been fairly straightforward to edit and understand.  The transformation that takes place to create the generator model (*.gmfgen) from the mapping model involves a bit of logic that is important to understand. However, it is not required to understand the details at this point in the tutorial, so additional information can be found [[GMF_GenModel|here]] for those interested.
 
<br style="clear:both;"/>
 
<br style="clear:both;"/>
  
== Another Connection ==
+
==== Running the Diagram Editor ====
[[Image:dependency_link_def.png|right]]
+
[[Image:notation-thumbnail.png|frame|right|thumbnail|Notation Model, view in  [[Media:notation.png|actual size]].]]
Let's look now at the 'Relationship' element of our domain model. It specifies a number of possible relationships that may be indicated between Topic elements, in addition to the subtopic relationship we have supported thus far. We will add support for this type of Connection, as it will illustrate more completely the properties available for a Link Mapping within GMF.
+
Recall that the runtime uses its own 'notation model' to display and persist the graphical components for your diagram. An image of this model is linked here for those interested.
  
Returning to our graphical definition model (mindmap.gmfgraph), let's right-click on our gallery and add a 'New Child > Polyline Connection'. Name it 'DependencyLine' and change 'Line Kind' to LINE_DASH. Then add a 'New Child > Target Decoration Polyline Decoration' element to the DependencyLine and name it 'ArrowDecoration'. Now, create a corresponding Connection within our Canvas named 'DependencyLink', selecting our 'DependencyLink' as its 'Figure'.
+
Now that we have generated the plug-in needed for our diagram, let's launch a new runtime workspace and test the diagram. The default settings of a new Eclipse Application runtime configuration should work fine, while you may opt to run a minimal configuration that includes only your generated plug-ins and their runtime dependencies within an org.eclipse.platform.ide configuration.
<br style="clear:both;"/>
+
  
[[Image:dependency_link_mapping.png|right]]
+
Create an empty project and invoke the New... dialog (Ctrl+N). Under 'Examples' you'll notice your new Mindmap Diagram. Create a new diagram and explore its functionality, and look for the creation of the domain model instance as you add and save diagram elements. Of course, we've only specified enough in our diagram definition to allow for simple Topic elements and subtopic links.
In the mapping definition, create a new 'Link Mapping' and fill in its properties to match what's here:
+
  
In this mapping, we'll start with the 'Domain meta information > Element' property. It represents the element represented by this link in the domain, which is simply the 'EClass Relationship' element. Recall that in our previous link mapping, we left this and other properties blank. In that case, our target element for the link was represented by an element (Topic) added to a list of reference held in our source element (also a Topic). In this case, the link is represented in the domain by a class of its own, so more information is required in the link mapping. This class, the Relationship class of the domain model, is contained in a list of references in the Map element, which explains the 'Domain meta feature > Containment Feature' map to 'EReference relations'.
+
[[Image:basic_mindmap.png|center]]
 +
<blockquote>
 +
<font color="darkblue">'''Tip''' :</font> If you'd like remove the icons from your labels (as shown here), try setting the 'Element Icon' property on your 'Diagram Label TopicNameLabel' element in your mindmap.gmfgraph model to 'false'. They are enabled by default.
 +
</blockquote>
  
Continuing the mapping description, the 'Label Display Feature' and 'Label Edit Feature' are both mapped to the 'EAttribute label' feature of the Relationship class. The 'Target Feature' in this case is mapped to the 'EReference target' domain model element, indicating that targets of the link are added to this list in the domain when the link is created. Similarly, the 'Source Meta Feature' maps to the 'EReference source' domain model element. And of course, we have our straightforward tool mapping.
+
== Summary ==
 +
As you have seen, using GMF as a means by which to get started creating graphical editors for your domain models is fairly straightforward. We have seen how creating a graphical definition and a mapping definition to the chosen domain can be used to generate much of the basic functionality expected in an EMF/GEF-based editor. In the future, GMF will mature and include more advance capabilities, so check back to see how this tutorial matures along with the project. In the meantime, if you've skipped over links that provide more detail on certain aspects of GMF, now may be the time to do so. Otherwise, feel free to continue with the [[GMF_Tutorial_Part_2|GMF Tutorial Part 2]].
  
<br style="clear:both;"/>
+
== Following the tutorial ==
  
Now, we can regenerate our diagram code as before, launch our diagram workspace and test this new link. Below is an example of the results:
+
* [[../Part 1 | GMF Tutorial Part 1 - Get Started with GMF]]
 +
* [[../Part 2 | GMF Tutorial Part 2 - How to configure your editor]]
 +
* [[../Part 3 | GMF Tutorial Part 3 - Advanced customization]]
 +
* [[../Part 4 | GMF Tutorial Part 4]]
  
[[Image:dependency_link.png|center]]
+
== References ==
 +
* [http://www.eclipse.org/modeling/gmp/ Graphical Modeling Project Website]
  
== Summary ==
+
* [[Graphical Modeling Framework/Documentation | GMF Documentation]]
As you have seen, using GMF as a means by which to get started creating graphical editors for your domain models is fairly straightforward. We have seen how creating a graphical definition and a mapping definition to the chosen domain can be used to generate much of the basic functionality expected in an EMF/GEF-based editor. In the future, GMF will mature and include more advance capabilities, so check back to see how this tutorial matures along with the project.
+
 
+
== References ==
+
* [http://www.eclipse.org/gmf Graphical Modeling Framework Website]
+
  
 
* [http://publib-b.boulder.ibm.com/Redbooks.nsf/RedbookAbstracts/sg246302.html Eclipse Development using the Graphical Editing Framework and the Eclipse Modeling Framework], IBM Redbook
 
* [http://publib-b.boulder.ibm.com/Redbooks.nsf/RedbookAbstracts/sg246302.html Eclipse Development using the Graphical Editing Framework and the Eclipse Modeling Framework], IBM Redbook
  
* [http://www.eclipse.org/emf/docs.php EMF Documentation]
+
* [http://www.eclipse.org/modeling/emf/docs/ EMF Documentation]
  
* [http://eclipse.org/emf/docs.php?doc=tutorials/clibmod/clibmod.html Generating an EMF Model]
+
* [http://dev.eclipse.org/viewcvs/indextools.cgi/org.eclipse.emf/doc/org.eclipse.emf.doc/tutorials/clibmod/clibmod.html Generating an EMF Model]
  
 
* [http://sourceforge.net/projects/merlingenerator/ Merlin Homepage]
 
* [http://sourceforge.net/projects/merlingenerator/ Merlin Homepage]
Line 246: Line 205:
  
 
* [http://www.omg.org/docs/ptc/03-10-14.pdf OCL Specification]
 
* [http://www.omg.org/docs/ptc/03-10-14.pdf OCL Specification]
 +
 +
[[Category:GMF]]

Latest revision as of 09:48, 13 June 2013



GMF
Website
Download
Dev Builds
Update Site releases milestones
Community
Mailing ListNewsgroupIRC
Bugzilla
Open
Help Wanted
Bug Day
Source
GMF Notation: View CVS repo

GMF Runtime: View CVS repo
GMF Tooling: View Git Repo, GitHub


This tutorial will introduce the Graphical Modeling Framework (GMF), an Eclipse Modeling Project project that aims to provide a generative bridge between the Eclipse Modeling Framework (EMF) and Graphical Editing Framework (GEF).

In this tutorial, a mindmap application will be developed, as described here. This tutorial describes the functionality provided by GMF in version 2.0.1. It is expected that this tutorial will evolve with GMF to introduce new functionality as it is developed. New functionality will be covered by installments added to this tutorial, each with a corresponding viewlet. A viewlet for this installment of the tutorial can be found here. The complete solution to this tutorial is maintained in Git here.

Overview of GMF

The use of both EMF and GEF for building Eclipse-based functionality is quite common. Many references below provide information on how to utilize these frameworks together, some of which inspired the GMF project itself. Before diving into a new GMF project, let's explore a little of how GMF approaches the task of utilizing EMF and GEF in a generative manner. Another article focusing on the runtime portion of GMF is found here.

The GMF project has adopted the term 'toolsmith' to refer to developers that use GMF to build plug-ins, while 'practitioner' is used to referred to those who utilize said plug-ins, and who may also be developers. From a usability perspective, the number and types of 'models' utilized by GMF internally should be hidden to the greatest extent possible. However, it is likely that most toolsmiths are interested in knowing what is going on under the covers, so a description of each model is linked from the GMF Documentation page.

GMF-Tooling workflow

This is a diagram that illustrates the main components and models used during GMF-based development. Core to GMF is the concept of a graphical definition model. This model contains information related to the graphical elements that will appear in a GEF-based runtime, but have no direct connection to the domain models for which they will provide representation and editing. An optional tooling definition model is used to design the palette and other periphery (menus, toolbars, etc.).

It is expected that a graphical or tooling definition may work equally well for several domains. For example, the UML class diagram has many counterparts, all of which are strikingly similar in their basic appearance and structure. A goal of GMF is to allow the graphical definition to be reused for several domains. This is achieved by using a separate mapping model to link the graphical and tooling definitions to the selected domain model(s).

Once the appropriate mappings are defined, GMF provides a generator model to allow implementation details to be defined for the generation phase. The production of an editor plug-in based on the generator model will target a final model; that is, the diagram runtime (or "notation") model. The runtime will bridge the notation and domain model(s) when a user is working with a diagram, and also provides for the persistence and synchronization of both. An important aspect of this runtime is that it provides a services-based approach to EMF and GEF functionality and is able to be leveraged by non-generated applications.

With the basics of GMF covered, let's now walk through the process of using GMF in the development of a graphical editing surface for a particular domain. First, you will need to install GMF and its dependencies.

Setup

Europa gmf.png

This version of the tutorial was written using this build of GMF 2.0.1.

However, it is advised to use GMF Runtime 1.5.x with GMF Tooling 2.4.0, respectively from the following update sites: Indigo Repository and GMF Tooling latest release site.

The TaiPan example referenced below is maintained in CVS and should remain functional with the latest builds of GMF, even if the tutorial is not quite up-to-date. If not, please open a bug.

Taipan Example

Checkout.png

If you're anxious to see GMF in action, check out the Taipan example projects into your workspace from CVS by switching to the CVS Repository Exploring perspective and adding a repository location as shown in the image to the right. Otherwise, you can skip to the next section.

Navigate to /HEAD/org.eclipse.gmp/org.eclipse.gmf.tooling/examples and select the org.eclipse.gmf.examples.taipan.* modules. Right-click and select Check Out. If you are not using the latest build and prerequisites of GMF, you can always check out the version of the Taipan by date to correspond with the version you're using. The important point is that you'll need to work with synchronized versions of the GMF SDK and the Taipan example. To do this, after checkout you can right-click on the projects and selecting 'Team | Switch to Another Branch or Version...' and then choose 'Select the tag from the following list' and use the 'Add Date...' button at the bottom to enter the date of the GMF 2.0.1 release (28 September 2007). Press Finish and you're set.

Switch to the Plug-in Development perspective and open the models folder within the org.eclipse.gmf.examples.taipan project. Explore each of the models found hereand their element properties. You'll notice that there are full and RCP versions of the generated Taipan examples to explore.

We will look at each of the models in turn during the tutorial, but just to validate your configuration, you should be able to run this sample in a runtime workspace (simply accept the defaults for a new 'Eclipse Application' run configuration). In the runtime workspace, create an empty project and a new 'TaiPan Diagram' found in the Examples folder of the New dialog. Name it whatever you wish and click Finish. The generated diagram editor should open for you to explore. Some things to note in particular are:


  • tool palette and overview
  • layout and selection tools
  • diagram image export (svg, bmp, jpeg, gif)
  • tabbed properties view
  • font and color options for selected element
  • link routing and style options
  • pop-up bars and connection handles
  • notes and geometric shapes
  • animated zoom and layout
  • diagram printing
Taipan diagram.png

Create a new launch configuration to run the TaiPanApplication and select just the Taipan *.rcp plug-in and its dependencies on the Plug-ins tab to run Taipan as a standalone RCP diagram editor.

Taipan diagram rcp.png

This concludes the quick start portion of this tutorial. What follows next is a more detailed look at each of the models shown above during the creation of a mindmap modeling surface.

Your first diagram editor, step by step : Mindmap editor

Screen recording

The screen recording in Eclipse Helios, Mac OSX is available at this URL: Mindmap Tutorial Part 1 Screen Recording

Tutorial

Before we start, you should specify for your workspace (or at least for your GMF projects) 1.5 compiler settings. In Window... Preferences... Java...Compiler options, make sure you have selected a Compliance Level of 1.5.

As described here, one of the usage scenarios for GMF includes producing a graphical surface for a mindmap application, to eventually be complemented with an alternative view of its temporal information (likely a Gantt chart - feel free to contribute this to the wiki). This section of the tutorial will demonstrate GMF's capabilities toward this end, and will continue to evolve as the project matures. If you'd prefer to follow along using a set of projects representing the complete solution to this tutorial, you can find a set of mindmap projects in CVS under the org.eclipse.gmf/examples module. Note that if you choose to grab all mindmap projects, you'll need to install the Experimental SDK in order for all projects to compile.

Cheatsheet project.png

GMF comes with a Tutorial Cheat Sheet found under 'Help | Cheat Sheets...' (Note that if you've installed GMF onto a platform without the SDK, i.e. using Europa's update manager, you will need to open the Cheat Sheets view from the Window | Show View... | Other... menu and then open the GMF Tutorial Cheat Sheet from the view menu). If you open this cheat sheet and follow through each step, you can accomplish most of this first tutorial segment, while taking advantage of some actions that will launch and pre-populate wizards to get you started. Try this now to create your new project.

Alternatively, you can begin by creating an "New GMF Project" found under 'Graphical Modeling Framework' in the New dialog (Ctrl+N). Name the project 'org.eclipse.gmf.examples.mindmap' and create a new folder named 'model' in its root.

Domain Model Definition

Although it may seem necessary to begin with the domain model, it is not in the case with GMF, as the diagram definition is maintained separate from the domain. However, we will begin with the domain in the tutorial as it is likely familiar to most, and will allow us to jumpstart our diagram definition from the domain model using a wizard in the next section.

A basic domain model for our mindmap is found in an Ecore version here. Following the cheat sheet, in the section "Domain Model", select the Model Importers ... Ecore Model .... On the next panel, copy the URL from the download link found on the Ecore file and select the "Load" button.

(Alternatively, you may start with an XSD of the mindmap model, found here (you'll need to install the XSD feature from EMF in this case). Copy this file into your 'model' folder and feel free to examine the model, if you wish. GMF provides a (bootstrapped) graphical editor to complement the standard EMF generated editors, and is packaged in the SDK.

To render the mindmap.ecore (or any *.ecore model) with the editor, simply right-click the file and select 'Initialize ecore_diagram diagram file' from the menu.

Mindmap domain model

To continue, create a new mindmap.genmodel from the mindmap.ecore file using the New > Eclipse Modeling Framework > EMF Model wizard. You may wish to change the 'Base Package' property for the genmodel's 'Mindmap' package to org.eclipse.gmf.examples to have your generated packaging match the project name. These steps are also covered in the next step of the cheat sheet.

Generate the model and edit code using the right-click menu available from the root of the generator model. There is no need to create an editor or tests, but you are welcome to do so if you'd like. Now, we're ready to begin creating the graphical and mapping definitions for our mindmap application.

Graphical Definition

A graphical definition model is used to define the figures, nodes, links, etc. that you will display on your diagram. The model you will work with to do this is seen at the right.

Continuing on with the next step in the cheat sheet, we will create a new graphical definition model. The cheat sheet will launch the Simple Graphical Definition Model wizard, which is found in the Graphical Modeling Framework folder of the New (Ctrl + N) dialog. Select the 'model' folder under your org.eclipse.gmf.examples.mindmap project for the mindmap.gmfgraph model, and on the next page of the wizard use 'Browse' to locate your mindmap.ecore file. Select our Map class as the Diagram element.

On the last page of the wizard, select a minimal set of element, link, and label options for our Topic class as shown in the image. Later on, feel free to experiment with this wizard and observe its output. For now, we're just interested in getting a minimal set of models to get started. Click 'Finish' to complete.

If you examine the model, you will find a Canvas at the root with a Figure gallery containing basic Rectangle, Label, and Polyline Connection elements. These are used by corresponding Node, Diagram Label, and Connection elements to represent our Topics from the domain model. We can leave the defaults as-is for now and continue with our tooling definition in the next step of the cheat sheet.

Cheatsheet graph.png

Cheatsheet graph2.png

Tip : There are several figure galleries intended for reuse and included with GMF. You can load these into your *.gmfgraph model (or *.gmfmap model) by using "Load Resource..." and entering platform:/plugin/org.eclipse.gmf.graphdef/models/basic.gmfgraph for the Resource URI. Others available include classDiagram.gmfgraph and stateDiagram.gmfgraph.

Tooling Definition

As mentioned above, the tooling definition model is used to specify the palette, creation tools, actions, etc. for your graphical elements. To the right is a diagram of the model.

The cheat sheet will guide you through a very similar process for getting started with our Simple Tooling Definition Model. In fact, the two steps are virtually identical, as the mindmap domain model is loaded and examined for possible tooling needs. We will simply select the same options we did for the graphical definition, save a tool for the Topic name label, and begin with a very simple palette for our Topic elements.
Cheatsheet tool.png

Looking at the model provided for us, we see there is a top-level 'Tool Registry' element, under which we find a Palette. The palette contains a Tool Group with Creation Tool elements for both Topic nodes and links for subtopic elements that were identified by the wizard. We will reorganize these and modify them a bit in the future, but for now we'll leave the defaults and move on to the mapping definition. Feel free to browse this model and inspect its properties to familiarize yourself with tooling definitions.

Mapping Definition

The mapping definition model will let us bind the three models we have so far: the domain, the graphical definition, and the tooling definition. To the right is an image of this model. This is a key model to GMF development and will be used as input to a transformation step which will produce our final model, the generation model.

Continuing on with our cheat sheet, follow the instructions to launch the Guide Mapping Model Creation wizard. We will again select the 'model' folder to hold our mindmap.gmfmap file and move on to load each of the preselected mindmap.ecore, mindmap.gmfgraph, and mindmap.gmftool models. On the next page, select 'Map' as the Diagram Root Element, accept the mindmapPalette from the selected tooling model, and then accept the selected mindmap diagram canvas. Finally, make the last page look like the image below. Note that you can adjust the properties for the selected node or link by using the 'Change...' button in the dialog.

Cheatsheet map.png


Label mapping.png

One thing we need to do manually is create a Label Mapping for our TopicNameLabel from the graphical definition. The result should look like the image to the right. While in the properties view, check the mapping of the TopicNode Node Mapping as well, to make sure it has the desired values. Because of bug 189410, carefully check that the mapping wizard assigned the proper tool to both the Topic node and the Subtopics link: click on the Topic and Subtopic node mappings, and ensure that the "Tool" in the properties is the one you created for Topics in your .gmftool.

Before moving on, let's pause to describe the mappings. We'll start with the Label Mapping, as it's the one we're looking at here. It's a straightforward mapping, with the Diagram Label property set as we discussed and a mapping to the 'EAttribute name' feature on our Topic element in the domain model.

Moving up to the Node Mapping, we see that our Diagram Node is mapped to the TopicNode of our graphical definition with its corresponding domain model element mapped to our Topic class. The Topic creation tool is also specified in the mapping.

Above the Node Mapping you will find a Top Node Reference. Its Containment Feature is set to the 'EReference rootTopics' feature of our Map class. So, when new Topic nodes are added to the diagram, the instance of our domain Topic will be added to the rootTopics containment reference of our Map class. The label of the node will display the 'name' attribute of the Topic.

The Map class itself is represented by the Canvas. Select the Canvas Mapping element to see this defined, along with the map to the Palette in our tooling definition. Finally, if you select the Link Mapping, you will observe that connections represented by our TopicSubtopicsLink are mapped to the 'EReference subtopics' feature of our Topic class, and are created with our TopicSubtopics Creation Tool.

Tip : It is important to select the proper element when defining mappings at this stage; that is, before GMF does more complete filtering and validation. A good way to ensure you have selected the element you intended (as several may have the same name), open the mapping definition (*.gmfmap) file in a text editor, when in doubt.

Code Generation

The last model to cover in this tutorial, and the one that is not as critical to understand at this point, is the GMF generator model. See the diagram to the right if you're interested in examining this model.

Now that the minimal graphical elements and mappings are defined, we can generate the code needed to test our work so far. To accomplish this, we will first create a generator model (*.gmfgen) in order to set the properties for code generation, similar to the familiar EMF genmodel. To accomplish this, right-click the mapping file and select 'Create generator model...' as shown below. When prompted, keep the default name 'mindmap.gmfgen'.


Create gmfgen.png

Now, we can examine the generator model to see what it includes (if you're the curious type). We'll keep all the default values for now and right-click the mindmap.gmfgen file and select 'Generate diagram code' to proceed. If all goes well, you will see a "Code generation completed successfully." message dialog. Dismiss the dialog, opting to never see it again, and notice the new org.eclipse.gmf.examples.mindmap.diagram plug-in in your workspace.

Up to this point, the models used have been fairly straightforward to edit and understand. The transformation that takes place to create the generator model (*.gmfgen) from the mapping model involves a bit of logic that is important to understand. However, it is not required to understand the details at this point in the tutorial, so additional information can be found here for those interested.

Running the Diagram Editor

Notation Model, view in actual size.

Recall that the runtime uses its own 'notation model' to display and persist the graphical components for your diagram. An image of this model is linked here for those interested.

Now that we have generated the plug-in needed for our diagram, let's launch a new runtime workspace and test the diagram. The default settings of a new Eclipse Application runtime configuration should work fine, while you may opt to run a minimal configuration that includes only your generated plug-ins and their runtime dependencies within an org.eclipse.platform.ide configuration.

Create an empty project and invoke the New... dialog (Ctrl+N). Under 'Examples' you'll notice your new Mindmap Diagram. Create a new diagram and explore its functionality, and look for the creation of the domain model instance as you add and save diagram elements. Of course, we've only specified enough in our diagram definition to allow for simple Topic elements and subtopic links.

Basic mindmap.png

Tip : If you'd like remove the icons from your labels (as shown here), try setting the 'Element Icon' property on your 'Diagram Label TopicNameLabel' element in your mindmap.gmfgraph model to 'false'. They are enabled by default.

Summary

As you have seen, using GMF as a means by which to get started creating graphical editors for your domain models is fairly straightforward. We have seen how creating a graphical definition and a mapping definition to the chosen domain can be used to generate much of the basic functionality expected in an EMF/GEF-based editor. In the future, GMF will mature and include more advance capabilities, so check back to see how this tutorial matures along with the project. In the meantime, if you've skipped over links that provide more detail on certain aspects of GMF, now may be the time to do so. Otherwise, feel free to continue with the GMF Tutorial Part 2.

Following the tutorial

References

Back to the top