Upload
bengasi-isagneg
View
756
Download
1
Embed Size (px)
Citation preview
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
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
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
http://www.vogella.de/articles/EclipseZest/article.html
4 of 15
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
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
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
Also build this class which provides an instance of the data model.
http://www.vogella.de/articles/EclipseZest/article.html
8 of 15
5.3. Providers
Create the following content and label providers.
http://www.vogella.de/articles/EclipseZest/article.html
9 of 15
5.4. View
Change the view to the following.
http://www.vogella.de/articles/EclipseZest/article.html
10 of 15
http://www.vogella.de/articles/EclipseZest/article.html
11 of 15
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
http://www.vogella.de/articles/EclipseZest/article.html
13 of 15
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
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