### 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应用程序。
