Tutorials
Page tree

Versions Compared

Old Version 2

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

Saved on

compared with

New Version 3

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

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

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.

Now your workspace should look similar to this
Image Removed 

Before you can test your layout code, you will have to register your new layout provider with KIML.

  1. Open the META-INF/MANIFEST.MF file again and switch to the Extensions tab.
  2. Add an extension for de.cau.cs.kieler.kiml.layout.layoutProviders.
  3. Right-click the extension and click New > layoutAlgorithm.
  4. Set the name to Simple Test Layouter and the class to your layout provider class name (use the browse button and enter SimpleLayoutProvider).
  5. Right-click the new layoutAlgorithm and click New > knownOption. Set option to de.cau.cs.kieler.spacing.
  6. Add another knownOption for de.cau.cs.kieler.borderSpacing.
  7. Save the editor.
  8. Your workspace should look similar to this
    Image Added

 

We will now have to add a new run configuration that will start an Eclipse instance with your layout code loaded into the application, ready to be used.

  1. Click Run > Debug Configurations...
  2. Right-click Eclipse Application and click New. Set the configuration's name to Layout Test.
  3. In the Arguments tab, make sure the the program arguments include -debug and -consoleLog.
  4. On the Plug-ins tab, set Launch with to plug-ins selected below only.
    1. Click Deselect All
    , check
    1. .
    2. Check the Workspace item in the tree.
    3. Check the de.cau.cs.kieler.core.kgraph.text.ui,
    and click
    1. de.cau.cs.kieler.klighd.xtext and org.eclipse.ui.ide.application plugins under Target Platform
    2. Click Add Required Plug-ins. Press it twice (just to be sure!).
  5. Click Apply to save your changes and then Debug to start an Eclipse instance to test with.

Test the layouter in your new Eclipse instance:

...

  1. Click the green button with the yellow thunderbold and check the Enable view management and all other checkboxes.
  2. Click New > Project... > General > Project and set the project name to something like Test.
  3. Right-click the new project and click New > Empty KEG Graph Other > KGraph > Random KGraph. Enter a meaningful name and click Finish.
  4. Put a few nodes into Open the diagram. To properly test your code, you will want to vary the sizes of the nodes. It may also be a good idea to get into the habit of giving each node a different name, such as N1, N2, etc. This will help you later if you have to debug your algorithmAnother view with graphical representations of the nodes should pop up.
  5. Open the Layout view through Window > Show View > Other... > KIELER Layout > Layout.
  6. With your KEG diagram selected, set the Layout Algorithm option in the Layout view to your new algorithm.
  7. Save your KEG diagram.
  8. Trigger automatic layout by clicking the layout button in the toolbar, or by hitting Ctrl+R L (first Ctrl+R, then L).

...

titleTip
  1. Move the view somewhere such that you can see the view and the diagram simultaneously. 
  2. Chose your Simple Test Layouter in the Layout Algorithm section of the Layout View.
  3. You should see something similar to this
    Image Added

 

Once you're satisfied with your node placement code, it's time to take care of edge routing.

...