Jump to: navigation, search

Graphical Modeling Framework/Tutorial/Part 3

In this third part of the GMF Tutorial, we will explore some more advanced capabilities related to the tooling components, while also extending what's generated with customizations to the runtime. Specifically we will add a composite figure using the graphical definition, show how to leverage external figures, and how to use an extension plug-in to add a custom action to our diagram. A project containing the full solution set of projects for this segment is found here. Viewlets will be available after appropriate sections below to focus their content and keep them short.

New Icons

A quick way to get a polished look for our mindmap diagram is by replacing the generated EMF icons we've seen so far with some that are more, well... distinctive ;-) The easiest way to do this is to replace the GIF images found in our org.eclipse.gmf.examples.mindmap.edit/icons/ folder.

In case you'd like to map another image file to a palette item, say in the case of our three Relationship tools, or for our Subtopic link which has no default icon, you can modify the children of your Creation Tool elements in the mindmap.gmftool model. For example, delete the 'Default Image' entry below the 'Creation Tool Subtopic' element that represents the small icon and replace it with a 'Small Icon Bundle Image' and set its Bundle to org.eclipse.gmf.examples.mindmap.edit and its Path property to /icons/full/obj16/Subtopic.gif. Regenerate and the palette will display the new icon. Of course, you'll need to provide this file or use the one found in the solution to this tutorial section.

Finally, take a look in the mindmap.genmodel for properties to set for the default wizard and diagram file icons. While you're there, you might want to change the diagram file extension from 'mindmap_diagram' to 'mmd' or something similar. Browsing the properties available in the gmfgen model is a useful exercise.

Below is an image of our diagram and palette using some new images.

New icons.png

Composite Figures

Resource.png

What we'd like to do is have an actor-style representation for our resources added to our diagram. These will be linked to their respective Topic elements, much like our relationship links between Topic elements. Also, we'd like to have the labels for our Resource figures external and display both the name and email address attribute values of the corresponding domain element.

Graphical Definition

Resource figure.png

Open up your graphical definition again and add a new Rectangle named 'ResourceFigure' to your Figure Gallery. Set its Outline property to false, along with its Fill. As you can see from the image to the right, we will be adding a series of children to the rectangle, which will act as a container for the elements that comprise our Resource figure. Specifically, right-click and add an XY Layout, and Ellipse for the head, a Polygon for the Body, and sizing elements. Rather than go through all of the gory details of these, the figure code is found below. Either paste it into your mindmap.gmfgraph in the appropriate location using a text editor, or utilize the default editor and properties view.

To our Canvas, add a new Node named ResourceNode and assign our ResourceFigure as its Figure. Also, notice the new 'BasicLabelFigure' label that is added to the Figure Gallery in the image. Create this and add a new Diagram Label 'ResourceLabel' to the Figure Gallery and Canvas respectively. Note that the Label for our Resource is not a child element of its figure. We want the label to be external, and therefore be allowed to float and be positioned wherever the user would like it.

  <figures xsi:type="gmfgraph:Rectangle" name="ResourceFigure" outline="false" fill="false" lineWidth="0">
      <layout xsi:type="gmfgraph:XYLayout"/>
      <children xsi:type="gmfgraph:Ellipse" name="Head">
        <foregroundColor xsi:type="gmfgraph:RGBColor" red="220" green="220" blue="250"/>
        <backgroundColor xsi:type="gmfgraph:RGBColor" red="230" green="230" blue="255"/>
        <size x="40" y="20"/>
      </children>
      <children xsi:type="gmfgraph:Polygon" name="Body">
        <foregroundColor xsi:type="gmfgraph:RGBColor" red="220" green="220" blue="250"/>
        <backgroundColor xsi:type="gmfgraph:RGBColor" red="230" green="230" blue="255"/>
        <template x="23" y="19"/>
        <template x="23" y="24"/>
        <template x="39" y="24"/>
        <template x="39" y="29"/>
        <template x="23" y="29"/>
        <template x="23" y="36"/>
        <template x="39" y="48"/>
        <template x="39" y="53"/>
        <template x="20" y="42"/>
        <template x="1" y="53"/>
        <template x="1" y="48"/>
        <template x="17" y="36"/>
        <template x="17" y="29"/>
        <template x="1" y="29"/>
        <template x="1" y="24"/>
        <template x="17" y="24"/>
        <template x="17" y="19"/>
      </children>
      <maximumSize dx="40" dy="60"/>
      <minimumSize dx="40" dy="60"/>
      <preferredSize dx="40" dy="60"/>
      <size x="40" y="60"/>
    </figures>

Tip : It's a bit tedious to add multiple template points in the manner above, so feel free to open the gmfgraph file in a text editor to make life easier. To get it looking right more quickly, open the generated figure class and simply modify the GEF code directly and run the editor to see how it looks. Then, move this information back into your gmfgraph model. Of course, when the WYSIWYG features of GMF become more mature, none of this should be necessary.


Tooling Definition

Resource tool.png

We'll need a tool to add Resource nodes, so as you've done many times before, open the mindmap.gmftool model and add a new node creation tool for the Resource. Next, we'll need to add our mappings, so reopen your mindmap.gmfmap file.

Mapping Definition

Resource map.png

First, we'll need to add a new Top Node Reference to our Mapping definition. Set the Containment Feature to our 'EReference resources' attribute of our Map class. Add a child Node Mapping element to this Top Node Reference and select our 'EClass Resource' for the Domain meta information Element property. Of course, we'll select our ResourceNode for the Diagram Node and our Resource creation tool for the palette.

Now, to add our Label Mapping as a child of the Node Mapping and set the Edit and View Pattern and corresponding features from our Resource class in the domain model. Here, we'll utilize the edit and view pattern properties of the mapping model to allow a Resource label to be displayed as 'name [email@some.com]'. To allow for the proper parsing of what's entered into the direct edit field, we will define an edit pattern for the label as '{0} : {1}' where a colon is used to separate the name and email attributes. Note that the generated plug-in code will contribute to the parserProvider extension-point, which will in turn leverages the Java MessageFormat class.

Generation

Run the diagram and check the operation of the label, as well as the look of the figure. It should look similar to the one above. Resources added to the diagram are now available in the properties view for topic assignments, thread authoring, etc. To add the ability to create links from other elements to a Resource, follow steps similar to how links are used to represent subtopics. This exercise is left to the reader ;-)

Creating a Customization Plug-in

Although making modifications to the generated code and specifying '@generated NOT' to allow JMerge to preserve our changes works well for some customizations, it's also possible to separate other customizations (extensions) to our generated plug-in using a new plug-in. For this purpose, create a new plug-in project named org.eclipse.gmf.examples.mindmap.diagram.custom to your workspace. Use the default settings, although no Activator class is needed, nor is the use of any of the templates provided in the wizard.

Custom Actions

Insert subtopic.png

The standard means to create a new subtopic is a bit painful at the moment: click on Topic creation tool, then diagram, name with in-place editor, click Subtopic link creation tool, draw link from parent to subtopic. Ideally, we'd like to simply use a right-click menu option on a selected Topic and choose "Create Subtopic" or better yet, press the Insert key (or some combination) and have the new Topic created, including the link, and with the in-place editor active on the new Topic. In this section, we will explore how to accomplish just this.

To begin, we know that the org.eclipse.ui.bindings can be used to assign a Ctrl+I key combination to our action (as seen on the image, though for OS X). This is easily accomplished by contributing to the extension-point in our new *.diagram.custom plugin.xml file. Note that this is a simplistic example that does not declare a context, as you would probably expect to create for your diagram and potentially extend a default GMF diagram context (if one existed ;-).

<extension point="org.eclipse.ui.bindings">
	<key commandId="org.eclipse.gmf.examples.mindmap.insertSubtopic" sequence="M1+I" schemeId="org.eclipse.ui.defaultAcceleratorConfiguration"/>
</extension>

Now, for the command, we'll contribute to the org.eclipse.ui.commands extension-point, as seen below. When you run your diagram, you will see this command category and the shortcut listed in the General | Keys preference page.

<extension point="org.eclipse.ui.commands">
	<category name="Mindmap" description="Commands related to Mindmap diagrams." id="org.eclipse.gmf.category.mindmap"/>
	<command categoryId="org.eclipse.gmf.category.mindmap" description="Inserts a new subtopic" id="org.eclipse.gmf.examples.mindmap.insertSubtopic" name="Insert Subtopic">
	</command>
</extension>

Now, for the popup menu. We'd like to have a series of potential menu items to insert elements on our diagram (i.e. subtopics, threads, etc.), so our contribution to org.eclipse.ui.popupMenus will define an 'Insert | Subtopic' menu and link it to our binding above through the defintionId:

<extension point="org.eclipse.ui.popupMenus">
      <objectContribution
            adaptable="false"
            id="org.eclipse.gmf.examples.mindmap.diagram.ui.objectContribution.TopicEditPart1"
            objectClass="org.eclipse.gmf.examples.mindmap.diagram.edit.parts.TopicEditPart">
         <menu 
            id="MindmapInsert" 
            label="&Insert" 
            path="additions"> 
            <separator name="group1"/>
         </menu>
         <action
               class="org.eclipse.gmf.examples.mindmap.diagram.part.MindmapCreateSubtopicAction"
               definitionId="org.eclipse.gmf.examples.mindmap.insertSubtopic"
               enablesFor="1"
               id="org.eclipse.gmf.examples.mindmap.popup.MindmapCreateSubtopicActionID"
               label="&Subtopic"
               menubarPath="MindmapInsert/group1">
         </action>
      </objectContribution>                    
</extension>

Now, for the fun part... to define the declared MindmapCreateSubtopicAction class. To begin, we know that similar functionality exists in the connection handles feature provided by the runtime (see image below).

Connection handle.png


After some investigation, it seems the CreateViewAndOptionallyElementCommand class is the key to this functionality, so we will use this code as the inspiration for our action. I expect that if there is a better way, someone from the runtime team will make a recommendation :-). Rather than type in the code, simply copy the MindmapCreateSubtopicAction class into your project from the solution (or retrieve from CVS). To eliminate Access Restriction errors, add the required packages to the Exported Packages list on the Runtime of the *.diagram plugin. The basic concepts are outlined next.

Our action will implement IObjectActionDelegate, with its run method performing the following:

  • create and initialize a CreateConnectionRequest
  • create and execute a CompoundCommand, containing a DeferredCreateConnectionViewAndElementCommand
  • create and perform a direct edit request on the new subtopic
Inserted subtopic.png

Run the diagram and test the functionality using the keyboard combination (Ctrl+I) or right-click menu. Note that the subtopic is created above and to the right of the parent with direct editing enabled for you to give it a name. As you can see, the code to determine the position is a temporary hack (layout will be covered in another installment of the tutorial).

Summary

In this section of the tutorial, we saw how to add a composite figure, and create a custom action contained within a new extension plug-in. In the next section, we will look at layouts and using external images and figures.