基于eclipse GEF开发Google GWT矢量图形应用(eclipse gef on gwt)

最新推荐文章于 2021-11-12 10:14:38 发布

iteye_12827

最新推荐文章于 2021-11-12 10:14:38 发布

阅读量67

点赞数

文章标签：开发工具 ui

本文介绍如何使用GWT和GEF整合创建一个可编辑的图表应用，通过调整代码实现图表的创建、编辑、保存等功能，并展示了实际运行案例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下面这个整合案例来自http://code.google.com/p/gwt-html5-graph/

实际的运行案例：

Demo1(GEF Sample): http://euml.trufun.net/drawx/gef-sample/Gef_sample.html

源码：

1、在gwt.xml中加入对GEF的依赖：

<inherits name='GEF' />

2、按照GEF API，开发相应的editparts, figures, commands, editpolicies,actions,context menus,以及图形数据的序列化

3、整合GEF和GWT。

3.1)继承drawx提供的DiagramEditorWithPalette<wbr>，如下：
</wbr>







import org.drawx.gef.sample.client.tool.example.model.CanvasModel;





import org.drawx.gef.sample.client.tool.example.model.MyConnectionModel;





import org.drawx.gef.sample.client.tool.example.model.OrangeModel;





import org.drawx.gef.ui.editor.DiagramEditorWithPalette<wbr>;





import org.drawx.gef.ui.editor.ToolPalette;





import org.eclipse.gef.EditPartFactory;





import org.eclipse.gef.requests.CreationFactory;





import org.eclipse.swt.widgets.internal.menu.MenuManager;











import com.google.gwt.user.client.ui.Image;











public class MyDiagramEditor extends DiagramEditorWithPalette<wbr>{











 public MyDiagramEditor(boolean b) {





 super(b);





 }











 @Override





 public EditPartFactory getEditPartFactory() {





 return new org.drawx.gef.sample.client.tool.example.editparts.MyEditPartFactory();





 }











 @Override





 public Object getContents() {





 return new CanvasModel();





 }











 @Override





 public void initPalette(ToolPalette palette) {





 palette.addCreationTool("Create Node", new Image(Images.INSTANCE.newModel().getURL()), new CreationFactory() {











 public Object getNewObject() {





 return new OrangeModel();





 }











 public Object getObjectType() {





 return OrangeModel.class;





 }





 });





 palette.addConnectionTool("Create Connection", new Image(Images.INSTANCE.newConnection().getURL()), new CreationFactory() {











 public Object getNewObject() {





 return new MyConnectionModel();





 }











 public Object getObjectType() {





 return MyConnectionModel.class;





 }





 });





 }











 @Override





 protected void doSave() {





 





 }











 @Override





 protected void createAppActions() {





 





 }











 @Override





 protected MenuManager getContextMenu() {





 return new MyContextMenuProvider(this.getGraphicalViewer(), this





 .getActionRegistry());





 }











}

</wbr></wbr>

3.2）将diagram editor加入到WEB页面上

private void createTab1(TabLayoutPanel p) {





 DiagramEditorWithPalette<wbr> editor = new MyDiagramEditor(true);





 p.add(editor.getWidget(), "Fill Canvas");





 }</wbr>