GEF学习教程2-Unplugged版

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

代码下载

最后的样子如下:



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



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

private  List children  =   new  ArrayList();

     public  List getChildren()  ... {
        return children;
    }

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

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

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

     public   void  addChild(Node node,  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);
        FlowLayout layout = new FlowLayout();
        layout.setHorizontal(false);
        layout.setMajorSpacing(2);
        setLayoutManager(layout);
        setBorder(new LineBorder(ColorConstants.black, 1));
        setOpaque(true);
    }

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

public  NodeFigure()  ... {
        Label name = new Label("nodeName");
        
        ToolbarLayout layout = new ToolbarLayout();
        setLayoutManager(layout);    
        setBorder(new LineBorder(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  List getModelChildren()  ... {
        return ((Column) getModel()).getChildren();
    }

     public   void  propertyChange(PropertyChangeEvent evt)  ... {
        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  Command getCreateCommand(CreateRequest request)  ... {
        CreateNodeCommand command = new CreateNodeCommand();
        command.setColumn((Column) getHost().getModel());
        
        Object object = request.getNewObject();
        if (object instanceof Node)...{
            command.setNode((Node) request.getNewObject());
            EditPart after = getInsertionReference(request);
            int index = getHost().getChildren().indexOf(after);
            command.setIndex(index);
            return command;
        }
        
        return null;
        
    }

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

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

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

CreationToolEntry creationNode  =   new  CreationToolEntry(
                 " draw node " ,  " create node " ,  new  SimpleFactory(
                        Node. class ), descriptor, descriptor);
        drawer.add(creationNode);

OK,大工告成:P

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