| <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> | |
| <html> | |
| <head> | |
| <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> | |
| <title>Providing add functionality</title> | |
| <link href="../book.css" rel="Stylesheet" type="text/css"> | |
| <link href="../code.css" rel="Stylesheet" type="text/css"> | |
| </head> | |
| <body> | |
| <h1>Providing Add Functionality</h1> | |
| <p>A detailed description of the architecture and basic concepts of Graphiti can | |
| be found <a href="graphiti-introduction.htm#Architecture_and_Basic_Concepts">here</a>.</p> | |
| <h2>Architecture: Pictogram Model Linked With Domain Model</h2> | |
| <p>In the terms of Graphiti “add” means to add a graphical representation | |
| of an existing domain model object (= business object) to the diagram. What kinds | |
| of business objects can be added to a diagram of a specific type is decided by the | |
| add features delivered by the feature provider.</p> | |
| <p>For our example the graphical representation of a EClass is illustrated in the | |
| Figure. We want to see a rounded rectangle containing a separator like horizontal | |
| line and above that line the name of the corresponding EClass.</p> | |
| <p> </p> | |
| <p> | |
| <img alt="Graphical representation of a | |
| EClass" height="117" src="visio/package-shape.gif" width="155"></p> | |
| <p><strong>Figure: Graphical representation of a EClass</strong></p> | |
| <p> </p> | |
| <p>Graphiti supports a kind of linkage between elements of the domain model and | |
| elements of the model defining the graphical representation – the so called <em> | |
| Pictograms Model.</em> These links are called <em>pictogram links</em>. Each diagram | |
| contains one container for all pictogram links – called <em>diagram link</em>.</p> | |
| <p>You can see the linkage structure of the example in the Figure: Column one shows | |
| the entity model of the graphical representation of exactly one EClass. A container | |
| shape aggregates two child shapes (a container shape itself can be aggregated in | |
| another container shape or in a diagram). All three shapes themselves aggregate | |
| specific graphics algorithms, providing the complete information to allow the rendering | |
| on a screen. Examples for this information are background color, foreground color, | |
| size, position, visibility and line width. In our example we have a rounded rectangle | |
| providing an additional corner radius, a polyline having defined end- and bendpoints | |
| and a text label containing a text value.</p> | |
| <p> </p> | |
| <p><img alt="" height="350" src="visio/pictogram-model.png" width="557"></p> | |
| <p><strong>Figure: Linkage structure example</strong></p> | |
| <p> </p> | |
| <p>The container shape and likewise the shape containing the text label are related | |
| to a corresponding EClass. This relationship is realized through special link objects | |
| (pictogram link) holding references to both sides: to the pictograms side and to | |
| the business side.</p> | |
| <h2>Creating an add feature</h2> | |
| <p>In this example we want to enable the editor’s users to add EClasses to the diagram. | |
| As a result it should be possible to drag an EClass from the tree and drop it on | |
| the diagram. Therefore we have to create an add feature and make it available in | |
| the feature provider.</p> | |
| <p>An add feature has to implement the interface | |
| <a href="../../../javadoc/org/eclipse/graphiti/features/IAddFeature.html">IAddFeature</a>. | |
| Instead of implementing it directly it should extend one of the available base classes. | |
| In this example we extend the base class | |
| <a href="../../../javadoc/org/eclipse/graphiti/features/impl/AbstractAddShapeFeature.html"> | |
| AbstractAddShapeFeature</a>.</p> | |
| <p>In this case we have to implement/overwrite two methods:</p> | |
| <ul> | |
| <li>The method | |
| <a href="../../../javadoc/org/eclipse/graphiti/func/IAdd.html#canAdd(org.eclipse.graphiti.features.context.IAddContext)"> | |
| canAdd</a> has to check the given context and therefore it decides if a business | |
| object can be added.</li> | |
| <li>The method | |
| <a href="../../../javadoc/org/eclipse/graphiti/func/IAdd.html#add(org.eclipse.graphiti.features.context.IAddContext)"> | |
| add</a> finally has to create the pictogram structure described above and has | |
| to establish the linkage to the business object. Additionally we have to create | |
| graphics algorithms and place them at the appropriate location (get location | |
| from given context). Additionally, the name of the EClass has to be set as the | |
| text label’s value. </li> | |
| </ul> | |
| <p>You can see the complete implementation of the add feature here:</p> | |
| <!-- Begin code ------------------------------------------------------------------------------- --> | |
| <p> </p> | |
| <div class="literallayout"> | |
| <div class="incode"> | |
| <p class="code"><span class="keyword">package </span>org.eclipse.graphiti.examples.tutorial.features;<br> <br> | |
| <span class="keyword">public class</span> TutorialAddEClassFeature | |
| <span class="keyword">extends </span>AbstractAddShapeFeature {<br> <br> | |
| <span class="keyword">private static final</span> IColorConstant | |
| <span class="string"><em>CLASS_TEXT_FOREGROUND</em></span> =<br> | |
| <span class="keyword">new </span>ColorConstant(51, 51, 153);<br> <br> | |
| <span class="keyword">private static final</span> IColorConstant | |
| <span class="string"><em>CLASS_FOREGROUND</em></span> =<br> | |
| <span class="keyword">new </span>ColorConstant(255, 102, 0);<br> <br> | |
| <span class="keyword">private static final</span> IColorConstant | |
| <span class="string"><em>CLASS_BACKGROUND</em></span> =<br> | |
| <span class="keyword">new </span>ColorConstant(255, 204, 153);<br> <br> | |
| <span class="keyword">public </span>TutorialAddEClassFeature(IFeatureProvider | |
| fp) {<br> | |
| <span class="keyword">super</span>(fp);<br> }<br> <br> | |
| <span class="keyword">public </span>boolean canAdd(IAddContext context) | |
| {<br> <span class="comment">// | |
| check if user wants to add a EClass</span><br> | |
| <span class="keyword">if </span>(context.getNewObject() | |
| <span class="keyword">instanceof </span>EClass) {<br> | |
| <span class="comment">// check if user wants to add to a diagram</span><br> | |
| <span class="keyword">if (</span>context.getTargetContainer() | |
| <span class="keyword">instanceof </span>Diagram) {<br> | |
| <span class="keyword"> return true</span>;<br> | |
| }<br> }<br> | |
| <span class="keyword"> return false</span>;<br> }<br> <br> | |
| <span class="keyword">public </span>PictogramElement add(IAddContext context) | |
| {<br> EClass addedClass = (EClass) | |
| context.getNewObject();<br> Diagram | |
| targetDiagram = (Diagram) context.getTargetContainer();<br> <br> | |
| <span class="comment">// CONTAINER SHAPE WITH ROUNDED RECTANGLE</span><br> | |
| IPeCreateService peCreateService = Graphiti.getPeCreateService();<br> | |
| ContainerShape containerShape =<br> | |
| peCreateService.createContainerShape(targetDiagram, | |
| <span class="keyword">true</span>);<br> <br> | |
| <span class="comment">// define a default size for the shape</span><br> | |
| <span class="keyword">int </span>width = 100;<br> | |
| <span class="keyword">int </span>height = 50; <br> | |
| IGaService gaService = Graphiti.getGaService();<br> <br> | |
| {<br> | |
| <span class="comment">// create and set graphics algorithm</span><br> | |
| RoundedRectangle roundedRectangle =<br> | |
| gaService.createRoundedRectangle(containerShape, 5, 5);<br> | |
| roundedRectangle.setForeground(manageColor(<em class="string">CLASS_FOREGROUND</em>));<br> | |
| roundedRectangle.setBackground(manageColor(<span class="string"><em>CLASS_BACKGROUND</em></span>));<br> | |
| roundedRectangle.setLineWidth(2);<br> | |
| gaService.setLocationAndSize(roundedRectangle,<br> | |
| context.getX(), context.getY(), width, height);<br> <br> | |
| <span class="comment">// if added Class has no resource we add it to the | |
| resource <br> | |
| // of the diagram<br> | |
| // in a real scenario the business model would have its own resource</span><br> | |
| <span class="keyword"> if</span> (addedClass.eResource() == | |
| <span class="keyword">null</span>) {<br> | |
| getDiagram().eResource().getContents().add(addedClass);<br> | |
| }<br> | |
| <span class="comment">// create link and wire it</span><br> | |
| link(containerShape, addedClass);<br> | |
| }<br> <br> | |
| <span class="comment">// SHAPE WITH LINE</span><br> | |
| {<br> | |
| <span class="comment">// create shape for line</span><br> | |
| Shape shape = peCreateService.createShape(containerShape, | |
| <span class="keyword">false</span>);<br> <br> | |
| <span class="comment">// create and set graphics algorithm</span><br> | |
| Polyline polyline =<br> | |
| gaService.createPolyline(shape, <span class="keyword">new int</span>[] { | |
| 0, 20, width, 20 });<br> | |
| polyline.setForeground(manageColor(<span class="string"><em>CLASS_FOREGROUND</em></span>));<br> | |
| polyline.setLineWidth(2);<br> | |
| }<br> <br> | |
| <span class="comment">// SHAPE WITH TEXT</span><br> | |
| {<br> | |
| <span class="comment">// create shape for text</span><br> | |
| Shape shape = peCreateService.createShape(containerShape, | |
| <span class="keyword">false</span>);<br> <br> | |
| <span class="comment">// create and set text graphics algorithm</span><br> | |
| Text text = gaService.createDefaultText(getDiagram(), shape,<br> | |
| addedClass.getName());<br> | |
| text.setForeground(manageColor(<span class="string"><em>CLASS_TEXT_FOREGROUND</em></span>));<br> | |
| text.setHorizontalAlignment(Orientation.<span class="string"><em>ALIGNMENT_CENTER</em></span>);<br> | |
| text.setVerticalAlignment(Orientation.<span class="string"><em>ALIGNMENT_CENTER</em></span>);<br> | |
| text.getFont().setBold(<span class="keyword">true</span>);<br> | |
| gaService.setLocationAndSize(text, 0, 0, width, 20);<br> <br> | |
| <span class="comment">// create link and wire it</span><br> | |
| link(shape, addedClass);<br> }<br> <br> | |
| <span class="keyword">return </span>containerShape;<br> | |
| }<br>}<br> </p> | |
| </div> | |
| </div> | |
| <p> </p> | |
| <!-- End code ------------------------------------------------------------------------------- --> | |
| <h2>Test: Add a EClass</h2> | |
| <p class="Note">Note: if the project wizard for a "<a href="example-projects.htm">New | |
| Graphiti Sample Project</a>" does not work correctly and you can not test the add | |
| feature as described below, please continue with the next chapter and | |
| <a href="create-feature.htm">provide create functionality</a>. That will allow to | |
| test the add feature directly in the diagram.</p> | |
| <p>Now we can start the editor again. It should be possible to drop an EClass from | |
| the tree of the Graphiti "Test" project into the diagram Test-1. </p> | |
| <p> </p> | |
| <p><img alt="" height="302" src="visio/predefined-eclass.png" width="788"></p> | |
| <p> </p> | |
| <p><strong>Figure: Add PredefinedEClass to the editor</strong></p> | |
| <p> </p> | |
| <p>Without any further implementations it should be possible to move the EClass | |
| shapes around, resize them, remove them (context menu) and even delete them.</p> | |
| <p> </p> | |
| </body> | |
| </html> |