使用 GWT 实现基于 Ajax 的 Web 开发

GWT 简述以及 GWT 开发 Web 应用程序的优点

Ajax 及基于 Ajax Web 应用程序开发简述

Ajax  即“Asynchronous JavaScript and XML”（异步 JavaScript 和  XML），是一种建立交互式网页应用的网页开发技术。经过此技术，软件开发人员能够在最短的时间内开发出更小，更快的，更友好的 Web  应用系统。在传统的 web 应用中，用户填写并提交表单 (form)，在提交表单时就向 web  服务器发送一个处理请求。服务器接收用户请求并处理传来的表单，并将结果以一个新的页面返回给用户。这种处理方式浪费了许多带宽，由于在先后两个页面中的 大部分 HTML  代码每每是相同的。另外，因为每次交互都须要向服务器发送请求，交互的响应时间就依赖于服务器的响应时间，从而致使了用户界面的响应比本地应用程序慢得 多。经过 Ajax 技术，使用 JavaScript 能够建立 XMLHttpRequest  对象来直接与服务器进行通讯，在不重载页面的状况下完成与 Web  服务器的数据交换。因为在通信的过程当中传输的数据是开发人员可控制的有用数据，消除了冗余的 HTML 代码，减小了带宽占用，在很大程度上提升了  Web 应用系统的响应速度。另外，因为使用 XMLHttpRequest  对象做为后台通信工具，页面不须要所有刷新，只须要刷新局部改变的数据，从而实现相似于桌面应用的效果。

使用 GWT 进行 Ajax Web 应用程序开发的优点

Google  Web Toolkit（GWT）是 Google 公司推出的一款基于 Java 的 Ajax Web  应用程序开发框架。在此框架上，开发人员能够轻松的建立 Ajax Web 应用程序，而没必要关注 JavaScript  的编写和调试，实如今浏览器中轻松地构建相似桌面应用般的程序。

使用面向对象的 Java 代替 JavaScript，大幅度提升了开发效率。

JavaScript  是一种脚本语言，它能够用来制做与网络无关的，用户交互复杂软件。它是一种基于对象 (Object Based) 和事件驱动 (Event  Driver) 的编程语言。可是 JavaScript 没法实现真正的继承关系（注：使用放在 prototype  对象里，虽然能够实现两个实例对象中的数据共享，模拟继承，但这其实并非真正的继承，更没法实现多层继承关系）。所以，使用 JavaScript  来完成 Ajax 开发，很是耗费时间，代码重复使用率低，难以调试，后期维护工做量巨大。

相比之下，Java  是一种真正的面向对象的语言。基于 Java 这一面向对象的语言，GWT 将真正的软件工程方法带入到 Ajax 应用程序开发当中。GWT  中提供了丰富的的基础组件，使开发人员从繁杂而又重复的 Ajax 构建工做中解放出来，更加专一于业务层和程序性能的优化。开发人员经过使用 GWT  能够快速地构建和维护复杂的、高性能的 JavaScript 应用程序。

GWT 提供了友好的界面，减小了 Web 应用程序的美化工做

因为通用的组件不够友好，致使 Web 开发的同时有大量的美化工做须要处理，因此以往的 Web 开发，都须要专业美工来协助完成。GWT 提供的丰富的组件库使用户能够很容易的开发出极具视觉享受的 UI 界面。如图 1 所示。

图 1. GWT 消息框

上 图中为 Ext GWT 提供的消息框，下面为原始的消息框。经过比较能够看到，Ext GWT 的消息框明显更加友好。按照传统的 Web  开发方式要实现具备 Ext GWT 样式的消息框，还要付出至关一些额外的美化工做。而这只是一个很是简单的示例， GWT  所带来的具备友好界面体验的组件远不止此。

GWT Designer 简介

GWT  Designer 是 Google 最新推出的，能够辅助开发者在 Eclipse 中快速构建 GUI 和 GWT/Java  应用的高效开视化开工具。使用 GWT Designer，开发人员只需经过简单拖拽可视化组件，便可完成组件的添加而无须繁琐的重复编码，同时使用  GWT Designer 也能够最大限度地完成布局管理等界面设计的工做。

