【译】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入门:准备环境

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

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

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

一旦安装成功,定位到URL,上述工和就会以开发模式被加载,如下:

【译】GWT入门:准备环境

三、做一点修改

入门工程的源码在目录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应用。 

相关推荐