GWT+EXT探索六之项目实践2——GWTEXT+Struts2.0工程

(二) 调试gwt-ext程序
在http://gwt-ext.com/download/ 下载相应的gwt-ext包gwtext.jar。放到项目的war目录的WEB-INF/lib/文件夹下。然后添加引用：





环境配置完毕。然后我们要编写第一个gwt-ext程序。
首先建立一个module：
先建立一个新的为了测试gwt-ext包的com.test.ext。
然后在包里创建一个google module。





把module命名为test，然后点击add，添加一个新的inherited module Standad 和gwtext


点击确定，然后在生成的test.gwt.xml文件中添加几行配置信息把css和js引入进来：

<module> <inherits name="com.google.gwt.user.User" /> <inherits name="com.gwtext.GwtExt" /> <inherits name="com.google.gwt.user.theme.standard.Standard" /> </module>

<module> <inherits name="com.google.gwt.user.User" /> <inherits name="com.gwtext.GwtExt" /> <inherits name="com.google.gwt.user.theme.standard.Standard" /> <stylesheet src="js/ext/resources/css/ext-all.css" /> <script src="js/ext/adapter/ext/ext-base.js" /> <script src="js/ext/ext-all.js" /> </module>

Google plugin 会针对当前的module所在的包自动创建一个 client包：com.test.ext.client 。针对当前编写的module编写对应的java文件要放到此对应的client包中：





在弹出对话框中，选择编写的类对应的module，然后起个类名，然后点确定。


编写个最简单的程序，创建一个简单的面板，添加个输入框和一个按钮，按钮事件是提示输入框中的内容，代码如下：

package com.test.ext.client; import com.google.gwt.core.client.EntryPoint; import com.gwtext.client.core.EventObject; import com.gwtext.client.widgets.Button; import com.gwtext.client.widgets.MessageBox; import com.gwtext.client.widgets.Panel; import com.gwtext.client.widgets.Viewport; import com.gwtext.client.widgets.event.ButtonListener; import com.gwtext.client.widgets.event.ButtonListenerAdapter; import com.gwtext.client.widgets.form.TextField; public class Test implements EntryPoint { public void onModuleLoad() { Panel panel = new Panel("test panel title"); panel.setFrame(true); panel.setWidth(200); panel.setHeight(300); final TextField textField = new TextField("field"); ButtonListener listener = new ButtonListenerAdapter(){ @Override public void onClick(Button button, EventObject e) { MessageBox.alert(textField.getValueAsString()); } }; Button button = new Button("test button", listener); panel.add(textField); panel.addButton(button); new Viewport(panel); } }

好了，java端编写完毕，要编写表示层的内容了。
首先，要引入相应的ext包，这里，gwt-ext只支持ext2.0.2这个版本的ext，如果是其他版本，那么在运行时，会提示类似“此版本非ext2.0.2版本，程序无法运行”的错误。

我们先下载ext2.0.2的包：http://yogurtearl.com/ext-2.0.2.zip
然后把里边的部分文件解压出来放到之前module制定的位置：

- ext-all.js - ext-all-debug.js - ext-core.js - ext-core-debug.js - /adapter - /resources

一起放到/war/js/ext/文件夹下（这是在module文件中定义好的）
这里需要说明的是，由目前所知道的是，google部署的最终文件目录位置为war目录，所以把js放到war目录下的同时，也要考虑到相对路径的问题。



接下来就是实现最后一步，创建对应的html文件。







这里在modules里去除不需要的module，加载自己需要的，这里我们需要test module所以去掉其它的，然后起个名，选择默认war路径，就可以点击确定了。
然后点击调试：





输入新建立的html的文件地址。
点GO，然后就能看见任务栏在编译相应的js。


在输入框中输入任何文字，然后点击按钮，会弹出对话框，这是之前java逻辑中设计好的。此时，就算完成了第一个我们的gwtext程序。
接下来就要准备与struts2的交互了。