回页首

基于 Eclipse 的 GWT 开发环境的搭建

Eclipse  是一个用 Java 开发的开源 IDE，由包括 IBM 在内的主要几家技术型公司所支持。使用 Eclipse  可使开发者以高效的方式编写、组织、测试和调试软件。Eclipse 集成了对 GWT 脚本的支持，在 Eclipse 环境下使用 GWT 开发  Ajax Web 应用程序，不管是代码编写、组织、测试仍是调试，都可以得到较高的生产力。基于 Eclipse 的 GWT  开发环境是业界公认的，最佳的 GWT 开发环境。

搭建 Eclipse 开发环境

搭建 Eclipse 开发环境很简单。只须要从 http://www.eclipse.org/downloads/下载后解压便可使用。Eclipse 的版本不少，本文中将以 Eclipse Java EE IDE for Web Developers(Version: Helios Release) 为例进行说明。

搭建 GWT 开发环境

在 Eclipse 中安装 GWT，步骤以下：

选择 Eclipse 的菜单 Help | Install New Software …， 而后在 Work with 中输入 http://dl.google.com/eclipse/plugin/3.6，在出现的列表中选择 Google App Engine Tools for Eclipse(required) 和 SDKs，以后点击”Next”并完成安装 。

安装完成后重启 Eclipse.

回页首

基于 Eclipse 的 GWT Designer 开发环境的搭建

搭建 GWT Designer 开发环境

在 Eclipse 中安装 GWT Designer，步骤以下：

选择 Eclipse 的菜单 Help | Install New Software …， 而后在 Work with 中输入 http://dl.google.com/eclipse/inst/d2gwt/latest/3.6，在出现的列表中选择 GWT Designer 和 WindowBuilder Engine (required)，以后点击按钮”Next”并完成安装 。

安装完成后重启 Eclipse.

下载 Ext GWT(GXT)（http://www.sencha.com/products/extgwt/download/），解压后将其中相应的 jar（本例中选用的是 gxt-2.2.4-gwt2.jar）加入到 ClassPath 中。

创建带有 GWT Designer 支持的 Web 应用

GWT Designer 安装以后，就能够创建带有 GWT Designer 支持的 Web 应用了，创建此 Web 应用的步骤以下：

选择 Eclipse 的菜单 File | New | Other。弹出如图 2 所示的对话框。

图 2.建立 GWT Designer 支持的 Web 应用

在图２的对话框中选择 WindowBuilder | GWT Designer | Model | GWT Java Project。而后选择按钮”Next” ，将会弹出 Create a Java Project 对话框。

在 Create a Java Project 对话框中的 Project Name 中输入项目名称如 : EmployeeManagement，而后点击按钮”Next” ，将会弹出 New GWT Module 对话框：

在  New GWT Module 对话框中的 Module name 中输入 EmployeeManagement，在 Package name  中输入 com.employeemanagement。在 Configure for third-party toolkit 中选择 Ext  GWT(GXT)。点击按钮”Finish” .

若是以前没有配置 Ext GWT(GXT) 的路径，此时会弹出一个对话框提示输入 GXT 的路径，这里直接选择已经下载的 GXT 包的存放路径便可。

GWT Designer 各组件简介及举例

带 有 GWT Designer 支持的 Web 应用创建之后，右键点击所需编辑的类文件如 employeeViewer.java 类，而后选择菜单  Open With | GWT Designer。 在右面的区域中选择 Design 选项卡，就能够看到 GWT、 GXT  支持的全部组件，表１给出了经常使用的 GWT 和 GXT 组件。

表 1. GWT、GXT 经常使用组件列表

GWT 组件	GXT 组件	功能描述
HorizontalPanel	RowLayout，Horizontal	用于横向单行排列组件内部组件的布局组件
VerticalPanel	RowLayout，Vertical	用于竖向向单列排列组件内部组件的布局组件
FlexTable		用于定位的布局组件，相似于 HTML 中 Table
Button	Button	按钮组件
Label	Text	标签组件
TextBox	TextField	输入框组件
RadioButton	Radio	单选按钮组件
ChekcBox	CheckBox	多选按钮组件
ListBox	LsitFied	列表组件
Combo	ComboBox	下拉列表组件
Image		图片组件
Tree/TreeItem	Tree/TreeItem	树结构组件
MenuBar/MenuItem	MenuBar/MenuBarItem	主菜单组件
	Menu/MenuItem	右键菜单组件

