Layout-Praktikum SS 13
Child pages
  • KIML

Versions Compared

Old Version 12

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
Warning
titleWork in Progress

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:

 

Warning
titleToDo

Insert screen shot of final application.

Warning
titleToDo

Insert link to presentation slides.

Image Added

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:
  4. 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.
    5. 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 sizeYour 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.

...

  1. Add a new method that will implement the edge routing using the following skeleton code:

    Code Block
    languagejava
    /**
 * Routes the edges connecting the nodes in the given graph.
 * 
 * @param parentNode the graph whose edges to route.
 * @param yStart y coordinate of the start of the edge routing area.
 * @param objectSpacing the object spacing.
 * @return height used for edge routing.
 */
private float routeEdges(final KNode parentNode, final float routeEdges(yStart, final KNodefloat parentNodeobjectSpacing) {
    // TODO: Implement edge routing

    return 0;
}
  2. Add a call to routeEdges(...) in your doLayout(...) method and implement the latter.

...

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)