《GWT揭秘》试读：运行调试项目

《GWT揭秘》试读：2.2 运行调试项目

选中 HelloGWT 项目文件夹，单击运行按钮，如图 2-4 所示。
单击运行按钮（Run  As…）后，打开“Run  As”对话框。双击“Web Application”项运行项目，如图 2-5 所示。
 
     
     

      
     
     
 
图 2-4  选中 HelloGWT 项目
 
     
     

      
     
     
 
图 2-5  “Run As”对话框
警告  GWT 在项目运行时需要启动 jetty  web 服务器。如果 jetty 的端口被占用，那么 GWT 项目将无法运行。如果程序无法正常运行，并且 Eclipse 控制台中错误信息为“Port  8080  is  already  is  use; you probably still have another session active”，表示 8080 端口已被其他程序占用。单击运行按钮边上的向下箭头，选择“Run  Configurations…”菜单项，打开“Run  Configurations ”对话框。选择“Web  Application”下面的“HelloGWT.html”后，在右边面板“Embedded  Server”下，把“Port”设置为一个未用的端口号。
项目运行后界面出现乱码，如图 2-6 所示。
右键单击 HelloGWT 项目文件夹选择“Properties”菜单项。打开“Properties  for  HelloGWT”对话框，在“Resource”配置项下将“Text  file  encoding”改为“Other:utf-8”，如图 2-7 所示。单击“OK”按钮关闭设置项目属性窗口。
 
     
     

      
     
     
 
图 2-6  界面出现乱码
 
     
     

      
     
     
 
图 2-7  修改项目文件编码格式
技巧  GWT 编译器使用 utf-8 编码格式读取源代码文件，将项目转变为 utf-8 编码格式可以避免乱码问题。
提示   修改项目文件编码格式后，项目文件中已存汉字全部变成乱码，需要手工修复。打开HelloGWT.java 文件，修复第 12 行的乱码。
修改后直接单击图 2-6 运行界面的“Refresh”按钮或按 F5 刷新界面，中文乱码问题即可解决。单击“欢迎”按钮，弹出“Hello GWT!”消息框，如图 2-8 所示。
 
     
     

      
      
     
     
 
图 2-8  Hello GWT 界面
技巧  GWT 项目修改源代码后不需要重新运行项目，直接刷新页面就能看到效果。
你可能想知道启动的是什么浏览器，这是 GWT 托管运行环境（GWT  Hosted  Web  Browser）。GWT 程序有两种运行模式：普通模式和托管模式（Hosted）。很容易区分这两种运行模式，从Eclipse 中启动的程序，运行于托管模式下；在浏览器中运行的程序以普通模式运行。GWT 只能在托管模式下进行调试。
提示  GWT 程序在托管模式下的运行速度明显慢于普通模式下的运行速度，因为 GWT 程序在受控环境下并不会真正生成 JavaScript，而是模拟运行，以便于调试器介入。
接着试验如何在 GWT 中进行调试。GWT 调试和普通 Java 程序调试完全一样。我们打开HelloGWT.java 文件，在第 16 行设置断点（Ctrl+Shift+B），然后单击运行按钮左边的调试按钮。
注意  先关闭刚才打开的 Google Web Toolkit Hosted Mode 窗口，否则 GWT 的 Web 服务器端口会发生冲突，无法启动程序。
Hello GWT 程序启动后，单击“欢迎”按钮，调试断点被触发。接着可以进行单步调试、查看变量等常规调试操作，如图 2-9 所示。
 
     
     

      
      
     
     
 
图 2-9  调试断点被触发
在 GWT  2.0 中调试的方式有所不同。首先术语上发生了变化，在 1.x 版本中的“托管模式（hosted  mode）”被改为“开发模式（development  mode）”，由于“托管模式”的意义让人感到含糊不清，所以 GWT 开发组选择了有更清晰含义的“开发模式”替代“托管模式”。与此对应，“网页模式（web mode）”也被改为“生产模式（production mode）”。
在 GWT 1.x 版本中，开发者在一个被称为“托管浏览器”中进行代码调试，参见图 2-8。在大多数情况下，托管浏览器工作的很不错。不过还是存在着一些问题，例如你用 Window.open 弹出一个新的浏览器窗口，“托管浏览器”就无法很好地为你处理打开的式样参数。
另外一个重要的限制就是托管环境只支持某种浏览器，在 Windows 平台下，托管环境只支持IE 浏览器；在 Linux 平台下，只支持 Firefox 浏览器；在 Mac 平台下，只支持 Safari 浏览器。也就是说如果在 Windows 环境中编写 GWT 程序，但是你会发现用户在 Firefox 浏览器中运行有问题，旧版本的 GWT 就无法针对这种情况进行调试。
旧版本的 GWT 的托管运行环境有比较严重的内存泄漏，调试环境运行一段时间后开发团队就不得不重启托管调试环境，这给开发工作带来了诸多不便。
GWT  2.0 完全摒弃了托管浏览器的调试模式，而转由使用浏览器插件进行调试。下面我们来介绍一下这种新的调试模式。
在 GWT  2.0 的环境中直接单击调试按钮，与 1.x 版本的调试不同，GWT 并没有弹出任何对话框。而是在控制台输出了一些信息，如图 2-10 所示。
这段文字的意思是 GWT 开发环境所用的 Web 服务已经启动，可以通过访问下面的地址进行调试。
http://localhost:8888/DemoGWT2.html?gwt.codesvr=192.168.1.130:3388
     
     
 
     
     

      
      
     
     
 
     
     
图 2-10  控制台输出
我们将这个地址复制到 GWT 调试器支持的浏览器中，目前支持的浏览器有 IE、Firefox、Chrome 和 Safari。
注意  Chrome 只支持 4.0 以后的版本。
以 IE8 为例，用 IE8 打开该地址后，可以看到一条提示信息，如图 2-11 所示。
 
     
     

      
      
     
     
 
图 2-11  提示安装开发插件
这段文字的意思是 GWT 开发插件尚未安装，开发模式运行需要安装 GWT 开发插件。单击那个大的蓝色按钮就可以下载 IE 版本开发插件，也可以通过单击下面的超链接选择其他平台和浏览器的开发插件。
点击按钮下载插件，如果是 Windows  XP 或 Vista 操作系统，可以直接单击“运行”按钮进行安装。如果是 Windows 7，则需要下载到本地，然后以管理员模式进行安装，如图 2-12 所示。
 
     
     

      
      
     
     
 
图 2-12  以管理员身份运行安装
开发插件安装完成后再次刷新页面就可以看到运行的结果。在运行代码的第一行添加一个断点，再次刷新页面，可以看到 Eclipse 命中了我们设置的断点。