Layout-Praktikum SS 13
Child pages
  • KIML

Versions Compared

Old Version 13

changes.mady.by.user Unknown User (cds)

Saved on

compared with

New Version Current

changes.mady.by.user Unknown User (cds)

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migrated to Confluence 5.3

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
titleToDo

Insert link to presentation slides.

Table of Contents

Preliminaries

...

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.

...

  1. Add the following constants:

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

  2. Use the following code as the skeleton of the doLayout(...) method:

    Code Block
    languagejava
    progressMonitor.begin("Login_name layouter", 1);
KShapeLayout parentLayout = parentNode.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();
  3. It is now time to write the code that places the nodes. Here's two suggestions for how you can place them:
    • 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.
    • 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.
    Your code should place them next to each other in a row, as seen in the screenshot at the beginning of the tutorial.
Info
titleTips

The following tips might come in handy...

  • Read the documentation of the KGraph and KLayoutData meta models. The input to the layout algorithm is a KNode that has child KNodes for every node in the graph. Iterate over these nodes by iterating over the getChildren() list of the parentNode argument.

  • Retrieve the size of a node and set its position later using the following code:

    Code Block
    languagejava
    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);
  • objectSpacing is the spacing to be left between each pair of nodes.
  • borderSpacing is the spacing to be left to the borders of the drawing. The top left node's coordinates must therefore be at least (borderSpacing, borderSpacing).
  • At the end of the method, set the width and height of parentLayout 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.

...

Once you're done implementing the edge routing code, test it by running your debug configuration again, as before.

Before You Run Away...

...don't forget to commit your layout algorithm to your repository, and to push your commits to the tutorial repository on our server. If it's not there, we won't be able to see your work! (smile)