Changes for page KIELER Lightweight Diagrams
Last modified by Soeren Domroes on 2025/01/30 12:04
Summary
-
Page properties (2 modified, 0 added, 0 removed)
-
Objects (1 modified, 0 added, 0 removed)
Details
- Page properties
-
- Parent
-
... ... @@ -1,1 +1,0 @@ 1 -Lightweight Diagrams (KLighD) - Content
-
... ... @@ -20,8 +20,7 @@ 20 20 1. Let your diagram synthesis create a node for each state declared in your state machine. 21 21 1*. Let those node be depicted by ellipses or rounded rectangles containing a text field showing the corresponding state's name 22 22 1*. Add some space around the text by trying out all of 23 -1**. {{code language="none"}}setSurroundingSpace(...){{/code}}, make sure to let the{{code language="none"}} rel{{/code}} parameter satisfy 24 -{{code language="none"}} rel < 0.5f{{/code}} 23 +1**. {{code language="none"}}setSurroundingSpace(...){{/code}} 25 25 1**. {{code language="none"}}setAreaPlacementData().from(LEFT, ..., ..., TOP, ..., ...).to(RIGHT, ..., ..., BOTTOM, ..., ...){{/code}}, as well as 26 26 1**. ((( 27 27 (% class="p1" %) ... ... @@ -38,8 +38,8 @@ 38 38 1. The actor nodes in {{code language="none"}}UML2UseCaseDiagramSynthesis{{/code}} are equipped with (node) labels. This is done by means of a convenience method provided {{code language="none"}}KLabelExtensions{{/code}}. 39 39 1*. Equip the edges of your turing diagrams with labels exhibiting the guard, new symbol, etc; use a fitting method for edge labels from {{code language="none"}}KLabelExtensions{{/code}}. 40 40 1. Improve the layout of your diagrams 41 -1 *. switch the layout algorithm to Graphviz {{code language="none"}}dot{{/code}} by setting the layout option //LayoutOptions//{{code language="none"}}.ALGORITHM{{/code}} on the root node to {{code language="none"}}de.cau.cs.kieler.graphviz.dot{{/code}}.42 -1 *. change the edge figures from polylines to splines.40 +11. switch the layout algorithm to Graphviz {{code language="none"}}dot{{/code}} by setting the layout option //LayoutOptions//{{code language="none"}}.ALGORITHM{{/code}} on the root node to {{code language="none"}}de.cau.cs.kieler.graphviz.dot{{/code}}. 41 +11. change the edge figures from polylines to splines. 43 43 44 44 = Introduce synthesis and layout options = 45 45 ... ... @@ -60,43 +60,6 @@ 60 60 11*. What is the effect of the {{code language="none"}}1{{/code}}? 61 61 11. add polylines acting as separators of the above figure elements 62 62 63 - =Manipulate displayed diagrams =62 + 64 64 65 -KLighD diagrams provide interactivity by allowing to link action to KRenderings 66 - 67 -1. add a {{code language="none"}}KAction{{/code}} to the title text of node representing the turing machine by calling 68 -{{code language="none"}}text.addAction({{/code}}{{code language="none"}}Trigger::DOUBLECLICK, KlighdConstants::ACTION_COLLAPSE_EXPAND){{/code}} 69 -1*. observe the effect and enjoy 70 -1. Implement your own action 71 -1*. have a look at {{code language="none"}}de.cau.cs.kieler.klighd.actions.CollapseExpandAction{{/code}} and its registration in the corresponding {{code language="none"}}plugin.xml{{/code}} 72 -1*. implement an own {{code language="none"}}IAction{{/code}} that manipulates the current diagram by changing colors, adding or removing elements, hiding and showing single nodes or edges, ... , and register it 73 -1*. associate it with a diagram part of your choice and test it 74 -1. Run your action via a menu contribution 75 -1*. ((( 76 -copy the following snippet into a {{code language="none"}}plugin.xml{{/code}} of your projects, replace{{code language="none"}} ##YOUR_PLUGINS_ID##{{/code}} and {{code language="none"}}##YOUR_ACTIONS_ID##{{/code}} by the corresponding strings 77 - 78 -{{code}} 79 - <extension 80 - id="##YOUR_PLUGINS_ID##.internal.commands.handler" 81 - point="org.eclipse.ui.menus"> 82 - <menuContribution 83 - allPopups="false" 84 - locationURI="toolbar:de.cau.cs.kieler.layout.toolbar"> 85 - <command 86 - commandId="de.cau.cs.kieler.klighd.ui.actionExecution" 87 - label="TestContribution" 88 - style="push"> 89 - <parameter 90 - name="de.cau.cs.kieler.klighd.ui.action" 91 - value="##YOUR_ACTIONS_ID##"> 92 - </parameter> 93 - </command> 94 - </menuContribution> 95 - </extension> 96 - 97 -{{/code}} 98 -))) 99 -1*. change {{code language="none"}}##YOUR_PLUGINS_ID##{{/code}} part of{{code language="none"}} {{/code}}the label, enter your action's id ({{code language="none"}}##YOUR_ACTIONS_ID##{{/code}}), feel free to put it at a different location, e.g. the context menu 100 -1*. test it by selecting a diagram node or edge and hitting your menu entry 101 - 102 102
- Confluence.Code.ConfluencePageClass[0]
-
- Id
-
... ... @@ -1,1 +1,1 @@ 1 -86511 211 +8651140 - URL
-
... ... @@ -1,1 +1,1 @@ 1 -https://rtsys.informatik.uni-kiel.de/confluence//wiki/spaces/KIELER/pages/86511 21/Student Tutorial on KIELER Lightweight Diagrams1 +https://rtsys.informatik.uni-kiel.de/confluence//wiki/spaces/KIELER/pages/8651140/Student Tutorial on KIELER Lightweight Diagrams