【译】GWT入门：准备环境

【此系列文章译自：https://developers.google.com/web-toolkit/doc/latest/tutorial/】

 

一、GWT SDK （命令行工具）

前提

1. JDK： 下载地址 http://java.sun.com/javase/downloads/ ， 下载后安装，并配置Java_Home
2. Ant： 下载地址 http://ant.apache.org/ ，下载完后安装，并配置Ant_Home
3. GWT SDK: 下载地址 https://developers.google.com/web-toolkit/download 当前我用的版本是 http://google-web-toolkit.googlecode.com/files/gwt-2.5.0.zip ， 下载完后，解压到某个目录下，例如../gwt-2.5.0

 

二、创建第一个Web APP

 

GWT提供了一个命令行工具 webAppCreator 用来自动生成所有你需要用来启动一个GWT工程的文件；另外，它也会生成一个eclipse的project必需的所有文件和运行配置文件（launch config files）可以在开发模式下很容易的进行调试。

 

要使用webAppCreator在MyWebApp目录下创建一个demo工程，可以执行：

#进到 gwt-2.5.0

webAppCreator -out MyWebApp com.mycompany.mywebapp.MyWebApp

 

执行完后，在MyWebApp目录下，就会生成一堆文件，其中包括一个 MyWebApp/src/com/mycompany/mywebapp/client/MyWebApp.java 文件，可以认为它就相当于其他教程里的Hello World程序；除此，还会生成一个ant脚本文件MyWebApp/build.xml。

 

现在生成的这个工程已经是一个可运行的程序了，进入到MyWebApp目录下，运行命令：

ant devmode

运行成功后，就可以看到如下窗口打开： 

这个命令行启动了一个GWT的开发模式的Server，一个用来本地开发和调试的server，如上图。

 

点击"Launch Default Browser"，就会用默认的浏览器显示生成的Web应用，也可以"Copy to Clipboard"，把生成的URL地址复制，然后粘贴到任一的浏览器中。

 

如果这是你第一次运行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 第41行，构造了一个button：

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

 

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

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

 

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

 

四、在Production模式下编译和运行

 

以上我们介绍了怎么在开发模式下运行，要真正的把应用编译成javascript， 也即GWT称之为"production mode"的模式下运行，可以执行以下命令来编译工程：

ant build

 

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

 

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

 

 

到目前，我们都是基于命令行工具来开发，下一节会介绍如何在eclipse中开发gwt应用。