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的交互了。