GWT入门教程

GWT入门教程

 

准备

需要Java SDK 1.6以上的JDK。

需要Apache Ant

 

下载和安装 GWT SDK

GWT SDK包含了核心库，编译器，和开发web应用需要的开发服务器。将压缩文件gwt-2.6.0.zip解压。

GWT附带了一个命令行实用程序webAppCreator，webAppCreator生成开始一个GWT项目所需要的所有文件，还生成Eclipse项目文件和方便在GWT开发模式调试程序的运行配置文件。

你可以用下面的命令在MyWebApp目录中创建一个demo应用：

cd gwt-2.6.0

webAppCreator -out MyWebApp com.mycompany.mywebapp.MyWebApp

webAppCreator脚本将在MyWebApp目录中生成一些文件，在类MyWebApp/src/com/mycompany/mywebapp/client/MyWebApp.java中实现了基本的“Hello,World”

功能。这个脚本也生成了Ant Build脚本MyWebApp/build.xml。

在开发模式下运行应用

使用下面的命令，在开发模式下运行你刚创建的应用：

cd MyWebApp/

ant devmode

这个命令将启动GWT开发模式服务器，一个用于开发和调试程序的本地服务器，如下图所示：

单击"Launch Default Browser"或单击 "Copy to Clipboard" (to copy its URL),然后粘贴到Firefox, Internet Explorer, Chrome,或 Safari地址栏，启动本地服务器。由于你是第一次启动开发模式服务器，将会提示你安装GWT开发者插件。按照浏览器中的提示安装这个插件，或许需要重启浏览器。

GWT开发者插件安装到浏览器后，再次访问URL，将会在开发模式装载起始应用，如下图所示：

 

几点变化

起始应用的原代码在MyWebApp/src/子目录中，这里MyWebApp是你给项目指定的名称。你将看到有两个包，com.mycompany.mywebapp.client和com.mycompany.mywebapp.server。client包内的代码将会编译成JavaScript，作为客户端代码在浏览器中运行。Server包中的java文件作为Java字节码运行在服务器上，这里是运行在App Engine服务器上。

查看client包中的MyWebApp.java。第40行构造了一个send按钮。

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

将"Send"修改为 "Send to Server"。

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

保存文件，单击浏览器中的“refresh”，你将会看到所作的变化。按钮应当显示"Send to Server" 而不是 "Send"。

 

在产品模式编译和运行

为了在GWT所谓的“产品模式”以JavaScript运行应用，执行下面的命令，编译应用。

ant build

Ant的“build”项将调用GWT编译器，从MyWebApp/war/中的MyWebApp Java源代码生成JavaScript和HTML文件。为了看到最终的应用，在浏览器中打开文件/MyWebApp/war/MyWebApp.html。应用应当与在上面的开发模式看起来是完全一样的。

恭喜你！你已经使用GWT创建了第一个Web应用。因为你已经编译了项目，你现在可以在IE, Chrome, Firefox, Safari, 和 Opera等浏览器中运行纯JavaScript和HTML代码。你现在可以将应用部署到web服务器上。

设置IDE

GWT提供了一组工具，可以和文本编辑器，命令行，浏览器一起使用这些工具。然而，或许你需要和你喜爱的IDE一起使用GWT。Google提供了一个Eclipse插件，使得用GWT的开发更容易。

下载Eclipse

如果你还没有Eclipse，你可以从Eclipse的网站（http://www.eclipse.org/downloads/）下载Eclipse。建议下载Eclipse 4.3 (Kepler)。

安装插件

安装插件的网址是：http://dl.google.com/eclipse/plugin/4.3。如果你使用的是Eclipse的早期版本，用你的版本号（例如4.2或3.7）代替4.3。

在安装对话框中，你将会看到安装插件、GWT和App Engine SDKs的选项。选择SDK选项将在Eclipse插件目录中安装GWT和/或App Engine SDK。

创建Web应用

为了创建Web应用，单击Eclipse的菜单项File>New>Web Application Project。

在New Web Application Project向导中，输入项目名称和java包名，例如，com.mycompany.mywebapp。如果你安装了Google App Engine ADK，向导将給出使用App Engine的选项。选择Use Google App Engine选项单击Finish。如下图所示：

 

恭喜你！你已经建立了一个GWT web应用。插件在工作空间中创建了一个模板项目。

在开发模式下运行应用

右击你的web应用项目，从弹出的菜单中选择Debug As>Web Application。这将为你创建一个Web应用运行配置，并运行Web应用。这个Web应用运行配置将会启动本地web服务器和GWT开发模式服务器。

在console窗口旁边有一个Web Application视窗。在这个视窗内，你会找到开发模式服务器的URL。复制这个URL到Firefox， Internet Explorer， Chrome，或Safari。如果你是第一次和开发模式服务器一起使用这个浏览器，将会提示你安装GWT开发者插件。按照浏览器中的提示安装插件，如下图所示：

一旦浏览器插件安装成功，再次访问URL将会在开发模式装载起始应用。

 

几点变化

起始应用的原代码在MyWebApp/src/子目录中，这里MyWebApp是你给项目指定的名称。你将看到有两个包，com.mycompany.mywebapp.client和com.mycompany.mywebapp.server。client包内的代码将会编译成JavaScript，作为客户端代码在浏览器中运行。Server包中的java文件作为Java字节码运行在服务器上。见下图：

查看client包中的MyWebApp.java。第40行构造了一个send按钮。

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

将"Send"修改为 "Send to Server"。

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

保存文件，单击浏览器中的“refresh”，你将会看到所作的变化。按钮应当显示"Send to Server" 而不是 "Send"。

现在，你也可以设置断点，查看变量的值，修改代码，正如你在Java Eclipse debug下所做的那样。

 

在产品模式编译和运行

为了在GWT所谓的“产品模式”以JavaScript运行应用，右击项目，选择Google>GWT Compile，编译应用。

这个命令将调用GWT编译器，从MyWebApp/war/中的MyWebApp Java源代码生成JavaScript和HTML文件。为了看到最终的应用，在浏览器中打开文件/MyWebApp/war/MyWebApp.html。

 

恭喜你！你已经使用GWT创建了第一个Web应用。因为你已经编译了项目，你现在可以在IE, Chrome, Firefox, Safari, 和 Opera等浏览器中运行纯JavaScript和HTML代码。你现在可以将应用部署到web服务器上。

 

部署到App Engine

利用插件，你也可以很容易地将GWT项目部署到Google App Engine。如果你在安装插件时安装了App Engine for Java SDK，你就可以右击项目和App Engine，选择Google>App Engine Settings。确认选择了Use Google App Engine。这将在项目中增加必要的配置文件。

为了将项目部署到App Engine，首先需要在App Engine Administration Console中创建一个应用ID。

有了应用ID以后，就可以右击项目，上下文菜单中选择Google>App Engine Settings…。在Deploy Project to Google App Engine对话框中，输入你的Google账号email和密码。

单击Deploy。

恭喜你！你已经用GWT创建了一个web应用，网址是http://application-id.appspot.com

 

原文：http://www.gwtproject.org/gettingstarted.html