在使用 GEF 进行开发的时候，对于需要绘制的图形的节点，往往除了模型对象本身之外，还需要有一个相应的“图”对象来保存图中这个节点的位置，以及大小等图相关，但是与业务模型无关的一个对象。而在一开始希望显示一个初始模型文件的时候，再对应保存图信息的文件不存在的情况下，如何能够很好的显示这个图，是一个比较麻烦的问题，涉及到对布局算法的一些分析与实现。这片文章就是介绍，如何使用 GEF 内的 DirectedGraph 这个类以及其相应的布局算法类 DirectedGraphLayout ，来解决这个问题。
基本思想是：为 GEF 的 EditPart 模型生成一个 DirectedGraph ，然后使用 DirectedGraphLayout 来计算布局，最后将布局的结果通过 GEF 显示出来。

在参考了 GEF 的 flow example 之后，对其代码作了部分重构，写了这片文章，希望对遇到同样问题的同志能够有一定的帮助。

首先引入一个接口：

public interface GraphBuilder {

       public void contributeNodesToGraph(DirectedGraph graph, Map map);

       public void contributeEdgesToGraph(DirectedGraph graph, Map map);

       public void applyGraphResults(DirectedGraph graph, Map map);

}

这个接口中定义了几个方法，其含义从其方法名中可以猜出：

contributeNodesToGraph ：将当前对象作为节点（ Node ）添加到 DirectedGraph 中。

contributeEdgesToGraph ：将当前对象所对应的连线作为边（ Edge ）添加到 DirectedGraph 中。

applyGraphResults ：将图中生成的布局信息取出，对本对象进行重新布局。

接口中的 graph 参数就是保存的图的信息， map 参数维持一个对象到节点 / 边的映射，使得每个对象能够方便的找到其对应的图中的节点或者边。这个接口的使用，在后面会有涉及。下面先看看显示图的容器是如何构建的。

图的容器定义为 GraphDiagramEditPart ，这个 EditPart 对应于要显示的有向图的容器。它实现了 GraphBuider 接口，这也是我们主要需要关注的接口：

public class GraphDiagramEditPart extends AbstractGraphicalEditPart implements

              GraphBuilder.

contributeNodesToGraph 方法将自身作为节点添加到图中，但是因为 GraphDiagramEditPart 对应的是容器，因此它不需要向图中添加信息，只是调用其子 EditPart ，将其添加到图中。

       public void contributeNodesToGraph(DirectedGraph graph, Map map) {

              for (int i = 0; i < getChildren().size(); i++) {

                     NodeEditPart activity = (NodeEditPart)getChildren().get(i);

                     activity.contributeNodesToGraph(graph, map);

              }

       }

contributeEdgesToGraph 方法将这个 EditPart 的所有子 EditPart 取出，调用其 contributeEdgesToGraph 方法，通过这个方法，就可以将所有的边添加到图中了：

       public void contributeEdgesToGraph(DirectedGraph graph, Map map) {

              for (int i = 0; i < getChildren().size(); i++) {

                     NodeEditPart child = (NodeEditPart)children.get(i);

                     child.contributeEdgesToGraph(graph, map);

              }

       }

applyGraphResults 方法将所有取出所有的子 EditPart ，并调用其 applyGraphResults ，使得图中所生成的布局信息能够被应用到显示上。

       public void applyGraphResults(DirectedGraph graph, Map map) {

              applyChildrenResults(graph, map);

       }

       protected void applyChildrenResults(DirectedGraph graph, Map map) {

              for (int i = 0; i < getChildren().size(); i++) {

                     GraphBuilder part = (GraphBuilder) getChildren().get(i);

                     part.applyGraphResults(graph, map);

              }

       }

下面要介绍的是 NodeEditPart ，它作图中所有节点所对应的 EditPart 的抽象父类，也实现了 GraphBuilder 接口。每一个要做为节点添加到图中的 EditPart ，应该继承这个类。

