Gwt Designer以及Gxt在eclipse中安装与学习入口简介

      09年得时候偶然间认识了Gwt，因为自己一直被JavaScript框架和css调试弄得头脑发昏，一度因为这个怀疑自己的进入软件行业是不是个错误；后来找到了解决方法：

      1. 使用Gwt，所有的界面都是用Java语言来完成，使用Gwt编译引擎编译后，生成优化后的JavaScript以及样式。这个想法太有创意了，不得不说。因为Java Web开发就是个漩涡，光是界面呈现技术都可以让你抓狂了。.net技术做的多好，当然还有微软的神器，Visual Studio是吧。

       2. 使用Eclipse的解决方案，Eclipse的RCP开发能完全替代Java的桌面开发，而Eclipse的RAP开发，则能完全摆脱JavaScript和css以及各种恼人的浏览器兼容问题；同时Rap技术差不多可以和Flex媲美了，虽然整体外观稍稍逊了一点，但纯Java式的代码还是具备足够的诱惑力。如果有需要，我一定认真学习Eclipse的RAP开发。

       不扯了，正题，Gwt,  Gxt, Gw(x)t Designer。

 

       选择Eclipse，建议Eclipse在3.5(Galileo)以上, Eclipse3.4(Ganymede)由于p2结构的问题可能对Gwt支持不是太好。同时JDK建议为Oracle的JDK 6，因为JDK1.5会在Gwt2.2版以后不被支持，(有人用JDK7么, 应该没人有这想法吧:)

 

第一步，安装Gwt

      Eclipse 3.6 (Helios)

       http://dl.google.com/eclipse/plugin/3.6

      Eclipse 3.5 (Galileo)

       http://dl.google.com/eclipse/plugin/3.5

    注意：由于目前，它默认下载的是Gwt SDK 2.2版，而2.2版由于有个类被改成了接口，对Gxt 2.1版完全不支持，当你在RootPanel中加入一个Gxt组件时，编译会出错。

    所以最好单独下载个Gwt SDK 2.1版，然后去Extjs下个Gxt(Ext_Gwt) 2.1版。

 

第二步，安装Gwt Designer

    由于Gwt Designer的原创公司被Google收购，现在可以从Google处，利用Eclipse的Update方式安装。由于Google暂时并未放出单独下载的链接，所以你只能从Eclipse安装插件方式安装。如果你像我一样拥有个跑的比蚂蚁快点的网络，你就耐心等待吧，直到你失去耐心或者Eclipse插件安装器报错！

    Eclipse 3.6 (Helios)

       http://dl.google.com/eclipse/inst/d2gwt/latest/3.6

    Eclipse 3.5 (Galileo)

       http://dl.google.com/eclipse/inst/d2gwt/latest/3.5

    

    安装完这个后，你就可以使用类似于NetBeans创建Swing组件那样的方式编写Web界面了，当然前提是你稍微熟悉点Gwt，例如模仿Gwt官网的那个StockWathcer程序，理解思路，修修改改，对Gwt有个初步认识。

 

第三步，安装Gxt（即，Ext_Gwt）

    Gwt原生态的Widget并不是太漂亮，虽然从CSS定制修改组件外貌在Gwt中是非常简单的，另外Gwt最新推出UiBinder对组件布局，样式等等都有很好的表现，类似于Flex中的定制，但是使用Gwt的要么都是懒人，要么就是被JavaScript和Css弄得睡不着觉的家伙，要么工期确实很紧啊，Gxt可以解决这个问题。

    下载Gxt，如果是2.1版，那么Gwt SDK最好是2.0-2.1版， 2.2版有兼容bug。

    安装Gxt到Gwt项目是很容易的，你应该看到了位于Gxt目录下的setup.txt文件。稍稍摘录一下，英语很简单，写代码的人都认识。

   

    STEP 1 -> 在Eclipse中创建Gwt项目。
    STEP 2 -> 在war目录下创建一个新目录，例如/{foldername}，然后将你下载的Gxt中/resources的全部内容复制到刚建的目录下 。
    STEP 3 -> 在页面添加样式表链接.
              <link rel="stylesheet" type="text/css" href="{foldername}/css/gxt-all.css" />
              如果需要用到Chart功能，在页面添加
              <script language='javascript' src='{foldername}/flash/swfobject.js'></script>

    STEP 4 -> 在模块配置文件中添加(可替换掉Gwt的User模块)
              <inherits name='com.extjs.gxt.ui.GXT'/>

    STEP 5 -> 添加gxt.jar 到项目编译路径，为了发布方便，可将gxt.jar复制到/war/WEB_INF/lib中。

   好了，现在可以利用拖拽方式实现Web界面了，如果想深入了解，最好顺便了解下WindowBuilder, 以及Swt在Eclipse中的编辑。

最好的gxt例子莫过于Gxt附带的Sample了，其中最简单的是desktop，然后是mail； explorer例子继承了example，所以想看详细例子，从example开始。

 

   个人觉得mail例子较好，其中有体现gxt精髓的设计思路及架构。