15
Home Blog Twitter Java Eclipse Google Web Technology 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 vogella.de www.Atmail.com Ads by Google Eclipse Zest - Tutorial http://www.vogella.de/articles/EclipseZest/article.html 1 of 15

Eclipse Zest - Tutorial

Embed Size (px)

Citation preview

Page 1: Eclipse Zest - Tutorial

Home Blog Twitter Java Eclipse Google Web Technology

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 Zestgraph 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. Overview1.2. Components

1.3. Layout Manager

1.4. Filter2. Installation

3. Your first Zest Project3.1. Getting started

3.2. Select layout manager via a command4. Zest and JFace

5. Zest and JFace Example5.1. Create Project

5.2. Model

5.3. Providers

vogella.de

www.Atmail.com Ads by Google

Eclipse Zest - Tutorial

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

1 of 15

Page 2: Eclipse Zest - Tutorial

5.4. View

5.5. Filter6. Tips and Tricks

6.1. Disable that nodes can be moved manually7. PDE Dependency Visualization

8. Thank you9. Questions and Discussion

10. Links and Literature

10.1. Source Code10.2. Eclipse Zest Resources

10.3. vogella Resources

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 graphicalrepresentation 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

1. Eclipse Zest

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

2 of 15

Page 3: Eclipse Zest - Tutorial

Layout Manager Description

GridLayoutAlgorithm

SpringLayoutAlgorithm Layout the graph so that all connections should have approx. thesame 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 stilloverlapping 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 anLayoutItem, the actual graph element can be received with the method getGraphData().

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

3.1. Getting started

Create a new Eclipse RCP application "de.vogella.zest.first". Use the "Eclipse RCP with a view" as atemplate. 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 connectsits elements.

2. Installation

3. Your first Zest Project

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

3 of 15

Page 4: Eclipse Zest - Tutorial

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

4 of 15

Page 5: Eclipse Zest - Tutorial

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, USAwww.circlife.com

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

5 of 15

Page 6: Eclipse Zest - Tutorial

JFace provides viewers to encapsulate the data from the presentation. For an introduction to JFaceviewer 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 eitherbased 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 theinformation which nodes they refer to. Cannot display

nodes without connections.

IGraphEntityContentProvider Based on the Node which contain the information aboutwhich relationship they have. These relationship are

available in the label provider as EntityConnectionDataobjects.

IGraphEntityRelationshipContentProvider Node based, the content provider defines

getRelationShips(sourceNode, destinationNode) whichdetermines the connections. The advantages compared

with IGraphEntityContentProvider is that you decide whichobjects 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.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).

4. Zest and JFace

5. Zest and JFace Example

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

6 of 15

Page 7: Eclipse Zest - Tutorial

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.

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

7 of 15

Page 8: Eclipse Zest - Tutorial

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

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

8 of 15

Page 9: Eclipse Zest - Tutorial

5.3. Providers

Create the following content and label providers.

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

9 of 15

Page 10: Eclipse Zest - Tutorial

5.4. View

Change the view to the following.

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

10 of 15

Page 11: Eclipse Zest - Tutorial

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

11 of 15

Page 12: Eclipse Zest - Tutorial

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.

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

12 of 15

Page 13: Eclipse Zest - Tutorial

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

13 of 15

Page 14: Eclipse Zest - Tutorial

You can also define a filter on the layout so that certain elements are ignore thencalculating the layout. Method isObjectFiltered(LayoutItem item). Use

item.getGraphData() to get the underlying object (GraphNode or GraphConnection).

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".

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.

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 byrecommending this tutorial to other people.

6. Tips and Tricks

7. PDE Dependency Visualization

8. Thank you

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

14 of 15

Page 15: Eclipse Zest - Tutorial

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 goodquestions which might also help you. .

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

9. Questions and Discussion

10. Links and LiteratureAds by Google Eclipse Gui Example Eclipse IDE Plugin Eclipse Eclipse SWT Tool

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

15 of 15