现在开始学习GEF,我觉得学习GEF是非常有挑战性和从满乐趣的,我希望能够把平时的学习进程记录下来,既可以帮助入门者,也做为自己的笔记,能够加深自己对GEF的理解.
现在网上有许多GEF的教程,有些非常优秀,比如dudu的GEF教程,非常适合入门,八进制的教程,讲解了许多高级知识点,但是我还是觉得有很多他们的教程中没有或是说得不详细,我的目的不是取代他们的教程,而是一个补充:P
因为大部分教程都是以连接为重点,而我希望做一些和连接无关的GEF例子.
比如这个例子就是用了draw2d自带的ToolbarLayout来为column布局.
代码下载
1.model
作为开始,model非常简单,uml图如下:
为了让model的变化能够通知给editpart,我让所有model继承了AbstractModel类:
AbstractModel.java
具体的model代码就不贴在这里了.可以查看下载plugin中的源代码.
2.EditPart:
写好model的代码后,开始写每个model对应的EditPart,这里分别是ContentEditPart和ColumnEditPart:
因为ContentEditPart作为最高层容器,我们是在它的上面添加Column,所以它负责为Column布局,给它设置ToolbarLayout.
首先给所有editPart写一个超类,让它自动注册为model的listener:
AbstractModel.java
然后开始写每个EditPart:
下面是ContentEditPart中的createFigure()方法:
ContentEditPart.java
Column的EditPart的createFigure就简单得多,只是一个Label,如下所示:
ColumnEditPart.java
3.PartFactory:
PartFactory就象其名字一样,很简单的Factory对象,用来连接EditPart和Model,只有一个方法,createEditPart()如下:
PartFactory.java
4.Command:
然后就是开始写Command了.
这个例子只是简单的把Column加入到编辑器中,所以只有一个CreateCommand:
CreateCommand.java
4.1command执行后,model将发生变化,那么editPart如何得到通知并将变化转交给figure呢?
在这里editPart中加入以下两个方法.(EditPart是实现了PropertyChangeListener接口)
ContentEditPart.java
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
5.1安装policy
写好policy后就是安装它到editPart上了,回到ContentEditPart,覆写createEditPolicies方法:
ContentEditPart.java
6.Editor:
主要是getPaletteRoot方法:
Editor.java
参考资源:
eclipse cvs上的draw2d examples
gef源代码
dudu的教程
八进制的教程
现在网上有许多GEF的教程,有些非常优秀,比如dudu的GEF教程,非常适合入门,八进制的教程,讲解了许多高级知识点,但是我还是觉得有很多他们的教程中没有或是说得不详细,我的目的不是取代他们的教程,而是一个补充:P
因为大部分教程都是以连接为重点,而我希望做一些和连接无关的GEF例子.
比如这个例子就是用了draw2d自带的ToolbarLayout来为column布局.
代码下载
1.model
作为开始,model非常简单,uml图如下:
为了让model的变化能够通知给editpart,我让所有model继承了AbstractModel类:
AbstractModel.java
public
class
AbstractModel
{
private PropertyChangeSupport listeners = new PropertyChangeSupport(this);
public void addPropertyChangeListener(PropertyChangeListener listener) {
listeners.addPropertyChangeListener(listener);
}
public void firePropertyChange(String propName, Object oldValue,
Object newValue) {
listeners.firePropertyChange(propName, oldValue, newValue);
}
public void removePropertyChangeListener(PropertyChangeListener listener) {
listeners.removePropertyChangeListener(listener);
}
}
private PropertyChangeSupport listeners = new PropertyChangeSupport(this);
public void addPropertyChangeListener(PropertyChangeListener listener) {
listeners.addPropertyChangeListener(listener);
}
public void firePropertyChange(String propName, Object oldValue,
Object newValue) {
listeners.firePropertyChange(propName, oldValue, newValue);
}
public void removePropertyChangeListener(PropertyChangeListener listener) {
listeners.removePropertyChangeListener(listener);
}
}
具体的model代码就不贴在这里了.可以查看下载plugin中的源代码.
2.EditPart:
写好model的代码后,开始写每个model对应的EditPart,这里分别是ContentEditPart和ColumnEditPart:
因为ContentEditPart作为最高层容器,我们是在它的上面添加Column,所以它负责为Column布局,给它设置ToolbarLayout.
首先给所有editPart写一个超类,让它自动注册为model的listener:
AbstractModel.java
public
class
AbstractModel
{
private PropertyChangeSupport listeners = new PropertyChangeSupport(this);
public void addPropertyChangeListener(PropertyChangeListener listener){
listeners.addPropertyChangeListener(listener);
}
public void firePropertyChange(String propName, Object oldValue, Object newValue){
listeners.firePropertyChange(propName, oldValue, newValue);
}
public void removePropertyChangeListener(PropertyChangeListener listener){
listeners.removePropertyChangeListener(listener);
}
}
private PropertyChangeSupport listeners = new PropertyChangeSupport(this);
public void addPropertyChangeListener(PropertyChangeListener listener){
listeners.addPropertyChangeListener(listener);
}
public void firePropertyChange(String propName, Object oldValue, Object newValue){
listeners.firePropertyChange(propName, oldValue, newValue);
}
public void removePropertyChangeListener(PropertyChangeListener listener){
listeners.removePropertyChangeListener(listener);
}
}
然后开始写每个EditPart:
下面是ContentEditPart中的createFigure()方法:
ContentEditPart.java
@Override
protected IFigure createFigure() {
Layer layer = new FreeformLayer();
ToolbarLayout layout = new ToolbarLayout();
layout.setVertical(false);
layout.setSpacing(5);
layout.setStretchMinorAxis(true);
layer.setLayoutManager(layout);
layer.setBorder(new MarginBorder(5));
return layer;
}
protected IFigure createFigure() {
Layer layer = new FreeformLayer();
ToolbarLayout layout = new ToolbarLayout();
layout.setVertical(false);
layout.setSpacing(5);
layout.setStretchMinorAxis(true);
layer.setLayoutManager(layout);
layer.setBorder(new MarginBorder(5));
return layer;
}
ColumnEditPart.java
@Override
protected IFigure createFigure() {
Column column = (Column) getModel();
Label label = new Label();
label.setText(column.getName());
label.setBorder(new CompoundBorder(new LineBorder(),
new MarginBorder(3)));
label.setBackgroundColor(ColorConstants.green);
label.setOpaque(true);
label.setSize(40, 60);
return label;
}
protected IFigure createFigure() {
Column column = (Column) getModel();
Label label = new Label();
label.setText(column.getName());
label.setBorder(new CompoundBorder(new LineBorder(),
new MarginBorder(3)));
label.setBackgroundColor(ColorConstants.green);
label.setOpaque(true);
label.setSize(40, 60);
return label;
}
PartFactory就象其名字一样,很简单的Factory对象,用来连接EditPart和Model,只有一个方法,createEditPart()如下:
PartFactory.java
public
EditPart createEditPart(EditPart context, Object model)
{
if (model instanceof Content){
EditPart part = new ContentEditPart();
part.setModel(model);
return part;
}else if (model instanceof Column){
EditPart part = new ColumnEditPart();
part.setModel(model);
return part;
}
throw new RuntimeException();
}
if (model instanceof Content){
EditPart part = new ContentEditPart();
part.setModel(model);
return part;
}else if (model instanceof Column){
EditPart part = new ColumnEditPart();
part.setModel(model);
return part;
}
throw new RuntimeException();
}
然后就是开始写Command了.
这个例子只是简单的把Column加入到编辑器中,所以只有一个CreateCommand:
CreateCommand.java
@Override
public void execute() {
content.addChild(column);
}
public void execute() {
content.addChild(column);
}
4.1command执行后,model将发生变化,那么editPart如何得到通知并将变化转交给figure呢?
在这里editPart中加入以下两个方法.(EditPart是实现了PropertyChangeListener接口)
ContentEditPart.java
@Override
protected List getModelChildren() {
return ((Content) getModel()).getChildren();
}
public void propertyChange(PropertyChangeEvent evt) {
if (evt.getPropertyName().equals(Content.P_CHILDREN))
refreshChildren();
}
protected List getModelChildren() {
return ((Content) getModel()).getChildren();
}
public void propertyChange(PropertyChangeEvent evt) {
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 Command getCreateCommand(CreateRequest request) {
CreateCommand command = new CreateCommand();
Column column = (Column) request.getNewObject();
command.setContent((Content) getHost().getModel());
command.setColumn(column);
return command;
}
protected Command getCreateCommand(CreateRequest request) {
CreateCommand command = new CreateCommand();
Column column = (Column) request.getNewObject();
command.setContent((Content) getHost().getModel());
command.setColumn(column);
return command;
}
写好policy后就是安装它到editPart上了,回到ContentEditPart,覆写createEditPolicies方法:
ContentEditPart.java
@Override
protected void createEditPolicies() {
installEditPolicy(EditPolicy.LAYOUT_ROLE, new CustomOrderedLayoutEditPolicy());
}
protected void createEditPolicies() {
installEditPolicy(EditPolicy.LAYOUT_ROLE, new CustomOrderedLayoutEditPolicy());
}
主要是getPaletteRoot方法:
Editor.java
@Override
protected PaletteRoot getPaletteRoot() {
PaletteRoot root = new PaletteRoot();
PaletteGroup toolGroup = new PaletteGroup("tools");
ToolEntry tool = new SelectionToolEntry();
toolGroup.add(tool);
tool = new MarqueeToolEntry();
toolGroup.add(tool);
PaletteDrawer drawer = new PaletteDrawer("draw");
ImageDescriptor descriptor = ImageDescriptor
.getMissingImageDescriptor();
CreationToolEntry creationEntry = new CreationToolEntry(
"draw column", "create column", new SimpleFactory(
Column.class), descriptor, descriptor);
drawer.add(creationEntry);
root.add(toolGroup);
root.add(drawer);
return root;
}
protected PaletteRoot getPaletteRoot() {
PaletteRoot root = new PaletteRoot();
PaletteGroup toolGroup = new PaletteGroup("tools");
ToolEntry tool = new SelectionToolEntry();
toolGroup.add(tool);
tool = new MarqueeToolEntry();
toolGroup.add(tool);
PaletteDrawer drawer = new PaletteDrawer("draw");
ImageDescriptor descriptor = ImageDescriptor
.getMissingImageDescriptor();
CreationToolEntry creationEntry = new CreationToolEntry(
"draw column", "create column", new SimpleFactory(
Column.class), descriptor, descriptor);
drawer.add(creationEntry);
root.add(toolGroup);
root.add(drawer);
return root;
}
参考资源:
eclipse cvs上的draw2d examples
gef源代码
dudu的教程
八进制的教程