Changes for page KIML

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

From version < 11.1 >

edited by cds
on 2013/04/11 14:08

To version < 8.1 >

edited by msp
on 2013/04/09 10:14

Change comment: There is no comment for this version

Raw
Rendered

Summary

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

Details

Page properties

Author

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

Content

@@ -2,15 +2,9 @@
  This tutorial is still being worked on. Don't start working on it just yet.
  {{/warning}}
--Welcome to the second tutorial! We will work our way through installing a proper Eclipse setup and developing a first very basic layout algorithm. The layout algorithm will integrate with KIML (KIELER Infrastructure for Meta-Layout), our very own framework that connects graphical editors with layout algorithms. Once you're finished, you should be able to create new Eclipse plug-ins and know how to write layout algorithms for KIML. And you should have a running Eclipse-based application that should look something like this:
++Welcome to the second tutorial! We will work our way through installing a proper Eclipse setup and developing a first very basic layout algorithm. The layout algorithm will integrate with KIML (KIELER Infrastructure for Meta-Layout), our very own framework that connects graphical editors with layout algorithms. Once you're finished, you should be able to create new Eclipse plug-ins and know how to write layout algorithms for KIML.
--
--
  {{warning title="ToDo"}}
--Insert screen shot of final application.
--{{/warning}}
--
--{{warning title="ToDo"}}
  Insert link to presentation slides.
  {{/warning}}
@@ -102,136 +102,102 @@
 . Start Eclipse and create a new workspace.
 . Setup your workspace as explained in [[this guide>>doc:KIELER.Configuring Eclipse]].
--1. We will now make the two local clones of our Git repositories known to Eclipse. To that end, open the //Git Repository Exploring// perspective through //Window// -> //Open Perspective// -> //Other//.
--1. Click on //Add an existing local Git repository// and choose the location of the tutorial repository. Note that when you open the repository entry, the branch you previously checked out is marked as the current branch under //Branches// -> //Local//.
--1. Add the KIML repository.
--1. We will now import the projects required for KIML development to your workspace. Right-click on the KIML repository and choose //Import Projects//.
--1. Choose //Import existing projects//, and select the //plugins// folder from the //Working Directory//. Then click //Next//.
--1. Import the following plug-ins. This consitutes a basic configuration for the development of layout algorithms.\\
--1*. de.cau.cs.kieler.core
--1*. de.cau.cs.kieler.core.kgraph
--1*. de.cau.cs.kieler.kiml
--1*. de.cau.cs.kieler.kiml.gmf
--1*. de.cau.cs.kieler.kiml.service
--1*. de.cau.cs.kieler.kiml.ui
--1*. de.cau.cs.kieler.klay.layered
--1. To actually test your layout algorithms, you will need some kind of simple graph editor. The following plug-ins will add our KEG editor to your installation, which is just that.\\
--1*. de.cau.cs.kieler.core.annotations
--1*. de.cau.cs.kieler.core.kgraph.edit
--1*. de.cau.cs.kieler.core.kivi
--1*. de.cau.cs.kieler.core.model
--1*. de.cau.cs.kieler.core.model.gmf
--1*. de.cau.cs.kieler.core.ui
--1*. de.cau.cs.kieler.karma
--1*. de.cau.cs.kieler.keg
--1*. de.cau.cs.kieler.keg.diagram
--1*. de.cau.cs.kieler.keg.diagram.custom
--1*. de.cau.cs.kieler.keg.edit
  == Adding a New Plug-in ==
--We need to create a new plug-in to implement the layout algorithm in. Switch back to the Java or Plug-in Development perspective and follow these steps:
++
--1. Click //File// > //New// > //Other...// > //Plug-in Development// > //Plug-in Project//.
--1. Enter {{code language="none"}}de.cau.cs.rtprak.login_name.tutorial2{{/code}} as the project name. Uncheck //Use default location// and use {{code language="none"}}tutorial_repository_path/de.cau.cs.rtprak.login_name.tutorial2{{/code}} as the location. Click //Next//.
--1. Set the version to {{code language="none"}}0.1.0.qualifier{{/code}}, vendor to {{code language="none"}}Christian-Albrechts-Universität zu Kiel{{/code}}, and execution environment to //J2SE-1.5//. (do this for all plug-ins that you create!)
--1. Uncheck all checkboxes in the //Options// group and click //Finish//.
--1. If Eclipse asks you whether the //Plug-in Development// perspective should be opened, choose either //Yes// or //No//. It doesn't make much of a difference anyway.
--
--You should now commit your new, empty project to the Git repository. We will do that from within Eclipse.
--
--1. Right-click your project in the //Package Explorer// and click //Team// > //Share Project...//
--1. As the repository type, select //Git// and click //Next//.
--1. Tell Eclipse what repository to add the project to. The repository you placed the project in is already preselected. Simply click //Finish//.
--1. Since Git support is now enabled for the project, right-click it again and click //Team// > //Commit...//
--1. Select all files, enter a (meaningful) commit message, and click //Commit//.
--
  == Writing the Layout Algorithm ==