在 Designer 中能够很方便地使用这些组件，如下是一个使用 Button 按钮的例子。

在前面建立的例子中，右击类文件 EmployeeManagement.java 选择 Open With | GWT Designer.

在右面的 Tab 页中选择 Design 选项卡。

在 Palette 中选一个须要建立的组件，放在设计窗口上，本例中选择了 GXT 的 button 按钮，如图 3 所示。

图 3.建立 button 按钮

组件建立后可在 Properties 区域修改其样式属性，好比将 button 的标题改成 test。

图 4.修改 button 按钮的样式属性

添加事件处理代码 :

在 Properties 中选择显示按钮 。而后，在事件列表中双击 ComponentSelected 事件，能够看到 Designer 已经建立好了此事件的外围代码，此时，光标也已经定位到 ComponentSelected 事件的代码上。接下来只须要根据实际状况添加具体的业务代码便可。

回页首

使用 Session

Session 在交互中的做用

Web  应用是基于 HTTP 协议的，而 HTTP 协议是一种无状态协议。也就是说，用户从一个页面跳转到另外一个页面时会从新发送一次 HTTP  请求，而服务端在返回响应的时候却没法获知该用户在请求当前页面以前都作了些什么。显然，HTTP 协议这样的限制根本没法知足 Web  应用对动态化的需求，因而 Session 便应运而生。使用 Session 能够存储特定用户会话所需的信息。这样，当用户在应用程序的 Web  页之间跳转时，存储在 Session 对象中的变量将不会丢失，而是在整个用户会话中一直存在下去。

当用户请求来自应用程序的 Web 页时，若是该用户尚未 Session，则 Web 服务器将自动建立一个 Session 对象。当会话过时或被放弃后，服务器将终止该 Session。可见，使用 Session 是 Web 开发中必不可少的。

Session 的使用

GWT 中的 RPC 机制能够直接使用 session，但要确保使用 session 的类继承自 com.google.gwt.user.server.rpc.RemoteServiceServlet，同时须要导入如下两个包：

javax.servlet.http.HttpServletRequest;  javax.servlet.http.HttpSession;

以后就能够经过下面的方法设置或读取 session 中的信息了。

清单 1. 存取 Session 变量

 HttpServletRequest request = this.getThreadLocalRequest();   HttpSession session = request.getSession();   // Set the variable USERNAME into session   session.setAttribute("USERNAME", ”yuexiaopeng”);   // Get the variable USERNAME from session   String name = session.getAttribute("USERNAME”);

回页首

使用 RPC 实现与后台数据通讯

做为 Ajax 的应用开发框架，GWT 使得实现客户端和服务器的通讯变得十分简单，特别是异步通讯，而这一功能就是经过 RPC 实现的。如下给出实现异步通讯的具体步骤。

客户端定义同步服务接口

客户端用来定义异步通讯的同步接口须要继承自 RemoteService。

清单 2.

 import com.google.gwt.user.client.rpc.RemoteService;   import com.google.gwt.user.client.rpc.RemoteServiceRelativePath;   @RemoteServiceRelativePath("CheckUserService")   public interface CheckUserService extends RemoteService   {   boolean checkUser(String userName, String passWord);   }

服务器端实现上述服务接口

