Wiki source code of Graphical Editors with Graphiti
Version 6.1 by msp on 2012/11/06 15:16
Show last authors
| author | version | line-number | content |
|---|---|---|---|
| 1 | This tutorial will introduce another kind of concrete syntax for your models, namely a graphical syntax. Instead of writing models in a textual format, they are created by dragging elements from a palette into a two-dimensional plane. The framework we will employ here is [[Graphiti>>url:http://www.eclipse.org/graphiti/||shape="rect"]], which is based on the [[Graphical Editing Framework>>url:http://www.eclipse.org/gef/||shape="rect"]]. | ||
| 2 | |||
| 3 | === Contents === | ||
| 4 | |||
| 5 | |||
| 6 | |||
| 7 | {{toc maxLevel="2"/}} | ||
| 8 | |||
| 9 | = Defining the Diagram Type = | ||
| 10 | |||
| 11 | The main documentation of Graphiti is found in the [[Eclipse online help>>url:http://help.eclipse.org/juno/nav/23||shape="rect"]], which is also found in the Eclipse application (//Help// → //Help Contents//). If you don't have Graphiti yet, install it from the Juno release update site, //Modeling// category. The first step of this tutorial consists of defining a diagram type for Turing Machines and adding a wizard dialog for the creation of new diagrams. | ||
| 12 | |||
| 13 | 1. Read the [[Graphiti Introduction>>url:http://help.eclipse.org/juno/topic/org.eclipse.graphiti.doc/resources/docu/gfw/graphiti-introduction.htm?cp=23_0_0||shape="rect"]]. | ||
| 14 | 1. Create a new plugin named de.cau.cs.rtprak.login.turing.graphiti (like in previous tutorials, replace "login" by your login name) and add dependencies to the following plugins:\\ | ||
| 15 | 1*. org.eclipse.core.runtime | ||
| 16 | 1*. org.eclipse.core resources | ||
| 17 | 1*. org.eclipse.ui | ||
| 18 | 1*. org.eclipse.ui.ide | ||
| 19 | 1*. org.eclipse.emf.ecore.xmi | ||
| 20 | 1*. org.eclipse.emf.transaction | ||
| 21 | 1*. org.eclipse.emf.workspace | ||
| 22 | 1*. org.eclipse.graphiti | ||
| 23 | 1*. org.eclipse.graphiti.ui | ||
| 24 | 1*. de.cau.cs.rtprak.login.turingmodel | ||
| 25 | 1. Create a class {{code language="none"}}TuringDiagramTypeProvider{{/code}} with superclass {{code language="none"}}org.eclipse.graphiti.dt.AbstractDiagramTypeProvider{{/code}}. | ||
| 26 | 1. Open plugin.xml and create an extension for org.eclipse.graphiti.ui.diagramTypes with a //diagramType// element:\\ | ||
| 27 | 1*. //id: //de.cau.cs.rtprak.TuringDiagramType | ||
| 28 | 1*. //type: //turing | ||
| 29 | 1*. //name: //Turing Diagram Type | ||
| 30 | 1. Create an extension for org.eclipse.graphiti.ui.diagramTypeProviders with a //diagramTypeProvider// element:\\ | ||
| 31 | 1*. //id~:// de.cau.cs.rtprak.login.TuringDiagramTypeProvider | ||
| 32 | 1*. //name~:// Turing Diagram | ||
| 33 | 1*. //class~:// name of the {{code language="none"}}TuringDiagramTypeProvider{{/code}} class | ||
| 34 | 1. Add a //diagramType// element to the //diagramTypeProvider// with id de.cau.cs.rtprak.TuringDiagramType. | ||
| 35 | 1. Create a class {{code language="none"}}TuringFeatureProvider{{/code}} with superclass {{code language="none"}}org.eclipse.graphiti.ui.features.DefaultFeatureProvider{{/code}}. | ||
| 36 | 1. ((( | ||
| 37 | Add the following constructor to {{code language="none"}}TuringDiagramTypeProvider{{/code}}: | ||
| 38 | |||
| 39 | {{code theme="Eclipse" language="java"}} | ||
| 40 | /** | ||
| 41 | * Create a Turing diagram type provider. | ||
| 42 | */ | ||
| 43 | public TuringDiagramTypeProvider() { | ||
| 44 | setFeatureProvider(new TuringFeatureProvider(this)); | ||
| 45 | } | ||
| 46 | {{/code}} | ||
| 47 | ))) | ||
| 48 | 1. Copy [[attach:GraphitiNewWizard.java]] and [[attach:CreationWizardPage.java]] to your plugin, adapting the package name accordingly. These files implement a generic wizard dialog for creating Graphiti-based models. | ||
| 49 | 1. Create a subclass of {{code language="none"}}GraphitiNewWizard{{/code}} for specifying a concrete wizard dialog for your models.\\ | ||
| 50 | 1*. ((( | ||
| 51 | Add a constructor that calls a super-constructor with according parameters for configuration: | ||
| 52 | |||
| 53 | {{code theme="Eclipse" language="java"}} | ||
| 54 | super("Turing Machine", "tudi", "turing", "turing", | ||
| 55 | org.eclipse.graphiti.ui.editor.DiagramEditor.DIAGRAM_EDITOR_ID); | ||
| 56 | {{/code}} | ||
| 57 | |||
| 58 | Diagrams are stored in two separate files, one containing the actual Turing Machine model and one containing the specific graphical elements used to represent the model. Here it is assumed that {{code language="none"}}"turing"{{/code}} is the file extension for Turing Machine models (this depends on how you configured your EMF model), while {{code language="none"}}"tudi"{{/code}} will be the file extension for diagrams. | ||
| 59 | ))) | ||
| 60 | 1*. Implement the {{code language="none"}}createModel{{/code}} method by creating and returning an instance of the top-level element of your Turing Machines, e.g. {{code language="none"}}TuringMachine{{/code}}. | ||
| 61 | 1*. Register the new wizard class in your plugin.xml using a //wizard// extension for org.eclipse.ui.newWizards (you only need to choose an id and name and set the correct class name). | ||
| 62 | 1. Include the new plugin in your Eclipse run configuration and start it. Create a Turing Machine diagram with your new wizard: //File//→ //New//→ //Other...//→ //Other//→ //Turing Machine//. This opens a Graphiti diagram editor for the new file, but you cannot do anything in that editor, since the palette is still empty. | ||
| 63 | 1. In order to open a previously created {{code language="none"}}tudi{{/code}} file, right-click it → //Open With//→ //Other...//→ //Graphiti Diagram Editor//. This setting for {{code language="none"}}tudi{{/code}} files will be saved in your workspace preferences. | ||
| 64 | |||
| 65 |