`
kakaluyi
  • 浏览: 444459 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

Gwt-Ext学习笔记之基础篇

阅读更多

关键字: gwt ext google web toolkit cypal studio

 

 

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!");

 

Java代码 复制代码
  1. /**  
  2.  * @author 七月天  
  3.  *  
  4.  */  
  5.   
  6. public class Register implements EntryPoint {   
  7.     public void onModuleLoad() {   
  8.             Window.alert("This is my first Gwt Demo!");   
  9.         }   
  10. }  
/**
 * @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文件中加入

 

Java代码 复制代码
  1. <link href="js/resources/css/ext-all.css" rel="stylesheet" type="text/css"/>   
  2.   
  3. <script type="text/javascript" src="js/adapter/ext/ext-base.js"></script>   
  4.   
  5. <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文件中加入

Java代码 复制代码
  1. <inherits name="com.gwtext.GwtExt"/>  
<inherits name="com.gwtext.GwtExt"/>
 

<!---->五、 <!---->运行 GWT-Ext实例

<!---->a.       <!---->修改 Register.java模型文件 ,内容如下:

 

Java代码 复制代码
  1. /**  
  2.  * @author 七月天  
  3.  *  
  4.  */  
  5. public class Register implements EntryPoint{   
  6.     public void onModuleLoad() {   
  7.         createComponents();   
  8.     }   
  9.   
  10.     private void createComponents() {   
  11.         final FormPanel frm = new FormPanel();   
  12.         frm.setDraggable(true);   
  13.         frm.setWidth(300);   
  14.         frm.setTitle("用户注册");   
  15.         frm.setPaddings(25);   
  16.   
  17.         TextField txtUsername = new TextField("用户名""username");   
  18.         TextField txtPassword = new TextField("密码""password");   
  19.         TextField txtEmail = new TextField("邮箱""email");   
  20.         TextField txtPhone = new TextField("电话""phone");   
  21.   
  22.         txtUsername.setRegex("^[a-zA-Z]*$");   
  23.         txtUsername.setRegexText("用户名必须为字母!");   
  24.         txtUsername.setAllowBlank(false);   
  25.   
  26.         txtPassword.setPassword(true);   
  27.         txtPassword.setRegex("^[a-zA-Z]*$");   
  28.         txtPassword.setRegexText("密码必须为字母!");   
  29.         txtPassword.setAllowBlank(false);   
  30.   
  31.         txtEmail.setVtype(VType.EMAIL);   
  32.         txtEmail.setVtypeText("请输入合法的邮箱地址!");   
  33.         txtEmail.setAllowBlank(false);   
  34.   
  35.         txtPhone.setRegex("^\\d*$");   
  36.         txtPhone.setRegexText("电话必须为数字!");   
  37.         txtPhone.setAllowBlank(false);   
  38.   
  39.         frm.add(txtUsername);   
  40.         frm.add(txtPassword);   
  41.         frm.add(txtEmail);   
  42.         frm.add(txtPhone);   
  43.   
  44.         Panel buttonPanel = new Panel();   
  45.         buttonPanel.setLayout(new HorizontalLayout(10));   
  46.   
  47.            
  48.         Button btnSave = new Button("保存");   
  49.         btnSave.addListener(new ButtonListenerAdapter() {   
  50.             public void onClick(Button button, EventObject e) {   
  51.                 if (frm.getForm().isValid()) {   
  52.                     MessageBox.alert("成功","信息提交成功!");   
  53.                 } else {   
  54.                     MessageBox.alert("错误","请验证输入的信息是否正确!");   
  55.                 }   
  56.             }   
  57.         });   
  58.   
  59.         Button btnClear = new Button("取消");   
  60.         btnClear.addListener(new ButtonListenerAdapter() {   
  61.             public void onClick(Button button, EventObject e) {   
  62.                 MessageBox.alert("取消""注册信息保存失败!");   
  63.             }   
  64.         });   
  65.   
  66.         buttonPanel.add(btnSave);   
  67.         buttonPanel.add(btnClear);   
  68.   
  69.         frm.add(buttonPanel);   
  70.   
  71.         RootPanel.get().add(frm);   
  72.     }   
  73. }  
/**
 * @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 ,如果有问题,请跟帖。想要更多的人帮助你,请先帮助更多的人

分享到:
评论
2 楼 kakaluyi 2009-12-03  
文章是转来的本来准备用GWT的,好久没登陆博客了。。。
这GWT后来没有用成,惭愧

1 楼 menglinxi 2009-11-16  
楼主,写的真详细,顶你.....。呵呵。第一步

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

我用的myeclipse,怎么做呢?能给出目录结构图吗?

相关推荐

    Gwt-ext学习笔记之基础篇

    ### Gwt-ext学习笔记之基础篇 #### 一、安装CypalStudio工具 为了能够开始Gwt-ext的学习之旅,首先需要确保开发环境已经搭建好。CypalStudio是一款非常实用的工具,它能帮助开发者更高效地进行GWT项目的开发。 1....

    Gwt-Ext学习笔记之基础篇- www.hxiaseo.cn技术网站

    标题中的"Gwt-Ext学习笔记之基础篇"指的是关于Gwt-Ext的初级教程,这是一种基于Google Web Toolkit (GWT) 的扩展库,用于构建富互联网应用程序(RIA)。Gwt-Ext提供了丰富的用户界面组件,使得开发者可以利用Java语言...

    Gwt-Ext学习笔记之进级篇

    在深入探讨GWT-Ext之前,我们先了解一下GWT(Google Web Toolkit)和Ext Js的基础。GWT是一个开源的开发工具,允许开发者使用Java语言来编写客户端的Web应用程序,然后将其编译为优化过的JavaScript代码,以实现高...

    Gwt-ext学习笔记

    这篇学习笔记将深入探讨Gwt-ext的核心概念、功能以及如何在实际项目中应用。 GWT是由Google开发的一个开源框架,它允许开发者使用Java语言来编写前端Web应用。GWT编译器会将Java代码转换为优化过的JavaScript,以...

    (转载)GWT -EXT学习笔记-基础

    ### GWT-EXT基础知识详解 #### 一、GWT与GWT-EXT简介 ...GWT提供了一套丰富的UI组件库,简化了Web应用的开发...这为后续深入学习GWT-EXT提供了坚实的基础。接下来,可以根据实际需求进一步探索更多高级特性和技术细节。

    Gwt-Ext基础-中级-进阶

    这个压缩包包含的资源是关于Gwt-Ext的基础、中级和进阶学习资料,适合想要深入理解和应用Gwt-Ext的开发者。 在"基础篇"中,你将学习到以下知识点: 1. **GWT概述**:Google Web Toolkit是一个用于构建高性能、跨...

    gwt-ext培训教程

    GWT-Ext是一个基于Google Web Toolkit (GWT)的JavaScript库,它提供了丰富的用户界面组件和强大的数据绑定机制,使得...教程中的实例和练习将帮助你将理论知识转化为实践经验,为你的GWT-Ext开发之路打下坚实基础。

    gwt-ext相关jar包及资源

    这些示例可以帮助你快速理解和上手,通过参考这些代码,你可以学习如何配置GWT-Ext,以及如何创建和使用不同的组件。 4. **文档**:可能包含API文档或者用户指南,帮助开发者理解GWT-Ext的接口和用法,这对于深入...

    GWT EXT 教程全集

    " Gwt-Ext学习笔记之基础篇.doc "、" Gwt-Ext学习笔记之中级篇.doc "、" Gwt-Ext学习笔记之进级篇.doc "这三份文档,按照从基础到进阶的顺序,系统地介绍了EXT-GWT的使用技巧和实践案例。基础篇可能涵盖EXT-GWT的...

    GWT-Ext_体验之旅.doc

    - **GWT-Ext 文档**:学习 GWT-Ext 的组件用法和 API。 - **Cypal Studio 文档**:掌握插件的使用技巧,提高开发效率。 通过这个系列的文章,读者将逐步了解 GWT-Ext 的基本结构,学会如何利用 GWT-Ext 开发出...

    gwt-ext-tree

    通过对这个文件的学习和理解,开发者可以更好地掌握如何在项目中集成和使用 GWT-Ext-Tree 组件。 总之,GWT-Ext-Tree 是 GWT 平台上构建高效、美观、交互性强的树形界面的重要工具。它的强大功能和灵活性使得开发者...

    gwt-ext 实例

    GWT (Google Web Toolkit) 是一个开源的Java开发框架,用于构建和部署富互联网应用程序...总而言之,这篇博客文章和附带的示例项目为GWT开发者提供了一次深入学习gwt-ext库的机会,有助于提升他们的GWT应用开发技能。

    GWT-EXT2.0最佳实践教程,源代码打包供下载

    《GWT-EXT2.0最佳实践教程》源代码打包下载资源主要涵盖了Google Web Toolkit (GWT) 和EXT-JS 2.0的结合使用,提供了丰富的实践案例和示例代码,旨在帮助开发者深入理解和应用这两项技术。GWT是一款强大的JavaScript...

    非常好的gwt-ext培训教程

    学习 GWT-Ext 需要对 GWT 和 ExtJs 有一定的了解,同时掌握 Java 语言和基本的 Web 开发概念。通过实践和不断学习,开发者可以充分利用 GWT-Ext 的优势,打造出高性能、用户体验优秀的 RIA 应用程序。

    GWT-Ext超级Widget功能类库

    1. **组件库**:GWT-Ext提供了大量的预构建UI组件,如按钮、面板、表格、树、菜单、工具栏、对话框等,这些都是构建复杂Web界面的基础。 2. **数据绑定**:GWT-Ext支持双向数据绑定,使得UI组件的状态与后台数据...

Global site tag (gtag.js) - Google Analytics