一、搭建环境
1.下载和安装JDK
开发GWT应用程序之前，需要做一些准备工作。Java环境对于开发GWT应用是必不可少的。GWT工具包的编译需要JDK的支持，因此在安装GWT工具包之前请下载和安装合适的JDK，GWT工具要Java 5以上的版本。具体步骤如下：
第一步：
下载jdk，下载地址：https://www.doczj.com/doc/5b18055590.html,/technetwork/java/javase/downloads/index.html下载JDK安装程序(本培训提供jdk1.7安装包)
下载后安装到E:\jdk目录下，可以根据实际情况将JDK安装到任意目录下
第二步：使用鼠标右击“我的电脑”→“属性”→“高级”→“环境变量”
第三步：系统变量->新建->变量名：JAVA_HOME 变量值：e:\jdk\ (该变量值是jdk的安装路径)
系统变量->新建->变量名：CLASSPATH 变量值：.;%JAVA_HOME%\lib
系统变量->编辑->变量名：Path 在变量值的最前面加上：%JAVA_HOME%\bin;
(CLASSPATH的变量值英文中有句号“.”后跟一个分号，表示当前路径的意思) 验证是否配置成功-----进入doc中、输入java和javac命令都能正常显示。输入java -version 命令能显示jdk的版本号！就可以了
提示GWT的调试器依赖32位的SWT界面库。要在系统上调试GWT项目，必须安装32位JDK。当然在64位JDK环境中也可以编译GWT项目
2. 安装Eclipse和GWT的开发插件
开发GWT只需要JDK。但有个好的开发环境可以极大提高工作效率。Eclipse是最流行的Java集成开发环境。Google提供了GWT的Eclipse开发插件。目前Google提供的插件只支持Eclipse 3.3以上版本。打开网址https://www.doczj.com/doc/5b18055590.html,/downloads/，进入到Eclipse Downloads页面选择下载Eclipse IDE for Java EE Developers。下载完成后得到一个zip 包。Eclipse是绿色软件，解压后就能使用。本培训使用的是Eclipse 3.7版，其中GWT插件安装完后自带有GWT SDK 2.4版本。
在Eclipse的“Help”菜单下选择“Install New Software...”，单击菜单项后弹出Install对话框，在“Work with:”输入框中输入https://www.doczj.com/doc/5b18055590.html,/eclipse/plugin/3.7即可进行安装。如图所示：
勾选Google Plugin for Eclipse，GWT Desiger for GPE以及SDKs三个选项，点击“Next”按钮，接下来就傻瓜式地安装下去，一番漫长的等待后，插件安装完成。重启Eclipse后，Google Plugin for Eclipse安装完成。如下是成功后的Eclipse截图：
Google提供了非常有用的开发GWT的EclipsePlugin，具体插件安装过程可以参考以下网址：https://https://www.doczj.com/doc/5b18055590.html,/eclipse/docs/getting_started?hl=zh-CN
3. 下载GWT及GXT，搭建GXT开发环境
GWT 工具包支持不同的操作系统，请根据自己的操作系统选择合适的安装包；最新版本的Google插件中包含GWT SDK ，Eclipse安装Google插件成功后就不再需要下载单独的GWT SDK了，可以从Eclipse的plugins目录里面复制出来；也可以从https://www.doczj.com/doc/5b18055590.html,/p/google-web-toolkit/downloads/list下载。
GXT（即Ext GWT）SDK提供了类似于桌面开发环境的扩展组件，GWT的程序员可以轻松的使用他们就像使用GWT组件一样。除此之外，GXT还具有强大的本地操作和远程调用的特性，同时满足开发企业级应用程序的MVC架构需求。使用GXT开发出来的项目，可以给用户近类似于桌面应用程序的体验。要在Eclipse上搭建GXT的开发环境，得解压GXT工具包，把解压后的gxt.jar添加到已创建的GWT项目中，在GWT项目里配置引用相关GXT类库，并且要拷贝GXT自带的resource目录到现有的项目中。
(本培训提供gwt-2.1.1版本的安装包和gxt-2.2.1版本的安装包)
4.浏览器的插件
在浏览器中第一次运行GWT程序时，都会提示安装GWT开发插件，此插件要安装才能运行GWT项目，点击在线安装即可（注意:GWT的插件在太高版本的浏览器上会安装失败）
二、GWT应用程序的实例
1. 现在开始正式建立一个真正的 GWT 项目。单击，弹出下面的对话框：
2. 输入Project name及Package，如上图，其中Package 很重要， GWT 的 Module 就放在这个目录下。选上”Use Google Web Toolkit”，这是引用 GWT 要用到的 JAR 包。去掉”Use Google App Engine”，因为我们还不需要将项目发布到 Google 的云端。”Sample Code”是默认的，这样生成的项目会自动为我们建立好实例代码。生成的项目结构如下：
3. 可以看到如下的包结构
4. 现在一个可以直接运行的项目就算建好了，很简单吧。下面来试着运行它，看看效果。要运行该实例，根本不需要去部署项目， Eclipse 自带了 jetty服务器，在该工程下点击右键→ Run As → Web Application ，这时 jetty 服务就会启动，并加载当前的项目。
5.在安装了GWT插件的浏览器输入工程调试模式下发布的网址访问即可
如上图所示，会提供一个地址，表示服务已经启动，大家会注意到url后面跟的另外一个端口地址，那个是用来调用插件功能的，它会和Google自带的一个服务器jetty通讯，帮你调试degug，编译GWT程序自动发布js，方便开发，现在大家是不是已经明白下面要做什么了！先别急，这时去访问的话，浏览器会提示你安装一个叫 Google Web Toolkit Developer Plugin 的浏览器插件，否则不能浏览。要是把地址上的那段诡异的参数去掉，页面会提示”GWT module 'test' may need to be (re)compiled”，为什么呢？
现在想想，在 Eclipse 里，我们可以很方便的调试 java 代码，而 GWT 的功能是把 java 代码编译成 JS ，那我们是不是也可以像调试 JAVA 代码那样，去调试 GWT 编译的 JS 代码
呢？ Google 不会想不到这点的，所以给 GWT提供了两种运行模式。一种是宿主模式 (Hosted Mode) ，现在改名叫做开发模式 (development mode) ；另一种是WEB 模式，现在叫生产模式 (production mode) 。两种模式的区别网上有一大堆的解释，本质区别就是，开发模式下可以通过 IDE 工具调试，生产模式直接发布到正式服务器，不能调试！
GWT 区分两种模式的方法是通过一个本地的服务完成的，访问地址中那段诡异的参数gwt.codesvr=127.0.0.1:9997 的 9997 端口的服务就是用来调试的。除了服务器端需要开启服务外，浏览器端也需要有所配合，这就是第一次访问时需要安装的 Google Web Toolkit Developer Plugin 。
安装好浏览器插件后，页面终于显示出来了！很简单的页面，在文本框中输入姓名后，点 send ，会显示出当前使用的后台服务器和当前浏览器的信息。注意，如果调试后台的 GWT 代码的话，运行方式选择 Debug As ，不是 Run As ，Run As下只能实现实时编译。
这里要注意一点， GWT 的两种运行模式编译的 JS 文件是不一样的，开发模式的 JS 会包含调试信息 ( 千万不要把开发模式的 JS 发布到正式服务器上 ) ，访问地址没有参数的时候会出现”GWT module 'xxx' may need to be (re)compiled”的提示，并且在服务关闭之后，还会提示
链接断开。要想使用生产模式的 JS 文件，要通过来实现，它会将指定的文件编译成可以发布到正式服务器的 JS 文件。
三、生成的实例代码解释
现在来说说这个实例的代码。
● GreetingService.java 和GreetingServiceAsync.java 要放在一起，这是两个接口，其中GreetingService 继承了https://www.doczj.com/doc/5b18055590.html,er.client.rpc.RemoteServic 接口。GreetingServiceAsync 是作为代理出现的，它的名字不能改，只能叫这个名，为什么呢？因为这两个接口是用来实现RPC 功能的，说白了就相当于是Struts 的后台Action 响应，只不过RPC 传的是对象。现在来说说他们俩的命名规则，假如我们新建了一个叫XXX 的接口，继承了https://www.doczj.com/doc/5b18055590.html,er.client.rpc.RemoteServic ，有几个方法fn1(par…) 、fn2(par…) ……。那么在这个XXX 接口的同包下，必须有一个叫XXXAsync 的接口，并且连方法都必须跟XXX 一样，只不过每个方法要多加一个参数
https://www.doczj.com/doc/5b18055590.html,er.client.rpc.AsyncCallback
fn1(par…,callback) 、fn2(par…,callback) … .. 。这所有的规则都是有校验的，反正不满足就会报错，还能帮用户修改，很方便。
●光有两个接口而没有实现类是没有用的，GreetingServiceImpl.java 就是一个对GreetingService 的实现类，注意不是那个代理接口。同时这个类还继承了
https://www.doczj.com/doc/5b18055590.html,er.server.rpc.RemoteServiceServlet ，要是不继承它，GreetingService 也就没什么特别的了。这个类里面所有实现的方法，相当于是Struts 的后台业务逻辑。
●以上的几个文件配起来能够实现类似于AJAX 的功能，而Test.java 则实现前台的业务逻辑，将来它会编译成JS 文件，该文件还是一个入口文件，在页面上引用的JS 文件就是它编译的，这有点类似java 中的main 方法。这里有个注意事项，因为要编译成JS ，所以import 的类只能有以下3 种情况：https://www.doczj.com/doc/5b18055590.html,ng 包和java.util 包下的类；GWT 的类；符合上面2 点也会编译成JS 的类。
● FieldVerifier.java 里的代码是在没什么好说的，只有一个简单的不能再简单的方法。但是要注意，这个类也会编译成JS 代码。
● Test.gwt.xml 是个重头戏，它是GWT 的配置文件，功能类似Hibernate 的
*.hbm.xml 。这个文件所在的包加上这个文件的文件名( 不包括gwt.xml) 就是GWT 的
一个Module 名。哪个类是入口类，那个类会被编译，都在这里定义。同时文件中还会有多个继承，inherits 元素指定；有且只有一个入口，entry-point 元素指定；多个资源，source 元素指定。
●空着的com.test.client 包是JUnit 测试用的，可以不用理睬。
● T est.html 是用来测试用的页面，T est.css 是它的样式。
●在运行过一次这个实例之后，会发现项目的war 包下面会多一个test 的文件夹，文件夹的名字也就是Module 名。这个文件夹里的文件就是GWT编译好的JS文件。使用的时候，在页面上将该文件夹下的Module 名.nocache.js 引入就可以了。
四、GXT项目的开发
(1)常用的UI控件
详见示例及API
注意：gxt-2.2.1的安装文件夹下的sample文件夹里面有examples.war文件，部署到Tomcat下，启动T omcat服务器就可以运行，好多示例，如下图所示：
(2)UI布局组件（即容器）及其布局
详见示例及API
常见的容器
RootPanel--顶级容器,默认为body,可以使用RootPanel.get(String).来获取指定的html 元素,空为body
CellPanel--为其他布局的抽象父类
DockPanel 东西南北的方向布局ock.add(new HTML("This is the west component"), DockPanel.WEST);
HorizontalPanel 横向布局
VerticalPanel 竖向布局
TabPanel tab标签式容器
HTML moreInfo = new HTML("Tabs are highly customizable using CSS");
tabPanel.add(moreInfo, "More Info");
可以add添加字符串,组件,容器
可以移动大小的panel,通过鼠标自由控制大小
Horizontal and Vertical Split panels
如:VerticalSplitPanel vSplit = new VerticalSplitPanel();
vSplit.setSize("500px", "350px");
vSplit.setSplitPosition("30%");
其他Panels容器
FlowPanel
HTMLPanel
PopupPanel
Grid
FlexTable
AbsolutePanel
(3)根据层次关系分析一个页面构成的结构
(4)在NewskyStudy的框架下编写前台界面
1.创建一个模块的包。此处示例为:newsky.tuyu.client.second。
2.创建一个JAVA类，名字任意，此处示例为Second。
3.编写JAVA代码，该类必须extends ModuleContainer（ModuleContainer是我们自己写的，该类继承自GXT的Content）。
4.在server端的test-application-menu.xml中添加结点。
5.在client端的AppDomain中注册上面步骤编写好的java类。如红框所示
6.右键点击NewSkyStudy，选择Run as——Web Application，我们将看到：