qileilove

blog已经转移至github,大家请访问 http://qaseven.github.io/

关于gxt:ext-gwt的入门详细教程(转)

关于gxt:ext-gwt的入门详细教程(转)
2009-02-10 17:34
开 始研究gxt (我也刚接触,大家一起提高,学习)也就是mygwt加入extjs阵营以后的新版本(gxt1.2),关于gxt(ext gwt)与gwt-ext的区别,请自行查阅相关资料. Google Web Toolkit(GWT)是Google开发的开源AJAX组件库,它使得编写类似GoogleMaps和Gmail这样的AJAX应用程序变得非常容 易,开发人员并不需要了解太多的JavaScript知识就可以通过Java来开发动态Web应用程序。
如今,开发动态的Web应用程序是非常繁琐且易于出错的,开发人员常常花费90%的时间在进行跨平台和跨浏览器调试,并且,难以用JavaScript编写模块化的,易于复用的组件。
GWT的设计非常创新,它允许开发人员使用Java语言来编写和调试Web应用程序,然后,GWT的Java-to-JavaScript编译器会将其自 动转化为可以运行的JavaScript和相关HTML文件,这样,开发人员不必了解JavaScript语言就可以开发AJAX应用,极大地提高了开发 效率。


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");

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;完整代码如下:

  • 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(已经建立的运行环境), 想要的结果出现了,呵呵。

  • .正确出现窗体,呵呵,成功。

posted on 2011-10-09 13:36 顺其自然EVO 阅读(2199) 评论(0)  编辑  收藏

<2011年10月>
2526272829301
2345678
9101112131415
16171819202122
23242526272829
303112345

导航

统计

常用链接

留言簿(55)

随笔分类

随笔档案

文章分类

文章档案

搜索

最新评论

阅读排行榜

评论排行榜