GEF学习教程2-Unplugged版

上次做的例子非常非常简单,可以算是没有连接的GEF最简单的了吧:P
现在我要在上一个例子的基础上做点修改,让它稍微有点意思.

代码下载

最后的样子如下:



主要是增加了一个model叫Node,可以自由地增加到Column对象中.
UML图如下:



下面讲讲主要思路,还是按部就班,一个一个来:
1.model
除了增加一个简单的POJO对象Node,我们必须修改Column对象:
以下是在Column代码中增加的部分:
Column.java

private Listchildren = new ArrayList();

public ListgetChildren() ... {
returnchildren;
}

public void setChildren(Listchildren) ... {
this.children=children;
}

public void addChild(Nodenode) ... {
addChild(node,-1);
}

public void removeChild(Nodenode) ... {
children.remove(node);
}

public void addChild(Nodenode, int index) ... {
if(index>=0)
children.add(index,node);
else
children.add(node);
firePropertyChange(Content.P_CHILDREN,index,node);
}

这里有一个需要注意的地方是index,因为node对象可以随便插入到column的List中,所以我们需要gef告诉我们在图形化编辑时,新建的node放在column中的位置,不过等下就知道,还是很简单的.

Node的代码就略掉了.

2.Figure
写完model当然是写对应的Figure了,上一次Figure的代码是放在EditPart中的createFigure方法中的,这次我做了一点修改,增加了geftest3.figure包,以及两个Figure类:ColumnFigure, NodeFigure.
因为node是加入到Column中的,所以我们需要ColumnFigure来管理NodeFigure的布局. (布局的主要作用就是来安排所有子对象的位置).我在ColumnFigure中使用的是FlowLayout.
ColumnFigure.java

public ColumnFigure() ... {
setSize(200,100);
FlowLayoutlayout=newFlowLayout();
layout.setHorizontal(false);
layout.setMajorSpacing(2);
setLayoutManager(layout);
setBorder(newLineBorder(ColorConstants.black,1));
setOpaque(true);
}

然后就是NodeFigure,很简单:
NodeFigure.java

public NodeFigure() ... {
Labelname=newLabel("nodeName");

ToolbarLayoutlayout=newToolbarLayout();
setLayoutManager(layout);
setBorder(newLineBorder(ColorConstants.black,1));
setBackgroundColor(background);
setOpaque(true);

add(name);
}

2.EditPart
写完figure后我会马上更新或增加对应的EditPart以及PartFactory:
NodeEditPart和PartFactory没有什么特别之处,这里就省去了,可以下载插件查看代码.
这里关键是要更新ColumnEditPart:
我们告诉gef Column的子对象是哪些.以及在增加node后通知figure及时更新.
ContentEditPart.java

@Override
protected ListgetModelChildren() ... {
return((Column)getModel()).getChildren();
}

public void propertyChange(PropertyChangeEventevt) ... {
if(evt.getPropertyName().equals(Content.P_CHILDREN))
refreshChildren();
}

3.Command
增加一个CreateNodeCommand:
它的execute方法和一个setIndex方法如下:
CreateNodeCommand.java

@Override
public void execute() ... {
if(index<0)
column.addChild(node);
else
column.addChild(node,index);
}
public void setIndex( int index) ... {
this.index=index;
}

注意这里,我们如果index > 0,会把node加入到parent里的List的index位置.
4.Policy
因为是在Column里加子对象,所以我们必须为Column安装一个Policy来创建CreateNodeCommand.又因为Column是使用的FlowLayout,所以我就写了CustomFlowLayoutEditPolicy 继承GEF里的FlowLayoutEditPolicy.
只覆写了它的getCreateCommand方法:
CustomFlowLayoutEditPolicy .java

@Override
protected CommandgetCreateCommand(CreateRequestrequest) ... {
CreateNodeCommandcommand=newCreateNodeCommand();
command.setColumn((Column)getHost().getModel());

Objectobject=request.getNewObject();
if(objectinstanceofNode)...{
command.setNode((Node)request.getNewObject());
EditPartafter=getInsertionReference(request);
intindex=getHost().getChildren().indexOf(after);
command.setIndex(index);
returncommand;
}

returnnull;

}

在这个方法中可以用GEF的api得到index.
4.1安装policy
回到ColumnEditPart,安装policy
ColumnEditPart.java

@Override
protected void createEditPolicies() ... {
installEditPolicy(EditPolicy.LAYOUT_ROLE,
newCustomFlowLayoutEditPolicy());
}

5.Editor:
最后更新Editor的palette.
在getPaletteRoot方法中增加这段代码:
Editor.java

CreationToolEntrycreationNode = new CreationToolEntry(
" drawnode " , " createnode " , new SimpleFactory(
Node. class ),descriptor,descriptor);
drawer.add(creationNode);

OK,大工告成:P

参考资源:
GEF学习教程1-Unplugged版
GEF logic example.