Page History

...

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

title	ToDo

Insert link to presentation slides.

...

Start Eclipse and create a new workspace.
Setup your workspace as explained in this guide.
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.
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.
Import the following plug-ins. This consitutes a basic configuration for the development of layout algorithms.
- de.cau.cs.kieler.core
- de.cau.cs.kieler.core.kgraph
- de.cau.cs.kieler.kiml
- de.cau.cs.kieler.kiml.gmf
- de.cau.cs.kieler.kiml.service
- de.cau.cs.kieler.kiml.ui
- de.cau.cs.kieler.klay.layered
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.
- de.cau.cs.kieler.core.annotations
- de.cau.cs.kieler.core.kgraph.edit
- de.cau.cs.kieler.core.kivi
- de.cau.cs.kieler.core.model
- de.cau.cs.kieler.core.model.gmf
- de.cau.cs.kieler.core.ui
- de.cau.cs.kieler.karma
- de.cau.cs.kieler.keg
- de.cau.cs.kieler.keg.diagram
- de.cau.cs.kieler.keg.diagram.custom
- de.cau.cs.kieler.keg.edit

Adding a New Plug-in

Writing the Layout Algorithm

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.

...

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:

Click File > New > Other... > Plug-in Development > Plug-in Project.
Enter de.cau.cs.rtprak.<login>.tutorial2Next → set version to 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.
Set the version to 0.1.0.qualifier, provider to vendor to Christian-Albrechts-Universität zu Kiel, and execution environment to to J2SE-1.5 . (do this for all plugins plug-ins that you create!)
The Uncheck all checkboxes in the Options group can be deactivated -> Finish
Commit the new plugin project (TODO: describe steps to commit plugin projects)
Open the file META-INF/MANIFEST.MF → Dependencies tab
- Add the plugins de.cau.cs.kieler.core and de.cau.cs.kieler.kiml to the list of dependencies, then save the file.
Create a layout provider class with the New → Class wizard
Package: de.cau.cs.rtprak.<login>.tutorial2
Name: <Login>LayoutProvider

Superclass: de.cau.cs.kieler.kiml.AbstractLayoutProvider

the

Options

group and click

Finish

.

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.

Right-click your project in the Package Explorer and click Team > Share Project...
As the repository type, select Git and click Next.
Tell Eclipse what repository to add the project to. The repository you placed the project in is already preselected. Simply click Finish.
Since Git support is now enabled for the project, right-click it again and click Team > Commit...
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:

In your new plug-in, open the file META-INF/MANIFEST.MF. The plug-in manifest editor will open. Open its Dependencies tab.
Add dependencies to the following plug-ins:
- de.cau.cs.kieler.core
- de.cau.cs.kieler.core.kgraph
- de.cau.cs.kieler.kiml
Save the editor.

Layout algorithms interface with KIML by means of a layout provider class that has to be created and registered with KIML.

Right-click the source folder of your plug-in and click New > Class.
Set the package to 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.)
Select Generate comments and click Finish.

Implement the layout provider class:

Add the following constants:

Code Block

language	java

/** 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:

Code Block

language	java

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:
Code Block
language java
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.

Implement the layout provider class

Add the following constant to the class:

    /** default value for spacing between nodes. */
    private static final float DEFAULT_SPACING = 15.0f;

Write the following lines at the beginning of the 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;
        }

Write the following line at the end of the doLayout method:
```
        progressMonitor.done();
```
Implement the rest of the layouter such that the nodes of the input graph are all put in a row.
- See the KGraph and KLayoutData 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 getChildren() list of the layoutNode input
- Retrieve the size of a node using the following code:
```
        KShapeLayout nodeLayout = node.getData(KShapeLayout.class);
        float width = nodeLayout.getWidth();
        float height = nodeLayout.getHeight();
```
- Set the position (x, y) of a node's upper left corner using the following code:
```
        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).
- At the end of the method, set the width and height of parentLayout 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
1. Add an extension for de.cau.cs.kieler.kiml.layout.layoutProviders
2. Right-click the extension → New → layoutProvider
3. Set name to <Login> Test Layouter, class to de.cau.cs.rtprak.<login>.tutorial2.<Login>LayoutProvider
4. Right-click the new layoutProvider → New → knownOption, set option to de.cau.cs.kieler.spacing
5. Add another knownOption, set to de.cau.cs.kieler.borderSpacing
Run → Run Configurations... → right-click Eclipse Application → New
1. Name: Layout
2. For testing the layouter, a new workspace location will be created; you may configure its destination in Workspace Data → Location
3. Add the program arguments -debug -consoleLog in the Arguments tab.
4. Go to Plug-ins tab, select Launch with: plug-ins selected below only
5. Deselect All, activate Workspace checkbox, Add Required Plug-ins, Apply, Run
Test the layouter in the new Eclipse instance:
1. New → Project... → General → Project, name test
2. Right-click test project → New → Other... → KEG Diagram (TODO: if graphs shall be created in another way, describe it here)
3. Create a graph using the palette on the right.
4. Window → Show View → Other... → KIELER → Layout
5. While the graph diagram is open, set Layout Provider or Type in the Layout view to <Login> Test Layouter.
6. Open the additional views Layout Graph and Layout Time.
7. Trigger layout with the KIELER Layout button in the toolbar or Ctrl+R L (first Ctrl+R, then L).
8. See the direct input and output of your algorithm in the Layout Graph view.
9. See the execution time analysis in the Layout Time view.
Implement another class EdgeRouter.
1. Add the following method:
```
    /**
     * 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();
     }
```
2. Add the following code to the end of the doLayout method in your layout provider:
```
        EdgeRouter edgeRouter = new EdgeRouter();
        edgeRouter.routeEdges(layoutNode);
```
3. Implement the routeEdges method:
  - 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.
  - 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 objectSpacing.
  - See the attached image test-drawing.png for an example.
  - Find the edges using getOutgoingEdges() or getIncomingEdges() on a node.
  - Get the edge layout of an edge to set bend points using this code:
```
        KEdgeLayout edgeLayout = edge.getData(KEdgeLayout.class);
```
  - Create a bend point using this code:
```
        KPoint point = KLayoutDataFactory.eINSTANCE.createKPoint();
```
  - Use the getBendPoints() list on the edgeLayout to add bend points (clear the list first to remove points from the previous layout).
  - Set the values of the points returned by getSourcePoint() and getTargetPoint() according to the positions where the edge leaves its source node and reches its target node.
Use your previous run configuration to test the edge router.

Child pages

Versions Compared

Old Version 8

New Version 9

Key

Adding a New Plug-in

Writing the Layout Algorithm

Writing the Layout Algorithm