public abstract class NodeEditPart extends AbstractGraphicalEditPart implements

              GraphBuilder{

       public void contributeNodesToGraph(DirectedGraph graph,

                     Map map) {

              Node n = new Node(this);

              n.outgoingOffset = 7;

              n.incomingOffset = 7;

              n.width = getFigure().getPreferredSize().width;

              n.height = getFigure().getPreferredSize().height;

              n.setPadding(new Insets(10,8,10,12));

              map.put(this, n);

              graph.nodes.add(n);

       }

       public void contributeEdgesToGraph(DirectedGraph graph, Map map) {

              List outgoing = getSourceConnections();

              for (int i = 0; i < outgoing.size(); i++) {

                     EdgeEditPart part = (EdgeEditPart)getSourceConnections().get(i);

                     part.contributeEdgesToGraph(graph, map);

              }

       }

       public void applyGraphResults(DirectedGraph graph, Map map) {

              Node n = (Node)map.get(this);

              getFigure().setBounds(new Rectangle(n.x, n.y, n.width, n.height));

              for (int i = 0; i < getSourceConnections().size(); i++) {

                     EdgeEditPart trans = (EdgeEditPart) getSourceConnections().get(i);

                     trans.applyGraphResults(graph, map);

              }

       }

}

再就是边所对应 EditPart 的抽象类 EdgeEditPart 。每一个要作为边添加到图中的 EditPart ，需要继承这个类。在上面 NodeEditPart 中对其所对应的 Figure 其实并没有什么要求，但是对 EdgeEditPart 所对应的 Figure ，要求其 Figure 必须由一个 BendpointConnectionRouter ，作为其 ConnectionRouter ： setConnectionRouter(new BendpointConnectionRouter()) 。这样图的边的路径信息才能够被显示出来。

public abstract class EdgeEditPart extends AbstractConnectionEditPart implements

              GraphBuilder {

       public void contributeEdgesToGraph(DirectedGraph graph, Map map) {

              Node source = (Node)map.get(getSource());

              Node target = (Node)map.get(getTarget());

              Edge e = new Edge(this, source, target);

              e.weight = 2;

              graph.edges.add(e);

              map.put(this, e);

       }

       public void applyGraphResults(DirectedGraph graph, Map map) {

              Edge e = (Edge)map.get(this);

              NodeList nodes = e.vNodes;

              PolylineConnection conn = (PolylineConnection)getConnectionFigure();

              conn.setTargetDecoration(new PolygonDecoration());

              if (nodes != null) {

                     List bends = new ArrayList();

                     for (int i = 0; i < nodes.size(); i++) {

                            Node vn = nodes.getNode(i);

                            int x = vn.x;

                            int y = vn.y;

                            if (e.isFeedback) {

                                   bends.add(new AbsoluteBendpoint(x, y + vn.height));

                                   bends.add(new AbsoluteBendpoint(x, y));

                            } else {

                                   bends.add(new AbsoluteBendpoint(x, y));

                                   bends.add(new AbsoluteBendpoint(x, y + vn.height));

                            }

                     }

                     conn.setRoutingConstraint(bends);

              } else {

                     conn.setRoutingConstraint(Collections.EMPTY_LIST);

              }

       }

}

最后的就是一个 LayoutManager 来初始化图的创建，以及对图的信息进行解释了，生成最终布局了。这个 GraphLayoutManager 作为 GraphDiagramEditPart 所对应的 GraphDiagram 的 LayoutManager ，来显示图的内容。

public class GraphLayoutManager extends AbstractLayout {

       private GraphBuilder diagram;

       GraphLayoutManager(GraphBuilder diagram) {

              this.diagram = diagram;

       }

       protected Dimension calculatePreferredSize(IFigure container, int wHint,

                     int hHint) {

              container.validate();

              List children = container.getChildren();

              Rectangle result = new Rectangle().setLocation(container

                            .getClientArea().getLocation());

              for (int i = 0; i < children.size(); i++)

                     result.union(((IFigure) children.get(i)).getBounds());

              result.resize(container.getInsets().getWidth(), container.getInsets()

                            .getHeight());

              return result.getSize();

       }

       public void layout(IFigure container) {

              DirectedGraph graph = new DirectedGraph();

              Map partsToNodes = new HashMap();

              diagram.contributeNodesToGraph(graph, partsToNodes);

              diagram.contributeEdgesToGraph(graph, partsToNodes);

              new DirectedGraphLayout().visit(graph);

              diagram.applyGraphResults(graph, partsToNodes);

       }

}

可以看到在 layout 方法中，首先生成了一个 DirectedGraph ，并调用了 contributeNodesToGraph 以及 contributeEdgesToGraph 方法，将节点和边的信息添加到这个生成的 DirectedGraphGraph 中，然后使用布局算法 DirectedGraphLayout().visit(graph) 来计算生成图的信息（这里使用了 visitor 模式）最后调用 applyGraphResults 将图的信息应用到图形的显示上。

