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!");
-
-
-
-
-
- public class Register implements EntryPoint {
- public void 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>
<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"/>
<inherits name="com.gwtext.GwtExt"/>
<!---->五、 <!---->运行 GWT-Ext实例
<!---->a. <!---->修改 Register.java模型文件 ,内容如下:
-
-
-
-
- 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);
- }
- }
/**
* @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 ,如果有问题,请跟帖。想要更多的人帮助你,请先帮助更多的人
相关推荐
Gwt-ext学习笔记之基础篇、安装、配置、例子。
GWT-Ext 是基于 Google Web Toolkit(GWT)和 ExtJs 的功能强大的网页开发控件库。它非常适用于进行纯 Java 语言的富 Internet 应用的快速开发。本系列文章将详细讲解 GWT-Ext 的基本结构和功能特点,并通过代码示例...
Gwt-ext学习笔记,Gwt-ext学习笔记,Gwt-ext学习笔记
不用为界面烦恼了。使用JAVA语言开发WEB
最好的gwt-ext学习资料,适合初学者。
该文档是关于在eclipse下进行GWT开发的一个教程文档,与网上其他教程有所区别,此文档为基础篇,还有进阶和中级篇,建议用户先下载基础篇浏览过后再决定是否下载另外两篇~~
GWT-Ext 是基于 Google Web Toolkit(GWT)和 ExtJs ...那么 GWT-Ext 就是在 GWT 的基础上,将 ExtJs 的 JavaScript 接口映射或者封装为 Java 的接口。在 Java 的环境下开发和调试开发表现层,可以大大提高开发的速度。
本文是 GWT-Ext 体验之旅系列 的第 3 部分,我们将体验各种布局管理器的效果,了解我们常用的布局管理器的编程方式和一些经验总结。在对树的介绍中,我们将从树的同步和异步方式的初始化到树的 一些特性进行详细介绍...
该文档是关于在eclipse下进行GWT开发的一个教程文档,与网上其他教程有所区别,此文档为中级篇,建议用户先下载基础篇浏览过后再决定是否下载另外两篇~~
gwt-ext-选课系统gwt-ext-选课系统gwt-ext-选课系统gwt-ext-选课系统
GWT-Ext_体验之旅.doc GWT-Ext_体验之旅.doc GWT-Ext_体验之旅.doc
GWT-Ext 控件演示 GWT-Ext 控件演示
GWT-Ext 2.0.5 has been released. Grab the distribution from the Downloads area. GWT-Ext 2.0.5 supports GWT 1.5 final (1.5.2), Firefox3 and Chrome.
gwt-ext-treegwt-ext-treegwt-ext-treegwt-ext-treegwt-ext-tree
gwt ext gwt-ext gwt-ex t学习必备资料gwt ext gwt-ext gwt-ex t学习必备资料gwt ext gwt-ext gwt-ex t学习必备资料gwt ext gwt-ext gwt-ex t学习必备资料gwt ext gwt-ext gwt-ex t学习必备资料gwt ext gwt-ext gwt-...
这是一篇非常好的GWT-Ext的文章,讲解非常详细,从入门的讲解示例再到精通一应俱全,学习GWT-Ext的朋友可以看看
个人写的gwt-ext教程,希望对大家有用
NULL 博文链接:https://kenter1643.iteye.com/blog/323084