| <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> |
| <html> |
| |
| <head> |
| <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> |
| <title>Connection visualization</title> |
| <link href="../book.css" rel="Stylesheet" type="text/css"> |
| <link href="../code.css" rel="Stylesheet" type="text/css"> |
| </head> |
| |
| <body> |
| |
| <h1>Connection Visualization</h1> |
| <p>This chapter describes advanced connection visualization possibilities.</p> |
| <h2>Connection Decorators</h2> |
| <p>The framework supports two different connection decorators:</p> |
| <p><em>Static decorators</em> (inactive pictogram elements) are usually used for |
| connection ends.</p> |
| <p> |
| <img alt="" height="160" src="visio/connection-decorator-static.png" width="510"></p> |
| <p><strong>Figure: Static connection decorator</strong></p> |
| <p> </p> |
| <p><em>Dynamic decorators</em> (active pictogram elements) are usually of type text; |
| these decorators can be moved via drag & drop; they can be placed anywhere in the |
| diagram.</p> |
| <p> </p> |
| <p> |
| <img alt="" height="155" src="visio/connection-decorator-dynamic.png" width="511"></p> |
| <p><strong>Figure: Dynamic connection decorator</strong></p> |
| <p> </p> |
| <p>To create such connection decorators we have to do the following in the graphics |
| model:</p> |
| <ul> |
| <li>create a connection decorator</li> |
| <li>add a valid graphics algorithm to the connection decorator</li> |
| <li>add this connection decorator to a connection</li> |
| <li>optional: link connection decorator with the business object</li> |
| </ul> |
| <p>There are some technical limitations for static decorators: they are only supported |
| for graphics algorithms of type polyline or polygon (otherwise they can not be rotated) |
| and they can only be placed at the beginning or at the end of a connection.</p> |
| <p>In this example we want create a static connection decorator as shown above |
| and one dynamic connection decorator which displays the name of the association. |
| For simplification the static connection decorator will be created without consideration |
| of the real values in the business model (types of association ends).</p> |
| <p>The decorators will be added in the <a href="add-connection-feature.htm">add |
| connection feature</a>. The following changes must be done in this feature. |
| First add a helper method to the add connection feature which creates the graphics |
| algorithm for the static decorator:</p> |
| <!-- Begin code ------------------------------------------------------------------------------- --> |
| <p> </p> |
| <div class="literallayout"> |
| <div class="incode"> |
| <p class="code"><span class="keyword">private </span>Polyline createArrow(GraphicsAlgorithmContainer |
| gaContainer) {<br> IGaService gaService = Graphiti.getGaService();<br> |
| Polyline polyline =<br> gaService.createPolyline(gaContainer, |
| <span class="keyword">new int</span>[] { -15, 10, 0, 0, -15,<br> |
| -10 });<br> polyline.setForeground(manageColor(<span class="string"><em>E_REFERENCE_FOREGROUND</em></span>));<br> |
| polyline.setLineWidth(2);<br> <span class="keyword">return</span> polyline;<br>} |
| </p> |
| </div> |
| </div> |
| <p> </p> |
| <!-- End code ------------------------------------------------------------------------------- --> |
| <p>Then create the connection decorators at the end of the add method of the add |
| connection feature, as explained in the following code snippet:</p> |
| <!-- Begin code ------------------------------------------------------------------------------- --> |
| <p> </p> |
| <div class="literallayout"> |
| <div class="incode"> |
| <p class="code"><span class="keyword"> public </span>PictogramElement |
| add(IAddContext context) {<br> <br> |
| <span class="comment">// ... EXISTING CODING ...</span><br> <br> |
| <span class="comment">// add dynamic text decorator for the association |
| name </span><br> ConnectionDecorator textDecorator |
| =<br> peCreateService.createConnectionDecorator(connection, |
| <span class="keyword">true</span>,<br> |
| 0.5, <span class="keyword">true</span>);<br> Text |
| text = gaService.createDefaultText(getDiagram(),textDecorator);<br> |
| text.setForeground(manageColor(IColorConstant.<span class="string"><em>BLACK</em></span>));<br> |
| gaService.setLocation(text, 10, 0);<br> |
| <span class="comment">// set reference name in the text decorator</span><br> |
| EReference eReference = (EReference) context.getNewObject();<br> |
| text.setValue(eReference.getName());<br> <br> |
| <span class="comment">// add static graphical decorator (composition and |
| navigable)</span><br> ConnectionDecorator cd;<br> |
| cd = peCreateService<br> |
| .createConnectionDecorator(connection, <span class="keyword">false</span>, |
| 1.0, <span class="keyword">true</span>);<br> createArrow(cd);<br> |
| <span class="keyword">return </span>connection;<br> }</p> |
| </div> |
| </div> |
| <p> </p> |
| <!-- End code ------------------------------------------------------------------------------- --> |
| <h2>Test: Display and Move Connection Decorators</h2> |
| <p>Start the editor again and test these new connection decorators:</p> |
| <ol> |
| <li>create or open a diagram</li> |
| <li>create a new EReference between two EClasses; you can see the two decorators |
| on the EReference</li> |
| <li>move the EClasses; you can see that the static decorator (arrow) rotate |
| automatically</li> |
| <li>move the dynamic decorator (text) via drag & drop</li> |
| </ol> |
| <p> </p> |
| |
| </body> |
| |
| </html> |
