[Link]
html
[Link] Home Blog Twitter Java Eclipse Google Web Technology
[Link] 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
[Link]
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
[Link]
Layout Manager Description
GridLayoutAlgorithm
SpringLayoutAlgorithm Layout the graph so that all connections should have approx. the
same length and that the edges overlap minimal
HorizontalShift Moves overlapping nodes to the right
CompositeLayoutAlgorithm 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 ([Link]) 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 "[Link]". Use the "Eclipse RCP with a view" as a
template. Add "[Link]" and "[Link]" as dependencies to your
[Link].
Change the coding of "[Link]" to the following. This coding creates a simple graph and connects
its elements.
3 of 15
[Link]
4 of 15
[Link]
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 "[Link]"
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
[Link]
5 of 15
[Link]
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 Based on the connections. The connections contain the
information which nodes they refer to. Cannot display
nodes without connections.
IGraphEntityContentProvider Based on the Node which contain the information about
which relationship they have. These relationship are
available in the label provider as EntityConnectionData
objects.
IGraphEntityRelationshipContentProvider Node based, the content provider defines
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 "[Link]". Use the " RCP application with a view" as a
template. Add the zest dependencies to your [Link]. Change the [Link] to the
following (we don't want a standalone view).
6 of 15
[Link]
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
[Link]
Also build this class which provides an instance of the data model.
8 of 15
[Link]
5.3. Providers
Create the following content and label providers.
9 of 15
[Link]
5.4. View
Change the view to the following.
10 of 15
[Link]
11 of 15
[Link]
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
[Link]
13 of 15
[Link]
You can also define a filter on the layout so that certain elements are ignore then
calculating the layout. Method isObjectFiltered(LayoutItem item). Use
[Link]() 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 "[Link]".
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
[Link]
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 [Link] 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