--When writing our layout algorithm, we are going to need to be able to access code defined in several other plug-ins. To do that, we need to add dependencies to those plug-ins:
++
--1. In your new plug-in, open the file {{code language="none"}}META-INF/MANIFEST.MF{{/code}}. The plug-in manifest editor will open. Open its //Dependencies// tab.
--1. Add dependencies to the following plug-ins:\\
--1*. {{code language="none"}}de.cau.cs.kieler.core{{/code}}
--1*. {{code language="none"}}de.cau.cs.kieler.core.kgraph{{/code}}
--1*. {{code language="none"}}de.cau.cs.kieler.kiml{{/code}}
--1. Save the editor.
++
--Layout algorithms interface with KIML by means of a layout provider class that has to be created and registered with KIML.
++
--1. Right-click the source folder of your plug-in and click //New// > //Class//.
--1. Set the package to {{code language="none"}}de.cau.cs.rtprak.login_name.tutorial2{{/code}}, enter {{code language="none"}}Login_nameLayoutProvider{{/code}} as the class name, and select {{code language="none"}}de.cau.cs.kieler.kiml.AbstractLayoutProvider{{/code}} as the superclass. (This will only be available through the //Browse// dialog if you have saved the plug-in manifest editor; if you haven't, Eclipse won't know about the new dependencies yet.)
--1. Select //Generate comments// and click //Finish//.
++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.
--Implement the layout provider class:
--
++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*. de.cau.cs.kieler.core
++1*. 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.kiml.ui
++1*. (% style="font-size: 10.0pt;line-height: 13.0pt;" %)de.cau.cs.kieler.klay.layered
++1. 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. 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.
++1. Create a //layout provider// class with the //New →// Class wizard\\
++1*. Package: de.cau.cs.rtprak.<login>.tutorial2
++1*. Name: <Login>LayoutProvider
++1*. Superclass: de.cau.cs.kieler.kiml.AbstractLayoutProvider
 . (((
--Add the following constants:
++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" %);
--{{code language="java"}}
--/** default value for spacing between nodes. */
--private static final float DEFAULT_SPACING = 15.0f;
--{{/code}}
++{{{
++        DEFAULT_SPACING
++}}}
  )))
--1. (((
--Use the following code as the skeleton of the {{code language="none"}}doLayout(...){{/code}} method:
++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" %)){=;}
--{{code language="java"}}
--progressMonitor.begin("Login_name layouter", 1);
--KShapeLayout parentLayout = parentNode.getData(KShapeLayout.class);
++{{{        progressMonitor
++        KShapeLayout parentLayout  layoutNodeKShapeLayout
++         objectSpacing  parentLayoutLayoutOptions
++         objectSpacing
++            objectSpacing  DEFAULT_SPACING
++
++         borderSpacing  parentLayoutLayoutOptions
++         borderSpacing
++            borderSpacing  DEFAULT_SPACING
++
++}}}
++)))
++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" %)();
--float objectSpacing = parentLayout.getProperty(LayoutOptions.SPACING);
--if (objectSpacing < 0) {
--    objectSpacing = DEFAULT_SPACING;
--}
--
--float borderSpacing = parentLayout.getProperty(LayoutOptions.BORDER_SPACING);
--if (borderSpacing < 0) {
--    borderSpacing = DEFAULT_SPACING;
--}
--
--// TODO: Insert actual layout code.
--
--progressMonitor.done();
--{{/code}}
++{{{        progressMonitor
++}}}
  )))
--1. It is now time to write the code that places the nodes. Here's two suggestions for how you can place them:\\
--1*. The simplest way is to place nodes in a row, next to each other. To make this more interesting, you could also place the nodes along the graph of a Sine function.
--1*. Another way might be to place them in a square or a circle. You would have to think about how exactly to align the nodes, which may well vary in size.
++1. (((
++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" %)();
--{{info title="Tips"}}
--The following tips might come in handy...
--
--* Read the documentation of the [[KGraph>>doc:KIELER.KGraph Meta Model]] and [[KLayoutData>>doc:KIELER.KLayoutData Meta Model]] meta models. The input to the layout algorithm is a {{code language="none"}}KNode{{/code}} that has child {{code language="none"}}KNode{{/code}}s for every node in the graph. Iterate over these nodes by iterating over the {{code language="none"}}getChildren(){{/code}} list of the {{code language="none"}}parentNode{{/code}} argument.
--* (((
--Retrieve the size of a node and set its position later using the following code:
--
--{{code language="java"}}
--KShapeLayout nodeLayout = node.getData(KShapeLayout.class);
--
--// Retrieving the size
--float width = nodeLayout.getWidth();
--float height = nodeLayout.getHeight();
--
--// Setting the position
--nodeLayout.setXpos(x);
--nodeLayout.setYpos(y);
--{{/code}}
++{{{        KShapeLayout nodeLayout  nodeKShapeLayout
++         width  nodeLayout
++         height  nodeLayout
++}}}
  )))
--* {{code language="none"}}objectSpacing{{/code}} is the spacing to be left between each pair of nodes.
--* {{code language="none"}}borderSpacing{{/code}} is the spacing to be left to the borders of the drawing. The top left node's coordinates must therefore be at least {{code language="none"}}(borderSpacing, borderSpacing){{/code}}.
--* At the end of the method, set the width and height of {{code language="none"}}parentLayout{{/code}} such that it is large enough to hold the whole drawing, including borders.
--* A complete layout algorithm will of course also route the edges between the nodes. Ignore that for now – you will do this at a later step.
--{{/info}}
++* Set the position (x, y) of a node's upper left corner using the following code:(% class="code" %)
++(((
++(% class="o" %).(% class="na" style="color: rgb(0,128,128);" %)setXpos(% class="o" %)();.(% class="na" style="color: rgb(0,128,128);" %)setYpos(% class="o" %)();
--
--
--
--
--
--
--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.
--
++{{{        nodeLayoutx
++        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.
++)))
++)))
 . Open the file META-INF/MANIFEST.MF //→// //Extensions// tab\\
 . Add an extension for de.cau.cs.kieler.kiml.layout.layoutProviders
 . Right-click the extension //→// //New// //→// //layoutProvider//

Confluence.Code.ConfluencePageClass[0]

Id

@@ -1,1 +1,1 @@
--6160476
++6160470

URL

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

Changes for page KIML

Summary

Details

Navigation

Quick Links