`

Gwt-Ext学习笔记之基础篇

GWTEXTCSSEclipseJavaScript 
阅读更多

     一、 <!---->安装 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.      <!---->运行效果；点击如下按钮，查看效果

<!----><!----> <!---->

<!----><!----> 

 注意：GWT  java.lang.NoSuchMethodError: org.eclipse.jdt.internal.compiler.Compiler.<init>
是因为gwt的compiler和tomcat的servlet compiler冲突
右键选择你的工程，选Properties，然后java Build path
，然后libraries，选中tomcat相关的库，remove，重新试试看

<!---->

分享到：
| oracleorahome92agent
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    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-Ext的读者来说，强烈建议先阅读基础篇以熟悉基本概念和技术背景。在基础篇中，我们介绍了如何安装Eclipse以及必要的Gwt-Ext插件，并且...

    Gwt-Ext学习笔记之进级篇

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

    GWT EXT 教程全集

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

Magicbox
Global site tag (gtag.js) - Google Analytics