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