Show last authors
| author | version | line-number | content |
|---|---|---|---|
| 1 | {{warning title="Work in Progress"}} | ||
| 2 | This tutorial is still being worked on. Don't start working on it just yet. | ||
| 3 | {{/warning}} | ||
| 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. | ||
| 6 | |||
| 7 | {{warning title="ToDo"}} | ||
| 8 | Insert link to presentation slides. | ||
| 9 | {{/warning}} | ||
| 10 | |||
| 11 | |||
| 12 | |||
| 13 | {{toc/}} | ||
| 14 | |||
| 15 | = Preliminaries = | ||
| 16 | |||
| 17 | There's a few things to do before we dive into the tutorial itself. For example, to do Eclipse programming, you will have to get your hands on an Eclipse installation first. Read through the following sections to get ready for the tutorial tasks. | ||
| 18 | |||
| 19 | == Required Software == | ||
| 20 | |||
| 21 | For this tutorial, we need you to have Eclipse and Git installed: | ||
| 22 | |||
| 23 | 1. Install Eclipse. For what we do, we recommend installing the Eclipse Modeling Tools, with a few extras. Our [[Wiki page on getting Eclipse>>doc:KIELER.Getting Eclipse]] has the details: simply follow the instructions for downloading and installing Eclipse and you should be set. | ||
| 24 | 1. You should already have obtained a working Git installation for the first tutorial. | ||
| 25 | |||
| 26 | == General Remarks == | ||
| 27 | |||
| 28 | Over the course of this tutorial, you will be writing a bit of code. Here's a few rules we ask you to follow: | ||
| 29 | |||
| 30 | * All the Java code you write as part of tutorials should be in packages with the prefix {{code language="none"}}de.cau.cs.rtprak.login.tutorialN{{/code}}, where {{code language="none"}}login{{/code}} is your login name as used for your email address at the institute. This rule will apply to all tutorials – once we start with the actual practical projects, we will choose more meaningful package name. | ||
| 31 | * All Java classes, fields, and methods should be thoroughly documented with the standard [[Javadoc>>url:http://download.oracle.com/javase/1.5.0/docs/tooldocs/windows/javadoc.html#javadoctags||shape="rect"]] comment format. Javadoc comments are well supported by Eclipse through code completion, syntax highlighting, and further features that help you. The code inside your methods should also be well commented. Try to think about what kinds of information would help someone unfamiliar with your code understand it. | ||
| 32 | * During this tutorial, we will be using Git mostly from the command line instead of using Eclipse's built-in Git support. This is because we've found Eclipse's Git support to be too unstable and buggy for us to trust it completely. | ||
| 33 | |||
| 34 | == Finding Documentation == | ||
| 35 | |||
| 36 | During the tutorial, we will cover each topic only briefly, so it is always a good idea to find more information online. Here's some more resources that will prove helpful: | ||
| 37 | |||
| 38 | * [[Java Platform, Standard Edition 6 API Specification>>url:http://download.oracle.com/javase/6/docs/api/||shape="rect"]] | ||
| 39 | As Java programmers, you will already know this one, but it's so important and helpful that it's worth repeating. The API documentation contains just about everything you need to know about the API provided by Java6. | ||
| 40 | * [[Eclipse Help System>>url:http://help.eclipse.org/juno/index.jsp||shape="rect"]] | ||
| 41 | Eclipse comes with its own help system that contains a wealth of information. You will be spending most of your time in the //Platform Plug-in Developer Guide//, which contains the following three important sections:\\ | ||
| 42 | ** Programmer's Guide | ||
| 43 | When you encounter a new topic, such as SWT or JFace, the Programmer's Guide often contains helpful articles to give you a first overview. Recommended reading. | ||
| 44 | ** References -> API Reference | ||
| 45 | One of the two most important parts of the Eclipse Help System, the API Reference contains the Javadoc documentation of all Eclipse framework classes. Extremely helpful. | ||
| 46 | ** References -> Extension Points Reference | ||
| 47 | The other of the two most important parts of the Eclipse Help System, the Extension Point Reference lists all extension points of the Eclipse framework along with information about what they are and how to use them. Also extremely helpful. | ||
| 48 | * [[Eclipsepedia>>url:http://wiki.eclipse.org/Main_Page||shape="rect"]] | ||
| 49 | The official Eclipse Wiki. Contains a wealth of information on Eclipse programming. | ||
| 50 | * [[Eclipse Resources>>url:http://www.eclipse.org/resources/||shape="rect"]] | ||
| 51 | Provides forums, tutorials, articles, presentations, etc. on Eclipse and Eclipse-related topics. | ||
| 52 | |||
| 53 | You will find that despite of all of these resources Eclipse is still not as well commented and documented as we'd like it to be. Finding out how stuff works in the world of Eclipse can thus sometimes be a challenge. However, this does not only apply to you, but also to many people who are conveniently connected by something called //The Internet//. It should go without saying that if all else fails, [[Google>>url:http://www.google.de||shape="rect"]] often turns up great tutorials or solutions to problems you may run into. And if it doesn't, Miro and I will be happy to help you as well. | ||
| 54 | |||
| 55 | As far as KIML and layout algorithms are concerned, you can always refer to our Wiki which has a section about [[KIML and the KIELER layout projects>>doc:KIELER.Layout]]. The documentation is not complete, however, so feel free to ask Miro or Christoph Daniel for help if you have questions that the documentation fails to answer. | ||
| 56 | |||
| 57 | == Preparing the Repository == | ||
| 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"]]. (% style="font-size: 10.0pt;line-height: 13.0pt;" %)Clone that repository: | ||
| 60 | |||
| 61 | 1. Open a console window and navigate to an empty directory that the repository should be placed in. | ||
| 62 | 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) | ||
| 63 | 1. You should now have a clone of the repository in the current directory. | ||
| 64 | |||
| 65 | 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: | ||
| 66 | |||
| 67 | 1. Enter {{code language="none"}}git checkout -b login_name{{/code}} | ||
| 68 | |||
| 69 | 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: | ||
| 70 | |||
| 71 | 1. Enter {{code language="none"}}git push origin login_name{{/code}} | ||
| 72 | |||
| 73 | 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}}. | ||
| 74 | |||
| 75 | == Finding the KIML Sources == | ||
| 76 | |||
| 77 | 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. | ||
| 78 | |||
| 79 | 1. Open a console window and navigate to an empty directory that the repository should be placed in. | ||
| 80 | 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}} | ||
| 81 | 1. You should now have a clone of the repository in the current directory. | ||
| 82 | |||
| 83 | 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. | ||
| 84 | |||
| 85 | = Developing Your First Layout Algorithm = | ||
| 86 | |||
| 87 | Now that the preliminaries are out of the way, it's time to develop your first layout algorithm! It will, however, be a very simple one. This tutorial focuses on creating Eclipse plug-ins and on learning how to develop with KIML; thinking of and implementing cool layout algorithms is what the rest of the practical will focus on, and that is where the fun will be had! | ||
| 88 | |||
| 89 | {{note}} | ||
| 90 | Remember to replace each occurrence of {{code language="none"}}login_name{{/code}} with your own login name (e.g. {{code language="none"}}msp{{/code}}), and each occurrence of {{code language="none"}}Login_name{{/code}} with your capitalized login name (e.g. {{code language="none"}}Msp{{/code}}). | ||
| 91 | {{/note}} | ||
| 92 | |||
| 93 | == Setting Up Your Workspace == | ||
| 94 | |||
| 95 | You will start by importing the plug-ins necessary to program with KIML. | ||
| 96 | |||
| 97 | 1. Start Eclipse and create a new workspace. | ||
| 98 | 1. Setup your workspace as explained in [[this guide>>doc:KIELER.Configuring Eclipse]]. | ||
| 99 | |||
| 100 | == Adding a New Plug-in == | ||
| 101 | |||
| 102 | |||
| 103 | |||
| 104 | == Writing the Layout Algorithm == | ||
| 105 | |||
| 106 | |||
| 107 | |||
| 108 | |||
| 109 | |||
| 110 | |||
| 111 | |||
| 112 | 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. | ||
| 113 | |||
| 114 | 1. Install and set up Eclipse ((% style="color: rgb(255,0,0);" %)TODO: describe steps to install and set up Eclipse(%%)) | ||
| 115 | 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(%%))\\ | ||
| 116 | 1*. de.cau.cs.kieler.core | ||
| 117 | 1*. de.cau.cs.kieler.core.kgraph | ||
| 118 | 1*. (% style="font-size: 10.0pt;line-height: 13.0pt;" %)de.cau.cs.kieler.kiml | ||
| 119 | 1*. (% style="font-size: 10.0pt;line-height: 13.0pt;" %)de.cau.cs.kieler.kiml.service | ||
| 120 | 1*. de.cau.cs.kieler.kiml.ui | ||
| 121 | 1*. (% style="font-size: 10.0pt;line-height: 13.0pt;" %)de.cau.cs.kieler.klay.layered | ||
| 122 | 1. Create a new plugin\\ | ||
| 123 | 11. //File → New →// Other... //→// Plug-in Development //→// Plug-in Project | ||
| 124 | 11. Project name: de.cau.cs.rtprak.<login>.tutorial2 | ||
| 125 | 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!) | ||
| 126 | 11. The checkboxes in the //Options// group can be deactivated -> //Finish// | ||
| 127 | 1. Commit the new plugin project ((% style="color: rgb(255,0,0);" %)TODO: describe steps to commit plugin projects(%%)) | ||
| 128 | 1. (% style="font-size: 10.0pt;line-height: 13.0pt;" %)Open the file META-INF/MANIFEST.MF //→// //Dependencies// tab(%%)\\ | ||
| 129 | 1*. Add the plugins de.cau.cs.kieler.core and de.cau.cs.kieler.kiml to the list of dependencies, then save the file. | ||
| 130 | 1. Create a //layout provider// class with the //New →// Class wizard\\ | ||
| 131 | 1*. Package: de.cau.cs.rtprak.<login>.tutorial2 | ||
| 132 | 1*. Name: <Login>LayoutProvider | ||
| 133 | 1*. Superclass: de.cau.cs.kieler.kiml.AbstractLayoutProvider | ||
| 134 | 1. ((( | ||
| 135 | Implement the layout provider class | ||
| 136 | 1. (% style="font-size: 10.0pt;line-height: 13.0pt;" %)Add the following constant to the class: | ||
| 137 | 1. (% class="code" %) | ||
| 138 | ((( | ||
| 139 | (% 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" %); | ||
| 140 | |||
| 141 | {{{ | ||
| 142 | DEFAULT_SPACING | ||
| 143 | }}} | ||
| 144 | ))) | ||
| 145 | 1. Write the following lines at the beginning of the {{code language="none"}}doLayout{{/code}} method:(% class="code" %) | ||
| 146 | ((( | ||
| 147 | (% 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" %)){=;} | ||
| 148 | |||
| 149 | {{{ progressMonitor | ||
| 150 | KShapeLayout parentLayout layoutNodeKShapeLayout | ||
| 151 | objectSpacing parentLayoutLayoutOptions | ||
| 152 | objectSpacing | ||
| 153 | objectSpacing DEFAULT_SPACING | ||
| 154 | |||
| 155 | borderSpacing parentLayoutLayoutOptions | ||
| 156 | borderSpacing | ||
| 157 | borderSpacing DEFAULT_SPACING | ||
| 158 | |||
| 159 | }}} | ||
| 160 | ))) | ||
| 161 | 1. Write the following line at the end of the {{code language="none"}}doLayout{{/code}} method:(% class="code" %) | ||
| 162 | ((( | ||
| 163 | (% class="o" %).(% class="na" style="color: rgb(0,128,128);" %)done(% class="o" %)(); | ||
| 164 | |||
| 165 | {{{ progressMonitor | ||
| 166 | }}} | ||
| 167 | ))) | ||
| 168 | 1. ((( | ||
| 169 | Implement the rest of the layouter such that the nodes of the input graph are all put in a row. | ||
| 170 | * 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 | ||
| 171 | * Iterate over the nodes in the {{code language="none"}}getChildren(){{/code}} list of the {{code language="none"}}layoutNode{{/code}} input | ||
| 172 | * Retrieve the size of a node using the following code:(% class="code" %) | ||
| 173 | ((( | ||
| 174 | (% 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" %)(); | ||
| 175 | |||
| 176 | {{{ KShapeLayout nodeLayout nodeKShapeLayout | ||
| 177 | width nodeLayout | ||
| 178 | height nodeLayout | ||
| 179 | }}} | ||
| 180 | ))) | ||
| 181 | * Set the position (x, y) of a node's upper left corner using the following code:(% class="code" %) | ||
| 182 | ((( | ||
| 183 | (% class="o" %).(% class="na" style="color: rgb(0,128,128);" %)setXpos(% class="o" %)();.(% class="na" style="color: rgb(0,128,128);" %)setYpos(% class="o" %)(); | ||
| 184 | |||
| 185 | {{{ nodeLayoutx | ||
| 186 | nodeLayouty | ||
| 187 | }}} | ||
| 188 | ))) | ||
| 189 | * {{code language="none"}}objectSpacing{{/code}} shall be the spacing to be left between each pair of nodes. | ||
| 190 | * {{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). | ||
| 191 | * 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. | ||
| 192 | * Edges may be ignored for now. | ||
| 193 | ))) | ||
| 194 | ))) | ||
| 195 | 1. Open the file META-INF/MANIFEST.MF //→// //Extensions// tab\\ | ||
| 196 | 11. Add an extension for de.cau.cs.kieler.kiml.layout.layoutProviders | ||
| 197 | 11. Right-click the extension //→// //New// //→// //layoutProvider// | ||
| 198 | 11. Set //name// to //<Login> Test Layouter//, //class// to de.cau.cs.rtprak.<login>.tutorial2.<Login>LayoutProvider | ||
| 199 | 11. Right-click the new //layoutProvider// //→// //New// //→// //knownOption//, set //option// to de.cau.cs.kieler.spacing | ||
| 200 | 11. Add another //knownOption//, set to de.cau.cs.kieler.borderSpacing | ||
| 201 | 1. //Run// //→// //Run Configurations...// //→// right-click //Eclipse Application// //→// //New//\\ | ||
| 202 | 11. Name: //Layout// | ||
| 203 | 11. For testing the layouter, a new workspace location will be created; you may configure its destination in //Workspace Data// //→// //Location// | ||
| 204 | 11. Add the program arguments {{code language="none"}}-debug -consoleLog{{/code}} in the //Arguments// tab. | ||
| 205 | 11. Go to //Plug-ins// tab, select //Launch with: plug-ins selected below only// | ||
| 206 | 11. //Deselect All//, activate //Workspace// checkbox, //Add Required Plug-ins//, //Apply//, //Run// | ||
| 207 | 1. Test the layouter in the new Eclipse instance:\\ | ||
| 208 | 11. //New// //→// //Project...// //→// //General// //→// //Project//, name //test// | ||
| 209 | 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(%%)) | ||
| 210 | 11. Create a graph using the palette on the right. | ||
| 211 | 11. //Window// //→// //Show View// //→// //Other...// //→// //KIELER// //→// //Layout// | ||
| 212 | 11. While the graph diagram is open, set //Layout Provider or Type// in the //Layout// view to //<Login> Test Layouter.// | ||
| 213 | 11. Open the additional views //Layout Graph// and //Layout Time.// | ||
| 214 | 11. Trigger layout with the //KIELER Layout// button in the toolbar or Ctrl+R L (first Ctrl+R, then L). | ||
| 215 | 11. See the direct input and output of your algorithm in the //Layout Graph// view. | ||
| 216 | 11. See the execution time analysis in the //Layout Time// view. | ||
| 217 | 1. ((( | ||
| 218 | Implement another class //EdgeRouter//. | ||
| 219 | 1. Add the following method:(% class="code" %) | ||
| 220 | ((( | ||
| 221 | |||
| 222 | \\\\\\\\\\\\\\ | ||
| 223 | |||
| 224 | {{{ /** * 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(); }}}} | ||
| 225 | ))) | ||
| 226 | 1. Add the following code to the end of the {{code language="none"}}doLayout{{/code}} method in your layout provider:(% class="code" %) | ||
| 227 | ((( | ||
| 228 | (% class="o" %)=(% class="k" %)new(% class="o" %)();.(% class="na" style="color: rgb(0,128,128);" %)routeEdges(% class="o" %)(); | ||
| 229 | |||
| 230 | {{{ EdgeRouter edgeRouter EdgeRouter | ||
| 231 | edgeRouterlayoutNode | ||
| 232 | }}} | ||
| 233 | ))) | ||
| 234 | 1. ((( | ||
| 235 | Implement the {{code language="none"}}routeEdges{{/code}} method: | ||
| 236 | * 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. | ||
| 237 | * 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}}. | ||
| 238 | * See the attached image [[attach:test-drawing.png]] for an example. | ||
| 239 | * Find the edges using {{code language="none"}}getOutgoingEdges(){{/code}} or {{code language="none"}}getIncomingEdges(){{/code}} on a node. | ||
| 240 | * Get the edge layout of an edge to set bend points using this code:(% class="code" %) | ||
| 241 | ((( | ||
| 242 | (% class="o" %)=.(% class="na" style="color: rgb(0,128,128);" %)getData(% class="o" %)(.(% class="na" style="color: rgb(0,128,128);" %)class(% class="o" %)); | ||
| 243 | |||
| 244 | {{{ KEdgeLayout edgeLayout edgeKEdgeLayout | ||
| 245 | }}} | ||
| 246 | ))) | ||
| 247 | * Create a bend point using this code:(% class="code" %) | ||
| 248 | ((( | ||
| 249 | (% class="o" %)=.(% class="na" style="color: rgb(0,128,128);" %)eINSTANCE(% class="o" %).(% class="na" style="color: rgb(0,128,128);" %)createKPoint(% class="o" %)(); | ||
| 250 | |||
| 251 | {{{ KPoint point KLayoutDataFactory | ||
| 252 | }}} | ||
| 253 | ))) | ||
| 254 | * 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). | ||
| 255 | * 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. | ||
| 256 | ))) | ||
| 257 | ))) | ||
| 258 | 1. Use your previous run configuration to test the edge router. |