(二) 调试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的交互了。