Gwt-ext学习笔记之基础篇

### Gwt-ext学习笔记之基础篇 #### 一、安装CypalStudio工具 为了能够开始Gwt-ext的学习之旅，首先需要确保开发环境已经搭建好。CypalStudio是一款非常实用的工具，它能帮助开发者更高效地进行GWT项目的开发。 1. **下载与解压** - 访问[CypalStudio](http://code.google.com/p/cypal-studio/)下载页面获取最新版本的CypalStudio。 - 下载完成后，将压缩包解压至Eclipse的目录下。 2. **配置GWTHome目录** - 打开Eclipse，进入`Window`—`Preferences`—`CypalStudio`设置界面。 - 在该界面中，指定GWT的安装目录作为GWTHome路径。 #### 二、建立一个名为gwtext的GWT项目 接下来需要创建一个新的GWT项目，并对其进行必要的配置。 1. **创建动态web项目** - 在Eclipse中依次选择`File`—`New`—`Other`—`Web`—`Dynamic Web Project`。 - 在`Configurations`中选择`CypalStudio GWT Project`选项来创建项目。 2. **创建Module模型** - 在项目名称`gwtext`上点击右键，选择`New`—`Other`—`CypalStudio`—`Module`。 - 输入包名`org.gwtext.julycn`和类名`Register`。 - 完成这些操作后，会在指定的包名下自动生成`client`包、`server`包、`public`目录以及`Register.gwt.xml`和`Register.html`文件。 3. **添加初始代码** - 在`Register.java`的`onModuleLoad()`方法中加入以下代码： ```java Window.alert("This is my first Gwt Demo!"); ``` - 这段代码的作用是在应用启动时显示一个提示框，用于验证项目是否成功运行。 4. **配置运行实例** - 通过`Run`—`Open Run Dialog`—`Gwt Hosted Mode Application`创建新的运行实例。 - 在实例配置中选择项目`gwtext`和模块类`Register`。 - 运行实例后，将打开Google Web Toolkit的运行窗口。 #### 三、配置GWT-Ext环境 为了使GWT项目能够利用GWT-Ext的功能，还需要进一步配置GWT-Ext环境。 1. **下载gwt-ext和ext资源** - 下载GWT-Ext库及其依赖的Ext库。 - 确保下载了`gwtext-2.0.3`和`ext-2.1`这两个版本。 2. **加入gwtext.jar和ext资源** - 将`gwtext-2.0.3`目录下的`gwtext.jar`文件加入到项目中。 - 在项目的`public`目录中创建`js`文件夹，并将`ext-2.1`目录下的`adapter`、`resources`目录以及`ext-all.js`、`ext-core.js`等文件导入到`js`文件夹下。 3. **修改HTML宿主页面和模块配置文件** - 在`Register.html`文件中添加如下CSS和JavaScript引用： ```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> ``` - 在`Register.gwt.xml`文件中添加继承声明： ```xml <inherits name="com.gwtext.GwtExt"/> ``` #### 四、运行GWT-Ext实例 最后一步是修改`Register.java`模型文件，以便能够看到GWT-Ext的实际效果。 1. **修改模型文件** - 在`Register.java`中定义`createComponents()`方法，并在`onModuleLoad()`方法中调用它。 - 在`createComponents()`方法中，可以创建一个`FormPanel`组件，并为其添加一些字段如用户名、密码、邮箱等。 示例代码如下： ```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("用户名必须为字母！"); // 其他组件配置... } } ``` 以上步骤完成了Gwt-ext的基础安装配置和示例演示。通过这种方式，开发者可以快速上手Gwt-ext，进而构建功能丰富的Web应用程序。