Gwt-Ext学习笔记之基础篇 一、 安装 Cypal Studio工具 1a. 下载 Cypal Studio http:/code.google.com/p/cypal-studio/ ，解压后 Copy到 Eclipse目录下。 b. 配置 GWT Home目录，打开 Eclipse的 WindowPreferencesCypal Studio 选择 Gwt的目录。 二、 建立一个名为 gwtext的 GWT项目 a. 新建一个动态 web项目， FileNewOtherWebDynamic Web Project，在 Configurations中选择 Cypal Studio GWT Project，其他的默认即可。 三、 创建 Module模型 a. gwtext项目上点击右键 NewOtherCypal StudioModule，输入包名 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. publicclassRegisterimplementsEntryPoint 7. publicvoidonModuleLoad() 8. Window.alert(ThisismyfirstGwtDemo!); 9. 10. /* * author 七月天 * */public class Register implements EntryPoint public void onModuleLoad() Window.alert(This is my first Gwt Demo!); d. 选择 RunOpen Run DialogGwt 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. 2. 3. 4. 5. ii. 在 Register.gwt.xml文件中加入 Java代码 1. 五、 运行 GWT-Ext实例 a. 修改 Register.java模型文件 ,内容如下： Java代码 1. /* 2. *author七月天 3. * 4. */5. publicclassRegisterimplementsEntryPoint 6. publicvoidonModuleLoad() 7. createComponents(); 8. 9. 10. privatevoidcreateComponents() 11. finalFormPanelfrm=newFormPanel(); 12. frm.setDraggable(true); 13. frm.setWidth(300); 14. frm.setTitle(用户注册); 15. frm.setPaddings(25); 16. 17. TextFieldtxtUsername=newTextField(用户名,username); 18. TextFieldtxtPassword=newTextField(密码,password); 19. TextFieldtxtEmail=newTextField(邮箱,email); 20. TextFieldtxtPhone=newTextField(电话,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. PanelbuttonPanel=newPanel(); 45. buttonPanel.setLayout(newHorizontalLayout(10); 46. 47. 48. ButtonbtnSave=newButton(保存); 49. btnSave.addListener(newButtonListenerAdapter() 50. publicvoidonClick(Buttonbutton,EventObjecte) 51. if(frm.getForm().isValid() 52. MessageBox.alert(成功,信息提交成功！); 53. else 54. MessageBox.alert(错误,请验证输入的信息是否正确！); 55. 56. 57. ); 58. 59. ButtonbtnClear=newButton(取消); 60. btnClear.addListener(newButtonListenerAdapter() 61. publicvoidonClick(Buttonbutton,EventObjecte) 62. MessageBox.alert(取消,注册信息保存失败！); 63. 64.