至此，所有框架的工作做完了，如果要将模型作为一个有向图显示的话，只需要将模型的容器对象对应于 GraphDiagramEditPart （在 EditPartFactory 中进行映射），为每一个需要表示为节点的对象，对应到一个继承于 NodeEditPart 的 EditPart ，为每一个需要表示为边的模型对象，对应到一个继承于 EdgeEditPart 的 EditPart 。这样，就能够将图的布局算法，应用到 GEF 框架中了。

这里写的比较简单，使用起来也会有一些具体的约束。例如在有向图中，是不能够有孤立的节点的。如果使用 CompoundDirectedGraph ，就不会有这样的问题， CompoundDirectedGraph 可以包括子图，可以支持更为复杂的图形。在 Flow Example 中使用的就是 CompoundDirectedGraph 。在后面，我或许会将这个框架进行改写，以使其支持 CompoundDirectedGraph 来进行布局算法。下面的图是一个生成的例子，大家可以看一下效果:



这是从OWL文件中读取内容之后生成的一个图的表示。可以看到，OWL的节点通过自动图的自动布局之后，已经有了较好的视觉效果。如果没有这样的布局的话，因为单纯的OWL文件中并不会包含节点的图的信息，图显示出来会变得非常的乱，所有的节点都会堆在一起。

首先我们来创建一个基于 GEF 的浏览器（而不是编辑器），也就是说，它只能浏览一个模型，而不能够进行编辑。先关注于浏览而不是编辑，有助于理解 GEF 的一些核心的概念。

GraphicalViewer 和 createControl () 方法

在开始之前，最先要弄明白的是，一个 GEF 的图如何能够显示在由 ViewPart 在 createPartControl (Component parent) 中提供的这个 parent 控件上。这是通过 GEF 的 GraphicalViewer （准确的说应该是 EditPartViewer ， GraphicalViewer 是 EditPartViewer 的子接口， EditPartViewer 的名字可能更容易理解一些：是为 EditPart 创建一个 Viewer 进行显示）来进行的。 GraphicalViewer 可以将其自身适配到任何一个 SWT Control 上。它的 createControl () 方法接受一个 SWT Control 来作 为适配的对象，将 GEF 所生成的 Figure 显示在这个 SWT Control 之上。（在内部实现上， GraphicalViewer 使用 Draw2D 的 LightweightSystem 来做这个事情，将 Draw2d 的 Figure 对象绘制在 SWT 的 Control 上）

在弄明白了这一点之后，我们就会知道，实际上是将 GEF 放在 ViewPart 中还是放在 EditorPart 对于 GEF 而言是没有本质的区别的，甚至将 GEF 放在任何的 SWT Composite 上都是可以的。不过 GEF 框架中提供了对创建 EditorPart 的缺省实现。而如果要在 Editor 之外使用 GEF 的话，需要额外的对 GraphicalViewer 做一些设置。

下面的这个图，给出了 GEF 中的几个主要关系，下面会有对这个图的解释。

setContent ()

GraphicalViewer 的思想，类似于 JFace 中所实现的 Viewer 思想：要显示一个控件，需要输入的是一个模型对象，要显示的内容根据输入的模型对象来进行的。因此， GraphicalViewer 同所有 JFace Viewer 一样有一个方法，叫做 setContent (Object o) 来接受一个模型对象，而对这个模型对象如何进行处理并显示，就是 GEF 的工作了。

在创建一个 GraphicalViewer 之后，要使 GEF 能够运转起来，还需要做如下几件事情：

1.       设置一个 RootEditPart ： RootEditPart 的是使整个 GEF 框架运行起来的关键之一。 RootEditPart 并不对应于任何的模型对象，它将从 setContents () 方法中接收到的模型对象进行转换，并添加到整个的 EditPart 体系中去，具体的添加过程后面会有详细讨论。

2.       设置其 EditPartFactory ：负责从模型到 EditPart 的转换。一般来说一个模型对象对应于一个 EditPart 。这个类的

3.       设置 EditDomain ：用来接收事件并选择恰当的事件处理函数进行处理，因为我们尚不需要进行编辑，因此这一个可以暂时略过。

4.       调用 setContents () 方法 ：为其设置要显示的内容。

