GEF学习教程1-Unplugged版

现在开始学习GEF,我觉得学习GEF是非常有挑战性和从满乐趣的,我希望能够把平时的学习进程记录下来,既可以帮助入门者,也做为自己的笔记,能够加深自己对GEF的理解.

现在网上有许多GEF的教程,有些非常优秀,比如dudu的GEF教程,非常适合入门,八进制的教程,讲解了许多高级知识点,但是我还是觉得有很多他们的教程中没有或是说得不详细,我的目的不是取代他们的教程,而是一个补充:P

因为大部分教程都是以连接为重点,而我希望做一些和连接无关的GEF例子.
比如这个例子就是用了draw2d自带的ToolbarLayout来为column布局.

代码下载



1.model
作为开始,model非常简单,uml图如下:

为了让model的变化能够通知给editpart,我让所有model继承了AbstractModel类:
AbstractModel.java

public class AbstractModel ... {
privatePropertyChangeSupportlisteners=newPropertyChangeSupport(this);

publicvoidaddPropertyChangeListener(PropertyChangeListenerlistener)...{
listeners.addPropertyChangeListener(listener);
}

publicvoidfirePropertyChange(StringpropName,ObjectoldValue,
ObjectnewValue)...{
listeners.firePropertyChange(propName,oldValue,newValue);
}

publicvoidremovePropertyChangeListener(PropertyChangeListenerlistener)...{
listeners.removePropertyChangeListener(listener);
}

}

具体的model代码就不贴在这里了.可以查看下载plugin中的源代码.

2.EditPart:
写好model的代码后,开始写每个model对应的EditPart,这里分别是ContentEditPart和ColumnEditPart:
因为ContentEditPart作为最高层容器,我们是在它的上面添加Column,所以它负责为Column布局,给它设置ToolbarLayout.

首先给所有editPart写一个超类,让它自动注册为model的listener:
AbstractModel.java

public class AbstractModel ... {
privatePropertyChangeSupportlisteners=newPropertyChangeSupport(this);

publicvoidaddPropertyChangeListener(PropertyChangeListenerlistener)...{
listeners.addPropertyChangeListener(listener);
}

publicvoidfirePropertyChange(StringpropName,ObjectoldValue,ObjectnewValue)...{
listeners.firePropertyChange(propName,oldValue,newValue);
}

publicvoidremovePropertyChangeListener(PropertyChangeListenerlistener)...{
listeners.removePropertyChangeListener(listener);
}

}

然后开始写每个EditPart:
下面是ContentEditPart中的createFigure()方法:
ContentEditPart.java

@Override
protected IFigurecreateFigure() ... {
Layerlayer=newFreeformLayer();
ToolbarLayoutlayout=newToolbarLayout();
layout.setVertical(false);
layout.setSpacing(5);
layout.setStretchMinorAxis(true);
layer.setLayoutManager(layout);
layer.setBorder(newMarginBorder(5));
returnlayer;
}

Column的EditPart的createFigure就简单得多,只是一个Label,如下所示:
ColumnEditPart.java

@Override
protected IFigurecreateFigure() ... {
Columncolumn=(Column)getModel();
Labellabel=newLabel();
label.setText(column.getName());
label.setBorder(newCompoundBorder(newLineBorder(),
newMarginBorder(3)));
label.setBackgroundColor(ColorConstants.green);
label.setOpaque(true);
label.setSize(40,60);
returnlabel;
}

3.PartFactory:
PartFactory就象其名字一样,很简单的Factory对象,用来连接EditPart和Model,只有一个方法,createEditPart()如下:
PartFactory.java

public EditPartcreateEditPart(EditPartcontext,Objectmodel) ... {
if(modelinstanceofContent)...{
EditPartpart=newContentEditPart();
part.setModel(model);
returnpart;
}elseif(modelinstanceofColumn)...{
EditPartpart=newColumnEditPart();
part.setModel(model);
returnpart;
}
thrownewRuntimeException();
}

4.Command:
然后就是开始写Command了.
这个例子只是简单的把Column加入到编辑器中,所以只有一个CreateCommand:
CreateCommand.java

@Override
public void execute() ... {
content.addChild(column);
}

4.1command执行后,model将发生变化,那么editPart如何得到通知并将变化转交给figure呢?
在这里editPart中加入以下两个方法.(EditPart是实现了PropertyChangeListener接口)
ContentEditPart.java

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

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

5.Policy:
tool接收到request,然后发给对应的EditPart,EditPart会遍历所有安装过的Policy,找到能够处理request的Policy,然后构造Command,并在适当时刻执行Command.
因为这个例子中的最高层Container我们使用的是ToolbarLayout,所以我这里没有象以往一样安装XYLayout可以使用的XYLayoutEditPolicy,而是选择了继承OrderedLayoutEditPolicy .为什么呢?
因为Layout是来安排每个child的位置,而XYLayout是用坐标进行绝对定位,所以不仅model需要拥有对应的坐标属性,而且相应的policy在创建Command时需要得到相应的坐标信息.这个例子里面我们使用的是ToolbarLayout,它不是以坐标来定位的,所以我们不需要用XYLayoutEditPolicy.
GEF中自带的LayoutPolicy结构如下:

这样可以很清晰得看出来GEF为不同的Layout已经设计过不同的policy,Draw2D中主要有以坐标定位的XYLayout和按位置定位的ToolbarLayout和FlowLayout.(后两者的区别主要是FlowLayout可以转行).暂时我是用的ToolbarLayout最简单的方式,所以选择了继承OrderedLayoutEditPolicy.
因为只要实现创建Column,所以我只覆写了OrderedLayoutEditPolicy里的getCreateCommand方法,如下:
CustomOrderedLayoutEditPolicy.java

@Override
protected CommandgetCreateCommand(CreateRequestrequest) ... {
CreateCommandcommand=newCreateCommand();
Columncolumn=(Column)request.getNewObject();

command.setContent((Content)getHost().getModel());
command.setColumn(column);
returncommand;
}

5.1安装policy
写好policy后就是安装它到editPart上了,回到ContentEditPart,覆写createEditPolicies方法:
ContentEditPart.java

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

6.Editor:
主要是getPaletteRoot方法:
Editor.java

@Override
protected PaletteRootgetPaletteRoot() ... {
PaletteRootroot=newPaletteRoot();
PaletteGrouptoolGroup=newPaletteGroup("tools");
ToolEntrytool=newSelectionToolEntry();
toolGroup.add(tool);

tool=newMarqueeToolEntry();
toolGroup.add(tool);

PaletteDrawerdrawer=newPaletteDrawer("draw");
ImageDescriptordescriptor=ImageDescriptor
.getMissingImageDescriptor();

CreationToolEntrycreationEntry=newCreationToolEntry(
"drawcolumn","createcolumn",newSimpleFactory(
Column.class),descriptor,descriptor);
drawer.add(creationEntry);


root.add(toolGroup);
root.add(drawer);

returnroot;
}

参考资源:
eclipse cvs上的draw2d examples
gef源代码
dudu的教程
八进制的教程