GEFGWT的HelloWorld

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

发现一个好玩的东西，gef-gwt，使用它可以轻松的在web上建立gef程序，原文在这里http://gefgwt.org/getting-started/（文章虽然是英文，但是很容易懂，我是按部就班的记录下来，这其中包括了我遇到的问题）

在完成这个网页上的内容后，运行程序，会得到下面的效果：

我是觉得很酷，可以在网页上显示Gef的东西！

下面就是step by step的步骤，本篇文章不谈原理，只希望能跑的通！ Don’t be scared, the description is quite detailed but each step is really easy.

配置信息

先说一下我当前的配置（2013.07.03）

jdk的版本是1.7

eclipse的版本是4.2.0（不知道怎么看？ eclipse安装目录\readme\readme_eclipse.html ）

下面，我们开始吧！

下载GEFGWT

打开http://gefgwt.org/download/网址，你会看到这个：

把它下载下来，假设你下载到download的里面了，下载好了之后，先不管它（就是说，不要解压，也不要install到IDE中）

安装GWT

这是google开发的一个eclipse plugin，下载地址在https://developers.google.com/eclipse/docs/getting_started

我用到的是这一个，复制到install的workwith中，然后下载就可以啦。

（还有一点要补充的是，jdk至少是1.6的哦！（环境变量里面要配置好）不然，无法往下做了T.T）

创建一个Web Application project

web application project是由刚刚安装的google plug-in提供的。

选中web application project，然后点击next。我们创建一个新的工程，名字是MyProject，包名是mypackage。（最好叫这个名字，这样过一会你可以直接把代码copy过来运行）

然后把Google App Engine这一项勾掉，因为，我们暂时不需要它。

这个Wizard会自动为我们生成GWT中client和server部分的代码，我们主要关注的是client部分。

转换为plug-in项目

GEF是基于插件开发的，而在GWT和JavaScript中是没有plug-in的概念。我们希望仍然使用插件开发环境（PDE）来管理GEFGWT的代码，这是因为PDE在管理依赖（dependency）方面的表现是在是太棒了，所以转换之后方便多多。在workspace中，GWT仍然会将项目当做Java项目来处理，但是对于我们而言，看到的是一个Plug-in程序（两不误，很赞）。

在使用GWT编译之后，所有关于Plugin的东西都会被移除。

下面看看怎么转换吧：

右键选中项目，然后选择configure->convert to plug-in projects...

转换之后GWT的特征仍会被保留下来，而plug-in程序的特征会被加上去。

创建target定义

现在已经是Plug-in的工程了，在设置依赖（dependencies）之前，我们需要一个target platform。

下面我们来创建吧：

如果找到的眼花缭乱，在wizards中输入target就会出来了。然后把这个文件命名为gefgwt。

完成之后，点击add来添加一个site。

在这个窗口里面，将site命名为gefgwt，然后把我们前面下载的zip文件（download里面的）导入（Archive）。

点击确定你会看到site中包含了两个东西，我们全选。

你会看到target definitions中显示，我们已经有了19个plugins（19 plug-ins available）。

然后点击右上角的set as target platform。

添加依赖（dependencies）

打开META-INF下的MANIFEST.MF文件，然后添加GEF和shapes example到我们的项目中，如下图所示。

你可以在dependencies中看到已经添加的依赖包。

在xml文件中添加继承节点

   <inherits name='org.eclipse.gef.Gef'/>

   <inherits name='org.eclipse.gef.examples.shapes.Shapes'/>

重写MyProject.java

创建一个entry point来显示这些图形，在我们创建项目的时候，系统已经为我们生成了很多代码，删掉它，重新写一下。

 package mypackage.client;

 import org.eclipse.draw2d.geometry.Dimension;

 import org.eclipse.draw2d.geometry.Point;

 import org.eclipse.gef.EditDomain;

 import org.eclipse.gef.examples.shapes.model.EllipticalShape;

 import org.eclipse.gef.examples.shapes.model.RectangularShape;

 import org.eclipse.gef.examples.shapes.model.ShapesDiagram;

 import org.eclipse.gef.examples.shapes.parts.ShapesEditPartFactory;

 import org.eclipse.gef.ui.parts.ScrollingGraphicalViewer;

 import com.google.gwt.core.client.EntryPoint;

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

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

 import org.eclipse.swt.SWT;

 import org.eclipse.swt.widgets.Composite;

 public class MyProject implements EntryPoint {

     @Override

     public void onModuleLoad() {

         ScrollingGraphicalViewer sgv = new ScrollingGraphicalViewer();

         Composite composite = new Composite(null, SWT.NONE);

         sgv.createControl(composite);

         sgv.setEditPartFactory(new ShapesEditPartFactory());

         sgv.setEditDomain(new EditDomain());

         sgv.setContents(createContent());

         Widget gwtWidget = composite.getGwtWidget();

         RootLayoutPanel.get().add(gwtWidget);

     }

     private Object createContent() {

         ShapesDiagram diagram = new ShapesDiagram();

         RectangularShape rs = new RectangularShape();

         rs.setSize(new Dimension(75, 75));

         rs.setLocation(new Point(10, 10));

         EllipticalShape es = new EllipticalShape();

         es.setSize(new Dimension(140, 70));

         es.setLocation(new Point(100, 100));

         diagram.addChild(rs);

         diagram.addChild(es);

         return diagram;

     }

 }