[Eclipse]GEF入门系列（五、浅谈布局）

虽然很多GEF应用程序里都会用到连接（Connection），但也有一些应用是不需要用连接 来表达关系的，我们目前正在做的这个项目就是这样一个例子。在这类应用中，模型对象间 的关系主要通过图形的包含来表达，所以大多是一对多关系。

图1 不使用连接的GEF应用

先简单描述一下我们这个项目，该项目需要一个图形化的模型编辑器，主要功能是在一个 具有三行N列的表格中自由增加/删除节点，节点可在不同单元格间拖动，可以合并相邻节点 ，表格列可增减、拖动等等。由于SWT/Jface提供的表格很难实现这些功能，所以我们选择了 使用GEF开发，目前看来效果还是很不错的（见下图），这里就简单介绍一下实现过程中与图 形和布局有关的一些问题。

在动手之前首先还是要考虑模型的构造。由于Draw2D只提供了很有限的Layout，如 ToolbarLayout、FlowLayout和XYLayout，并没有一个GridLayout，所以不能把整个表格作为 一个EditPart，而应该把每一列看作一个EditPart（因为对列的操作比对行的操作多，所以 不把行作为EditPart），这样才能实现列的拖动。另外，从需求中可以看出，每个节点都包 含在一个列中，但仔细再研究一下会发现，实际上节点并非直接包含在列中，而是有一个单 元格对象作为中间的桥梁，即每个列包含固定的三个单元格，每个单元格可以包含任意个节 点。经过以上分析，我们的模型、EditPart和Figure应该已经初步成形了，见下表：

模型 EditPart Figure 画布 Diagram DiagramPart FreeformLayer 列 Column ColumnPart ColumnFigure 单元格 Cell CellPart CellFigure 节点 Node NodePart NodeFigure

表中从上到下是包含关系，也就是一对多关系，下图简单显示了这些关系：

图2 图形包含关系图

让我们从画布开始考虑。在画布上，列显示为一个纵向（高大于宽）的矩形，每个列有一 个头（Header）用来显示列名，所有列在画布上是横向排列的。因此，画布应该使用 ToolbarLayout或FlowLayout中的一种。这两种Layout有很多相似之处，尤其它们都是按指定 的方向排列显示图形，不同之处主要在于：当图形太多容纳不下的时候，ToolbarLayout会牺 牲一些图形来保持一行（列），而FlowLayout则允许换行（列）显示。

对于我们的画布来说，显然应该使用ToolbarLayout作为布局管理器，因为它的子图形 ColumnFigure是不应该出现换行的。以下是定义画布图形的代码：

Figure f = new FreeformLayer();ToolbarLayout layout=new ToolbarLayout();layout.setVertical(false);layout.setSpacing(5);layout.setStretchMinorAxis(true);f.setLayoutManager(layout);f.setBorder(new MarginBorder(5));

其中setVertical(false)指定横向排列子图形，setSpacing(5)指定子图形之间保留5象素 的距离，setStretchMinorAxis(true) 指定每个子图形的高度都保持一致。

ColumnFigure的情况要稍微复杂一些，因为它要有一个头部区域，而且它的三个子图形（ CellFigure）合在一起要能够充满下部区域，并且适应其高度的变化。一开始我用Draw2D提 供的Label来实现列头，但有一个不足，那就是你无法设置它的高度，因为Label类覆盖了 Figure的getPreferedSize()方法，使得它的高度只与里面的文本有关。解决方法是构造一个 HeaderFigure，让它维护一个Label，设置列头高度时实际设置的是HeaderFigure的高度；或 者直接让HeaderFiguer继承Label并重新覆盖getPreferedSize()也可以。我在项目里使用的 是前者。

第二个问题花了我一些时间才搞定，一开始我是在CellPart的refreshVisuals()方法里手 动设置CellFigure的高度为ColumnFigure下部区域高度的三分之一，但这样很勉强，而且还 需要额外考虑spacing带来的影响。后来通过自定义Layout的方式比较圆满的解决了这个问题 ，我让ColumnFigure使用自定义的ColumnLayout，这个Layout继承自ToolbarLayout，但覆盖 了layout()方法，内容如下：

class ColumnLayout extends ToolbarLayout {　　public void layout(IFigure parent) {　　　　IFigure nameFigure=(IFigure)parent.getChildren().get(0);　　　　IFigure childrenFigure=(IFigure)parent.getChildren().get(1);　　　　Rectangle clientArea=parent.getClientArea();　　　　nameFigure.setBounds(new Rectangle (clientArea.x,clientArea.y,clientArea.width,30));　　　　childrenFigure.setBounds(new Rectangle(clientArea.x,nameFigure.getBounds ().height+clientArea.y,clientArea.width,clientArea.height-nameFigure.getBounds ().height));　　}}

也就是说，在layout里控制列头和下部的高度分别为30和剩下的高度。但这还没有完，为 了让单元格正确的定位在表格列中，我们还要指定列下部图形（childrenFigure）的布局管 理器，因为实际上单元格都是放在这个图形里的。前面说过，Draw2D并没有提供一个像SWT中 FillLayout那样的布局管理器，所以我们要再自定义另一个layout，我暂时给它起名为 FillLayout（与SWT的FillLayout同名），还是要覆盖layout方法，如下所示（因为用了 transposer所以horizontal和vertical两种情况可以统一处理，这个transposer只在 horizontal时才起作用）：

