随笔-126  评论-247  文章-5  trackbacks-0

准备

软件包 下载
tomcat 6.0.39 (exe) 点击下载
tomcat 6.0.39 (列表) 点击下载
tomcat plugin for eclipse (Indigo) 点击下载
firefox 20.0 (中文版) 点击下载
google web toolkit developer plugin for firefox (firefox 20.0) 点击下载
如无法打开下载页面,请将下载地址直接复制到下载器中进行下载

安装

安装 firefox 浏览器,安装 Tomcat 服务器,端口设为 80 (不设也可以),将下载下来的 tomcat 的 eclipse 插件包解压缩到 eclipse 目录底下的 dropins 文件夹里面,
eclipse
      |
   dropins
        |
      com.sysdeo.eclipse.tomcat_3.3.0

启动 eclipse

如果你能看见 3 只快乐的 3 脚猫,说明你的 tomcat 插件已经安装成功啦!


配置 tomcat 环境

选择好你所使用的 Tomcat 服务器以及 Context model



这里选择了 server.xml 的方式,如果你选择的是 Context file 的方式,那么待会你就要在 %Tomcat%/conf/Catalina/localhost/ 底下新建相对应的 xml 配置文件。

选择好你所使用的 JRE 版本,以及禁止 Tomcat 以 debug 的方式运行,并根据你自己的机器的性能配置好 Tomcat 启动的 JVM 参数。



在 eclipse 中启动 Tomcat 服务器,确保能看到这只阳光的汤姆猫


配置 Tomcat server.xml

创建一个 GWT Java Project(不知道怎么创建?点击查看文章末尾处



修改 GWTDemo.java 代码:

package fan.tutorial.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.RootPanel;

public class GWTDemo implements EntryPoint {
    public void onModuleLoad() {
        Button button = new Button(" Click me ", new ClickHandler() {
            public void onClick(ClickEvent event) {
                Window.alert("I got you");
            }
        });
        RootPanel.get().add(button);
    }
}

打开 %Tomcat%/conf/server.xml 并编辑,在 <Host> </Host> 节点内添加一个 <Context> </Context> 节点



docBase 指定到工程的 war 路径,path 指定访问项目的 URL。

开启 GWT Debug

在 eclipse 中启动 tomcat,在浏览器中访问 http://localhost/demo,如果能看到一个白花花的页面,恭喜您!这主要是确保不报 404,确认 server.xml 配置起效了。



选中项目,右键 Debug AS



这里一定要选择在 external server 中 debug,因为你的项目是在 external server 中跑的。完了之后呢,因为是第一次 debug 因此会弹出一个对话框



External server root 填写项目访问的入口地址,Matching items 选择你需要 debug 的页面。启动后会在 Development Model 选卡中生成 debug 地址,双击打开或右键将地址拷贝到浏览器中打开。



如果是第一次打开这个链接,你看到的页面应该是这样子的



这时候提示要下载一个 GWT 的浏览器插件,点击按钮 Download 安装即可。

如果下载链接超时导致无法下载,可参考下面离线安装插件方式,如果能够成功下载并安装,离线安装的方式你可以忽略了。

google web toolkit developer plugin for firefox ( 离线安装 )

该插件的下载地址已经在最上面表格中给出,插件版本要对应你浏览器的版本,这些不多说了。插件包下载完之后,按照下面的步骤安装即可









重启火狐浏览器之后插件就能安装完成了。如果不留神这个提示消失了,你还可以在下面的选项中找到它



这边的事情完了之后呢,重新访问 http://localhost/demo/GWTDemo.html?gwt.codesvr=127.0.0.1:9997,这时候 firefox 会很卡,卡就对了!
GWT 插件这会正在忙着帮我们动态生成页面,firefox 会暂时无响应,稍等会就能够看到界面了。然后你可以随便修改 GWTDemo.java 文件代码,保存,然后刷新 firefox,就能实时的看到结果了。这样就不用每次修改 GWT 代码后都需要编译才能看到结果了。
另外,如果你把 ?gwt.codesvr=127.0.0.1:9997 删掉也是可以正常访问的,但是这不是 debug 模式,这种方式访问的是已经编译好了的文件。只有带上
?gwt.codesvr=127.0.0.1:9997 才是 debug 模式,debug 模式下,不用重新编译就可以实时的反映出你修改过的 GWT 代码。




  
posted on 2014-05-19 20:14 fancydeepin 阅读(2919) 评论(1)  编辑  收藏

评论:
# re: GWT Debug 环境搭建 2014-05-21 11:27 | 皮草
配了2次都没搞定。不知道错在哪里了  回复  更多评论
  

只有注册用户登录后才能发表评论。


网站导航: