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 3"

m (Composite Figures)
m (Graphical Definition)
Line 23: Line 23:
 
Open up your graphical definition again and add a new...
 
Open up your graphical definition again and add a new...
 
<br style="clear:both;"/>
 
<br style="clear:both;"/>
 +
 +
<pre>
 +
  <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>
 +
</pre>
  
 
<blockquote>
 
<blockquote>

Revision as of 17:11, 12 April 2006

Note: This is still very much a work in progress...

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 new 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/full/obj16/ 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, if you delete the 'Delete 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 Path property to platform:/plugin/org.eclipse.gmf.examples.mindmap.edit/icons/full/obj16/Subtopic.gif, it will use this 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...

  <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. Furthermore, 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 available and 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...

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]'.

Using External Figures

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

Custom Actions

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


Summary

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

Back to the top