Changes for page KIML

Last modified by Richard Kreissig on 2025/01/30 12:04

From version < 4.1 >

edited by msp
on 2013/03/27 16:50

To version < 2.1 >

edited by msp
on 2013/03/27 16:19

Change comment: There is no comment for this version

Raw
Rendered

Summary

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

Details

Page properties

Content

@@ -1,29 +1,35 @@
  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.
--1. Install and set up Eclipse ((% style="color: rgb(255,0,0);" %)TODO: describe steps to install and set up Eclipse(%%))
--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(%%))\\
++1. [[Install and set up Eclipse>>url:http://trac.rtsys.informatik.uni-kiel.de/trac/10ss-layout/wiki/Eclipse||style="" shape="rect" class="wiki"]]
++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:\\
 *. de.cau.cs.kieler.core
 *. de.cau.cs.kieler.core.kgraph
--1*. (% style="font-size: 10.0pt;line-height: 13.0pt;" %)de.cau.cs.kieler.kiml
--1*. (% style="font-size: 10.0pt;line-height: 13.0pt;" %)de.cau.cs.kieler.kiml.service
++1*. de.cau.cs.kieler.core.kgraph.edit
++1*. de.cau.cs.kieler.core.ui
++1*. de.cau.cs.kieler.keg
++1*. de.cau.cs.kieler.keg.diagram
++1*. de.cau.cs.kieler.kiml.layout
 *. de.cau.cs.kieler.kiml.ui
--1*. (% style="font-size: 10.0pt;line-height: 13.0pt;" %)de.cau.cs.kieler.klay.layered
++1*. de.cau.cs.kieler.kiml.viewer
++1*. de.cau.cs.kieler.klay.layered
 . Create a new plugin\\
--11. //File → New →// Other... //→// Plug-in Development //→// Plug-in Project
--11. Project name: de.cau.cs.rtprak.<login>.tutorial2
--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!)
++11. //File -> New -> Other... -> Plug-in Development -> Plug-in Project//
++11. Project name: de.cau.cs.rtprak.<login>.exercise1
++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!)
 . The checkboxes in the //Options// group can be deactivated -> //Finish//
--1. Commit the new plugin project ((% style="color: rgb(255,0,0);" %)TODO: describe steps to commit plugin projects(%%))
--1. (% style="font-size: 10.0pt;line-height: 13.0pt;" %)Open the file META-INF/MANIFEST.MF //→// //Dependencies// tab(%%)\\
--1*. Add the plugins de.cau.cs.kieler.core and de.cau.cs.kieler.kiml to the list of dependencies, then save the file.[[attach:test-drawing.png]]
--1. Create a //layout provider// class with the //New →// Class wizard\\
--1*. Package: de.cau.cs.rtprak.<login>.tutorial2
++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>/
++1. Activate Checkstyle: right-click the project -> //Properties -> Checkstyle -> Checkstyle active for this project//
++1. Open the file META-INF/MANIFEST.MF -> //Dependencies// tab\\
++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
++1. Create a //layout provider// class with the //New -> Class// wizard\\
++1*. Package: de.cau.cs.rtprak.<login>.exercise1
 *. Name: <Login>LayoutProvider
 *. Superclass: de.cau.cs.kieler.kiml.AbstractLayoutProvider
 . (((
--Implement the layout provider class
--1. (% style="font-size: 10.0pt;line-height: 13.0pt;" %)Add the following constant to the class:
--1. (% class="code" %)
++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
++1. You should now see a checkstyle warning for the doLayout method\\
++1*. Add the keyword final to each method argument to eliminate the warning
++1. Add the following constant to the class:(% class="code" %)
  (((
  (% 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" %);
@@ -31,7 +31,7 @@
          DEFAULT_SPACING
  }}}
  )))
--1. Write the following lines at the beginning of the {{code language="none"}}doLayout{{/code}} method:(% class="code" %)
++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" %)
  (((
  (% 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" %)){=;}
@@ -47,7 +47,7 @@
  }}}
  )))
