这次的代码大改造，需要严重的感谢一个人：reload_cn。非常感谢他能耐心的听我不停的发牢骚，并给于正确的指导。这对后来的改造成功起决定性作用。尽管他将社区里的帅照改成了黑猩猩......

好，转入正题。目前的编辑器功能已经实现了，但是为什么要改布局呢？因为现在编辑器采用的是xyLayout，创建一个对象之后，将它的xywh保存在模型对象中，然后再refreshVisual的时候设置Figure的Bound。这么做的问题是，首先，没有很好的计算坐标，所以坐标有点出入（有的时候坐标出入大的难以接受），其次，本工具定义的主要是流程，所以编辑器里的“内容”很多，每创建一个对象都需要手工拖拽到合适的位置上。

在reload_cn的提示下，我研究了一下GEF的Flow例子。由于时间关系（元旦之后就会发布最终版本，要不加班，要不加快脚步干活），我直接就将flow里的GraphLayoutManager拿过来用了...

结果是，经常报些莫名其妙的错误。

所谓心急吃不了热豆腐。

继续在reload_cn的提示下，研究了他的sequnce diagram的例子。在这个例子中，他做了个很简单的布局处理。

从这里例子中，我领悟出了真谛：
      在EditPart中设置的Layout Policy其实主要处理的是创建对象等等request，并不处理真正的编辑器布局。又或者说它的布局是逻辑意义上的。真正处理布局，来让我们看到效果的，是Figure的布局。而这个正好是我常常忽略的。

Figure怎么布局？？我一般用的就是xyLayout和ToolbarLayout。但是如果要作出漂亮的效果，这些还是不够的。八进制的blog中提到了draw2d的tree example。我看过了，然后研究了一下，觉得太简单了，不能符合本项目的需求。

回头再看看flow，觉得这个例子本身就是流程定义，并且跟我的项目在Figure上有很多共同点。。。

仍然心有余悸，毕竟用flow的代码作的所有尝试（用了1天的时间）全部失败了，而且还败的莫名其妙。


开始尝试

不能因为失败，所以放弃（但是可以有放弃的想法，呵呵）。我决定一点一点地来尝试。

首先，我替换了所有的icon，至少图标看起来已经舒服多了。

接着，根据flow中figure的做法，更新了项目中的所有Figure。运行一下看看，呵呵，至少图标很象了。

我很喜欢flow中自动计算Figure位置的功能和动态移动效果。怎么办？继续改装代码。

将GraphLayoutManager小心翼翼的搬了过来。没有效果。但是至少没有出错。

开始使用GraphLayoutManager来进行坐标计算。（这个过程漫长而痛苦，不停的报异常，不停的对比代码，不停的跟踪，不停的发牢骚....）

最后出的问题最有意思，假如编辑器根模型的Figure采用flow中的figure，那么编辑器中只显示连线。为什么呢？因为我的编辑器中使用的是viewer.setRootEditPart(new ScalableFreeformRootEditPart());而flow中用的是getGraphicalViewer().setRootEditPart(new ScalableRootEditPart());所以在我这边，figure采用FreeformLayer就no problem了。

最终得结果是改好了，一切都跟flow那么象

结果

    


结论

假如你和我一样，在项目制作后期修改编辑器的布局，这里有几个建议：

1 研究一下例子，从简单的开始，一直到难的，让理论知识根深蒂固。
2 作个小例子，或者将你已经作的小例子进行类似的改编，看看出什么问题，为什么出问题。
3 例子没做出来没关系，这些跟头栽在小例子上比栽在项目中让人欣慰的多。
4 先修改Figure。尽量接近你想要的效果。
5 引入布局，暂时不要使用它，只要他的流程走下来没有问题就成功了一半。
6 使用布局。会出现很多问题，但是很容易定位问题。调试吧。

暂时就这么多吧，刚刚的改动导致了编辑器中的删除功能抛异常，我得看看去

在参考了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文件中并不会包含节点的图的信息，图显示出来会变得非常的乱，所有的节点都会堆在一起。





原文地址:http://www.blogjava.net/eclipshine/archive/2005/07/22/8195.aspx