清单 3.为了实现异步通讯，在服务器端实现服务接口的类须要继承自 RemoteServiceServlet

 import com.employeemanagement.client.login.service.CheckUserService;   import com.google.gwt.user.server.rpc.RemoteServiceServlet;  public class CheckUserServiceImpl extends RemoteServiceServlet \        implements CheckUserService  {   public boolean checkUser(String userName, String passWord)   {            // Do related things   }   }

客户端定义上述服务的异步接口

在进行远程调用以前，还必须建立一个客 户端的异步接口，而这个异步接口的定义要基于以前的同步接口而且和以前的同步接口同处一个客户端的包中。对于异步接口的方法而言，没有返回类型，参数列表 中除了给出同步接口方法中的参数列表之外，还须要传入一个回调对象以便异步调用完成后通知该对象进行相应的处理。异步接口的命名则必须是同步接口名后加上  Async 后缀。

清单 4.

 import com.google.gwt.user.client.rpc.AsyncCallback;   public interface CheckUserServiceAsync   {   void checkUser(String userName, String passWord,                      AsyncCallback<Boolean> callback);   }

在 web.xml 加上 Servlet 的配置信息

清单 5.

 <servlet>    <servlet-name>CheckUserService</servlet-name>   <servlet-class>com.employeemanagement.server.login.service.CheckUserServiceImpl   </servlet-class>   </servlet>   <servlet-mapping>    <servlet-name>CheckUserService</servlet-name>    <url-pattern>/com.employeemanagement.EmployeeManagement/CheckUserService    </url-pattern>   </servlet-mapping>

客户端进行 RPC 调用

主要的接口和配置完成后，客户端就能够按照如下步骤来经过 RPC 实现和后台的异步通讯：

• 使用 GWT.create（）初始化服务接口 ;

• 必要时，使用 ServiceDefTarget 为 Service 代理描述 Service 接入点的 URL ；

• 建立一个异步回调对象以供 RPC 完成时调用；

• 发出 RPC 请求。

有关 RPC 更多的介绍能够阅读 参考资料。

回页首

远程调用的数据载体

远 程调用时，客户端和服务器端每每要传递大量的信息，这就须要一种能包含各类数据的数据载体，好比 JSON 或 XML。固然也能够是用序列化的  Java 对象，可是对于夸应用的数据传输推荐使用公用的载体：JSON 或 XML。 如下简要介绍在 GWT 中如何使用 JSON 和 XML  进行数据的传输。

使用 JSON 传输数据

JSON 的全称是 JavaScript  Object Notation，是一种轻量级的数据交换格式。JSON 与 XML  具备相同的特性，例如易于人工编写和阅读，易于机器生成和解析。可是采用 JSON 的数据传输比采用 XML 的数据传输具备更高的有效性。JSON  彻底独立于编程语言，而且使用文本格式保存。关于 JSON 更多的了解请阅读 参考资料。

在 GWT 中使用 JSON 做为数据传输格式的配置步骤以下：

1）在模块配置文件 .gwt.xml 中添加对 HTTP 和 JSON 的引用。

在 <inherits name='com.google.gwt.user.User'/> 以后添加

<inherits name="com.google.gwt.json.JSON"/>

2）在客户端 / 服务器端创建 JSON 数据并将其做为 RPC 的参数传输到另外一端。

清单 6. 在客户端创建 JSON 数据

 import com.google.gwt.json.client.*   JSONObject jsonObject = new JSONObject();   JSONString value = new JSONString("yuexiaopeng");   jsonObject.put("name", value);   JSONArray arrayValue = new JSONArray();   arrayValue.set(0, new JSONString("item0"));   arrayValue.set(1, new JSONString("item1"));   jsonObject.put("array", arrayValue);

本例中创建的 JSON 数据以下：

 {name: "yuexiaopeng",  array: {"item", "item"}}

JSON 对象创建后，调用 JSONObject 的 toString() 方法将其转换为 String 作为 RPC 的一个参数，便可传到服务端。

3）在服务器 / 客户端解析 JSON 格式的数据。

清单 7. 在服务器端解析客户端传送的 JSON 数据

 import org.json.*   JSONObject jsonObject = new JSONObject(jsonBody);   String name = jsonObject.getString("name");   System.out.println("name is:" + name);   JSONArray jsonArray = jsonObject.getJSONArray("array");   for (int i = 0; i < jsonArray.length(); i++)   {     System.out.println("item " + i + " :" + jsonArray.getString(i));   }

这里 jsonBody 为服务器端从客户端接收到的包含 JSON 信息的字符参数。固然服务端也可根据须要创建 JSON 对象返回给客户端，而后客户端再作解析。

使用 XML 传输数据

XML（eXtensible  Markup  Language）为可扩展的标记语言，是一套定义语义标记的规则。用户能够根据实际须要定义本身的新的标记语言，并为这个标记语言规定其特有的一套标 签。XML 易于阅读和编写，更重要的是其能够跨平台跨语言交换数据，使其成为在不一样的应用间交换数据的理想格式。关于 XML 更多的了解请阅读 参考资料。

在 GWT 中使用 XML 做为数据传输格式，其本质与使用 JSON 同样，须要如下几步 :

1）在模块配置文件 .gwt.xml 中添加对 HTTP 和 XML 的引用。

在 <inherits name='com.google.gwt.user.User'/> 以后添加：

<inherits name ="com.google.gwt.xml.XML"/>

2）在客户端 / 服务器端创建 XML 数据并做为 RPC 的参数传输到另外一端。

清单 8. 在服务器端创建 XML 数据

 import org.w3c.dom.*   Document xmlDoc = new DocumentImpl();   // create the root element   Element rootElement = xmlDoc.createElement("employees");   Element employeeItem = xmlDoc.createElement("employee");   employeeItem.setAttribute("ID", "0008");   Element Name = xmlDoc.createElement("name");   Name.appendChild(xmlDoc.createTextNode("yuexiaopeng"));   employeeItem.appendChild(Name);   rootElement.appendChild(employeeItem);   xmlDoc.appendChild(rootElement);   //convert XML object to string   Document document = rootElement.getOwnerDocument();   DOMImplementationLS domImplLS = (DOMImplementationLS) document.getImplementation();   LSSerializer serializer = domImplLS.createLSSerializer();   String result = serializer.writeToString(document);

清单 9. 本例中创建的 XML 数据

 <employees>   <employee ID = "0008">   <name>   yuexiaopeng   </name>   </employee>   </employees>

3）在服务器 / 客户端解析 XML 格式的数据。

清单 10. 客户端解析接收到的 XML 数据

 import com.google.gwt.xml.client.*   Document employeeDom = XMLParser.parse(xmlText);   Element employeeElement = employeeDom.getDocumentElement();   XMLParser.removeWhitespace(employeeElement);   NodeList employees = employeeElement.getElementsByTagName("employee");   Element employee = (Element) employees.item(0);   NamedNodeMap attributes = employee.getAttributes();   Node attribute = attributes.getNamedItem("ID");   String ID = attribute.getNodeValue();   String name = employee.getElementsByTagName("name").item(0).getFirstChild()   .getNodeValue();

这里 xmlText 为服务器端从客户端接收到的包含 xml 信息的字符串参数。固然客户端也可先创建 XML 对象再提交给服务器端，而后服务器端再作解析。

回页首

应用实例：简单信息查询系统

前 面已经详细叙述了如何使用 GWT Designer 进行 UI 设计，如何使用 JSON 或 XML 传输数据，以及如何建立和使用 RPC  通讯。本节将使用前面介绍的知识，完成一个简单雇员信息查询系统。雇员信息存储在数据库中。本系统将根据选中节点包含的条件查询相应雇员的信息，结果以表 格的形式展示给用户。此系统包含两个页面：登录页面和查询页面。登录页面根据输入的用户名和密码验证当前用户是否合法；查询页面分为左右两部分，左边以树 的形式包含多个查询结点，用户选择查询结点，将会在右边以表格的形式展示选中结点的查询结果。

使用 GWT Designer 进行界面设计

本 系统包含了两个页面，一个登陆页面，一个信息查询页面。为了页面统一，在此建立了一个基类 CommonViewport。CommonViewport  包含了用于显示本系统名称的标题。后面建立两个页面后都将继承自 CommonViewport。这样就包含了显示标题的 Header。

登陆页面的设计：

建立一个新类 LoginView，使其继承自 LayoutContainer。

右击选择 Open With | GWT Designer.

在 Empty LayoutContainer 中添加一个 verticalPanel。

在 verticalPanel 中添加 3 个 horizontalPanel。

在最上面的 verticalPanel 添加一个 Label 和一个 TextBox， 将 Label 的 text 属性改成 User Name:

在最中间的 verticalPanel 添加一个 Label 和一个 TextBox， 将 Label 的 text 属性改成 Password:

在最下面的 verticalPanel 添加一个 Button，将其 text 属性改成 Login

右击 Button 选择菜单：Add event handler | click(com.google.gwt.event.dom.client.ClickHandler) | onClick 生成

重命名组件使得代码可读性更强。

再建立一个新类 : LoginFrame，使其继承自 CommonViewport。

在其上添加一个 ContentPanel，放在中心位置。

修改 Collapsible 属性为 false， heading 为空。

在 ContentPanel 中添加一个 Flextable.

右击 Palette 中的 Custom，选择 Add Component， 而后选择 LoginView.

从 Custom 中选择 LoginView 添加到 Flextable 中，将其 Layout 属性选择为 CenterLayout.

重命名组件使得代码可读性更强。

完成后如图 5 所示。

图 5.登陆页面

信息查询页面的设计：

建立一个新类 : LoginFrame，使其继承自 CommonViewport。

在其上添加一个 ContentPanel，放在中心位置。再增长一个 ContentPanel 放在最左边。

设置左边的 ContentPanel 的属性以下：

LayoutData | collapsible  :  true;

LayoutData | floatable   :  true;

LayoutData | split       :  true;

collapsible             :  true;

设置中心的 ContentPanel 的属性以下：

collapsible             :  true;

在左边的 ContentPanel 上放一个 flexTable， 里面添加一个 Label，将其 text 属性改成 input search text:

在左边的 ContentPanel 上放一个 verticalPanel， 上面添加一个 treePanel. 完成后结果如图 6 所示。

图 6.信息查询页面

重命名组件使得代码可读性更强。 至此，使用 UI Designer 设计 UI 的工做已经完成。后面要用添加一些 abstract 组件和一些须要动态绑定数据的组件，须要添加代码来完成。

添加代码，为 TreePanel 添加一个存储数据的模型 store， 同时为叶子节点指定图标。

至此，信息查询页面的设计已经完成，再次用 GWT Designer 打开它，其结果如图 7 所示。

图 7.信息查询页面

后台 GWT 代码

登陆页面：

实现本文前面提到的服务器端的 checkUser 方法。添加详细代码以完成对当前用户的检查。

信息查询页面：

信息查询页面的主要是根据用户选择的查询节点，从数据库查询相应的记录，以 XML 的形式返回数据给前端页面。期间的数据通讯也是以 RPC 方式进行。

在信息查询页面，当用户在左侧 Tree 上选择不一样查询节点时，根据其选定的节点查询相应的数据，这须要在 Tree 的 selectionChanged 事件中，调用 RPC 进行通讯。

至此，一个简单的雇员信息查询系统就所有完成了。运行后首先会出现登陆页面，当用户输入有效的用户名和密码后，就进入到信息查询页面。在左侧树中选择一个节点，相应的结果将显示在右侧的面板中。

图 8.信息查询结果

回页首

发布 GWT Application.

本节将结合实际介绍如何发布前面已经完成 GWT 应用。在完成对上述应用的部署以前，还须要澄清一些概念。

基本概念

主机模式

在 前面的几节中，咱们已经使用 GWT Designer 设计完成了一个简单实用的 Web 应用程序。可是，对于一个 web  应用来讲，事情还不至于此。这是由于，在以前的开发中，咱们一直使用的是主机模式（hosted）来开发、调试和运行这个 web  应用。所谓主机模式或者称为 GWT 的托管模式，是指 GWT 有一个内嵌的浏览器 ( 或者浏览器插件 )，开发人员能够在 web  应用开发的过程当中，在 Java 开发环境中运行和调试 web 应用程序。能够看出，在 web  应用部署以前，开发人员会将大多数的时间用于主机模式。在开发过程当中，使用 GWT  的主机模式，浏览器能够经过刷新操做当即查看代码的变动，而无需编译为 JavaScript 或部署到服务器。也就是说 Java  虚拟机其实是在执行编译后的 Java 字节码，而且使用 GWT 将结果输出到一个内嵌的浏览器 ( 或者浏览器插件 )  窗口，从而大大提升了开发和调试应用程序的效率。

Web 模式

与主机模式相对应的是 Web 模式，当从开发阶段转到测试或生产阶段时，应用程序将在 Web 模式下运行。所谓 Web 模式是指从普通的浏览器来访问应用，在浏览器中应用将以 JavaScript 运行。

部署应用到 Web 服务器

主机模式下测试完成后，接下来须要为开发的应用建立一个 Web 版本，以即可以将此应用部署到通用的 Web 服务器以供用户经过普通浏览器进行访问。如下将逐一介绍从编译至部署的各个步骤。

编译客户端文件

在 Eclipse IDE 开发环境中，能够经过下面的步骤来完成 GWT 的编译

选中 GWT 模块配置文件（EmployeeManagement.gwt.xml），点击右键选择“Google Web Toolkit”， 再选择“Deploy module”。

根据对话框上的信息提示，指定相应的参数：包括将要生成的 war 文件名、war 文件名的存放路径、GWT 编译选项和 GWT 编译所用的最大内存设置。能够经过 Browser 选择 war 文件的存放路径，能够是本地路径也能够是网络路径。

按下 OK 后，将自动完成 GWT 编译而且产生如下输出：

• 将用以部署到服务器上的 war 文件

• 用来执行编译部署的 build.xml 文件

一旦生成了 build.xml  文件（该文件和模块文件处于同一个文件夹下），后续就能够将此文件为模板，根据实际状况进行修改以便更好的完成 GWT  编译和部署的工做。若是须要从新编译 war 文件，只须要右键点击 build.xml 文件，选择“Run As -> Ant  Build”就能够了。

编译完成后，GWT 会将所开发的客户端 Java 代码编译成 JavaScript  语言格式。这样一来，当应用在 Web 模式中启动时，它将彻底做为 JavaScript 运行，而且不须要任何浏览器插件或 Java  虚拟机，从而实现了对各类浏览器的完美支持。

客户端文件编译完成后，将会在当前 project 目录下产生一个 war 文件夹，其中存放了全部被编译后的客户端文件。在部署到 Web 服务器上时，只须要将此 war 文件夹中的文件拷贝到 Web 服务器相应的部署目录下便可。

部署到 Web Server

能够根据状况选择喜欢的 Web Server。关于 Web Server 的介绍和配置，请阅读 参考资料。配置好 Web Server 后，将上述 GWT 编译后的 .war 文件拷贝到该 Web Server 部署目录下，对 Jboss 来讲就是 [ 安装目录 ]\server\default\deploy。

缺 省状况下，Jboss 运行在端口 8080。本例中应用程序的名称为 EmployeeManagement，HTML 主页为  EmployeeManagement.html，这样就能够经过在浏览器的地址栏中输入  http://<hostname>:8080/EmployeeManagement/ 来访问部署好的应用程序。

有关 GWT 应用开发和部署更多的介绍，能够阅读 参考资料。

回页首

前景展望

GWT  以其基于 Java 的 Web 应用程序框架，使得开发人员在浏览器中轻松地构建相似桌面应用般的程序，而无须关注 JavaScript  的编写和调试。本来枯燥复杂的 Web 开发今后变的生动并且高效。能够说，相比这以前的 Web 应用框架，GWT  表明的不仅是一种技术上的改进，更是一场 Web 应用框架的革命，由于 GWT 的出现，彻底打破了 Web 应用程序的既有模式。

GWT  Designer 是 Google 最新推出的可视化开发工具，可使开发者人员在 Eclipse 中快速构建 GUI 和 GWT/Java  应用并将其做为 Web 应用部署。相比较传统的 web 开发，开发人员无需了解 JavaScript 就能开发出高质量的 RIA 应用。GWT  Designer 支持流行的 widget 库，如 Ext GWT（GXT）和 GWT-Ext，在最新版中还增长了对 Smart GWT  的支持（一个基于 GWT、拥有大量 widget 库用于构建 UI，同时能将 widget 绑定到服务器端以进行数据管理的框架）。

能够预见，随着 Web 应用的快速发展，GWT 以其独特的视角和高效灵活的处理方式，会不断提供给开发人员更多更好的开发体验。借助 GWT 及其相关插件所开发出来的最终产品，也必将更加的简洁易用，深刻人心。