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 ，如果有问题，请跟帖。想要更多的人帮助你，请先帮助更多的人

gwtext.jar文件怎么加入到项目中，能给个截图看下吗？

在gwtext项目上点击右键,选择Properties，在Java Build Path中点击Add External JARs...，选择你要加入的jar包就可以了。

好文章，对gwt-ext初学者有很大的帮助，盼望再多些介绍GRID的介绍

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

出错了,我用的是tomcat服务器,请指点一下是什么原因.

Exception in thread "main" java.lang.NoClassDefFoundError: org/apache/juli/logging/LogFactory
at org.apache.catalina.core.StandardService.<clinit>(StandardService.java:56)
at com.google.gwt.dev.shell.tomcat.EmbeddedTomcatServer.<init>(EmbeddedTomcatServer.java:189)
at com.google.gwt.dev.shell.tomcat.EmbeddedTomcatServer.start(EmbeddedTomcatServer.java:62)
at com.google.gwt.dev.GWTShell.startUp(GWTShell.java:742)
at com.google.gwt.dev.GWTShell.run(GWTShell.java:539)
at com.google.gwt.dev.GWTShell.main(GWTShell.java:321)
Caused by: java.lang.ClassNotFoundException: org.apache.juli.logging.LogFactory
at java.net.URLClassLoader$1.run(URLClassLoader.java:200)
at java.security.AccessController.doPrivileged(Native Method)
at java.net.URLClassLoader.findClass(URLClassLoader.java:188)
at java.lang.ClassLoader.loadClass(ClassLoader.java:307)
at sun.misc.Launcher$AppClassLoader.loadClass(Launcher.java:289)
at java.lang.ClassLoader.loadClass(ClassLoader.java:252)
at java.lang.ClassLoader.loadClassInternal(ClassLoader.java:320)
... 6 more

可能是你tomcat的配置问题，eclipse中的Server设为默认的TOMCAT5，其它的使用默认值

我开始用的是tomcat6.0，后来换成tomcat5就OK了。
不过显示的中文都是乱码

你把项目编码改为UTF-8，可以解决这个问题