1. Eclipse Zest
1.1 概述
Eclipse Zest是一个可视化的图形工具。它基于SWT/Draw2D。Zest还支持JFace中Viewer的概念,因此允许模型和视图的分离。这篇文章假设你已经熟悉了Eclipse RCP或Eclipse Plugin开发。
(我注:其实也可以在一个普通的SWT程序中使用Zest)
1.2 组件
Eclipse Zest有以下组件:
- GraphNode -- graph中,带属性的结点
- GraphConnections -- graph中,用来连接两个结点的边线
- GraphContainer -- graph中,用来包含其他结点的容器
- Graph -- 根,用来包含所有其他的结点(nodes,connections,container)
(我注:graph可以理解为画板,用来画这些结点的)
1.3 布局
Zest提供了一些布局管理器,用来决定怎么布局graph上的结点。下面列出的就是所提供的一些布局:
表1 布局管理器
TreeLayoutAlgorithm |
Graph is displayed in the form of a vertical tree |
HorizontalTreeLayoutAlgorithm |
Similar to TreeLayoutAlgorithm, but layout is horizontal |
RadialLayoutAlgorithm |
Root is the center, the others nodes are placed around this node |
GridLayoutAlgorithm SpringLayoutAlgorithm |
layout the graph, so that all connections should have approx the same length and that the edges overlap minimal |
HorizontalShift |
move 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
可以通过调用setFilter(filter)方法,在布局上增加过滤器(org.eclipse.zest.layouts.filter),用于决定哪些结点和边线是可见的。filter收到一个LayoutItem对象,实际的graph结点可以通过方法getGraphData()得到。
2. 安装
(我注:好像现在安装完GEF后,自动就有了,所以这里略了)
3 你的第一个Zest工程
3.1 开始
创建一个Eclipse RCP应用“de.vogella.zest.first”。选择模板"Eclipse RCP with a view“。 增加"org.eclipse.zest.core" 和 "org.eclipse.zest.layouts" 依赖项。
修改"View.java"的代码如下,用于创建一个简单的graph和连接它的元素:
- package de.vogella.zest.first;
-
- import org.eclipse.swt.SWT;
- import org.eclipse.swt.widgets.Composite;
- import org.eclipse.swt.widgets.Event;
- import org.eclipse.swt.widgets.Listener;
- import org.eclipse.ui.part.ViewPart;
- import org.eclipse.zest.core.widgets.Graph;
- import org.eclipse.zest.core.widgets.GraphConnection;
- import org.eclipse.zest.core.widgets.GraphNode;
- import org.eclipse.zest.core.widgets.ZestStyles;
- import org.eclipse.zest.layouts.LayoutStyles;
- import org.eclipse.zest.layouts.algorithms.SpringLayoutAlgorithm;
- import org.eclipse.zest.layouts.algorithms.TreeLayoutAlgorithm;
-
- public class View extends ViewPart {
- public static final String ID = "de.vogella.zest.first.view";
- private Graph graph;
- private int layout = 1;
-
- public void createPartControl(Composite parent) {
-
- graph = new Graph(parent, SWT.NONE);
-
- GraphNode node1 = new GraphNode(graph, SWT.NONE, "Jim");
- GraphNode node2 = new GraphNode(graph, SWT.NONE, "Jack");
- GraphNode node3 = new GraphNode(graph, SWT.NONE, "Joe");
- GraphNode node4 = new GraphNode(graph, SWT.NONE, "Bill");
-
- new GraphConnection(graph, ZestStyles.CONNECTIONS_DIRECTED, node1,
- node2);
-
- new GraphConnection(graph, ZestStyles.CONNECTIONS_DOT, node2, node3);
-
- new GraphConnection(graph, SWT.NONE, node3, node1);
-
- GraphConnection graphConnection = new GraphConnection(graph, SWT.NONE,
- node1, node4);
- graphConnection.changeLineColor(parent.getDisplay().getSystemColor(
- SWT.COLOR_GREEN));
-
- graphConnection.setText("This is a text");
- graphConnection.setHighlightColor(parent.getDisplay().getSystemColor(
- SWT.COLOR_RED));
- graphConnection.setLineWidth(3);
- graphConnection.addListener(SWT.SELECTED, new Listener() {
-
- @Override
- public void handleEvent(Event event) {
- System.out.println("Selected");
- }
-
- });
- graph.setLayoutAlgorithm(new SpringLayoutAlgorithm(
- LayoutStyles.NO_LAYOUT_NODE_RESIZING), true);
-
- }
-
- public void setLayoutManager() {
- switch (layout) {
- case 1:
- graph.setLayoutAlgorithm(new TreeLayoutAlgorithm(
- LayoutStyles.NO_LAYOUT_NODE_RESIZING), true);
- layout++;
- break;
- case 2:
- graph.setLayoutAlgorithm(new SpringLayoutAlgorithm(
- LayoutStyles.NO_LAYOUT_NODE_RESIZING), true);
- layout = 1;
- break;
-
- }
-
- }
-
-
-
-
- public void setFocus() {
- }
- }
运行以后,得到下图:
3.2 通过command来改变布局
创建一个command,并把以下"de.vogella.zest.first.handler.ChangeLayout"作为它的handler,此handler用于更改布局。最后把这个command加到一个menu上:
- package de.vogella.zest.first.handler;
-
- import org.eclipse.core.commands.AbstractHandler;
- import org.eclipse.core.commands.ExecutionEvent;
- import org.eclipse.core.commands.ExecutionException;
- import org.eclipse.ui.IViewPart;
- import org.eclipse.ui.handlers.HandlerUtil;
-
- import de.vogella.zest.first.View;
-
- public class ChangeLayout extends AbstractHandler {
-
- @Override
- public Object execute(ExecutionEvent event) throws ExecutionException {
- IViewPart findView = HandlerUtil.getActiveWorkbenchWindow(event)
- .getActivePage().findView("de.vogella.zest.first.view");
- View view = (View) findView;
- view.setLayoutManager();
- return null;
- }
-
- }
运行应用,如果你选择了上面的菜单,视图的布局将会改变
4.Zest和JFace
JFace提供了viewers用于分离数据和展现。请看Eclipse JFace TableViewer 或 Eclipse JFace TreeViewer 。JFace要求一个content provider和一个label provider。Zest提供了一个"GraphViewer“作为一个viewer。content provider则是基于connections或者是nodes的。
标准的Zest content providers有:
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. |
Zest的label provider可以是一个标准的JFace的 ILabelProvider,也可以是Zest特定的IEntityStyleProvider。
http://www.ibm.com/developerworks/cn/opensource/os-cn-zest/index.html
http://liugang594.iteye.com/blog/865253