用GWT(Google Web Toolkit)开发Ajax-HelloWorld

用GWT(GoogleWebToolkit)开发Ajax-HelloWorld


摘要: 本文介绍用GWT(Google Web Toolkit)开发第一个Ajax应用。应用效果，将在应用页面显示一个按钮，点击时候显示"HelloWorld"
关键字: GWT Google Web Toolkit Ajax 入门应用
环境准备

* eclipse
* google web toolkit
* tomcat_5.0.28
* 以上3者均可通过google搜索方便下载到，安装配置不再详细介绍

实现过程

1、创建应用

创建一个gwt项目的目录，我的就是在d:\gwt_test\helloworld

用gwt的applicationCreator.bat(该批处理文件在gwt安装目录下可以看到)创建应用：

applicationCreator.cmd org.jmg.client.HelloWorld

成功执行输出：

Created directory D:\gwttest\helloworld\src（这个目录包含自动创建的java文件)

Created directory D:\gwttest\helloworld\src\org\jmg

Created directory D:\gwttest\helloworld\src\org\jmg\client

Created directory D:\gwttest\helloworld\src\org\jmg\public

Created file D:\gwttest\helloworld\src\org\jmg\HelloWorld.gwt.xml

Created file D:\gwttest\helloworld\src\org\jmg\public\HelloWorld.html

Created file D:\gwttest\helloworld\src\org\jmg\client\HelloWorld.java

Created file D:\gwttest\helloworld\HelloWorld-shell.cmd(这个命令将会调用gwt内置的服务器来运行应用）

Created file D:\gwttest\helloworld\HelloWorld-compile.cmd（编译应用，把前边的java文件编译成javascript代码，和其他的附加文件，注意，他不会编译server端文件）


2、编译输出:

执行helloworld下的HelloWorld-compile.cmd

Output will be written into D:\gwttest\helloworld\www\org.jmg.HelloWorld(默认的，gwt会把客户端代码文件放到一个名字为完整的应用名称的目录）

Copying all files found on public path

Compilation succeeded

编译成功。


3、准备tomcat:

在tomcat安装目录下webapps目录创建一个gwt文件夹

相应的创建其他的web应用的文件和文件夹：

gwt\WEB-INF

gwt\WEB-INF\classes

gwt\WEB-INF\lib

gwt\WEB-INF\web.xml

web.xml内容如下：


4、部署到tomcat:

在gwt目录创建helloword目录

复制刚才执行HelloWorld-compile.cmd生成的文件（在www\org.jmg.HelloWorld目录）到helloworld目录下，注意，只要这个文件夹中的文件，不要文件夹。


5、运行看效果：

启动tomcat

访问http://localhost:8080/gwt/helloworld/HelloWorld.html

页面上将会显示

一个标题，一段说明文字,和一个Click Me按钮

点击按钮将会显示 “HelloWorld”文字


参考: GWT Google Web Toolkit Hello World Example Project
来源：http://letup.blogspot.com/2006/09/gwtgooglewebtoolkitajax-helloworld.html