--1. Write the following line at the end of the {{code language="none"}}doLayout{{/code}} method:(% class="code" %)
++1. Write the following line at the end of the doLayout method:(% class="code" %)
  (((
  (% class="o" %).(% class="na" style="color: rgb(0,128,128);" %)done(% class="o" %)();
@@ -55,9 +55,9 @@
  }}}
  )))
 . (((
--Implement the rest of the layouter such that the nodes of the input graph are all put in a row.
--* 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
--* Iterate over the nodes in the {{code language="none"}}getChildren(){{/code}} list of the {{code language="none"}}layoutNode{{/code}} input
++Implement the rest of the layouter such that the nodes of the input graph are all put in a row
++* 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
++* 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
  * Retrieve the size of a node using the following code:(% class="code" %)
  (((
  (% 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" %)();
@@ -75,57 +75,63 @@
          nodeLayouty
  }}}
  )))
--* {{code language="none"}}objectSpacing{{/code}} shall be the spacing to be left between each pair of nodes.
--* {{code language="none"}}borderSpacing{{/code}} shall be the spacing to be left to the borders of the drawing: the first node's coordinates shall be (borderSpacing, borderSpacing).
--* At the end of the method, set the width and height of {{code language="none"}}parentLayout{{/code}} so that it is large enough to hold the whole drawing, including borders.
--* Edges may be ignored for now.
++* objectSpacing shall be the spacing to be left between each pair of nodes
++* borderSpacing shall be the spacing to be left to the borders of the drawing: the first node's coordinates shall be (borderSpacing, borderSpacing)
++* At the end of the method, set the width and height of parentLayout so that it is large enough to hold the whole drawing, including borders
++* Edges may be ignored for now
  )))
  )))
--1. Open the file META-INF/MANIFEST.MF //→// //Extensions// tab\\
++1. Open the file META-INF/MANIFEST.MF -> //Extensions// tab\\
 . Add an extension for de.cau.cs.kieler.kiml.layout.layoutProviders
--11. Right-click the extension //→// //New// //→// //layoutProvider//
--11. Set //name// to //<Login> Test Layouter//, //class// to de.cau.cs.rtprak.<login>.tutorial2.<Login>LayoutProvider
--11. Right-click the new //layoutProvider// //→// //New// //→// //knownOption//, set //option// to de.cau.cs.kieler.spacing
--11. Add another //knownOption//, set to de.cau.cs.kieler.borderSpacing
--1. //Run// //→// //Run Configurations...// //→// right-click //Eclipse Application// //→// //New//\\
++11. Right-click the extension -> //New// -> //layoutProvider//
++11. Set //name// to //<Login> Test Layouter//, //class// to de.cau.cs.rtprak.<login>.exercise1.<Login>LayoutProvider
++11. Right-click the new //layoutProvider// -> //New// -> //knownOption//, set //option// to de.cau.cs.kieler.layout.options.minSpacing
++11. Add another //knownOption//, set to de.cau.cs.kieler.layout.options.borderSpacing
++1. //Run// -> //Run Configurations...// -> right-click //Eclipse Application// -> //New//\\
 . Name: //Layout//
--11. For testing the layouter, a new workspace location will be created; you may configure its destination in //Workspace Data// //→// //Location//
--11. Add the program arguments {{code language="none"}}-debug -consoleLog{{/code}} in the //Arguments// tab.
++11. For testing the layouter, a new workspace location will be created; you may configure its destination in //Workspace Data// -> //Location//
++11. Add the program arguments -debug -consoleLog in the //Arguments// tab
 . Go to //Plug-ins// tab, select //Launch with: plug-ins selected below only//
 . //Deselect All//, activate //Workspace// checkbox, //Add Required Plug-ins//, //Apply//, //Run//
 . Test the layouter in the new Eclipse instance:\\
