Wiki source code of KIELER Lightweight Diagrams

Last modified by Soeren Domroes on 2025/01/30 12:04

version	line-number	content
23.1	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:Projects.Archive.Eclipse Practical (winter term 201213).WebHome]]) or warming up for a thesis.
3.1	2
7.1	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.1	4
	5	= Preliminaries =
	6
19.1	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]]
9.1	8	1*. You can skip the size estimation part and focus on section I, III, IV A, and V.
19.1	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.
6.1	10	1. Make yourself familiar with the (% style="line-height: 1.4285715;" %){{code language="none"}}UML2UseCaseDiagramSynthesis{{/code}} contained that project
	11	1*. (((
	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}}.
	13	What is the purpose of {{code language="none"}}createNode(...){{/code}} and {{code language="none"}}getNode(...){{/code}}?
	14	)))
5.1	15
6.1	16	= Implement a simple turing diagram synthesis =
	17
19.1	18	1. Create a new diagram synthesis implementation by means of the KLighD project wizard as illustrated on [[doc:KIELER.Lightweight Diagrams (KLighD).WebHome]].
6.1	19	1. Add a dependency of the newly introduced plug-in project to the project defining your turing modeling language.
	20	1. Let your diagram synthesis create a node for each state declared in your state machine.
	21	1*. Let those node be depicted by ellipses or rounded rectangles containing a text field showing the corresponding state's name
11.1	22	1*. Add some space around the text by trying out all of
16.1	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}}
12.1	25	1**. {{code language="none"}}setAreaPlacementData().from(LEFT, ..., ..., TOP, ..., ...).to(RIGHT, ..., ..., BOTTOM, ..., ...){{/code}}, as well as
11.1	26	1**. (((
	27	(% class="p1" %)
12.1	28	(% class="s2" %)setPointPlacementData(% class="s3" %)LEFT(% class="s4" %)00.5f(% class="s3" %)TOP(% class="s4" %)00.5f(% class="s3" %)H_CENTRALV_CENTRAL(% class="s4" %)0000{{code language="none"}}(, , , , , , , , 1, 1, , ){{/code}}
11.1	29	)))
12.1	30	1*. Make yourself familiar with all of that opportunities, play around with the parameters to figure out their effects!
11.1	31	\\
6.1	32	1. Let your diagram synthesis create an edge for each transition being depicted by a polyline
	33	1*. Attach arrow decorators to those polylines.
	34
	35	= Augment your diagram synthesis =
	36
11.1	37	1. Highlight the initial state of your turing diagrams by setting some different color, line width, line style, or what ever
6.1	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	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	1. Improve the layout of your diagrams
13.1	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.
6.1	43
11.1	44	= Introduce synthesis and layout options =
	45
	46	1. Try out the {{code language="none"}}EcoreDiagramSynthesis{{/code}} as shown in the meeting, make yourself familiar with the implementation
	47	1*. Focus on the declaration of {{code language="none"}}SynthesisOption{{/code}}s and their usages, have also a look {{code language="none"}}SynthesisOption{{/code}}'s class documentation.
	48	1. Add a synthesis option to your diagram synthesis implementation for turning edge labels on & off.
	49	1. Feel free to add further options, e.g. for changing the coloring of the nodes and edges
	50	1. Provide some reasonable layout options in the side bar, allowing the tool user to tailor the diagrams' layout
	51
	52	= Add hierarchy =
	53
	54	1. Add a further KNode representing the TuringMachine, move all nodes representing states into that machine node
	55	1. Choose a reasonable basis figure for that node
	56	11. add a text field showing the machine's name (or some fixed title text)
	57	11. add a text field showing the machine's tape alphabet, extend your turing machine language (meta model) respectively, if necessary
	58	11. add a {{code language="none"}}KChildArea{{/code}}, e.g. by calling {{code language="none"}}addChildArea{{/code}}()
	59	11. define a grid-based children placement of the root figure by calling (% style="line-height: 1.4285715;" %)setGridPlacement(% class="s1" %)((% class="s2" %)1(% class="s1" %)){{code language="none"}}{{/code}}
	60	11*. What is the effect of the {{code language="none"}}1{{/code}}?
	61	11. add polylines acting as separators of the above figure elements
	62
14.1	63	= Manipulate displayed diagrams =
11.1	64
14.1	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
15.1	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
14.1	100	1*. test it by selecting a diagram node or edge and hitting your menu entry
	101
11.1	102

Wiki source code of KIELER Lightweight Diagrams

Navigation

Quick Links