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 @@
2	2	This tutorial is still being worked on. Don't start working on it just yet.
3	3	{{/warning}}
4	4
5		-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.
	5	+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:
6	6
	7	+
	8	+
7	7	{{warning title="ToDo"}}
	10	+Insert screen shot of final application.
	11	+{{/warning}}
	12	+
	13	+{{warning title="ToDo"}}
8	8	Insert link to presentation slides.
9	9	{{/warning}}
10	10
...	...	@@ -56,26 +56,19 @@
56	56
57	57	== Preparing the Repository ==
58	58
59		-We have created a Git repository for everyone to do his tutorials in. You can access the repository online through our Stash tool [[over here>>url:http://git.rtsys.informatik.uni-kiel.de:7990/projects/PRAK/repos/12ws-eclipse-tutorials/browse||shape="rect"]]. You will first have to configure your Stash account:
	65	+We have created a Git repository for everyone to do his tutorials in. You can access the repository online through our Stash tool [[over here>>url:http://git.rtsys.informatik.uni-kiel.de:7990/projects/PRAK/repos/12ws-eclipse-tutorials/browse||shape="rect"]]. (% style="font-size: 10.0pt;line-height: 13.0pt;" %)Clone that repository:
60	60
61		-1. Login with your Rtsys account information.
62		-1. Through the button in the top right corner, access your profile.
63		-1. Switch to the //SSH keys// tab.
64		-1. Click //Add Key// and upload a public SSH key that you want to use to access the repository.
65		-
66		-You should now be able to access the repository. Clone it:
67		-
68	68	1. Open a console window and navigate to an empty directory that the repository should be placed in.
69		-1. Enter the command [[ssh:~~/~~/git@git.rtsys.informatik.uni-kiel.de:7999/PRAK/13ss-layout-tutorials.git>>url:ssh://git@git.rtsys.informatik.uni-kiel.de:7999/PRAK/13ss-layout-tutorials.git||shape="rect"]]{{code language="none"}} .{{/code}} (including the final dot, which tells git to clone the repository into the current directory instead of a subdirectory).
	68	+1. Enter the command [[ssh:~~/~~/git@git.rtsys.informatik.uni-kiel.de:7999/PRAK/13ss-layout-tutorials.git>>url:ssh://git@git.rtsys.informatik.uni-kiel.de:7999/PRAK/13ss-layout-tutorials.git||shape="rect"]]{{code language="none"}}git clone  .{{/code}}  (including the final dot, which tells git to clone the repository into the current directory instead of a subdirectory)
70	70	1. You should now have a clone of the repository in the current directory.
71	71
72	72	You will use this repository for all your tutorial work, along with everyone else. To make sure that you don't interfere with each other, everyone will work on a different branch. This is not exactly how people usually use Git, but goes to demonstrate Git's flexibility... Add a branch for you to work in:
73	73
74		-1. Enter {{code language="none"}}git checkout -b login_name{{/code}}
	73	+1. Enter {{code language="none"}}git checkout -b login_name{{/code}}
75	75
76	76	You have just added and checked out a new branch. Everything you commit will go to this branch. To push your local commits to the server (which you will need to do so we can access your results), do the following:
77	77
78		-1. Enter {{code language="none"}}git push origin login_name{{/code}}
	77	+1. Enter {{code language="none"}}git push origin login_name{{/code}}
79	79
80	80	You would usually have to enter {{code language="none"}}git pull{{/code}} first, but since nobody will mess with your branch anyway this won't be necessary. By the way, you only need to mention {{code language="none"}}origin login_name{{/code}} with the first {{code language="none"}}git push{{/code}}, since Git doesn't know where to push the branch yet. After the first time, Git remembers the information and it will be enough to just enter {{code language="none"}}git push{{/code}}.
81	81
...	...	@@ -84,7 +84,7 @@
84	84	If you want to develop a layout algorithm using KIML, you will have to get your hands at the KIML source code first. Of course, the code is available through a Git repository.
85	85
86	86	1. Open a console window and navigate to an empty directory that the repository should be placed in.
87		-1. Enter the command [[ssh:~~/~~/git@git.rtsys.informatik.uni-kiel.de:7999/KIELER/pragmatics.git>>url:ssh://git@git.rtsys.informatik.uni-kiel.de:7999/KIELER/pragmatics.git||shape="rect"]]{{code language="none"}} .{{/code}}
	86	+1. Enter the command [[ssh:~~/~~/git@git.rtsys.informatik.uni-kiel.de:7999/KIELER/pragmatics.git>>url:ssh://git@git.rtsys.informatik.uni-kiel.de:7999/KIELER/pragmatics.git||shape="rect"]]{{code language="none"}}git clone  .{{/code}}
88	88	1. You should now have a clone of the repository in the current directory.
89	89
90	90	KIML is implemented as an Eclipse plug-in that you will have to import into your Eclipse workspace. We won't do this now; it will be one of the first steps in the development of your layout algorithm.
...	...	@@ -103,163 +103,202 @@
103	103
104	104	1. Start Eclipse and create a new workspace.
105	105	1. Setup your workspace as explained in [[this guide>>doc:KIELER.Configuring Eclipse]].
	105	+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//.
	106	+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//.
	107	+1. Add the KIML repository.
	108	+1. We will now import the projects required for KIML development to your workspace. Right-click on the KIML repository and choose //Import Projects//.
	109	+1. Choose //Import existing projects//, and select the //plugins// folder from the //Working Directory//. Then click //Next//.
	110	+1. Import the following plug-ins. This consitutes a basic configuration for the development of layout algorithms.\\
	111	+1*. de.cau.cs.kieler.core
	112	+1*. de.cau.cs.kieler.core.kgraph
	113	+1*. de.cau.cs.kieler.kiml
	114	+1*. de.cau.cs.kieler.kiml.gmf
	115	+1*. de.cau.cs.kieler.kiml.service
	116	+1*. de.cau.cs.kieler.kiml.ui
	117	+1*. de.cau.cs.kieler.klay.layered
	118	+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.\\
	119	+1*. de.cau.cs.kieler.core.annotations
	120	+1*. de.cau.cs.kieler.core.kgraph.edit
	121	+1*. de.cau.cs.kieler.core.kivi
	122	+1*. de.cau.cs.kieler.core.model
	123	+1*. de.cau.cs.kieler.core.model.gmf
	124	+1*. de.cau.cs.kieler.core.ui
	125	+1*. de.cau.cs.kieler.karma
	126	+1*. de.cau.cs.kieler.keg
	127	+1*. de.cau.cs.kieler.keg.diagram
	128	+1*. de.cau.cs.kieler.keg.diagram.custom
	129	+1*. de.cau.cs.kieler.keg.edit
106	106
107	107	== Adding a New Plug-in ==
108	108
109		-
	133	+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:
110	110
	135	+1. Click //File// > //New// > //Other...// > //Plug-in Development// > //Plug-in Project//.
	136	+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//.
	137	+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!)
	138	+1. Uncheck all checkboxes in the //Options// group and click //Finish//.
	139	+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.
	140	+
	141	+You should now commit your new, empty project to the Git repository. We will do that from within Eclipse.
	142	+
	143	+1. Right-click your project in the //Package Explorer// and click //Team// > //Share Project...//
	144	+1. As the repository type, select //Git// and click //Next//.
	145	+1. Tell Eclipse what repository to add the project to. The repository you placed the project in is already preselected. Simply click //Finish//.
	146	+1. Since Git support is now enabled for the project, right-click it again and click //Team// > //Commit...//
	147	+1. Select all files, enter a (meaningful) commit message, and click //Commit//.
	148	+
111	111	== Writing the Layout Algorithm ==
112	112
113		-
	151	+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:
114	114
115		-
	153	+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.
	154	+1. Add dependencies to the following plug-ins:\\
	155	+1*. {{code language="none"}}de.cau.cs.kieler.core{{/code}}
	156	+1*. {{code language="none"}}de.cau.cs.kieler.core.kgraph{{/code}}
	157	+1*. {{code language="none"}}de.cau.cs.kieler.kiml{{/code}}
	158	+1. Save the editor.
116	116
117		-
	160	+Layout algorithms interface with KIML by means of a layout provider class that has to be created and registered with KIML.
118	118
119		-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.
	162	+1. Right-click the source folder of your plug-in and click //New// > //Class//.
	163	+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.)
	164	+1. Select //Generate comments// and click //Finish//.
120	120
121		-1. Install and set up Eclipse ((% style="color: rgb(255,0,0);" %)TODO: describe steps to install and set up Eclipse(%%))
122		-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(%%))\\
123		-1*. de.cau.cs.kieler.core
124		-1*. de.cau.cs.kieler.core.kgraph
125		-1*. (% style="font-size: 10.0pt;line-height: 13.0pt;" %)de.cau.cs.kieler.kiml
126		-1*. (% style="font-size: 10.0pt;line-height: 13.0pt;" %)de.cau.cs.kieler.kiml.service
127		-1*. de.cau.cs.kieler.kiml.ui
128		-1*. (% style="font-size: 10.0pt;line-height: 13.0pt;" %)de.cau.cs.kieler.klay.layered
129		-1. Create a new plugin\\
130		-11. //File → New →// Other... //→// Plug-in Development //→// Plug-in Project
131		-11. Project name: de.cau.cs.rtprak.<login>.tutorial2
132		-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!)
133		-11. The checkboxes in the //Options// group can be deactivated -> //Finish//
134		-1. Commit the new plugin project ((% style="color: rgb(255,0,0);" %)TODO: describe steps to commit plugin projects(%%))
135		-1. (% style="font-size: 10.0pt;line-height: 13.0pt;" %)Open the file META-INF/MANIFEST.MF //→// //Dependencies// tab(%%)\\
136		-1*. Add the plugins de.cau.cs.kieler.core and de.cau.cs.kieler.kiml to the list of dependencies, then save the file.
137		-1. Create a //layout provider// class with the //New →// Class wizard\\
138		-1*. Package: de.cau.cs.rtprak.<login>.tutorial2
139		-1*. Name: <Login>LayoutProvider
140		-1*. Superclass: de.cau.cs.kieler.kiml.AbstractLayoutProvider
	166	+Implement the layout provider class:
	167	+
141	141	1. (((
142		-Implement the layout provider class
143		-1. (% style="font-size: 10.0pt;line-height: 13.0pt;" %)Add the following constant to the class:
144		-1. (% class="code" %)
145		-(((
146		-(% 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" %);
	169	+Add the following constants:
147	147
148		-{{{
149		- DEFAULT_SPACING
150		-}}}
	171	+{{code language="java"}}
	172	+/** default value for spacing between nodes. */
	173	+private static final float DEFAULT_SPACING = 15.0f;
	174	+{{/code}}
151	151	)))
152		-1. Write the following lines at the beginning of the {{code language="none"}}doLayout{{/code}} method:(% class="code" %)
153		-(((
154		-(% 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" %)){=;}
	176	+1. (((
	177	+Use the following code as the skeleton of the {{code language="none"}}doLayout(...){{/code}} method:
155	155
156		-{{{ progressMonitor
157		- KShapeLayout parentLayout layoutNodeKShapeLayout
158		- objectSpacing parentLayoutLayoutOptions
159		- objectSpacing
160		- objectSpacing DEFAULT_SPACING
161		-
162		- borderSpacing parentLayoutLayoutOptions
163		- borderSpacing
164		- borderSpacing DEFAULT_SPACING
165		-
166		-}}}
167		-)))
168		-1. Write the following line at the end of the {{code language="none"}}doLayout{{/code}} method:(% class="code" %)
169		-(((
170		-(% class="o" %).(% class="na" style="color: rgb(0,128,128);" %)done(% class="o" %)();
	179	+{{code language="java"}}
	180	+progressMonitor.begin("Login_name layouter", 1);
	181	+KShapeLayout parentLayout = parentNode.getData(KShapeLayout.class);
171	171
172		-{{{ progressMonitor
173		-}}}
174		-)))
175		-1. (((
176		-Implement the rest of the layouter such that the nodes of the input graph are all put in a row.
177		-* 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
178		-* Iterate over the nodes in the {{code language="none"}}getChildren(){{/code}} list of the {{code language="none"}}layoutNode{{/code}} input
179		-* Retrieve the size of a node using the following code:(% class="code" %)
180		-(((
181		-(% 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" %)();
	183	+float objectSpacing = parentLayout.getProperty(LayoutOptions.SPACING);
	184	+if (objectSpacing < 0) {
	185	+ objectSpacing = DEFAULT_SPACING;
	186	+}
182	182
183		-{{{ KShapeLayout nodeLayout nodeKShapeLayout
184		- width nodeLayout
185		- height nodeLayout
186		-}}}
187		-)))
188		-* Set the position (x, y) of a node's upper left corner using the following code:(% class="code" %)
189		-(((
190		-(% class="o" %).(% class="na" style="color: rgb(0,128,128);" %)setXpos(% class="o" %)();.(% class="na" style="color: rgb(0,128,128);" %)setYpos(% class="o" %)();
	188	+float borderSpacing = parentLayout.getProperty(LayoutOptions.BORDER_SPACING);
	189	+if (borderSpacing < 0) {
	190	+ borderSpacing = DEFAULT_SPACING;
	191	+}
191	191
192		-{{{ nodeLayoutx
193		- nodeLayouty
194		-}}}
	193	+// TODO: Insert actual layout code.
	194	+
	195	+progressMonitor.done();
	196	+{{/code}}
195	195	)))
196		-* {{code language="none"}}objectSpacing{{/code}} shall be the spacing to be left between each pair of nodes.
197		-* {{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).
198		-* 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.
199		-* Edges may be ignored for now.
200		-)))
201		-)))
202		-1. Open the file META-INF/MANIFEST.MF //→// //Extensions// tab\\
203		-11. Add an extension for de.cau.cs.kieler.kiml.layout.layoutProviders
204		-11. Right-click the extension //→// //New// //→// //layoutProvider//
205		-11. Set //name// to //<Login> Test Layouter//, //class// to de.cau.cs.rtprak.<login>.tutorial2.<Login>LayoutProvider
206		-11. Right-click the new //layoutProvider// //→// //New// //→// //knownOption//, set //option// to de.cau.cs.kieler.spacing
207		-11. Add another //knownOption//, set to de.cau.cs.kieler.borderSpacing
208		-1. //Run// //→// //Run Configurations...// //→// right-click //Eclipse Application// //→// //New//\\
209		-11. Name: //Layout//
210		-11. For testing the layouter, a new workspace location will be created; you may configure its destination in //Workspace Data// //→// //Location//
211		-11. Add the program arguments {{code language="none"}}-debug -consoleLog{{/code}} in the //Arguments// tab.
212		-11. Go to //Plug-ins// tab, select //Launch with: plug-ins selected below only//
213		-11. //Deselect All//, activate //Workspace// checkbox, //Add Required Plug-ins//, //Apply//, //Run//
214		-1. Test the layouter in the new Eclipse instance:\\
215		-11. //New// //→// //Project...// //→// //General// //→// //Project//, name //test//
216		-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(%%))
217		-11. Create a graph using the palette on the right.
218		-11. //Window// //→// //Show View// //→// //Other...// //→// //KIELER// //→// //Layout//
219		-11. While the graph diagram is open, set //Layout Provider or Type// in the //Layout// view to //<Login> Test Layouter.//
220		-11. Open the additional views //Layout Graph// and //Layout Time.//
221		-11. Trigger layout with the //KIELER Layout// button in the toolbar or Ctrl+R L (first Ctrl+R, then L).
222		-11. See the direct input and output of your algorithm in the //Layout Graph// view.
223		-11. See the execution time analysis in the //Layout Time// view.
224		-1. (((
225		-Implement another class //EdgeRouter//.
226		-1. Add the following method:(% class="code" %)
227		-(((
	198	+1. It is now time to write the code that places the nodes. Here's two suggestions for how you can place them:\\
	199	+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.
	200	+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.
228	228
229		-\\\\\\\\\\\\\\
	202	+{{info title="Tips"}}
	203	+The following tips might come in handy...
230	230
231		-{{{ /** * 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(); }}}}
232		-)))
233		-1. Add the following code to the end of the {{code language="none"}}doLayout{{/code}} method in your layout provider:(% class="code" %)
234		-(((
235		-(% class="o" %)=(% class="k" %)new(% class="o" %)();.(% class="na" style="color: rgb(0,128,128);" %)routeEdges(% class="o" %)();
	205	+* 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.
	206	+* (((
	207	+Retrieve the size of a node and set its position later using the following code:
236	236
237		-{{{ EdgeRouter edgeRouter EdgeRouter
238		- edgeRouterlayoutNode
239		-}}}
	209	+{{code language="java"}}
	210	+KShapeLayout nodeLayout = node.getData(KShapeLayout.class);
	211	+
	212	+// Retrieving the size
	213	+float width = nodeLayout.getWidth();
	214	+float height = nodeLayout.getHeight();
	215	+
	216	+// Setting the position
	217	+nodeLayout.setXpos(x);
	218	+nodeLayout.setYpos(y);
	219	+{{/code}}
240	240	)))
	221	+* {{code language="none"}}objectSpacing{{/code}} is the spacing to be left between each pair of nodes.
	222	+* {{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}}.
	223	+* 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.
	224	+* 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.
	225	+{{/info}}
	226	+
	227	+Before you can test your layout code, you will have to register your new layout provider with KIML.
	228	+
	229	+1. Open the {{code language="none"}}META-INF/MANIFEST.MF{{/code}} file again and switch to the //Extensions// tab.
	230	+1. Add an extension for {{code language="none"}}de.cau.cs.kieler.kiml.layout.layoutProviders{{/code}}.
	231	+1. Right-click the extension and click //New// > //layoutAlgorithm//.
	232	+1. Set the name to {{code language="none"}}Login_name Test Layouter{{/code}} and the class to your layout provider class name.
	233	+1. Right-click the new //layoutAlgorithm// and click //New// > //knownOption//. Set option to {{code language="none"}}de.cau.cs.kieler.spacing{{/code}}.
	234	+1. Add another //knownOption// for {{code language="none"}}de.cau.cs.kieler.borderSpacing{{/code}}.
	235	+1. Save the editor.
	236	+
	237	+We will now have to add a new run configuration that will start an Eclipse instance with your layout code loaded into the application, ready to be used.
	238	+
	239	+1. Click //Run// > //Debug Configurations...//
	240	+1. Right-click //Eclipse Application// and click //New//. Set the configuration's name to {{code language="none"}}Layout Test{{/code}}.
	241	+1. In the //Arguments// tab, make sure the the program arguments include {{code language="none"}}-debug{{/code}} and {{code language="none"}}-consoleLog{{/code}}.
	242	+1. On the //Plug-ins// tab, set //Launch with// to //plug-ins selected below only//. Click //Deselect All//, check the //Workspace// item in the tree, and click //Add Required Plug-ins//.
	243	+1. Click //Apply// to save your changes and then //Debug// to start an Eclipse instance to test with.
	244	+
	245	+Test the layouter in your new Eclipse instance:
	246	+
	247	+1. Click //New// > //Project...// > //General// > //Project// and set the project name to something like {{code language="none"}}Test{{/code}}.
	248	+1. Right-click the new project and click //New// > //Empty KEG Graph//. Enter a meaningful name and click //Finish//.
	249	+1. Put a few nodes into the diagram. To properly test your code, you will want to vary the sizes of the nodes. It may also be a good idea to get into the habit of giving each node a different name, such as N1, N2, etc. This will help you later if you have to debug your algorithm.
	250	+1. Open the //Layout// view through //Window// > //Show View// > //Other...// > //KIELER Layout// > //Layout//.
	251	+1. With your KEG diagram selected, set the //Layout Algorithm// option in the //Layout// view to your new algorithm.
	252	+1. Save your KEG diagram.
	253	+1. Trigger automatic layout by clicking the layout button in the toolbar, or by hitting Ctrl+R L (first Ctrl+R, then L).
	254	+
	255	+{{info title="Tip"}}
	256	+You can see the direct output of your algorithm and the time it took to run it through the //Layout Graph// and //Layout Time// views. The views are available through the {{code language="none"}}de.cau.cs.kieler.kiml.debug{{/code}} plug-in, which can be found in the plugins-dev folder of the KIML repository. You will learn more about debugging layout algorithms in a layout tutorial or presentation.
	257	+{{/info}}
	258	+
	259	+Once you're satisfied with your node placement code, it's time to take care of edge routing.
	260	+
241	241	1. (((
242		-Implement the {{code language="none"}}routeEdges{{/code}} method:
243		-* 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.
244		-* 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}}.
245		-* See the attached image [[attach:test-drawing.png]] for an example.
246		-* Find the edges using {{code language="none"}}getOutgoingEdges(){{/code}} or {{code language="none"}}getIncomingEdges(){{/code}} on a node.
247		-* Get the edge layout of an edge to set bend points using this code:(% class="code" %)
248		-(((
249		-(% class="o" %)=.(% class="na" style="color: rgb(0,128,128);" %)getData(% class="o" %)(.(% class="na" style="color: rgb(0,128,128);" %)class(% class="o" %));
	262	+Add a new method that will implement the edge routing using the following skeleton code:
250	250
251		-{{{ KEdgeLayout edgeLayout edgeKEdgeLayout
252		-}}}
	264	+{{code language="java"}}
	265	+/**
	266	+ * Routes the edges connecting the nodes in the given graph.
	267	+ *
	268	+ * @param parentNode the graph whose edges to route.
	269	+ * @return height used for edge routing.
	270	+private float routeEdges(final KNode parentNode) {
	271	+ // TODO: Implement edge routing
	272	+
	273	+ return 0;
	274	+}
	275	+{{/code}}
253	253	)))
254		-* Create a bend point using this code:(% class="code" %)
255		-(((
256		-(% class="o" %)=.(% class="na" style="color: rgb(0,128,128);" %)eINSTANCE(% class="o" %).(% class="na" style="color: rgb(0,128,128);" %)createKPoint(% class="o" %)();
	277	+1. Add a call to {{code language="none"}}routeEdges(...){{/code}} in your {{code language="none"}}doLayout(...){{/code}} method and implement the latter.
257	257
258		-{{{ KPoint point KLayoutDataFactory
259		-}}}
	279	+{{info title="Tips"}}
	280	+Here's a few tips for implementing the edge routing:
	281	+
	282	+* Each edge shall be drawn with three orthogonal line segments: one vertical segment below the start node, one vertical segment below the target node, and a horizontal segment that connects the two.
	283	+* The horizontal segments of two different edges shall not have the same y-coordinate. Two neighboring horizontal segments shall be placed at a distance of objectSpacing.
	284	+* See the screenshot at the top of the tutorial for an example.
	285	+* Find the edges in a graph by calling {{code language="none"}}getOutgoingEdges(){{/code}} or {{code language="none"}}getIncomingEdges(){{/code}} on the nodes.
	286	+* (((
	287	+You can add bend points to edges through the edge's edge layout:
	288	+
	289	+{{code language="java"}}
	290	+KEdgeLayout edgeLayout = edge.getData(KEdgeLayout.class);
	291	+KPoint bendPoint = KLayoutDataFactory.eINSTANCE.createKPoint();
	292	+edgeLayout.getBendPoints().add(bendPoint);
	293	+{{/code}}
260	260	)))
261		-* 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).
262		-* 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.
263		-)))
264		-)))
265		-1. Use your previous run configuration to test the edge router.
	295	+* You will want to clear the list of bend points of each edge layout before adding bend points to it. This will remove all bend points the edge had prior to invoking your layout algorithm.
	296	+* Set the values of the points returned by {{code language="none"}}getSourcePoint(){{/code}} and {{code language="none"}}getTargetPoint(){{/code}} according to the positions where an edge leaves its source node and reaches its target node.
	297	+* If you want, you can improve the edge routing code by allowing horizontal segments to share the same y-coordinate if that doesn't make them overlap. Your goal could be to produce an edge routing that uses as little space as possible.
	298	+* If that's not enough yet: can you find a way to find an order of the horizontal segments such that as few edge crossings as possible are produced?
	299	+{{/info}}
	300	+
	301	+Once you're done implementing the edge routing code, test it by running your debug configuration again, as before.
	302	+
	303	+

Confluence.Code.ConfluencePageClass[0]

Id

...	...	@@ -1,1 +1,1 @@
1		-6160459
	1	+6160477

URL

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