Type: Demo Source Code

Introduction

Note

The yFiles Viewer and Complete editions ship with Swing/AWT based graphical user interface components. Another article describes how to use these components within Eclipse (or Eclipse-based applications).

The yFiles Layout edition does not contain any graphical user interface components. It is suitable for applications with their own graphical user interface. If your application is Eclipse based and dealing with graph like structures, you probably already use the Graphical Editing Framework (GEF). This article contains an example for integrating yFiles Layout into such an application. The example contains the source code for a procject for the com.yworks.gef.layout Plugin which encapsulates a configurable yFiles layout algorithm as an abstract action implementing org.eclipse.ui.IWorkbenchWindowActionDelegate. Subclasses just have to create and to configure a specific yFiles Layouter. The source code for a second project which uses the layout action is also included. It is a fragment for the GEF Shapes example Plugin which adds a toolbar button for doing an organic layout as an editor action for the GEF Shapes Editor.

Technical Requirements

1. Eclipse 3.4 (Ganymede) with PDE and the GEF SDK
2. JDK 1.6
3. yFiles Layout 2.6 for Java (or yFiles Complete 2.6 for Java)

Installation Instructions and Usage

1. Open Eclipse and create a project for the GEF Shapes Example: File >> New >> Example... >> Shapes, Next >, Finish.
2. Extract the attached zip file and copy the y.jar file from your yFiles Layout distribution to the com.yworks.gef.layout directory.
3. Import the two projects using File >> Import... >> General >> Existing Projects into Workspace, Next >. Push the radio button for "Select root directory:" and use the "Browse..." button to select the parent directory of the unzipped projects. Select "com.yworks.gef.examples.shapes" and "com.yworks.gef.layout" in the "Projects:" list. Optionally check "Copy projects into workspace" and push the "Finish" button.
4. Select the "Properties" entry from the context menu of the com.yworks.gef.layout project. In the "Java Build Path" category on the "Order and Export" tab check the "y.jar" entry and press "OK".
5. Open the top level fragment.xml file in the com.yworks.gef.examples.shapes project by double clicking it in the Package Explorer. Switch to the "Overview" tab. Run the example using the "Launch an Eclipse application in Debug mode" entry under the "Testing" heading.
6. In the newly opened Eclipse application create a new project, File >> New >> Project... >> General >> Project, Next >. Enter a project name a psuh the "Finish" button.
7. Open the context menu for your new project and create a new shapes diagram: select New >> Example... >> Examples >> Shapes Diagram, Next >, Finish.
8. Open the diagram, add some shapes and some connections.
9. Use the "Organic Layout" toolbar entry to perform a layout. The layout is undoable and animated.

Remarks

1. The basic class for performing a yFiles Layouter is the com.yworks.gef.layout.YLayoutProvider. It expects an implementation of the com.yworks.gef.layout.Graph interface as its input and output. The layout provider uses a factory method for creating a specific layouter.
2. The com.yworks.gef.layout.request.GraphicalEditPartGraph is an implementation of the Graph interface, which is initialized with the contents edit part of a graphical editor. It uses the child edit parts of the content edit part as the nodes of the graph and the connection edit parts connected to the nodes as the edges. Changes of the nodes of the graph (via Graph#setNodeBounds) are recorded as resize requests.
3. The com.yworks.gef.layout.request.YGraphicalEditorLayouter initializes a GraphicalEditPartGraph for the contents of a given graphical editor, uses a YLayoutProvider to perform the layout, and finally uses the edit policies of the contents edit part to construct a compound command from the accumulated resize requests of the graph. This layout command is then added to the command stack of the editor.
4. The com.yworks.gef.layout.request.LayoutAction wraps the YGraphicalEditorLayouter as an org.eclipse.ui.IWorkbenchWindowActionDelegate. Moreover, it adds layout animation.
5. The com.yworks.gef.examples.shapes.OrganicLayoutAction is a custom subclass of the LayoutAction which just implements the factory method of the super class in order to use an organic layouter.
6. If your GEF model does not support dimensions and locations, you can as well use another com.yworks.gef.layout.Graph implementation which directly uses the figures in a view in conjunction with a custom GEF layout manager based on the YLayoutProvider.