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 < 4.1 >

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

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,35 +1,29 @@
  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>>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:\\
++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(%%))\\
 *. de.cau.cs.kieler.core
 *. de.cau.cs.kieler.core.kgraph
--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
++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
 *. de.cau.cs.kieler.kiml.ui
--1*. de.cau.cs.kieler.kiml.viewer
--1*. de.cau.cs.kieler.klay.layered
++1*. (% style="font-size: 10.0pt;line-height: 13.0pt;" %)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>.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!)
++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!)
 . The checkboxes in the //Options// group can be deactivated -> //Finish//
--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
++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
 *. Name: <Login>LayoutProvider
 *. Superclass: de.cau.cs.kieler.kiml.AbstractLayoutProvider
 . (((
--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" %)
++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" %)
  (((
  (% 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" %);
@@ -37,7 +37,7 @@
          DEFAULT_SPACING
  }}}
  )))
--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" %)
++1. Write the following lines at the beginning of the {{code language="none"}}doLayout{{/code}} method:(% 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" %)){=;}
@@ -53,7 +53,7 @@
  }}}
  )))
--1. Write the following line at the end of the doLayout method:(% class="code" %)
++1. Write the following line at the end of the {{code language="none"}}doLayout{{/code}} method:(% class="code" %)
  (((
  (% class="o" %).(% class="na" style="color: rgb(0,128,128);" %)done(% class="o" %)();
@@ -61,9 +61,9 @@
  }}}
  )))
 . (((
--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
++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
  * 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" %)();
@@ -81,63 +81,57 @@
          nodeLayouty
  }}}
  )))
--* 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
++* {{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.
  )))
  )))
--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>.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//\\
++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//\\
 . 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 -debug -consoleLog 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 {{code language="none"}}-debug -consoleLog{{/code}} 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...// -> //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
++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.
 . (((
--Implement another class //EdgeRouter// with superclass de.cau.cs.kieler.core.alg.AbstractAlgorithm
++Implement another class //EdgeRouter//.
 . 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" %)();}
--{{{
--       KNode parentNode
--        getMonitor
--
--        getMonitor
--
--}}}
++\\\\\\\\\\\\\\
++
++{{{    /**     * 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();     }}}}
  )))
--1. Add the following code to the end of the doLayout method in your layout provider:(% class="code" %)
++1. Add the following code to the end of the {{code language="none"}}doLayout{{/code}} method in your layout provider:(% class="code" %)
  (((
--(% 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" %)();
++(% class="o" %)=(% class="k" %)new(% class="o" %)();.(% class="na" style="color: rgb(0,128,128);" %)routeEdges(% class="o" %)();
  {{{        EdgeRouter edgeRouter   EdgeRouter
--        edgeRouterprogressMonitor
          edgeRouterlayoutNode
  }}}
  )))
 . (((
--Implement the routeEdges method:
++Implement the {{code language="none"}}routeEdges{{/code}} 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 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
++* 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.
  * 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" %));
@@ -152,8 +152,8 @@
  {{{        KPoint point  KLayoutDataFactory
  }}}
  )))
--* 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 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 your previous run configuration to test the edge router.

Confluence.Code.ConfluencePageClass[0]

Id

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

URL

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

Changes for page KIML

Summary

Details

Navigation

Quick Links