Changes for page KIML

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

From version < 9.1 >

edited by cds
on 2013/04/10 15:57

To version < 11.1 >

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

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

@@ -2,9 +2,15 @@
  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.
++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:
++
++
  {{warning title="ToDo"}}
++Insert screen shot of final application.
++{{/warning}}
++
++{{warning title="ToDo"}}
  Insert link to presentation slides.
  {{/warning}}
@@ -97,7 +97,7 @@
 . Start Eclipse and create a new workspace.
 . Setup your workspace as explained in [[this guide>>doc:KIELER.Configuring Eclipse]].
 . 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.
++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//.
 . Add the KIML repository.
 . We will now import the projects required for KIML development to your workspace. Right-click on the KIML repository and choose //Import Projects//.
 . Choose //Import existing projects//, and select the //plugins// folder from the //Working Directory//. Then click //Next//.
@@ -124,91 +124,108 @@
  == 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.
--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. 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//.
--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
++Implement the layout provider class:
++
 . (((
--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" %);
++Add the following constants:
--{{{
--        DEFAULT_SPACING
--}}}
++{{code language="java"}}
++/** default value for spacing between nodes. */
++private static final float DEFAULT_SPACING = 15.0f;
++{{/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" %)){=;}
++1. (((
++Use the following code as the skeleton of the {{code language="none"}}doLayout(...){{/code}} method:
--{{{        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" %)();
++{{code language="java"}}
++progressMonitor.begin("Login_name layouter", 1);
++KShapeLayout parentLayout = parentNode.getData(KShapeLayout.class);
--{{{        progressMonitor
--}}}
--)))
--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" %)();
++float objectSpacing = parentLayout.getProperty(LayoutOptions.SPACING);
++if (objectSpacing < 0) {
++    objectSpacing = DEFAULT_SPACING;
++}
--{{{        KShapeLayout nodeLayout  nodeKShapeLayout
--         width  nodeLayout
--         height  nodeLayout
--}}}
++float borderSpacing = parentLayout.getProperty(LayoutOptions.BORDER_SPACING);
++if (borderSpacing < 0) {
++    borderSpacing = DEFAULT_SPACING;
++}
++
++// TODO: Insert actual layout code.
++
++progressMonitor.done();
++{{/code}}
  )))
--* 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" %)();
++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.
--{{{        nodeLayoutx
--        nodeLayouty
--}}}
++{{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}}
  )))
--* {{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.
--)))
--)))
++* {{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}}
++
++
++
++
++
++
++
++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.
++
 . 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 @@
--6160472
++6160476

URL

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

Changes for page KIML

Summary

Details

Navigation

Quick Links