Changes for page KIML

Last modified by Richard Kreissig on 2025/01/30 12:04
<
From version < 2.1 >
edited by msp
on 2013/03/27 16:19
To version < 3.1 >
edited by msp
on 2013/03/27 16:38
>
Change comment: There is no comment for this version

Summary

Details

Page properties
Content
... ... @@ -1,35 +1,29 @@
1 1  This exercise will introduce the usage of the Eclipse Plugin Development Environment for developing new layout algorithms to be used in Eclipse diagram editors. Replace each <login> by your own login name (e.g. msp), and each <Login> by your login name with capitalized first letter (e.g. Msp). For any questions contact msp.
2 2  
3 -1. [[Install and set up Eclipse>>url:http://trac.rtsys.informatik.uni-kiel.de/trac/10ss-layout/wiki/Eclipse||style="" shape="rect" class="wiki"]]
4 -1. [[Check out>>url:http://trac.rtsys.informatik.uni-kiel.de/trac/10ss-layout/wiki/Subversion||style="" shape="rect" class="wiki"]] the following KIELER plugins:\\
3 +1. Install and set up Eclipse ((% style="color: rgb(255,0,0);" %)TODO: describe steps to install and set up Eclipse(%%))
4 +1. Import the following KIELER plugins: ((% style="color: rgb(255,0,0);" %)TODO: describe steps to access and import the KIELER plugins and update the list(%%))\\
5 5  1*. de.cau.cs.kieler.core
6 6  1*. de.cau.cs.kieler.core.kgraph
7 -1*. de.cau.cs.kieler.core.kgraph.edit
8 -1*. de.cau.cs.kieler.core.ui
9 -1*. de.cau.cs.kieler.keg
10 -1*. de.cau.cs.kieler.keg.diagram
11 -1*. de.cau.cs.kieler.kiml.layout
7 +1*. (% style="font-size: 10.0pt;line-height: 13.0pt;" %)de.cau.cs.kieler.kiml
8 +1*. (% style="font-size: 10.0pt;line-height: 13.0pt;" %)de.cau.cs.kieler.kiml.service
12 12  1*. de.cau.cs.kieler.kiml.ui
13 -1*. de.cau.cs.kieler.kiml.viewer
14 -1*. de.cau.cs.kieler.klay.layered
10 +1*. (% style="font-size: 10.0pt;line-height: 13.0pt;" %)de.cau.cs.kieler.klay.layered
15 15  1. Create a new plugin\\
16 -11. //File -> New -> Other... -> Plug-in Development -> Plug-in Project//
17 -11. Project name: de.cau.cs.rtprak.<login>.exercise1
18 -11. //Next// -> set version to //0.1.0.qualifier//, provider to //Christian-Albrechts-Universität zu Kiel//, and execution environment to //J2SE-1.5// (do this for all plugins that you create!)
12 +11. //File → New →// Other... //→// Plug-in Development //→// Plug-in Project
13 +11. Project name: de.cau.cs.rtprak.<login>.tutorial2
14 +11. //Next// //→// set version to //0.1.0.qualifier//, provider to //Christian-Albrechts-Universität zu Kiel//, and execution environment to //J2SE-1.5// (do this for all plugins that you create!)
19 19  11. The checkboxes in the //Options// group can be deactivated -> //Finish//
20 -1. [[Check in>>url:http://trac.rtsys.informatik.uni-kiel.de/trac/10ss-layout/wiki/Subversion||style="" shape="rect" class="wiki"]] the new plugin project into [[https:~~/~~/rtsys.informatik.uni-kiel.de/svn/teaching/prak/10ss-layout/exercises/>>url:https://rtsys.informatik.uni-kiel.de/svn/teaching/prak/10ss-layout/exercises/||shape="rect"]]<login>/
21 -1. Activate Checkstyle: right-click the project -> //Properties -> Checkstyle -> Checkstyle active for this project//
22 -1. Open the file META-INF/MANIFEST.MF -> //Dependencies// tab\\
23 -1*. Add the plugins de.cau.cs.kieler.core and de.cau.cs.kieler.kiml.layout to the list of dependencies, then save the file
24 -1. Create a //layout provider// class with the //New -> Class// wizard\\
25 -1*. Package: de.cau.cs.rtprak.<login>.exercise1
16 +1. Commit the new plugin project ((% style="color: rgb(255,0,0);" %)TODO: describe steps to commit plugin projects(%%))
17 +1. (% style="font-size: 10.0pt;line-height: 13.0pt;" %)Open the file META-INF/MANIFEST.MF //→// //Dependencies// tab(%%)\\
18 +1*. Add the plugins de.cau.cs.kieler.core and de.cau.cs.kieler.kiml to the list of dependencies, then save the file
19 +1. Create a //layout provider// class with the //New →// Class wizard\\
20 +1*. Package: de.cau.cs.rtprak.<login>.tutorial2
26 26  1*. Name: <Login>LayoutProvider
27 27  1*. Superclass: de.cau.cs.kieler.kiml.AbstractLayoutProvider
28 28  1. (((
29 -Implement the [[(% class="icon" %) (%%)layout provider>>url:http://rtsys.informatik.uni-kiel.de/~~kieler/doc/de/cau/cs/kieler/kiml/layout/AbstractLayoutProvider.html||style="" shape="rect" class="ext-link"]] class
30 -1. You should now see a checkstyle warning for the doLayout method\\
31 -1*. Add the keyword final to each method argument to eliminate the warning
32 -1. Add the following constant to the class:(% class="code" %)
24 +Implement the layout provider class
25 +1. (% style="font-size: 10.0pt;line-height: 13.0pt;" %)Add the following constant to the class:
26 +1. (% class="code" %)
33 33  (((
34 34  (% class="cm" style="color: rgb(153,153,136);" %)/~*~* default value for spacing between nodes. */(% class="kd" %)privatestaticfinal(% class="kt" style="color: rgb(68,85,136);" %)float(% class="o" %)=(% class="mf" style="color: rgb(0,153,153);" %)15.0f(% class="o" %);
35 35  
... ... @@ -37,7 +37,7 @@
37 37   DEFAULT_SPACING
38 38  }}}
39 39  )))
40 -1. Write the following lines at the beginning of the doLayout method (see [[(% class="icon" %) (%%)IKielerProgressMonitor>>url:http://rtsys.informatik.uni-kiel.de/~~kieler/doc/de/cau/cs/kieler/core/alg/IKielerProgressMonitor.html||style="" shape="rect" class="ext-link"]] and [[(% class="icon" %) (%%)KimlLayoutUtil>>url:http://rtsys.informatik.uni-kiel.de/~~kieler/doc/de/cau/cs/kieler/kiml/layout/util/KimlLayoutUtil.html||style="" shape="rect" class="ext-link"]]):(% class="code" %)
34 +1. Write the following lines at the beginning of the {{code language="none"}}doLayout{{/code}} method:(% class="code" %)
41 41  (((
42 42  (% class="o" %).(% class="na" style="color: rgb(0,128,128);" %)begin(% class="o" %)((% class="s" style="color: rgb(187,136,68);" %)"<Login> Layouter"(% class="o" %),(% class="mi" style="color: rgb(0,153,153);" %)1(% class="o" %));=.(% class="na" style="color: rgb(0,128,128);" %)getData(% class="o" %)(.(% class="na" style="color: rgb(0,128,128);" %)class(% class="o" %));(% class="kt" style="color: rgb(68,85,136);" %)float(% class="o" %)=.(% class="na" style="color: rgb(0,128,128);" %)getProperty(% class="o" %)(.(% class="na" style="color: rgb(0,128,128);" %)SPACING(% class="o" %));(% class="k" %)if(% class="o" %)(<(% class="mi" style="color: rgb(0,153,153);" %)0(% class="o" %)){=;}(% class="kt" style="color: rgb(68,85,136);" %)float(% class="o" %)=.(% class="na" style="color: rgb(0,128,128);" %)getProperty(% class="o" %)(.(% class="na" style="color: rgb(0,128,128);" %)BORDER_SPACING(% class="o" %));(% class="k" %)if(% class="o" %)(<(% class="mi" style="color: rgb(0,153,153);" %)0(% class="o" %)){=;}
43 43  
... ... @@ -53,7 +53,7 @@
53 53  
54 54  }}}
55 55  )))
56 -1. Write the following line at the end of the doLayout method:(% class="code" %)
50 +1. Write the following line at the end of the {{code language="none"}}doLayout{{/code}} method:(% class="code" %)
57 57  (((
58 58  (% class="o" %).(% class="na" style="color: rgb(0,128,128);" %)done(% class="o" %)();
59 59  
... ... @@ -61,9 +61,9 @@
61 61  }}}
62 62  )))
63 63  1. (((
64 -Implement the rest of the layouter such that the nodes of the input graph are all put in a row
65 -* See the [[(% class="icon" %) (%%)KGraph>>url:https://rtsys.informatik.uni-kiel.de/trac/kieler/wiki/KGraph||style="" shape="rect" class="ext-link"]] and [[(% class="icon" %) (%%)KLayoutData>>url:https://rtsys.informatik.uni-kiel.de/trac/kieler/wiki/KLayoutData||style="" shape="rect" class="ext-link"]] data structures: the input is a [[(% class="icon" %) (%%)KNode>>url:http://rtsys.informatik.uni-kiel.de/~~kieler/doc/de/cau/cs/kieler/core/kgraph/KNode.html||style="" shape="rect" class="ext-link"]] and holds the nodes of the graph in its list of children
66 -* Iterate over the nodes in the [[(% class="icon" %) (%%)getChildren()>>url:http://rtsys.informatik.uni-kiel.de/~~kieler/doc/de/cau/cs/kieler/core/kgraph/KNode.html#getChildren()||style="" shape="rect" class="ext-link"]] list of the layoutNode input
58 +Implement the rest of the layouter such that the nodes of the input graph are all put in a row.
59 +* See the [[KGraph>>doc:KIELER.KGraph Meta Model]] and [[KLayoutData>>doc:KIELER.KLayoutData Meta Model]] data structures: the input is a KNode and holds the nodes of the graph in its list of children
60 +* Iterate over the nodes in the {{code language="none"}}getChildren(){{/code}} list of the {{code language="none"}}layoutNode{{/code}} input
67 67  * Retrieve the size of a node using the following code:(% class="code" %)
68 68  (((
69 69  (% class="o" %)=.(% class="na" style="color: rgb(0,128,128);" %)getData(% class="o" %)(.(% class="na" style="color: rgb(0,128,128);" %)class(% class="o" %));(% class="kt" style="color: rgb(68,85,136);" %)float(% class="o" %)=.(% class="na" style="color: rgb(0,128,128);" %)getWidth(% class="o" %)();(% class="kt" style="color: rgb(68,85,136);" %)float(% class="o" %)=.(% class="na" style="color: rgb(0,128,128);" %)getHeight(% class="o" %)();
... ... @@ -136,8 +136,8 @@
136 136  Implement the routeEdges method:
137 137  * Each edge shall be drawn with three line segments: one vertical segment starting below the source node, one horizonzal segment, and another vertical segment ending below the target node.
138 138  * The horizontal segments of two different edges shall not have the same y-coordinate; for consecutive edges, the distance between their horizontal segments shall equal objectSpacing
139 -* See the attached image [[test-drawing.png>>url:http://trac.rtsys.informatik.uni-kiel.de/trac/10ss-layout/attachment/wiki/Exercises/Introduction/test-drawing.png||style="" title="Attachment 'test-drawing.png' in Exercises/Introduction" shape="rect" class="attachment"]](% class="noprint" %) [[~[~[image:url:http://trac.rtsys.informatik.uni-kiel.de/trac/10ss-layout/chrome/common/download.png~]~]>>url:http://trac.rtsys.informatik.uni-kiel.de/trac/10ss-layout/raw-attachment/wiki/Exercises/Introduction/test-drawing.png||style="" title="Download" shape="rect" class="trac-rawlink"]](%%) for an example
140 -* Find the edges using [[(% class="icon" %) (%%)getOutgoingEdges()>>url:http://rtsys.informatik.uni-kiel.de/~~kieler/doc/de/cau/cs/kieler/core/kgraph/KNode.html#getOutgoingEdges()||style="" shape="rect" class="ext-link"]] or [[(% class="icon" %) (%%)getIncomingEdges()>>url:http://rtsys.informatik.uni-kiel.de/~~kieler/doc/de/cau/cs/kieler/core/kgraph/KNode.html#getIncomingEdges()||style="" shape="rect" class="ext-link"]] on a node
133 +* See the attached image [[test-drawing.png>>url:http://trac.rtsys.informatik.uni-kiel.de/trac/10ss-layout/attachment/wiki/Exercises/Introduction/test-drawing.png||title="Attachment 'test-drawing.png' in Exercises/Introduction" shape="rect" class="attachment"]](% class="noprint" %) [[~[~[image:url:http://trac.rtsys.informatik.uni-kiel.de/trac/10ss-layout/chrome/common/download.png~]~]>>url:http://trac.rtsys.informatik.uni-kiel.de/trac/10ss-layout/raw-attachment/wiki/Exercises/Introduction/test-drawing.png||title="Download" shape="rect" class="trac-rawlink"]](%%) for an example
134 +* Find the edges using [[(% class="icon" %) (%%)getOutgoingEdges()>>url:http://rtsys.informatik.uni-kiel.de/~~kieler/doc/de/cau/cs/kieler/core/kgraph/KNode.html#getOutgoingEdges()||shape="rect" class="ext-link"]] or [[(% class="icon" %) (%%)getIncomingEdges()>>url:http://rtsys.informatik.uni-kiel.de/~~kieler/doc/de/cau/cs/kieler/core/kgraph/KNode.html#getIncomingEdges()||shape="rect" class="ext-link"]] on a node
141 141  * Get the edge layout of an edge to set bend points using this code:(% class="code" %)
142 142  (((
143 143  (% class="o" %)=.(% class="na" style="color: rgb(0,128,128);" %)getData(% class="o" %)(.(% class="na" style="color: rgb(0,128,128);" %)class(% class="o" %));
... ... @@ -152,8 +152,8 @@
152 152  {{{ KPoint point KLayoutDataFactory
153 153  }}}
154 154  )))
155 -* Use the [[(% class="icon" %) (%%)getBendPoints()>>url:http://rtsys.informatik.uni-kiel.de/~~kieler/doc/de/cau/cs/kieler/kiml/layout/klayoutdata/KEdgeLayout.html#getBendPoints()||style="" shape="rect" class="ext-link"]] list on the edgeLayout to add bend points (clear the list first to remove points from the previous layout)
156 -* Set the values of the points returned by [[(% class="icon" %) (%%)getSourcePoint()>>url:http://rtsys.informatik.uni-kiel.de/~~kieler/doc/de/cau/cs/kieler/kiml/layout/klayoutdata/KEdgeLayout.html#getSourcePoint()||style="" shape="rect" class="ext-link"]] and [[(% class="icon" %) (%%)getTargetPoint()>>url:http://rtsys.informatik.uni-kiel.de/~~kieler/doc/de/cau/cs/kieler/kiml/layout/klayoutdata/KEdgeLayout.html#getTargetPoint()||style="" shape="rect" class="ext-link"]] according to the positions where the edge leaves its source node and reches its target node
149 +* Use the [[(% class="icon" %) (%%)getBendPoints()>>url:http://rtsys.informatik.uni-kiel.de/~~kieler/doc/de/cau/cs/kieler/kiml/layout/klayoutdata/KEdgeLayout.html#getBendPoints()||shape="rect" class="ext-link"]] list on the edgeLayout to add bend points (clear the list first to remove points from the previous layout)
150 +* Set the values of the points returned by [[(% class="icon" %) (%%)getSourcePoint()>>url:http://rtsys.informatik.uni-kiel.de/~~kieler/doc/de/cau/cs/kieler/kiml/layout/klayoutdata/KEdgeLayout.html#getSourcePoint()||shape="rect" class="ext-link"]] and [[(% class="icon" %) (%%)getTargetPoint()>>url:http://rtsys.informatik.uni-kiel.de/~~kieler/doc/de/cau/cs/kieler/kiml/layout/klayoutdata/KEdgeLayout.html#getTargetPoint()||shape="rect" class="ext-link"]] according to the positions where the edge leaves its source node and reches its target node
157 157  )))
158 158  )))
159 159  1. Use your previous run configuration to test the edge router.
Confluence.Code.ConfluencePageClass[0]
Id
... ... @@ -1,1 +1,1 @@
1 -5505221
1 +5505223
URL
... ... @@ -1,1 +1,1 @@
1 -https://rtsys.informatik.uni-kiel.de/confluence//wiki/spaces/SS13LayPract/pages/5505221/KIML
1 +https://rtsys.informatik.uni-kiel.de/confluence//wiki/spaces/SS13LayPract/pages/5505223/KIML

Navigation

Quick Links

KIELER on GitHub
RTSYS Homepage