使用 Google Web Toolkit 和 JSON开发Ajax应用程序

清单 1. MainApplication.gwt.xml 加入的 JSON, HTTP 模块声明

<inherits name='com.google.gwt.json.JSON'/>
　　<inherits name='com.google.gwt.http.HTTP'/>

　　定义用户界面

　　现在，我们将开始创建这个 Ajax 示例应用程序，首先将创建用户界面部分，我们将建立一些用于显示的 HTML 页面和样式表，下面将介绍创建过程。

　　打开 src/unitTest/public/MainApplication.html。在 <style>…</style> 中定义样式。示例程序定义了按钮、状态文字以及测试结果所在单元格的样式，如 清单 2 所示。

清单 2. 按钮、状态条以及测试结果的样式定义<style>
　　…
　　.gwt-Button{font-size: 180%;}
　　.status{font-size:12px;font-weight:bold;font-family:sans-serif,arial}
　　.green{background-color:#1FFF1F}
　　.red{background-color:#FF9999}
</style>

　　测试程序使用一个页面来展示所有元素，包括测试参数的输入界面，运行按钮，当前测试运行状态条和测试结果输出界面。为此，我们定义了如下表格（见 清单 3)，并用 id 来标志各个部分界面将会出现的位置。

清单 3. Html 文件里界面元素的定位<table align=center>
　　<tr>
　　　　<td align=center id="inputSlot"></td>
　　</tr>
　　<tr>
　　　　<td>&nbsp;</td>
　　</tr>
　　<tr>
　　　　<td align=center id="runSlot"></td>
　　</tr>
　　<tr>
　　　　<td>&nbsp;</td>
　　</tr>
　　<tr>
　　　　<td align=center id="statusSlot"></td>
　　 </tr>
　　 <tr>
　　　　 <td>&nbsp;</td>
　　 </tr>
　　 <tr>
　　　　 <td align=center id="outputSlot"></td>
　　 </tr>
</table>

　　在 MainApplication 类中使用 GWT 界面组件创建交互界面。测试参数输入界面，包括 TestCase 的数目以及 TestSuite 列表，使用了 Grid、TextBox 以及 ListBox 来构建页面。