GEF入门系列(五浅谈布局).doc

GEF入门系列（五、浅谈布局） 图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) {　　　　IFi