--11. //New// //→// //Project...// //→// //General// //→// //Project//, name //test//
--11. Right-click test project //→// //New// //→// //Other...// //→// //KEG Diagram// ((% style="color: rgb(255,0,0);" %)TODO: if graphs shall be created in another way, describe it here(%%))
--11. Create a graph using the palette on the right.
--11. //Window// //→// //Show View// //→// //Other...// //→// //KIELER// //→// //Layout//
--11. While the graph diagram is open, set //Layout Provider or Type// in the //Layout// view to //<Login> Test Layouter.//
--11. Open the additional views //Layout Graph// and //Layout Time.//
--11. Trigger layout with the //KIELER Layout// button in the toolbar or Ctrl+R L (first Ctrl+R, then L).
--11. See the direct input and output of your algorithm in the //Layout Graph// view.
--11. See the execution time analysis in the //Layout Time// view.
++11. //New// -> //Project...// -> //General// -> //Project//, name //test//
++11. Right-click test project -> //New// -> //Other...// -> //Graphs Diagram//
++11. Create a graph using the palette on the right
++11. //Window// -> //Show View// -> //Other...// -> //KIELER// -> //Layout//
++11. While the graph diagram is open, set //Layout Provider or Type// in the //Layout// view to //<Login> Test Layouter//
++11. Open the additional views //Layout Graph// and //Layout Time//
++11. Trigger layout with //KIELER// -> //Layout// or Ctrl+R L (first Ctrl+R, then L) or the button in the toolbar
++11. See the direct input and output of your algorithm in the //Layout Graph// view: //Pre-Layout// is the input, //Post-Layout// is the output
++11. See the execution time analysis in the //Layout Time// view
 . (((
--Implement another class //EdgeRouter//.
++Implement another class //EdgeRouter// with superclass de.cau.cs.kieler.core.alg.AbstractAlgorithm
 . Add the following method:(% class="code" %)
  (((
++(% class="cm" style="color: rgb(153,153,136);" %)/~*~* * Route the edges that are connected with the children of the given node. * * @param parentNode the parent node of the input graph */(% class="kd" %)public(% class="kt" style="color: rgb(68,85,136);" %)void(% class="nf" style="color: rgb(153,0,0);" %)routeEdges(% class="o" %)((% class="kd" %)final(% class="o" %)){().(% class="na" style="color: rgb(0,128,128);" %)begin(% class="o" %)((% class="s" style="color: rgb(187,136,68);" %)"Edge Routing"(% class="o" %),(% class="mi" style="color: rgb(0,153,153);" %)1(% class="o" %));().(% class="na" style="color: rgb(0,128,128);" %)done(% class="o" %)();}
--\\\\\\\\\\\\\\
--
--{{{    /**     * Route the edges that are connected with the children of the given node.     * @param parentNode the parent node of the input graph     */     public void routeEdges(final KNode parentNode) {         getMonitor().begin("Edge Routing", 1);          getMonitor().done();     }}}}
++{{{
++       KNode parentNode
++        getMonitor
++
++        getMonitor
++
++}}}
  )))
--1. Add the following code to the end of the {{code language="none"}}doLayout{{/code}} method in your layout provider:(% class="code" %)
++1. Add the following code to the end of the doLayout method in your layout provider:(% class="code" %)
  (((
--(% class="o" %)=(% class="k" %)new(% class="o" %)();.(% class="na" style="color: rgb(0,128,128);" %)routeEdges(% class="o" %)();
++(% class="o" %)=(% class="k" %)new(% class="o" %)();.(% class="na" style="color: rgb(0,128,128);" %)reset(% class="o" %)(.(% class="na" style="color: rgb(0,128,128);" %)subTask(% class="o" %)((% class="mi" style="color: rgb(0,153,153);" %)1(% class="o" %)));.(% class="na" style="color: rgb(0,128,128);" %)routeEdges(% class="o" %)();
  {{{        EdgeRouter edgeRouter   EdgeRouter
++        edgeRouterprogressMonitor
          edgeRouterlayoutNode
  }}}
  )))
 . (((
--Implement the {{code language="none"}}routeEdges{{/code}} method:
++Implement the routeEdges method:
  * 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.
--* 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 {{code language="none"}}objectSpacing{{/code}}.
--* See the attached image [[attach:test-drawing.png]] for an example.
--* Find the edges using {{code language="none"}}getOutgoingEdges(){{/code}} or {{code language="none"}}getIncomingEdges(){{/code}} on a node.
++* 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
++* 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
++* 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
  * Get the edge layout of an edge to set bend points using this code:(% class="code" %)
  (((
  (% class="o" %)=.(% class="na" style="color: rgb(0,128,128);" %)getData(% class="o" %)(.(% class="na" style="color: rgb(0,128,128);" %)class(% class="o" %));
@@ -140,8 +140,8 @@
  {{{        KPoint point  KLayoutDataFactory
  }}}
  )))
--* Use the {{code language="none"}}getBendPoints(){{/code}} list on the {{code language="none"}}edgeLayout{{/code}} to add bend points (clear the list first to remove points from the previous layout).
--* Set the values of the points returned by {{code language="none"}}getSourcePoint(){{/code}} and {{code language="none"}}getTargetPoint(){{/code}} according to the positions where the edge leaves its source node and reches its target node.
++* 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)
++* 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
  )))
  )))
 . Use your previous run configuration to test the edge router.

Confluence.Code.ConfluencePageClass[0]

Id

@@ -1,1 +1,1 @@
--5505224
++5505221

URL

@@ -1,1 +1,1 @@
--https://rtsys.informatik.uni-kiel.de/confluence//wiki/spaces/SS13LayPract/pages/5505224/KIML
++https://rtsys.informatik.uni-kiel.de/confluence//wiki/spaces/SS13LayPract/pages/5505221/KIML

Changes for page KIML

Summary

Details

Navigation

Quick Links