由 GraphicalViewer 所显示的内容，肯定是一个 Draw2d 中的 IFigure 对象。而如何从一个模型对象到一个 Figure 对象呢？这中间的联系就是通过 EditPart 来完成的。 GEF 使用的是 MVC 模式， Model 部分可以使任意的模型对象； View 部分就是 Draw2d 的 IFigure 对象，联系 Model 和 View 的 Controller ，在 GEF 中称为 EditPart 。简单的说， GEF 中的 EditPart ，负责将模型转换为 IFigure 的显示，它从模型中读取信息，生成 Figure ；另一方面， EditPart 负责从 View 接收事件，并将这些事件转化为对模型的修改。在这一部分中，我们暂时只关注于第一个方面： EditPart 是如何将一个模型转换为 Figure 以进行显示的。

还包括visual parts, feedback, handles, toolipts等等.

It includes the visual part, which serves as the primary representation for the model object(s).  The most flexible visual parts are Figures from draw2d.  GEF also provides support for SWT TreeItems, but support for other visuals can easily be added.  While "visual part" refers to the object primarily representing a model object, the more encompassing "view" includes feedback, handles, tooltips, and all things visible to the user.  All of these make up the view, and it is the controller's job to construct and manage them.

  2. Graphical editing 可以被定义为 :

1) 操作模型，这是通过对 Request 进行响应，生成 Command 来完成的。

2) 显示 Feedback ，在复杂的交互中， EditParts 需要为用户显示操作的反馈。

3) 上面所提的两个工作，均可以被 EditParts 代理到其他额外的 EditParts 上。

  3. EditPolicy 的 Role 字符串的作用 ，是使得 EditPolicy 能够用过这个 Key 来进行替换。例如子类可以通过 Role 这个 Key 来覆盖其父类所安装的 EditPolicy 。在 GEF 中， Role 和 EditPolicies 能够被划分为两类： Graphical 和 Non-Graphical 。非图形的角色能够不需要知道任何 View 的信息来处理模型对象，也就是说这种角色在不同类型的 viewers 中是可重用的。

  4. 角色及其定义

Non-Graphical Roles:

1) COMPONENT_ROLE:

一个 Component 存在于一个 parent 中，并且可以从 parent 中删除。更为一般的，它可以使任何只涉及到这个 EditPart ，而与 View 无关的东西。 (More generally, it is anything that involves only this EditPart.)

2) CONNECTION_ROLE

这是 ConnectionEditParts 应该有的一个基本角色。 Connections 同 Components 有一点不同，删除 Connections 时通常还需要其从其 source 和 target 节点中删除，而不是从其 parent 中删除。

3) CONTAINER_ROLE

大部分拥有 children 的 EditParts 都应该具有这个角色。一个 Container 会涉及到 adds/orphans 以及 creates/deletes 等操作。

4) NODE_ROLE

如果一个 EditParts 用户 Connection ，则其应该具有这个角色，它可以用来创建，删除，重新连接一个 Connection 。

  Graphical Roles:

1) PRIMARY_DRAG_ROLE:

用来允许用户拖动这个 EditPart 。用户可以通过点击这个 EditPart 然后拖动，或者点击这个 EditPart 所创建的一个 Handle 来进行拖动。

2) LAYOUT_ROLE:

Layout 角色用来放在一个 Container 的 EditPart 上，这个 EditPart 拥有一个 graphical layout 。如果这个 layout 有 constraints ，则它需要通过计算来得到这个 constraints 。

3) GRAPHICAL_NODE_ROLE:

A node supports connections to terminals.  When creating and manipulating connections, EditPolicies with this role might analyze a Request's data to perform "hit testing" on the graphical view and determine the semantics of the connection.

4) CONNECTION_ENDPOINTS_ROLE:

这个 Role 允许用户拖动一个 ConnectionEditPart 的端点。

5) CONNECTION_BENDPOINTS_ROLE:

这个 Role 允许用户能够在一个 Connection 中间拖动和创建 bendpoints 。

6) SELECTION_FEEDBACK_ROLE:

这个角色只是用来显示 feedback 。当鼠标进入或者在一个 EditPart 上暂停时， Selection Tool 会发送两个类型的 request 给 EditPart 。安装了这个角色的 EditPart 能够在此时接受这些请求来改变 view 的样子，或者弹出 tip ， label 等。

7) TREE_CONTAINER_ROLE:

SWT Tree 的 Layout Role 。