Skip to Content
Last modified by msp on 2025/01/30 12:03
From version 5.1
edited by msp
on 2012/11/06 13:05
Change comment: There is no comment for this version
To version 9.1
edited by msp
on 2012/11/07 09:13
Change comment: There is no comment for this version

Summary

Details

Page properties
Title
... ... @@ -1,1 +1,1 @@
1 -Graphical Editors with Graphiti
1 +Graphical Modeling with Graphiti
Content
... ... @@ -6,16 +6,24 @@
6 6  
7 7  {{toc maxLevel="2"/}}
8 8  
9 -= Defining the Diagram Type =
9 += Defining a Diagram Type =
10 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.
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 12  
13 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 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
15 15  1*. org.eclipse.graphiti
16 16  1*. org.eclipse.graphiti.ui
24 +1*. de.cau.cs.rtprak.login.turingmodel
17 17  1. Create a class {{code language="none"}}TuringDiagramTypeProvider{{/code}} with superclass {{code language="none"}}org.eclipse.graphiti.dt.AbstractDiagramTypeProvider{{/code}}.
18 -1. Open {{code language="none"}}plugin.xml{{/code}} and create an extension for org.eclipse.graphiti.ui.diagramTypes with a //diagramType// element:\\
26 +1. Open plugin.xml and create an extension for org.eclipse.graphiti.ui.diagramTypes with a //diagramType// element:\\
19 19  1*. //id: //de.cau.cs.rtprak.TuringDiagramType
20 20  1*. //type: //turing
21 21  1*. //name: //Turing Diagram Type
... ... @@ -37,3 +37,341 @@
37 37  }
38 38  {{/code}}
39 39  )))
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. //Hint~:// by selecting {{code language="none"}}"tuxt"{{/code}} as domain model file extension your models will be stored in the textual format instead of XMI. However, this requires the created models to always be in a serializable state.
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 += Creating and Adding Shapes =
66 +
67 +The next step is to write so-called //features// for creating and adding elements to the diagrams. Each type of graphical element requires a //create// feature for the creation of corresponding meta model (//business model//) elements, and an //add// feature for adding a specific graphical representation to the diagram. A graphical representation is modeled with a so-called //pictogram element//, which contains a structure of //graphics algorithms// that specify how the element is rendered.
68 +
69 +1. (((
70 +Add the following feature class to your plugin, adapting references to meta model elements to your Turing Machine definition:
71 +
72 +{{code theme="Eclipse" language="java"}}
73 +import java.util.List;
74 +import org.eclipse.emf.ecore.EObject;
75 +import org.eclipse.graphiti.features.IFeatureProvider;
76 +import org.eclipse.graphiti.features.context.ICreateContext;
77 +import org.eclipse.graphiti.features.impl.AbstractCreateFeature;
78 +import org.eclipse.graphiti.mm.pictograms.Diagram;
79 +
80 +import de.cau.cs.rtprak.login.turingmodel.State;
81 +import de.cau.cs.rtprak.login.turingmodel.TuringFactory;
82 +import de.cau.cs.rtprak.login.turingmodel.TuringMachine;
83 +
84 +/**
85 + * A create feature for Turing Machine states.
86 + *
87 + * @author msp
88 + */
89 +public class StateCreateFeature extends AbstractCreateFeature {
90 +
91 + /**
92 + * Constructor for a state create feature.
93 + *
94 + * @param fp the feature provider for which the feature is created
95 + */
96 + public StateCreateFeature(IFeatureProvider fp) {
97 + super(fp, "State", "Create a State");
98 + }
99 +
100 + /**
101 + * {@inheritDoc}
102 + */
103 + public boolean canCreate(ICreateContext context) {
104 + return context.getTargetContainer() instanceof Diagram;
105 + }
106 +
107 + /**
108 + * {@inheritDoc}
109 + */
110 + public Object[] create(ICreateContext context) {
111 + // get the container business element
112 + List<EObject> containerObjects = context.getTargetContainer().getLink().getBusinessObjects();
113 + if (containerObjects.isEmpty() || !(containerObjects.get(0) instanceof TuringMachine)) {
114 + throw new IllegalStateException("The diagram does not contain a Turing Machine.");
115 + }
116 + TuringMachine machine = (TuringMachine) containerObjects.get(0);
117 +
118 + // create a new state
119 + State state = TuringFactory.eINSTANCE.createState();
120 + machine.getStates().add(state);
121 +
122 + // add the corresponding graphical representation
123 + addGraphicalRepresentation(context, state);
124 +
125 + return new Object[] { state };
126 + }
127 +
128 +}
129 +{{/code}}
130 +)))
131 +1. (((
132 +Add the following method to TuringFeatureProvider{{code language="none"}}{{/code}}, defining the content of the diagram editor's palette:
133 +
134 +{{code theme="Eclipse" language="java"}}
135 +/**
136 + * {@inheritDoc}
137 + */
138 +@Override
139 +public ICreateFeature[] getCreateFeatures() {
140 + return new ICreateFeature[] { new StateCreateFeature(this) };
141 +}
142 +{{/code}}
143 +)))
144 +1. (((
145 +Add the following feature class to your plugin and implement the {{code language="none"}}add{{/code}} method at the TODO note:
146 +
147 +{{code theme="Eclipse" language="java"}}
148 +import org.eclipse.graphiti.features.IFeatureProvider;
149 +import org.eclipse.graphiti.features.context.IAddContext;
150 +import org.eclipse.graphiti.features.impl.AbstractAddShapeFeature;
151 +import org.eclipse.graphiti.mm.pictograms.ContainerShape;
152 +import org.eclipse.graphiti.mm.pictograms.Diagram;
153 +import org.eclipse.graphiti.mm.pictograms.PictogramElement;
154 +import org.eclipse.graphiti.services.Graphiti;
155 +import org.eclipse.graphiti.services.IGaService;
156 +
157 +import de.cau.cs.rtprak.login.turingmodel.State;
158 +
159 +/**
160 + * An add feature for Turing Machine states.
161 + *
162 + * @author msp
163 + */
164 +public class StateAddFeature extends AbstractAddShapeFeature {
165 +
166 + /**
167 + * Constructor for a state add feature.
168 + *
169 + * @param fp the feature provider for which the feature is created
170 + */
171 + public StateAddFeature(IFeatureProvider fp) {
172 + super(fp);
173 + }
174 +
175 + /**
176 + * {@inheritDoc}
177 + */
178 + public boolean canAdd(IAddContext context) {
179 + return context.getNewObject() instanceof State
180 + && context.getTargetContainer() instanceof Diagram;
181 + }
182 +
183 + /**
184 + * {@inheritDoc}
185 + */
186 + public PictogramElement add(IAddContext context) {
187 + // create a pictogram element for the state
188 + ContainerShape containerShape = Graphiti.getPeCreateService().createContainerShape(
189 + context.getTargetContainer(), true);
190 +  
191 + // TODO specify the concrete representation by adding at least one graphics algorithm to the shape
192 +  
193 + Graphiti.getPeCreateService().createChopboxAnchor(containerShape);
194 + link(containerShape, context.getNewObject());
195 + return containerShape;
196 + }
197 +
198 +}
199 +{{/code}}
200 +
201 +Use {{code language="none"}}Graphiti.getGaService(){{/code}} to get a service class for creating graphics algorithms and modifying their properties. You are free to design your model elements as you like. Find more information on how to solve this task in the official [[Graphiti Tutorial>>url:http://help.eclipse.org/juno/nav/23_1||shape="rect"]].
202 +)))
203 +1. (((
204 +Add the following method to TuringFeatureProvider{{code language="none"}}{{/code}}:
205 +
206 +{{code theme="Eclipse" language="java"}}
207 +private IAddFeature stateAddFeature = new StateAddFeature(this);
208 +
209 +/**
210 + * {@inheritDoc}
211 + */
212 +@Override
213 +public IAddFeature getAddFeature(IAddContext context) {
214 + if (stateAddFeature.canAdd(context)) {
215 + return stateAddFeature;
216 + }
217 + return super.getAddFeature(context);
218 +}
219 +{{/code}}
220 +)))
221 +1. Test the features in the diagram editor. You should now be able to select "State" in the editor's palette. Use this to create a few states. Note that if you create a state and later change the graphical representation in StateAddFeature, the previously created state will still look the same, since the add feature code is only applied to new states created from the palette.
222 +
223 += Creating and Adding Connections =
224 +
225 +While states can be represented as simple shapes, transitions are connections between two shapes. The process of creating such connections is similar to that for shapes.
226 +
227 +1. (((
228 +Add the following feature class to your plugin, adapting references to meta model elements to your Turing Machine definition and implementing the TODO part:
229 +
230 +{{code theme="Eclipse" language="java"}}
231 +import org.eclipse.graphiti.features.IFeatureProvider;
232 +import org.eclipse.graphiti.features.context.ICreateConnectionContext;
233 +import org.eclipse.graphiti.features.context.impl.AddConnectionContext;
234 +import org.eclipse.graphiti.features.impl.AbstractCreateConnectionFeature;
235 +import org.eclipse.graphiti.mm.pictograms.Anchor;
236 +import org.eclipse.graphiti.mm.pictograms.Connection;
237 +
238 +import de.cau.cs.rtprak.login.turingmodel.State;
239 +import de.cau.cs.rtprak.login.turingmodel.Transition;
240 +import de.cau.cs.rtprak.login.turingmodel.TuringFactory;
241 +
242 +/**
243 + * A create feature for Turing Machine transitions.
244 + *
245 + * @author msp
246 + */
247 +public class TransitionCreateFeature extends AbstractCreateConnectionFeature {
248 +
249 + /**
250 + * Constructor for a transition create feature.
251 + *
252 + * @param fp the feature provider for which the feature is created
253 + */
254 + public TransitionCreateFeature(IFeatureProvider fp) {
255 + super(fp, "Transition", "Create a Transition");
256 + }
257 +
258 + /**
259 + * Retrieve the state linked with the given anchor's parent.
260 + *
261 + * @param anchor an anchor for the source or target of the new connection
262 + * @return the corresponding state, or {@code null} if there is none
263 + */
264 + private State getState(Anchor anchor) {
265 + if (anchor != null) {
266 + Object object = getBusinessObjectForPictogramElement(anchor.getParent());
267 + if (object instanceof State) {
268 + return (State) object;
269 + }
270 + }
271 + return null;
272 + }
273 +
274 + /**
275 + * {@inheritDoc}
276 + */
277 + public boolean canStartConnection(ICreateConnectionContext context) {
278 + return getState(context.getSourceAnchor()) != null;
279 + }
280 +
281 + /**
282 + * {@inheritDoc}
283 + */
284 + public boolean canCreate(ICreateConnectionContext context) {
285 + return getState(context.getSourceAnchor()) != null
286 + && getState(context.getTargetAnchor()) != null;
287 + }
288 +
289 + /**
290 + * {@inheritDoc}
291 + */
292 + public Connection create(ICreateConnectionContext context) {
293 + State source = getState(context.getSourceAnchor());
294 + State target = getState(context.getTargetAnchor());
295 + if (source == null || target == null) {
296 + throw new IllegalStateException("Cannot retrieve the source or target.");
297 + }
298 +
299 + // TODO create new transition with the specified source and target state
300 +
301 + AddConnectionContext addContext = new AddConnectionContext(context.getSourceAnchor(),
302 + context.getTargetAnchor());
303 + addContext.setNewObject(transition);
304 + return (Connection) getFeatureProvider().addIfPossible(addContext);
305 + }
306 +
307 +}
308 +{{/code}}
309 +)))
310 +1. (((
311 +Add the following method to {{code language="none"}}TuringFeatureProvider{{/code}}, adding more content to the diagram editor's palette:
312 +
313 +{{code theme="Eclipse" language="java"}}
314 +/**
315 + * {@inheritDoc}
316 + */
317 +@Override
318 +public ICreateConnectionFeature[] getCreateConnectionFeatures() {
319 + return new ICreateConnectionFeature[] { new TransitionCreateFeature(this) };
320 +}
321 +{{/code}}
322 +)))
323 +1. (((
324 +Add the following feature class to your plugin and implement the {{code language="none"}}add{{/code}} method at the TODO note:
325 +
326 +{{code theme="Eclipse" language="java"}}
327 +import org.eclipse.graphiti.features.IFeatureProvider;
328 +import org.eclipse.graphiti.features.context.IAddConnectionContext;
329 +import org.eclipse.graphiti.features.context.IAddContext;
330 +import org.eclipse.graphiti.features.impl.AbstractAddFeature;
331 +import org.eclipse.graphiti.mm.pictograms.Connection;
332 +import org.eclipse.graphiti.mm.pictograms.PictogramElement;
333 +import org.eclipse.graphiti.services.Graphiti;
334 +import org.eclipse.graphiti.services.IGaService;
335 +
336 +import de.cau.cs.rtprak.login.turingmodel.Transition;
337 +
338 +/**
339 + * An add feature for Turing Machine transitions.
340 + *
341 + * @author msp
342 + */
343 +public class TransitionAddFeature extends AbstractAddFeature {
344 +
345 + /**
346 + * Constructor for a transition add feature.
347 + *
348 + * @param fp the feature provider for which the feature is created
349 + */
350 + public TransitionAddFeature(IFeatureProvider fp) {
351 + super(fp);
352 + }
353 +
354 + /**
355 + * {@inheritDoc}
356 + */
357 + public boolean canAdd(IAddContext context) {
358 + return context instanceof IAddConnectionContext
359 + && context.getNewObject() instanceof Transition;
360 + }
361 +
362 + /**
363 + * {@inheritDoc}
364 + */
365 + public PictogramElement add(IAddContext context) {
366 + IAddConnectionContext addConnContext = (IAddConnectionContext) context;
367 + Connection connection = Graphiti.getPeCreateService().createFreeFormConnection(getDiagram());
368 + connection.setStart(addConnContext.getSourceAnchor());
369 + connection.setEnd(addConnContext.getTargetAnchor());
370 +
371 + // TODO specify the concrete representation by adding at least one graphics algorithm to the connection
372 +
373 + link(connection, context.getNewObject());
374 + return connection;
375 + }
376 +
377 +}
378 +{{/code}}
379 +
380 +Use {{code language="none"}}Graphiti.getGaService(){{/code}} to get a service class for creating graphics algorithms and modifying their properties. You are free to design your model elements as you like. Find more information on how to solve this task in the official [[Graphiti Tutorial>>url:http://help.eclipse.org/juno/nav/23_1||shape="rect"]].
381 +)))
382 +1. Register the {{code language="none"}}TransitionAddFeature{{/code}} in the {{code language="none"}}getAddFeature{{/code}} method of the {{code language="none"}}TuringFeatureProvider{{/code}} in the same way as done before for the {{code language="none"}}StateAddFeature{{/code}}.
383 +1. Test the features in the diagram editor. The palette should now contain an entry for creating transitions.
384 +
385 +\\
Confluence.Code.ConfluencePageClass[0]
Id
... ... @@ -1,1 +1,1 @@
1 -3604575
1 +3604585
URL
... ... @@ -1,1 +1,1 @@
1 -https://rtsys.informatik.uni-kiel.de/confluence//wiki/spaces/WS12EclPract/pages/3604575/Graphical Editors with Graphiti
1 +https://rtsys.informatik.uni-kiel.de/confluence//wiki/spaces/WS12EclPract/pages/3604585/Graphical Modeling with Graphiti