Gwt-Ext學習筆記之基礎篇

1、 安裝 Cypal Studio工具

1. 下載 Cypal Studio http://code.google.com/p/cypal-studio/ ，解壓後 Copy到 Eclipse目錄下。

2. 配置 GWT Home目錄，打開 Eclipse的 Window—Preferences—Cypal Studio 選擇 Gwt的目錄。 

2、 創建一個名爲 gwtext的 GWT項目

1. 新建一個動態 web項目， File—New—Other—Web—Dynamic Web Project，在 Configurations中選擇 Cypal Studio GWT Project，其餘的默認便可。 

3、 建立 Module模型

1. gwtext項目上點擊右鍵 New—Other—Cypal Studio—Module，輸入包名 org.gwtext.julycn,類名Register。

2.  在 org.gwtext.julycn包下面生產 client包、 server包、 public目錄和 Register.gwt.xml、Register.html； 

3. 在 Register.java的 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!");  
        }  
}

5. 選擇 Run—Open Run Dialog—Gwt Hosted Mode Application,選擇 New,新建一個運行實例gwtext,在 Project中選擇 gwtext， Module會自動選擇所要運行的模型類。 

6. 點擊運行，會彈出 Google Web Toolkit運行窗口。

4、 配置 GWT-Ext環境

1. 下載 gwt-ext 和 ext 資源

2. 加入 gwtext的 gwtext.jar和 ext資源

1. 把 gwtext-2.0.3目錄下的 gwtext.jar加入到項目中。

2. 在項目的 public目錄中新建 js文件夾，而後把 ext-2.1目錄下的 adapter目錄、 resources目錄和 ext-all.js、 ext-core.js導入到 js文件夾下。 

3. 修改 HTML宿主頁面 Register.html和模塊配置文件 Register.gwt.xml

1. 在 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>

3. 在 Register.gwt.xml文件中加入

<inherits name="com.gwtext.GwtExt"/>

5、 運行 GWT-Ext實例

1. 修改 Register.java模型文件 ,內容以下：

/** 
 * @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);  
    }  
}

3. 運行效果；點擊以下按鈕，查看效果