gxt:ext-gwt入门

从今天开始研究gxt （我也刚接触，大家一起提高，学习）也就是mygwt加入extjs阵营以后的新版本(gxt1.2),关于gxt(ext gwt)与gwt-ext的区别,请自行查阅相关资料.
再次说明：不是 研究gwt-ext,而是，Ext GWT（原名MyGWT）是一个开源的 Google Web Toolkit的扩展，它帮助开发人员非常容易地创建AJAX Web应用。Ext GWT是100%基于 GWT的，不需要任何额外的JavaScript或其他第三方jar。Ext GWT也是 Ext JS的一个子项目。
Ext GWT: Rich Internet Application Framework for GWT:官方网站： http://extjs.com/products/gxt/，里面有很多丰富的例子和api文档。 一、构建eclispe开发环境
1、前期准备
（1）开发工具：
     j2se6,正确安装及配置。
     Eclipse Ganymede：eclipse V3.4，下载地址为： http://www.eclipse.org/ganymede/;解压直接使用。
（2）相关jar包：
     gwt-windows-1.5.3:下载地址为： http://code.google.com/webtoolkit/versions.html；解压好待使用，本人直接解压到D盘，呆会要用到。
     gxt1.2:下载地址: http://extjs.com/products/gxt/；解压好待使用。
（3）GWT插件： Eclipse Plugins for GWT：cypal.studio.for.gwt-1.0，下载地址为： http://code.google.com/p/cypal-studio/。解压后直接 Copy到 Eclipse安装目录/plugins下即可。
2、配置 GWT Home目录
打开 Eclipse的 Window—Preferences—Cypal Studio 选择 Gwt的目录（即gwt-windows-1.5.3目录）。



如果没有出现Cypal Studio ，说明插件没有安装成功。必须放在正确的位置。同时，GWT Home,一定要选择在gwt-windows-1.5.3解压目录下，否则待建立module时jar找不到，同时有可能带来其他问题。呵呵。我就有过莫名其妙的错误。
二、编写简单实例
1、新建一个动态 web项目， File—New—Other—Web—Dynamic Web Project，在 Configurations中选择 Cypal Studio for GWT，其他的默认即可。 注意,Target Runtime 一定要为<None>,不要选择服务器，如果选择了服务器，下一步运行的时候会出现异常，还得手动删除它，所以不要选择服务器，下一篇将介绍在tomcate6上运行配置。这里运行是在GWT自己的环境下运行。



2、创建 Module模型
项目上点击右键 New—Other—Cypal Studio—Module，输入包名 org.gxt,类名 Test








创建成功后，正确工程为：


3.在Test.java的onModuleLoad() 方法中加入Window.alert("success");

Java代码

package org.gxt.client;  

  

import com.google.gwt.core.client.EntryPoint;  

import com.google.gwt.user.client.Window;  

  

public class Test implements EntryPoint {  

    public void onModuleLoad() {  

        Window.alert("success");  

    }  

}   package org.gxt.client;import com.google.gwt.core.client.EntryPoint;import com.google.gwt.user.client.Window;public class Test implements EntryPoint { public void onModuleLoad() { Window.alert("success"); }}

三、配置运行环境
选择 Run—Run Configurations—Gwt Hosted Mode Application,选择 New,新建一个运行实例new_gxt,在 Project中选择 Gxt， Module会自动选择所要运行的模型类Test.java。



点击Run,自动启动GWT运行环境：



ok,运行成功。
四、编写ext gwt 的window测试范例。
以上还没有用到gxt1.2文件夹中的东西，现在该用到它了。把WebContent文件夹删除掉，新建了一个lib文件夹,复制gxt.jar到lib下。



把lib/gxt.jar添加到Java Build Path里面



在Test.gwt.xml中加入（继承GXT）：
<inherits name='com.extjs.gxt.ui.GXT'/>
在Test.html中加入（默认样式表）：
<link rel="stylesheet" type="text/css" href="css/ext-all.css" />
ok,现在在Test.java中onModuleLoad()方法注释掉Window.alert("success");同时为避免出现重复，删除掉已经导入的com.google.gwt.user.client.Window包;添加gxt的com.extjs.gxt.ui.client.widget.Window;完整代码如下：

Java代码

package org.gxt.client;  

  

import com.google.gwt.core.client.EntryPoint;  

import com.google.gwt.user.client.ui.RootPanel;  

import com.extjs.gxt.ui.client.widget.Window;  

  

  

public class Test implements EntryPoint {  

  

    public void onModuleLoad() {  

        Window window=new Window();//相当于html的div  

        window.setSize(500,300);//设置高度和宽度  

        window.setHeading("success");//设置标题  

        window.setPlain(true);//设置透明  

        window.show();  

        RootPanel.get().add(window);  

          

          

    }  

  

}   package org.gxt.client;import com.google.gwt.core.client.EntryPoint;import com.google.gwt.user.client.ui.RootPanel;import com.extjs.gxt.ui.client.widget.Window;public class Test implements EntryPoint { public void onModuleLoad() { Window window=new Window();//相当于html的div window.setSize(500,300);//设置高度和宽度 window.setHeading("success");//设置标题 window.setPlain(true);//设置透明 window.show(); RootPanel.get().add(window); }}
  
再次运行New_Gxt（已经建立的运行环境）， 想要的结果出现了，呵呵。




结果：





正确出现窗体，呵呵，成功。下一篇在tomcate6下配置，不用gwt自带的运行环境。 <!--v:3.2-->