Summary

• Page properties (3 modified, 0 added, 0 removed)
• Objects (1 modified, 0 added, 0 removed)
  • Confluence.Code.ConfluencePageClass[0]

Details

Page properties

Parent

...	...	@@ -1,1 +1,0 @@
1		-Lightweight Diagrams (KLighD)

Author

...	...	@@ -1,1 +1,1 @@
1		-XWiki.uru
	1	+XWiki.chsch

Content

...	...	@@ -4,9 +4,9 @@
4	4
5	5	= Preliminaries =
6	6
7		-1. Read about the ideas & motivation of KLighD in our paper "//Just Model!// – Putting Automatic Synthesis of Node-Link-Diagrams into Practice", cited at [[doc:KIELER.Home.Lightweight Diagrams (KLighD).WebHome]]
	7	+1. Read about the ideas & motivation of KLighD in our paper "//Just Model!// – Putting Automatic Synthesis of Node-Link-Diagrams into Practice", cited at [[doc:Lightweight Diagrams (KLighD)]]
8	8	1*. You can skip the size estimation part and focus on section I, III, IV A, and V.
9		-1. Install the KLighD from our latest release update site as demonstrated on [[doc:KIELER.Home.Lightweight Diagrams (KLighD).WebHome]] and import the examples project.
	9	+1. Install the KLighD from our latest release update site as demonstrated on [[doc:Lightweight Diagrams (KLighD)]] and import the examples project.
10	10	1. Make yourself familiar with the (% style="line-height: 1.4285715;" %){{code language="none"}}UML2UseCaseDiagramSynthesis{{/code}} contained that project
11	11	1*. (((
12	12	(% style="line-height: 1.4285715;" %)Have also a look at the {{code language="none"}}...Extensions{{/code}} classes mentioned in UML2UseCaseDiagramSynthesis, especially {{code language="none"}}KNodeExtensions{{/code}}.
...	...	@@ -15,13 +15,12 @@
15	15
16	16	= Implement a simple turing diagram synthesis =
17	17
18		-1. Create a new diagram synthesis implementation by means of the KLighD project wizard as illustrated on [[doc:KIELER.Home.Lightweight Diagrams (KLighD).WebHome]].
	18	+1. Create a new diagram synthesis implementation by means of the KLighD project wizard as illustrated on [[doc:Lightweight Diagrams (KLighD)]].
19	19	1. Add a dependency of the newly introduced plug-in project to the project defining your turing modeling language.
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		-8651121
	1	+8651140

URL

...	...	@@ -1,1 +1,1 @@
1		-https://rtsys.informatik.uni-kiel.de/confluence//wiki/spaces/KIELER/pages/8651121/Student Tutorial on KIELER Lightweight Diagrams
	1	+https://rtsys.informatik.uni-kiel.de/confluence//wiki/spaces/KIELER/pages/8651140/Student Tutorial on KIELER Lightweight Diagrams