public void layout(IFigure parent) {　　List children = parent.getChildren();　　int numChildren = children.size();　　Rectangle clientArea = transposer.t(parent.getClientArea());　　int x = clientArea.x;　　int y = clientArea.y;　　for (int i = 0; i < numChildren; i++) {　　　　IFigure child = (IFigure) children.get(i);　　　　Rectangle newBounds = new Rectangle(x, y, clientArea.width, -1);　　　　int divided = (clientArea.height - ((numChildren - 1) * spacing)) / numChildren;　　　　if (i == numChildren - 1)　　　　　　divided = clientArea.height - ((divided + spacing) * (numChildren - 1));　　　　newBounds.height = divided;　　　　child.setBounds(transposer.t(newBounds));　　　　y += newBounds.height + spacing;　　}}

上面这些语句的作用是将父图形的高（宽）度平均分配给每个子图形，如果是处于最后的 一位的子图形，让它占据所有剩下的空间（防止除不尽的情况留下空白）。完成了这个 FillLayout，只要让childrenFigure使用它作为布局管理器即可，下面是ColumnFigure的大 部分代码，列头图形（HeaderFigure）和列下部图形（ChildrenFigure）作为内部类存在：

private HeaderFigure name = new HeaderFigure();private ChildrenFigure childrenFigure = new ChildrenFigure();public ColumnFigure() {　　ToolbarLayout layout = new ColumnLayout();　　layout.setVertical(true);　　layout.setStretchMinorAxis(true);　　setLayoutManager(layout);　　setBorder(new LineBorder());　　setBackgroundColor(color);　　setOpaque(true);　　add(name);　　add(childrenFigure);　　setPreferredSize(100, -1);}class ChildrenFigure extends Figure {　　public ChildrenFigure() {　　　　ToolbarLayout layout = new FillLayout();　　　　layout.setMinorAlignment(ToolbarLayout.ALIGN_CENTER);　　　　layout.setStretchMinorAxis(true);　　　　layout.setVertical(true);　　　　layout.setSpacing(5);　　　　setLayoutManager(layout);　　}}class HeaderFigure extends Figure {　　private String text;　　private Label label;　　public HeaderFigure() {　　　　this.label = new Label();　　　　this.add(label);　　　　setOpaque(true);　　}　　public String getText() {　　　　return this.label.getText();　　}　　public Rectangle getTextBounds() {　　　　return this.label.getTextBounds();　　}　　public void setText(String text) {　　　　this.text = text;　　　　this.label.setText(text);　　　　this.repaint();　　}　　public void setBounds(Rectangle rect) {　　　　super.setBounds(rect);　　　　this.label.setBounds(rect);　　}}

单元格的布局管理器同样使用FillLayout，因为在需求中，用户向单元格里添加第一个节 点时，该节点要充满单元格；当单元格里有两个节点时，每个节点占二分之一的高度；依次 类推。下面的表格总结了各个图形使用的布局管理。由表可见，只有包含子图形的那些图形 才需要布局管理器，原因很明显：布局管理器关心和管理的是”子”图形，请时刻 牢记这一点。

　 布局管理器 直接子图形 画布 ToolbarLayout 列 列 ColumnLayout 列头部、列下部 -列头部 无 无 -列下部 FillLayout 单元格 单元格 FillLayout 节点 节点 无 无

这里需要特别提醒一点：在一个图形使用ToolbarLayout或子类作为布局管理器时，图形 对应的EditPart上如果安装了FlowLayoutEditPolicy或子类，你可能会得到一个 ClassCastException异常。例如例子中的CellFigure，它对应的EditPart是CellPart，其上 安装了CellLayoutEditPolicy是FlowLayoutEditPolicy的一个子类。出现这个异常的原因是 在FlowLayoutEditPolicy的isHorizontal()方法中会将图形的layout强制转换为FlowLayout ，而我们使用的是ToolbarLayout。我认为这是GEF的一个疏忽，因为作者曾说过FlowLayout 可应用于ToolbarLayout。幸好解决方法也不复杂：在你的那个EditPolicy中覆盖 isHorizontal()方法，在这个方法里先判断layout是ToolbarLayout还是FlowLayout，再根据 结果返回合适的boolean值即可。

最后，关于我们的画布还有一个问题没有解决，我们希望表格列增多到一定程度后，画布 可以向右边扩展尺寸，前面说过画布使用的是FreeformLayer作为图形。为了达到目的，还必 须在ediTor里设置rootEditPart为ScalableRootEditPart，要注意不是 ScalableFreeformRootEditPart，后者在需要各个方向都能扩展的画布的应用程序中经常被 使用。关于各种RootEditPart的用法，在后续帖子里将会介绍到。

以上结合具体实例讲解了如何在GEF中使用ToolbarLayout以及自定义简单的布局管理器。 我们构造图形应该遵守一个原则，那就是尽量让布局管理器决定每个子图形的位置和尺寸， 这样可以避免很多麻烦。当然也有例外，比如在XYLayout这种只关心子图形位置的布局管理 器中，就必须为每个子图形指定尺寸，否则图形将因为尺寸过小而不可见，这也是一个开发 人员十分容易疏忽的地方。

人性最可怜的就是：我们总是梦想着天边的一座奇妙的玫瑰园，