搭建Google plugin for Eclipse下的GWT-EXT开发环境(GWT 1.6)

偶然的机会帮朋友维护一个网站，真的是不喜欢写jsp、javascript，于是baidu出来了google的gwt，花了一下午时间搭建开发环境，尝试了各种组合，总觉得有欠缺。最终在网上找到了这篇blog认为是个很好的经验贴，写到自己的blog里面以防忘记。作者的blog好像有问题，始终无法打开，这个链接是google的网页快照里面的，有兴趣的朋友保存一下吧:http://203.208.37.132/search?q=cache:Xuw6K3DeJOEJ:paulgrenyer.blogspot.com/2009/04/setting-up-gwt-ext-for-gwt-16-with.html+Google+Plugin+for+Eclipse+gwt-ext&cd=7&hl=zh-CN&ct=clnk&gl=cn&st_usg=ALhdy2-498dISMTi2huHgj0THw8zY3gLeg

GWT-Ext是Google Web Tookit(GWT)带给我们的一组伟大的widgets，当前最新的GWT版本是1.6。GWT 1.6有一个与以往不同的项目结构(project structure) 和一个嵌入式的java servlet server(Jetty)。这些改变带来的好处是无需手工建立war路径，项目结构可以直接部署到java servlet server(比如Jetty或者tomcat)。但是GWT-EXT的setup文档已经无效了。

在以下的步骤中，我描述了建立一个GWT 1.6的工程并把它配置为GWT-Ext的必要操作：
1 安装google plugin for eclipse http://code.google.com/eclipse/docs/getting_started.html

2 使用plugin创建一个简单的GWT应用:
      Select File -> New -> Web Application Project from the Eclipse menu.
      In the New Web Application Project wizard, enter a name for your  project   (e.g. MegaDeth) and a java package name, e.g., com.megadeth.Take the tick out of the Use Google App Engine tick box.
Click Finish.

3 运行应用程序:
       Right click it in package explorer and select Run As -> Run Configurations
  Put a tick in the Automatically Select Unused Port tickbox.
  Click Run to see the default GWT 1.6 application

4 下载gwtext-2.0.5.zip, 解压缩之后将gwtext.jar 拷贝到项目的\WEB-INF\lib路径下。

5 在工程的war路径下建立一个js路径。

6 下载ext-2.0.2.zip,解压缩之后将其中的内容拷贝到js路径。

7 右键点击项目，选择刷新，让eclipse显示出新的jar包，和js路径。

8 添加gwtext.jar进入项目:

      Right click on the project in package explore
      Select Properties -> Java Build Path -> Libraries.
      Click Add JARs, navigate to gwtext.jar in the project and double click it.
      Click OK to close the properties dialog.

9 在项目的gwt.xml 文件中加入以下行:
      <inherits name='com.gwtext.GwtExt' />
      <stylesheet src="../js/ext-2.0.2/resources/css/ext-all.css" />
      <script src="../js/ext-2.0.2/adapter/ext/ext-base.js" />
      <script src="../js/ext-2.0.2/ext-all.js" />

10 按照以下方式改变项目的进入点:

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;
import com.gwtext.client.widgets.Panel;

public class MegaDeth implements EntryPoint
{
public void onModuleLoad()
{
  Panel mainPanel = new Panel();  
  mainPanel.setTitle("Hello World!");
  mainPanel.setHeight(300);
  mainPanel.setWidth(500);  
  RootPanel.get().add(mainPanel);
}
}

11 从项目的html文件中删除以下行:

    <h1>Web Application Starter Project</h1>

    <table align="center">
      <tr>
        <td colspan="2" style="font-weight:bold;">Please enter your name:</td>       
      </tr>
      <tr>
        <td id="nameFieldContainer"></td>
        <td id="sendButtonContainer"></td>
      </tr>
    </table>

12 运行

评论

1 楼 javaAlpha 2009-10-28  

找了好久了 ，我也是写js不太习惯。毕竟做Java时间长了。有种回家的感觉。