Gwt-Ext学习笔记之基础篇.docVIP

Gwt-Ext学习笔记之基础篇 一、 Cypal Studio工具 a.?????? 下载 Cypal Studio /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代码 /** ? ?*?@author?七月天 ? ?* ? ?*/?? ?? public?class?Register?implements?EntryPoint?{ ?? ????public?void?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!); } } ? 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代码 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?? 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 scrip