http://www.vogella.de/articles/EclipseZest/article.

html

vogella.de Home Blog Twitter Java Eclipse Google Web Technology

www.Atmail.com Ads by Google

Eclipse Zest - Tutorial

Lars Vogel

Version 1.1

Copyright © 2009 -2010 Lars Vogel

12.07.2010

Revision History
Revision 0.1 07.06.2009 Lars Vogel
Created
Revision 0.2 - 0.9 16.06.2009 - 31.05.2010 Lars Vogel
bug fixes and enhancements
Revision 1.0 03.06.2010 Lars Vogel
Updated to Eclipse Helios
Revision 1.1 12.07.2010 Lars Vogel
bug fixes and enhancements

Eclipse Zest

Eclipse Zest is a visualization toolkit for graphs. This article explains how to create directly a Zest
graph and how to use the JFace abstraction.

In this article Eclipse 3.6 (Eclipse Helios) is used.

Table of Contents

1. Eclipse Zest
1.1. Overview
1.2. Components
1.3. Layout Manager
1.4. Filter
2. Installation
3. Your first Zest Project
3.1. Getting started
3.2. Select layout manager via a command
4. Zest and JFace
5. Zest and JFace Example
5.1. Create Project
5.2. Model
5.3. Providers

1 of 15
 http://www.vogella.de/articles/EclipseZest/article.html

5.4. View
5.5. Filter
6. Tips and Tricks
6.1. Disable that nodes can be moved manually
7. PDE Dependency Visualization
8. Thank you
9. Questions and Discussion
10. Links and Literature
10.1. Source Code
10.2. Eclipse Zest Resources
10.3. vogella Resources

1. Eclipse Zest
1.1. Overview

Eclipse Zest is a visualization toolkit for graphs. It is based on SWT / Draw2D. Zest supports the
viewer concept from JFace and therefore allows to separate the model from the graphical
representation of the model. This article assumes that you are already familiar with Eclipse RCP or
Eclipse Plugin development .

1.2. Components

Eclipse Zest has the following components:

GraphNode - Node in the graph with the properties

GraphConnections - Arrow / Edge of the graph which connections to two nodes

GraphContainer - Use for a graph within a graph

Graph - holds the other elements (nodes, connections, container)

1.3. Layout Manager

Eclipse Zest provides graph layout managers. A graph layout manager determines how the nodes
(and the arrows) of a graph are arranged on the screen. The following layout managers are provided:

Table 1. Layout Manager

Layout Manager Description

TreeLayoutAlgorithm Graph is displayed in the form of a vertical tree
HorizontalTreeLayoutAlgorithm Similar to TreeLayoutAlgorithm but layout is horizontal
RadialLayoutAlgorithm Root is in the center, the others nodes are placed around this node

2 of 15
 http://www.vogella.de/articles/EclipseZest/article.html

Layout Manager Description

GridLayoutAlgorithm
SpringLayoutAlgorithm
HorizontalShift
CompositeLayoutAlgorithm
Layout the graph so that all connections should have approx. the
same length and that the edges overlap minimal
Moves overlapping nodes to the right
Combines other layout algorithms, for example HorizontalShift can
be the second layout algorithm to move nodes which were still
overlapping if another algorithm is used

1.4. Filter

You can also define filters (org.eclipse.zest.layouts.Filter) on the layout managers via the method
setFilter(filter). This defines which nodes and connections should be displayed. The filter receives an
LayoutItem, the actual graph element can be received with the method getGraphData().

2. Installation
Use the Eclipse update manager to install the "Graphical Editing Framework Zest Visualization
Toolkit". You may have to unflag "Group items by category" to see Zest.

3. Your first Zest Project

3.1. Getting started

Create a new Eclipse RCP application "de.vogella.zest.first". Use the "Eclipse RCP with a view" as a
template. Add "org.eclipse.zest.core" and "org.eclipse.zest.layouts" as dependencies to your
MANIFEST.MF.

Change the coding of "View.java" to the following. This coding creates a simple graph and connects
its elements.

3 of 15
 http://www.vogella.de/articles/EclipseZest/article.html

4 of 15
 http://www.vogella.de/articles/EclipseZest/article.html

Run you application and you should see the graph.

3.2. Select layout manager via a command

Create a command with the following default handler "de.vogella.zest.first.handler.ChangeLayout"

