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学习笔记之基础篇 #### 一、安装CypalStudio工具 为了能够开始Gwt-ext的学习之旅,首先需要确保开发环境已经搭建好。CypalStudio是一款非常实用的工具,它能帮助开发者更高效地进行GWT项目的开发。 1....
标题中的"Gwt-Ext学习笔记之基础篇"指的是关于Gwt-Ext的初级教程,这是一种基于Google Web Toolkit (GWT) 的扩展库,用于构建富互联网应用程序(RIA)。Gwt-Ext提供了丰富的用户界面组件,使得开发者可以利用Java语言...
在深入探讨GWT-Ext之前,我们先了解一下GWT(Google Web Toolkit)和Ext Js的基础。GWT是一个开源的开发工具,允许开发者使用Java语言来编写客户端的Web应用程序,然后将其编译为优化过的JavaScript代码,以实现高...
这篇学习笔记将深入探讨Gwt-ext的核心概念、功能以及如何在实际项目中应用。 GWT是由Google开发的一个开源框架,它允许开发者使用Java语言来编写前端Web应用。GWT编译器会将Java代码转换为优化过的JavaScript,以...
### GWT-EXT基础知识详解 #### 一、GWT与GWT-EXT简介 ...GWT提供了一套丰富的UI组件库,简化了Web应用的开发...这为后续深入学习GWT-EXT提供了坚实的基础。接下来,可以根据实际需求进一步探索更多高级特性和技术细节。
这个压缩包包含的资源是关于Gwt-Ext的基础、中级和进阶学习资料,适合想要深入理解和应用Gwt-Ext的开发者。 在"基础篇"中,你将学习到以下知识点: 1. **GWT概述**:Google Web Toolkit是一个用于构建高性能、跨...
GWT-Ext是一个基于Google Web Toolkit (GWT)的JavaScript库,它提供了丰富的用户界面组件和强大的数据绑定机制,使得...教程中的实例和练习将帮助你将理论知识转化为实践经验,为你的GWT-Ext开发之路打下坚实基础。
这些示例可以帮助你快速理解和上手,通过参考这些代码,你可以学习如何配置GWT-Ext,以及如何创建和使用不同的组件。 4. **文档**:可能包含API文档或者用户指南,帮助开发者理解GWT-Ext的接口和用法,这对于深入...
" Gwt-Ext学习笔记之基础篇.doc "、" Gwt-Ext学习笔记之中级篇.doc "、" Gwt-Ext学习笔记之进级篇.doc "这三份文档,按照从基础到进阶的顺序,系统地介绍了EXT-GWT的使用技巧和实践案例。基础篇可能涵盖EXT-GWT的...
- **GWT-Ext 文档**:学习 GWT-Ext 的组件用法和 API。 - **Cypal Studio 文档**:掌握插件的使用技巧,提高开发效率。 通过这个系列的文章,读者将逐步了解 GWT-Ext 的基本结构,学会如何利用 GWT-Ext 开发出...
通过对这个文件的学习和理解,开发者可以更好地掌握如何在项目中集成和使用 GWT-Ext-Tree 组件。 总之,GWT-Ext-Tree 是 GWT 平台上构建高效、美观、交互性强的树形界面的重要工具。它的强大功能和灵活性使得开发者...
GWT (Google Web Toolkit) 是一个开源的Java开发框架,用于构建和部署富互联网应用程序...总而言之,这篇博客文章和附带的示例项目为GWT开发者提供了一次深入学习gwt-ext库的机会,有助于提升他们的GWT应用开发技能。
《GWT-EXT2.0最佳实践教程》源代码打包下载资源主要涵盖了Google Web Toolkit (GWT) 和EXT-JS 2.0的结合使用,提供了丰富的实践案例和示例代码,旨在帮助开发者深入理解和应用这两项技术。GWT是一款强大的JavaScript...
学习 GWT-Ext 需要对 GWT 和 ExtJs 有一定的了解,同时掌握 Java 语言和基本的 Web 开发概念。通过实践和不断学习,开发者可以充分利用 GWT-Ext 的优势,打造出高性能、用户体验优秀的 RIA 应用程序。
1. **组件库**:GWT-Ext提供了大量的预构建UI组件,如按钮、面板、表格、树、菜单、工具栏、对话框等,这些都是构建复杂Web界面的基础。 2. **数据绑定**:GWT-Ext支持双向数据绑定,使得UI组件的状态与后台数据...