This tutorial is still being worked on. Don't start working on it just yet. |
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:
Insert screen shot of final application. |
Insert link to presentation slides. |
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.
For this tutorial, we need you to have Eclipse and Git installed:
Over the course of this tutorial, you will be writing a bit of code. Here's a few rules we ask you to follow:
de.cau.cs.rtprak.login.tutorialN
, where login
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.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:
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 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.
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. 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.
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. Clone that repository:
git clone ssh://git@git.rtsys.informatik.uni-kiel.de:7999/PRAK/13ss-layout-tutorials.git .
(including the final dot, which tells git to clone the repository into the current directory instead of a subdirectory)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:
git checkout -b login_name
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:
git push origin login_name
You would usually have to enter git pull
first, but since nobody will mess with your branch anyway this won't be necessary. By the way, you only need to mention origin login_name
with the first git push
, 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 git push
.
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.
git clone ssh://git@git.rtsys.informatik.uni-kiel.de:7999/KIELER/pragmatics.git .
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.
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!
Remember to replace each occurrence of |
You will start by importing the plug-ins necessary to program with KIML.
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:
de.cau.cs.rtprak.login_name.tutorial2
as the project name. Uncheck Use default location and use tutorial_repository_path/de.cau.cs.rtprak.login_name.tutorial2
as the location. Click Next.0.1.0.qualifier
, vendor to Christian-Albrechts-Universität zu Kiel
, and execution environment to J2SE-1.5. (do this for all plug-ins that you create!)You should now commit your new, empty project to the Git repository. We will do that from within Eclipse.
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:
META-INF/MANIFEST.MF
. The plug-in manifest editor will open. Open its Dependencies tab.de.cau.cs.kieler.core
de.cau.cs.kieler.core.kgraph
de.cau.cs.kieler.kiml
Layout algorithms interface with KIML by means of a layout provider class that has to be created and registered with KIML.
de.cau.cs.rtprak.login_name.tutorial2
, enter Login_nameLayoutProvider
as the class name, and select de.cau.cs.kieler.kiml.AbstractLayoutProvider
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.)Implement the layout provider class:
Add the following constants:
/** default value for spacing between nodes. */ private static final float DEFAULT_SPACING = 15.0f; |
Use the following code as the skeleton of the doLayout(...)
method:
progressMonitor.begin("Login_name layouter", 1); KShapeLayout parentLayout = layoutNode.getData(KShapeLayout.class); 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(); |
Put the following code at the end of the doLayout(...)
method:
progressMonitor.done(); |
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.
/** default value for spacing between nodes. */ private static final float DEFAULT_SPACING = 15.0f;
doLayout
method:progressMonitor.begin("<Login> Layouter", 1); KShapeLayout parentLayout = layoutNode.getData(KShapeLayout.class); 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; }
doLayout
method:progressMonitor.done();
getChildren()
list of the layoutNode
inputKShapeLayout nodeLayout = node.getData(KShapeLayout.class); float width = nodeLayout.getWidth(); float height = nodeLayout.getHeight();
nodeLayout.setXpos(x); nodeLayout.setYpos(y);
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).parentLayout
so that it is large enough to hold the whole drawing, including borders.-debug -consoleLog
in the Arguments tab./**
* 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();
}
doLayout
method in your layout provider:EdgeRouter edgeRouter = new EdgeRouter(); edgeRouter.routeEdges(layoutNode);
routeEdges
method:objectSpacing
.getOutgoingEdges()
or getIncomingEdges()
on a node.KEdgeLayout edgeLayout = edge.getData(KEdgeLayout.class);
KPoint point = KLayoutDataFactory.eINSTANCE.createKPoint();
getBendPoints()
list on the edgeLayout
to add bend points (clear the list first to remove points from the previous layout).getSourcePoint()
and getTargetPoint()
according to the positions where the edge leaves its source node and reches its target node.