which will change the layout for the graph. Assign the command to the menu.

Run your application, if you select your command the layout of your view should change.

บริษท ั เซอร์ไคล์ฟ จําก ัด

ผู ้เเทนจํ าหน่ายในประเทศไทย เครืองผลิตออกซิเจน Airsep, USA
www.circlife.com

5 of 15
 http://www.vogella.de/articles/EclipseZest/article.html

4. Zest and JFace

JFace provides viewers to encapsulate the data from the presentation. For an introduction to JFace
viewer please see Eclipse JFace TableViewer . A JFace viewer requires a content provider and a label
provider. Zest provides as a viewer the class "GraphViewer". Content provider in Zest are either
based on the connections or on the nodes.

Standard Zest Content providers are:

Table 2. Zest JFace Content Provider

Content Provider Description

IGraphContentProvider
IGraphEntityContentProvider
IGraphEntityRelationshipContentProvider Node based, the content provider defines
Based on the connections. The connections contain the
information which nodes they refer to. Cannot display
nodes without connections.
Based on the Node which contain the information about
which relationship they have. These relationship are
available in the label provider as EntityConnectionData
objects.
getRelationShips(sourceNode, destinationNode) which
determines the connections. The advantages compared
with IGraphEntityContentProvider is that you decide which
objects you return.

As label provider Zest can use the standard JFace interface ILabelProvider (implemented for example
by the class LabelProvider) or the Zest specific IEntityStyleProvider.

5. Zest and JFace Example

5.1. Create Project

Create a new RCP application "de.vogella.zest.jface". Use the " RCP application with a view" as a
template. Add the zest dependencies to your MANIFEST.MF. Change the Perspective.java to the
following (we don't want a standalone view).

6 of 15
 http://www.vogella.de/articles/EclipseZest/article.html

5.2. Model

Create the following model. Please note that the model can be anything as long as you can logically
convert it into a connected Graph.

7 of 15
 http://www.vogella.de/articles/EclipseZest/article.html

Also build this class which provides an instance of the data model.

8 of 15
 http://www.vogella.de/articles/EclipseZest/article.html

5.3. Providers

Create the following content and label providers.

9 of 15
 http://www.vogella.de/articles/EclipseZest/article.html

5.4. View

Change the view to the following.

10 of 15
 http://www.vogella.de/articles/EclipseZest/article.html

11 of 15
 http://www.vogella.de/articles/EclipseZest/article.html

The result should look like the following.

5.5. Filter

You can define a filter on the viewer via setFilters();

For example define the following filter.

Apply the filter to the view to filter all elements.

12 of 15
 http://www.vogella.de/articles/EclipseZest/article.html

13 of 15
 http://www.vogella.de/articles/EclipseZest/article.html

You can also define a filter on the layout so that certain elements are ignore then
calculating the layout. Method isObjectFiltered(LayoutItem item). Use
item.getGraphData() to get the underlying object (GraphNode or GraphConnection).

6. Tips and Tricks

6.1. Disable that nodes can be moved manually

Per default the user can move the nodes in Zest. To disable this you have to extend the Graph.

The usage is demonstrated in project "de.vogella.zest.movenodes".

7. PDE Dependency Visualization

A good and extensive example for the usage of Zest for visualization of plug-in dependencies is the
PDE Incubator Dependency Visualization. See here to see how to get the source code.

8. Thank you
Thank you for practicing with this tutorial.

I maintain this tutorial in my private time. If you like the information please help me by donating or by
recommending this tutorial to other people.

14 of 15
 http://www.vogella.de/articles/EclipseZest/article.html

9. Questions and Discussion

Before posting questions, please see the vogella FAQ . If you have questions or find an error in this
article please use the www.vogella.de Google Group . I have created a short list how to create good
questions which might also help you. .

10. Links and Literature

Ads by Google Eclipse Gui Example Eclipse IDE Plugin Eclipse Eclipse SWT Tool

10.1. Source Code

Source Code of Examples

10.2. Eclipse Zest Resources

Eclipse Zest Homepage

Eclipse Zest Wiki

Eclipse Zest Snippets

10.3. vogella Resources

Eclipse Tutorials

Web development Tutorials

Android Development Tutorial

GWT Tutorial

Eclipse RCP Tutorial

15 of 15