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,0 +1,1 @@
	1	+KIELER.Lightweight Diagrams (KLighD).WebHome

Author

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

Content

...	...	@@ -1,12 +1,12 @@
1		-This tutorial fits into the row of our tutorials teaching the basics of Eclipse and Eclipse modeling technologies. It is intended to be performed by bachelor or master students taking part on practicals (e.g. [[doc:WS12EclPract.Eclipse Practical (winter term 201213)]]) or warming up for a thesis.
	1	+This tutorial fits into the row of our tutorials teaching the basics of Eclipse and Eclipse modeling technologies. It is intended to be performed by bachelor or master students taking part on practicals (e.g. [[doc:WS12EclPract.Eclipse Practical (winter term 201213).WebHome]]) or warming up for a thesis.
2	2
3	3	The aim of this tutorial is to make you familiar with KLighD and the KLighD way of creating diagrams of models and even any data structures being worth to be visualized by node-link-diagrams.
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:Lightweight Diagrams (KLighD)]]
	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.Lightweight Diagrams (KLighD).WebHome]]
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:Lightweight Diagrams (KLighD)]] and import the examples project.
	9	+1. Install the KLighD from our latest release update site as demonstrated on [[doc:KIELER.Lightweight Diagrams (KLighD).WebHome]] 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,12 +15,13 @@
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:Lightweight Diagrams (KLighD)]].
	18	+1. Create a new diagram synthesis implementation by means of the KLighD project wizard as illustrated on [[doc:KIELER.Lightweight Diagrams (KLighD).WebHome]].
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}}
	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}}
24	24	1**. {{code language="none"}}setAreaPlacementData().from(LEFT, ..., ..., TOP, ..., ...).to(RIGHT, ..., ..., BOTTOM, ..., ...){{/code}}, as well as
25	25	1**. (((
26	26	(% class="p1" %)
...	...	@@ -71,9 +71,31 @@
71	71	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
72	72	1*. associate it with a diagram part of your choice and test it
73	73	1. Run your action via a menu contribution
74		-1*. open the {{code language="none"}}xml{{/code}} view of {{code language="none"}}de.cau.cs.kieler.klighd.ui{{/code}}'s {{code language="none"}}plugin.xml{{/code}}
75		-1*. find the deactivated entry at the and of the file, copy it to a {{code language="none"}}plugin.xml{{/code}} of your projects and activate it
76		-1*. change the label, enter your action's id (see the action's registration), feel free to put it at a different location, e.g. the context menu
	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
77	77	1*. test it by selecting a diagram node or edge and hitting your menu entry
78	78
79	79

Confluence.Code.ConfluencePageClass[0]

Id

...	...	@@ -1,1 +1,1 @@
1		-10751229
	1	+8651121

URL

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