Gwt-Ext学习笔记之基础篇

?

?

Gwt-Ext学习笔记之基础篇

一、 安装 Cypal Studio工具

a.?????? 下载 Cypal Studio http://code.google.com/p/cypal-studio/ ，解压后 Copy到 Eclipse目录下。

b.????? 配置 GWT Home目录，打开 Eclipse的 Window?Preferences?Cypal Studio 选择 Gwt的目录。

?

二、 建立一个名为 gwtext的 GWT项目

a.?????? 新建一个动态 web项目， File?New?Other?Web?Dynamic Web Project，在 Configurations中选择 Cypal Studio GWT Project，其他的默认即可。

三、 创建 Module模型

a.?????? gwtext项目上点击右键 New?Other?Cypal Studio?Module，输入包名 org.gwtext.julycn,类名 Register。

b.????? 在 org.gwtext.julycn包下面生产 client包、 server包、 public目录和 Register.gwt.xml、 Register.html；

c.?????? 在 Register.java的 onModuleLoad() 方法中加入 Window.alert("This is my first Gwt Demo!");

?

/**
 * @author 七月天
 *
 */

public class Register implements EntryPoint {
	public void onModuleLoad() {
			Window.alert("This is my first Gwt Demo!");
		}
}

d.????? 选择 Run?Open Run Dialog?Gwt Hosted Mode Application,选择 New,新建一个运行实例 gwtext,在 Project中选择 gwtext， Module会自动选择所要运行的模型类。

e.????? 点击运行，会弹出 Google Web Toolkit运行窗口。

四、 配置 GWT-Ext环境

a.?????? 下载 gwt-ext 和 ext 资源

b.????? 加入 gwtext的 gwtext.jar和 ext资源

?????????????????????????????????????????????????????????????? i.????? 把 gwtext-2.0.3目录下的 gwtext.jar加入到项目中。

???????????????????????????????????????????????????????????? ii.????? 在项目的 public目录中新建 js文件夹，然后把 ext-2.1目录下的 adapter目录、 resources目录和 ext-all.js、 ext-core.js导入到 js文件夹下。

c.?????? 修改 HTML宿主页面 Register.html和模块配置文件 Register.gwt.xml

?????????????????????????????????????????????????????????????? i.????? 在 Register.html文件中加入

?

<link href="js/resources/css/ext-all.css" rel="stylesheet" type="text/css"/>

<script type="text/javascript" src="js/adapter/ext/ext-base.js"></script>

<script type="text/javascript" src="js/ext-all.js"></script>

???????????????????????????????????????????????????????????? ii.????? 在 Register.gwt.xml文件中加入

<inherits name="com.gwtext.GwtExt"/>

五、 运行 GWT-Ext实例

a.?????? 修改 Register.java模型文件 ,内容如下：

?

/**
 * @author 七月天
 *
 */
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);
	}
}

b.????? 运行效果；点击如下按钮，查看效果

?

备注：本文只是一个简单的 Demo ，如果有问题，请跟帖。想要更多的人帮助你，请先帮助更多的人

操作Grid，和 Gwt-Ext学习笔记之进级篇 类似，后面的文章会把不同的地方讲出来，请关注 :)

我照你说的,弄,了出来了,google的窗体出来了,但不知怎么,里面什么也没有

这是我的代码

?

package com.first.app.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;
import com.gwtext.client.widgets.Button;
import com.gwtext.client.widgets.MessageBox;
import com.gwtext.client.widgets.Panel;
import com.gwtext.client.widgets.event.ButtonListenerAdapter;
import com.gwtext.client.widgets.form.FormPanel;
import com.gwtext.client.widgets.form.TextField;
import com.gwtext.client.widgets.form.VType;
import com.gwtext.client.widgets.layout.HorizontalLayout;



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) {
				if (frm.getForm().isValid()) {
					MessageBox.alert("成功", "信息提交成功！");
				} else {
					MessageBox.alert("错误", "请验证输入的信息是否正确！");
				}
			}
		});

		Button btnClear = new Button("取消");
		btnClear.addListener(new ButtonListenerAdapter() {
			public void onClick(Button button) {
				MessageBox.alert("取消", "注册信息保存失败！");
			}
		});

		buttonPanel.add(btnSave);
		buttonPanel.add(btnClear);

		frm.add(buttonPanel);

		RootPanel.get().add(frm);
	}
}

?在onClick方法里,那个事件我的报错,我就删除了就没报错运行就出来个空的东东

?

?

?

?看看我的包