第一个GWT-EXT应用程序

未雨绸缪 · 发表于 2013-2-8 01:03:14

首先要准备的：
1.GWT-Ext 2.0.6
下载地址：http://code.google.com/p/gwt-ext/
2.Ext-2.0.2
下载地址：http://code.google.com/p/gwt-ext/
3.GWT 1.5.3
选用它是因为从官方网站看到GWT-Ext 2.0.6对这个版本的GWT JDK完全支持。
下载地址：http://code.google.com/intl/zh-CN/webtoolkit/versions.html
4.Google Plugin for Eclipse 3.4 (Ganymede)
这个是GWT在Eclipse下开发插件,通过Eclipse的Help->Software Updates里添加下面地址来安装。
下载地址:http://dl.google.com/eclipse/plugin/3.4
准备好以上的东西后，就开始配置环境了。
1.新建一个GWT工程
2.右键点击该工程,添加一个GWT-Ext 2.0.6的Jar包
3.解压缩Ext-2.0.2将里面的ext-all.js、resources目录和adapter目录的内容拷贝到GWT工程的"public"目录下
4.将这句话 <inherits name='com.gwtext.GwtExt'/> 添加到GWT应用程序的 module file里。
5.将主HTML文件打开，添加对第三步中文件的引用。例如：
<html><head> <title>My App</title> <meta name='gwt:module' content='com.foo.MyApp'> <link rel=stylesheet href="MyApp.css" mce_href="MyApp.css"> <link rel="stylesheet" type="text/css" href="js/ext/resources/css/ext-all.css" mce_href="js/ext/resources/css/ext-all.css"/> <link rel="stylesheet" type="text/css" href="js/ext/resources/css/xtheme-aero.css" mce_href="js/ext/resources/css/xtheme-aero.css" /> <mce:script type="text/javascript" src="js/ext/adapter/yui/yui-utilities.js" mce_src="js/ext/adapter/yui/yui-utilities.js"></mce:script> <mce:script type="text/javascript" src="js/ext/adapter/yui/ext-yui-adapter.js" mce_src="js/ext/adapter/yui/ext-yui-adapter.js"></mce:script> <mce:script type="text/javascript" src="js/ext/ext-all.js" mce_src="js/ext/ext-all.js"></mce:script></head><body class="xtheme-aero"><mce:script language="javascript" src="gwt.js" mce_src="gwt.js"></mce:script><iframe id="__gwt_historyFrame" style="width:0;height:0;border:0"></iframe></body></html>
至此环境配置完毕。
开始做第一个程序
将Register改写为以下代码：
public class Register implements EntryPoint{ public void onModuleLoad() { createComponents(); } private void createComponents() { final FormPanel frm = new FormPanel(); frm.setDraggable(true); frm.setWidth(300); frm.setTitle("用户注册"); frm.setPaddings(25); TextField txtUsername = new TextField("用户名", "username"); TextField txtPassword = new TextField("密码", "password"); TextField txtEmail = new TextField("邮箱", "email"); TextField txtPhone = new TextField("电话", "phone"); txtUsername.setRegex("^[a-zA-Z]*$"); txtUsername.setRegexText("用户名必须为字母！"); txtUsername.setAllowBlank(false); txtPassword.setPassword(true); txtPassword.setRegex("^[a-zA-Z]*$"); txtPassword.setRegexText("密码必须为字母！"); txtPassword.setAllowBlank(false); txtEmail.setVtype(VType.EMAIL); txtEmail.setVtypeText("请输入合法的邮箱地址！"); txtEmail.setAllowBlank(false); txtPhone.setRegex("^\\d*$"); txtPhone.setRegexText("电话必须为数字！"); txtPhone.setAllowBlank(false); frm.add(txtUsername); frm.add(txtPassword); frm.add(txtEmail); frm.add(txtPhone); Panel buttonPanel = new Panel(); buttonPanel.setLayout(new HorizontalLayout(10)); Button btnSave = new Button("保存"); btnSave.addListener(new ButtonListenerAdapter() { public void onClick(Button button, EventObject e) { if (frm.getForm().isValid()) { MessageBox.alert("成功","信息提交成功！"); } else { MessageBox.alert("错误","请验证输入的信息是否正确！"); } } }); Button btnClear = new Button("取消"); btnClear.addListener(new ButtonListenerAdapter() { public void onClick(Button button, EventObject e) { MessageBox.alert("取消", "注册信息保存失败！"); } }); buttonPanel.add(btnSave); buttonPanel.add(btnClear); frm.add(buttonPanel); RootPanel.get().add(frm); } }

		自动登录	找回密码
密码			立即注册

第一个GWT-EXT应用程序

浏览过的版块