隔了将近一个月，我终于可以在家上网了——我又回来了。由于搬家后没有网上，本来这篇应该早就写完的文章也只能拖了这么久才“发布”。
在这一章，我说一下如何去利用布局，以及其他一些关于EditPolicy的用法和Palette的实现。说明一下，示例代码和本章内容中的代码有出入，这是因为以前我是做一点写一点，这次我完成得比较多，但是由于涉及技术有一些差异，所以我将分成两篇文章讲完，我建议大家看完第5章后再下代码。代码下载.
1.重新显示TableFigure
上一章中，我们简单地绘制了一个矩形，充当我们的数据库表的图形，现在让我们重新想想，如何显示这个TableFigure。
让我们看看Visio里面是怎么显示的吧：
我们也按照它的样子做一个类似的！
首先，我们需要显示我们的表名，其次，我们要将数据字段显示在表名下放的区域中，然后再在表名和存放数据库字段的区域之间画一条线，分割开。看下图：
看来我们以前写的TableFigure还差太远，仅仅一个矩形还不够。
先考虑一下如何显示表名。在TableFigure中显示一条文字很容易的，简单的方法就是在绘制它的时候，利用Graphics的drawText方法即可，但是这样做很繁琐，需要不停的计算表名显示位置，并且，当我们的表名发生改变的时候，表自身大小该如何调节呢。所以我们需要利用Label来显示，因为Label可以很容易地对显示的表名进行维护，包括计算文字长度获得Figure该具有的大小等；此外，当我们使用Label来显示的话， TableFigure还可以通过布局管理器来计算自己当前的大小，这又省得我们自己计算了。打开TableFigure类，增加以下代码：
public
TableFigure(Table model) {
super();
this
.model
=
model;
tableNameLabel
=
new
Label();
tableNameLabel.setText(model.getTableName());
FontData fd
=
new
FontData();
fd.setHeight(
10
);
fd.setName(
"
Arial
"
);
fd.setStyle(SWT.BOLD);
tableNameLabel.setFont(
new
Font(
null
, fd));
tableNameLabel.setIcon(ImageProvider.TABLE_ICON.createImage());
tableNameLabel.setLabelAlignment(PositionConstants.MIDDLE);
//
留出一点边距，会好看点
this
.setBorder(
new
MarginBorder(
8
,
8
,
8
,
8
));
this
.add(tableNameLabel);
this
.setOpaque(
true
);
}
我们在TableFigure创建的时候，给它生成了一个Label，然后将这个Label作为TableFigure的子Figure添加到它上面，这样一来我们就让这个Label来显示数据表名。上面代码中用到了图片设置以及字体设置，这里我们只讨论GEF，所以就不讨论他们了。
名字能显示了，现在该让我们的字段容器出场了！
字段的图形需要有容器去维护显示它，刚才我们也看到了，Visio中的字段都是在字段容器中自上而下有序地排列在一起的，问题就来了：怎么去让它们如此听话地有序排列呢。布局管理器（LayoutManager），只要做过桌面应用的人都知道，不错，Draw2D也是利用布局管理器来对图形进行位置大小进行维护的。在Draw2D中有一个名为ToolbarLayout的布局管理器，它实现了让Figure自上而下有序地排列在一起，这正是我们需要的！
现在让我们在TableFigure构造函数中增加以下代码：
containerFigure
=
new
Figure() ;
ToolbarLayout tableLayout
=
new
ToolbarLayout();
//
承载Column Figure的容器是ToolbarLayout
ToolbarLayout containerLayout
=
new
ToolbarLayout();
containerLayout.setMinorAlignment(ToolbarLayout.ALIGN_BOTTOMRIGHT);
containerFigure.setLayoutManager(containerLayout);
this
.add(containerFigure);
这样我们的containerFigure就做好了。
但是光这样还不够。containerFigure 和tableNamelable这两个Figure作为TableFigure的子图形，应该显示在哪儿呢？怎么给他们定位？而且，当我们的这两个子图形大小发生改变了以后，TableFigure怎么办？
其实所有的一切问题都是由布局管理器来回答的。
在Figure 类中有一个名位getPreferredSize的方法，这个方法是去获得当前Figure大小的。默认的情况下，getPreferredSize方法会查看该Figure中是否注册有布局管理器，如果有，那么就会调用布局管理器的getPreferredSize方法获得大小。布局管理器的 getPreferredSize方法并不是简单地去查看当前Figure的Size，而是要通过该布局本身的特点，再通过该Figure中的子图形位置以及大小，按照一定的算法叠加而取得当前Figure的大小。
简单说，如果我们使用了ToolbarLayout，那么当我们调用注册有该 LayoutManager的Figure的getPreferredSize方法时，布局管理器就会将该Figure的高度设置为它所有子Figure 的高度和；宽度设为所有子Figure中宽度最大值。
这样一来，根据我们刚才图形所画的那样，tableNameFigure和 containerFigure也是自上而下排列的，所有，我们可以在TableFigure中使用ToolbarLayout，让布局管理器来管理它的大小。写到这里大家也都看出来了，我们在containerFigure中设置ToolbarLayout的，也是为了当我们增加字段图形的时候，让布局管理器去控制它的大小。
我们已经基本完成了TableFigure。但是如果在我们添加了数据库字段的时候，EditPart并不知道让字段的Figure是作为TableFigure中containerFigure的子图形而添加进去的，它默认是把字段图形直接绘制到 TableFigure上，那这样我们刚才的设想就完全实现不了了。所以，让我们复写TableEditPart的getContentPane方法：
public
IFigure getContentPane() {
return
((TableFigure)getFigure()).getContainerFigure();
}
这是什么意思呢？
在前面的章节我好像说过了，GEF中对于某一个EditPart，它的子EditPart的图形是绘制在该EditPart的图形之上的——一个递归的过程。但是EditPart并不是把它的图形直接默认为子Fiuger的容器Figure，而是通过getContentPane方法来获得承载子 EditPart图形的Figure，当然，如果直接继承GraphicalEditPart的话，getContentPane方法直接返回的就是 getFigure，所以，当我们要重新定义EditPart的容器Figure的时候，就需要复写getContentPane。
2.显示出ColumnFigure
现在我们来实现字段图形。
字段图形很简单，只要实现字段名以及一个能表示字段的图标即可，所以我们将它继承自Label：
public
class
ColumnFigure extends Label {
private
Column model;
private
boolean selected;
private
boolean hasFocus;
public
ColumnFigure(Column model){
super();
this
.model
=
model;
model.setColumnName(model.getColumnName());
FontData fd
=
new
FontData();
fd.setHeight(
8
);
fd.setName(
"
Arial
"
);
fd.setStyle(SWT.BOLD);
this
.setIcon(ImageProvider.COLUMN_ICON.createImage());
this
.setLabelAlignment(PositionConstants.LEFT);
this
.setFont(
new
Font(
null
,fd));
}
}
然后让ColumnEditPart的createFigure方法返回它：
protected IFigure createFigure() {
// TODO Auto-generated method stub
return new ColumnFigure((Column)getModel());
}
ok,现在让我们在DbEditor中修改一下initializeGraphicalViewer方法:
protected void initializeGraphicalViewer() {
// 硬编码生成一个数据库模型
Schema schema = new Schema();
Table table = new Table();
table.setTableName("Test");
Column column = new Column();
column.setColumnName("test");
table.addChild(column);
schema.addChild(table);
this.getGraphicalViewer().setContents(schema);
}
OK，现在我们可以看到一个新的TableFigure了。
但是存在一个问题：我们的TableFigure大小自己不能计算获得，连字段都没显示出来。肯定有人要说了：不是说有了布局管理器就可以了吗！
等等，还记得
上一章中，我们为了能移动矩形，而复写了refreshVisuals方法吧？现在我们重新写一遍：
protected void refreshVisuals() {
super.refreshVisuals();
// 得到当前TableFigure的大小,由于有Toolbar布局的约束，它会自动计算
Dimension size = this.getFigure().getPreferredSize();
// 获得更改后的位置,位置是在Model进行维护的
Point p = ((Table) getModel()).getLocation();
// 我们只更改Table的位置
((GraphicalEditPart) this.getParent()).setLayoutConstraint(this, this
.getFigure(),new Rectangle(p, size));
}
看过以前代码的朋友一眼就发现了不同：size不再是简单的去取得当前的bounds大小了，而是通过我们上面说的，利用getPreferredSize方法去让布局计算！
修改完毕后再看看我们的TableFigure：
补充一下：篇幅问题，我只捡我认为重要的说，其他的一些细节，比如，TableFigure尺寸最大和最小约束啊，怎么画tableNameLabel下的线啊，还有Label的停靠啊，border的使用啊，渐变矩形的绘制啊，这些我就没有提起了，大家可以自己看代码，如果有疑问可以发贴讨论。
3.重新生成PaletteRoot
在我们以前的例子中，工具面板生成的是一个很简单的空面板，上面光秃秃的，无法通过面板的工具往我们的Viewer中增加Figure图形，使得我们每次都需要在DbEditor中复写修改代码，用硬编码来实现模型的增加。
现在起我们要构造一个可以创建Table和Column的工具面板，让硬编码创建模型见鬼去吧。
先生成一个单态类：PaletteFactory，然后在我们在里面生成一个空的PaletteRoot，再弄两个PaletteDrawer添加到PaletteRoot上：
public class PaletteFactory {
private PaletteRoot root;
private PaletteDrawer defaultTools;
private PaletteDrawer dbTools;
private static PaletteFactory instance = null;
private PaletteFactory(){}
public static PaletteFactory INSTANCE(){
if(instance == null) instance = new PaletteFactory();
return instance;
}
public PaletteRoot createPaletteRoot(){
// if(root != null) return root;
root = new PaletteRoot();
root.add(createDefaultToolBox());
root.add(createDbToolBox());
return root;
}
private PaletteDrawer createDefaultToolBox(){
defaultTools = new PaletteDrawer("Default tools");
defaultTools.add(new SelectionToolEntry());
return defaultTools;
}
private PaletteDrawer createDbToolBox(){
dbTools = new PaletteDrawer("DataBase tools");
return dbTools;
}
}
我简单说一下，PaletteDrawer是一种可以隐藏的容器，在它上面可以增加按钮等ToolEntry。什么是ToolEntry呢？大家可以理解为在Palette上面的任何元素：按钮、分割线、容器等，ToolEntry对应有一个Tool，通过ToolEntry的createTool返回的，如果我们需要一些特别处理的时候，可以直接去实现ToolEntry和Tool，但是在我们的例子中，我们需要的是可以生成模型的ToolEntry，所以我们就不必去研究ToolEntry和Tool的工作原理。
接着往下说。
上述代码中，我们给defaultTools容器增加了一个SelectionToolEntry，它是GEF自己提供的一个工具，是为点击选择图形使用的，对于它的作用这里就不废话了：）
从代码下面可以看出来，我们还没有增加创建Table和Column的ToolEntry，现在我们来实现他们。
创建两个ToolEntry，分别命名为TableToolEntry和ColumnToolEntry，他们都是继承了 CreationToolEntry。注意一下CreationToolEntry的构造函数，需要传入一个CreationFactory，这个工厂类就是创建我们所要返回的模型实例工厂，它的两个方法：getNewObject()和getObjectType()分别是返回创建的模型和模型的类型。
来看看我们的对该工厂的实现：
public class DbCreationFactory implements CreationFactory {
private Class type;
public DbCreationFactory(Class type){
setType(type);
}
public Object getNewObject() {
if(type == Table.class){
return new Table();
}
if(type == Column.class) return new Column();
return null;
}
public Object getObjectType() {
// TODO Auto-generated method stub
return getType();
}
.......
}
通过创建这个工 厂类的时候传入的参数，就可以生成对应的模型了
再看看我们的TableToolEntry和 ColumnToolEntry的实现的：
public class TableToolEntry extends CreationToolEntry {
public TableToolEntry() {
super("Table", "Create a table", new DbCreationFactory(Table.class), ImageProvider.TABLE_ICON, null);
}
}
public class ColumnToolEntry extends CreationToolEntry {
public ColumnToolEntry(){
super("Column", "Create a column", new DbCreationFactory(Column.class), ImageProvider.COLUMN_ICON, null);
}
}< /span>
大家看出来了，我们传入的DbCreationFactory 都是对应了他们所要生成模型需要的参数。
现在，我们的ToolEntry类创建好了，让我们把它们添加到 dbTools的PaletteDrawer上：
修改 PaletteFactory 类的
createDbToolBox()方法
private PaletteDrawer createDbToolBox(){
dbTools = new PaletteDrawer("DataBase tools");
dbTools.add(new TableToolEntry())；
dbTools.add(new ColumnToolEntry());
return dbTools;
}
运行一下:
4.新的Command； FlowEditPolicy的用法
完成了上面的工作后，我们离从工具面板上创建模型还差点：EditPolicy中没有对应的Command。
以前的章节里，我们都知道了，GEF中的所有事件都封装成了Request向外发送，然后找到EditPolicy处理，EditPolicy再去索取Command来执行。我们在上一章就已经生成了一个TableMoveCommand，所以相信大家对Command应该不陌生了。
我们生成这样一个Command：DbItemCreationCommand
public class DbItemCreateCommand extends Command {
private DBBase parent;
private DBBase child;
private int index = -1;
public void execute() {
Assert.isNotNull(parent);
Assert.isNotNull(child);
parent.addChild(index,child);
}
public void redo() {
execute();
}
public void undo() {
Assert.isNotNull(parent);
Assert.isNotNull(child);
parent.removeChild(child);
}
......
......
}
现在，有了这个Command，我们就要考虑一下，看讲它交给谁的EditPolicy去返回。
通常情况下，如果我们要生成一个模型，那么我们就应该在它的父容器的EditPolicy注册一个 Command，因为绝大多数的容器类型的EditPart，都有安装有ContainerEditPolicy或者LayoutEditPolicy，而这两种EditPolicy恰恰就能对CreateRequest进行截获并进行处理。所以，结合我们的例子，要生成Table模型，就需要在他的父 EditPart——SchemaEditPart的SchemaLayoutEditPolicy里做文章。
打开这个类，发现里面有一个方法：getCreateCommand，我们就在这里面返回DbItemCreateCommand吧：
protected Command getCreateCommand(CreateRequest request) {
Object obj = request.getNewObject();
if(obj != null && request.getNewObjectType() == Table.class){
DbItemCreateCommand command = new DbItemCreateCommand();
command.setParent((DBBase)this.getHost().getModel());
command.setChild((DBBase)obj);
((Table)obj).setLocation(request.getLocation());
return command;
}
return null;
}
看看上面的代码，发现了吗？CreateRequest携带有我们要生成的对象的类型以及实例，并且连我们在创建时点击在Viewer上的位置也有，所以，我们只需要设置一下DbItemCreateCommand中的父模型以及子模型即可，当然，我们还需要在生成模型的时候，将生成该模型时鼠标所点击的位置给Table模型，好让他一创建就处在该位置。太cool了！
但是光是添加了模型，EditPart是不知道的，所以我需要去通知EditPart刷新一下。还记得
上一章中，矩形位置更改后是怎么通知EditPart的吗？我再罗嗦一下吧：利用我们在模型中的PropertyChangeSupport发出属性更改通知，然后然EditPart截获后去做相应的动作即可：
更改DBBase部分代码代码：
public void addChild(int index , DBBase child){
if(index == -1){
getChildren().add(child);
}else{
getChildren().add(index,child);
}
child.setParent(this);
this.fireChildenChange(child);
}
public void removeChild(DBBase child){
child.setParent(null);
getChildren().remove(child);
this.fireChildenChange(child);
}
public void fireChildenChange(DBBase child){
support.firePropertyChange(PRO_CHILD,null,child);
}
让DBEditPartBase去截获PRO_CHILD事件：
public void propertyChange(PropertyChangeEvent evt) {
String pName = evt.getPropertyName();
if(pName.equals(DBBase.PRO_CHILD)){
this.refreshChildren();
this.refreshVisuals();
}
}
最后让我们把以前在DbEditor中生成模型的代码删除掉，就让Viewer的Content设置为一个Schema即可，
好了，运行一下吧，是不是可以创建Table了？:)
5.FlowLayoutEditPolicy的应用以及Column的创建我们已经能够创建Table了，现在需要创建一个Column。
在上面我们已经创造了生成Column模型的条件：ColumnToolEntry、DbCreateFactory还有DbItemCreateCommand，就差一样：我们把这个Command往哪儿放呢？
以前的经验告诉我们，这个Command是需要让ColumnEditPart的父EditPart的EditPolicy去返回的，但是它的父 EditPart，也是就TableEditPart，目前没有安装能够维护创建子模型的EditPolicy，所以我们需要创建一个给他安装上。
我们选用一个名为FlowLayoutEditPolicy的类作为我们新建EditPolicy的父类，这是因为 FlowLayoutEditPolicy专门针对具有FlowLayout以及ToolbarLayout布局管理器的Figure而做的，它可以对子 Figure的位置移动做出一些维护，比如当我们在TableFigure中拖动了ColumnFigure，FlowLayoutEditPolicy 可以在它可以插入的位置显示一条黑线：
我们的这个类就命名为TableFlowLayoutEditPolicy:
public class TableFlowLayoutEditPolicy extends FlowLayoutEditPolicy {
.......
protected Command getCreateCommand(CreateRequest request) {
Object obj = request.getNewObject();
if(obj != null && request.getNewObjectType() == Column.class){
DbItemCreateCommand command = new DbItemCreateCommand();
command.setParent((DBBase)this.getHost().getModel());
command.setChild((DBBase)obj);
EditPart after = getInsertionReference(request);
int index = getHost().getChildren().indexOf(after);
command.setIndex(index);
return command;
}
return null;
}
.......
............
protected boolean isHorizontal() {
IFigure figure = ((GraphicalEditPart)getHost()).getContentPane();
LayoutManager layout = figure.getLayoutManager();
if(layout instanceof FlowLayout)
return ((FlowLayout)figure.getLayoutManager()).isHorizontal();
if(layout instanceof ToolbarLayout)
return ((ToolbarLayout)figure.getLayoutManager()).isHorizontal();
return false;
}
}
我们在getCreateCommand中返回了DbItemCreateCommand，将parent设为Table，child即为生成request携带的Column对象，因为Column是没有位置这个概念的，我们就不必把位置参数给它（给了也没变量保存啊）它只可能是在这个表中的第几个而已，并且，我们在上面也提到了，在移动ColumnFigure的时候 FlowLayoutEditPolicy可以绘制一条黑线，显示当前插入的位置，所以我们通过然后我们getInsertionReference方法得到当前黑线所在索引所对应的EditPart，然后得到该EditPart在TableEditPart的子EditPart中的位置，再传递给 Command，让我们新生成的EditPart添加到该位置上。
但是，要让FlowLayoutEditPolicy显示出黑线来，我们还需要复写它的 isHorizontal方法，因为默认情况下，FlowLayoutEidtPolicy的 isHorizontal方法在运行时，认为安装该EditPolicy的EditPart使用的是FlowLayout，但是我们这里用的是 ToolbarLayout，所以如果不复写的话，将会抛出类型转换的异常。
我们只要简单的进行一下修改即可，或者直接让他返回true得了 ：）
由于我们已经在Column以及ColumnEditPart的基类中增加了添加子节点后的属性更改代码，所以这里就不用写了。
现在我们就可以通过点击工具栏的column工具在Table中创建Column了。
让我们看看整体效果：
6 . 结束语
这次我们基本上解决了数据库表以及数据库字段的实现问题，下一章我们会接着往下讲，其实代码里面已经有了，有兴趣的朋友可以看看。
下一章我会讲一下如何去在GEF应用中实现PropertyPage，以及Connection的一些问题