【译】GWT入门：设置Eclipse

liugang594

浏览: 991313 次
性别:
来自: 北京

最近访客更多访客>>

lijianfeng2019

leisure0422

五棵松看

bbgb1984

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

GWT提供了一个工具集可以集成文本编辑器、命令行和浏览器。然而，你可能也希望GWT可以同你喜爱的IDE工具集成一体使用。Google提供了一个eclipse插件，使得GWT应用开发更简单，易用。

一、下载eclipse

如果你还没有eclipse，可以去eclipse的官网下载：Eclipse Website 。我目前使用的版本是3.8

二、安装eclipse

安装google插件，可以使用以下update site：

http://dl.google.com/eclipse/plugin/4.2

如果你使用一个更早版本的eclipse，可以看看相应说明链接：Eclipse 3.7 ， Eclipse 3.6 ，或 Eclipse 3.5 。

在安装对话框里，可以选择是否安装GWT和App Engine SDKs，如果选择此项，则会安装GWT和/或App Engine SDK到你的eclipse插件目录下。

如果之前你已经安装了独立版本的sdk，则可以忽略此项，稍后到eclipse里去配置路径，或者为了方便，你也可以选择安装这两个sdk，则安装完后不需要另外设置sdk了。

install-plugin

三、创建Web App

要创建一个Web应用，选择菜单：File > New > Web Application Project ，在New Web Application Project 向导里，输入你的project名字和java包名，例如com.mycompany.mywebapp。如果你安装了Google App Engine SDK，则会有一个选项是：是否也使用App Engine。目前，可以先不使用它，点Finish完成。

create-project

至此，你已经成功在eclipse里创建了一个GWT的示例工程。

四、本地开发模式运行

右击你的web 工程，从弹出菜单里选择 Debug As > Web Application 。

这个菜单会为当前的工程创建一个Web Application 的运行配置项并执行它，这和上一节的 ant devmode 执行结果类似：它会启动一个本地的web server和一个GWT的开发模式Server（GWT Development mode server）。

启动后，在console 视图旁边，可以找到一个Web Application 视图，在这个视图里可以找到运行的URL，把它复制到任一浏览器里即可看到运行结果：

webappview

如果这是你第一次运行GWT的开发模式，则会询问你需要安装GWT的开发插件(Google Web Toolkit Developer Plugin)，依照指示安装完插件后，重启浏览器即可。

一旦安装成功，定位到URL，上述工程就会以开发模式被加载显示。

五、做一点修改

入门工程的源码在目录MyWebApp/src/子目录下，其中MyWebApp是工程的名字，你会看到在源码下有两个名：com.mycompany.mywebapp.client和com.mycompany.mywebapp.server。在client包里的代码会被编译成javascript脚本并以client的模式运行在浏览器里；在server包里的代码会以普通java字节码的形式运行在server端。

看到com/mycompany/mywebapp/client/MyWebApp.java 第40行，构造了一个button：

final Button sendButton = new Button("Send");

把文本内容从Send改为Send to Server：

final Button sendButton = new Button("Send to Server");

然后保存，刷新浏览器，就可以看到按钮的文本已经变了。

现在，你也可以设置断点，查看变量值和修改代码，就像你平时在eclipse上做java开发一样。

六、在production mode下编译和运行

以上我们介绍了怎么在开发模式下运行，要真正的把应用编译成javascript，也即GWT称之为"production mode"的模式下运行，右击工程，选择：Google > GWT Compile。

这个命令会调用GWT的编译器，根据MyWebApp下的java代码和资源，来生成一系列的javascript和html文件，要检验应用，在浏览器中打开MyWebApp/war/MyWebApp.html，看到的界面和以上在开发模式下的是一样的。

到此，恭喜，你已经成功的使用GWT创建了你的第一个web应用。由于你已经编译了它，你现在得到了一个纯的javascript和html应用，可以运行于IE， Chrome， Firefox，Safari和Opera，你也可以部署这个应用到你的应用服务器中，只需要拷由war目录下对应的javascript文件和html文件

七、部署到App Engine

使用gwt插件，你也可以很方便的把gwt项目部署到Google App Engine上去。如果在安装插件时你也安装了App Engine，那现在右击工程，选择 Google > App Engine Settings，选中Use Google App Engine来启用App Engine，它会添加一些必要的配置文件到你的工程里。

要部署到App Engine上，你首先需要在 App Engine Administration Console 申请注册有一个application ID。

有了ID以后，选择工程右击选择Google > App Engine Settings... ，在Application ID输入你的application ID，点击OK.，即可。

配置完后，右击工程，选择Google > Deploy to App Engine菜单，在Deploy Project to Google App Engine 对话框里输入你的google email和password，点击 Deploy.

恭喜，你现在在http://application-id.appspot.com/有了一个基于GWT的web app。