GWT应用中的历史机制与部署指南

### GWT 应用中的历史机制与部署指南 #### 1. Ajax 应用历史机制问题与 GWT 解决方案 在基于 Ajax 的 Web 应用中，存在一个常见问题：当用户点击浏览器的后退和前进按钮时，应用无法正确响应。GWT 框架的开发者从一开始就着手解决这个问题，通过提供对浏览器历史机制的钩子并操作历史堆栈，为处理这些事件提供支持。该框架支持通过编程方式以及与点击超链接相关的用户操作来管理历史记录。 为了理解这个问题，我们可以启动一个应用，点击某个类别，比如“Computer”类别，会看到该类别下的书籍列表。但当点击托管模式浏览器窗口中的后退按钮时，会发现应用没有响应。为了改善用户体验，应用应该返回上一页，即显示应用启动页，该页面展示应用中的书籍类别列表。 #### 2. History 类详解 在为应用添加历史支持时，最重要的类是 `History`，它位于 `com.google.gwt.user.client` 包中。这个类允许框架与浏览器的历史堆栈进行交互。GWT 将浏览器的历史记录维护为令牌（由应用开发者定义的字符串），开发者会将应用的状态映射到这些令牌上。根据令牌，可将应用置于相应的状态。 `History` 类的所有方法都是静态的，其主要方法如下表所示： | 方法名 | 描述 | | --- | --- | | `addHistoryListener(...)` | 添加一个监听器，用于接收浏览器历史记录更改的通知 | | `removeHistoryListener(...)` | 移除一个历史记录监听器 | | `forward()` | 相当于用户点击浏览器的前进按钮 | | `back()` | 相当于用户点击浏览器的后退按钮 | | `onHistoryChanged()` | 当历史堆栈发生变化时执行 | | `getToken()` | 获取当前的历史记录令牌 | | `newItem(String)` | 添加一个新的浏览器历史记录条目 | 当应用启动时，历史堆栈为空。根据用户点击后退/前进按钮的事件，或者开发者以编程方式调用 `newItem(String)` 方法，会向历史堆栈中添加一个新的令牌。每当向历史堆栈中添加一个历史记录令牌时，`HistoryListener` 对象中的 `onHistoryChanged(String token)` 方法就会被执行。根据接收到的令牌，可以对应用进行相应的操作，使其进入令牌所反映的状态。 #### 3. 添加历史支持的步骤 为应用添加历史支持，可按以下步骤进行： 1. **实现 `HistoryListener` 接口**：在应用中添加一种 `HistoryListener` 类型，通过实现 `HistoryListener` 接口，并将 `HistoryListener` 对象添加到 `History` 类中。例如，在某个应用中，可以在模块的入口点类中实现该接口。 2. **添加历史记录令牌**：响应用户事件，在历史堆栈中添加历史记录令牌。这些令牌应能代表应用的当前状态，并且基于该令牌，应用应能够返回到当前状态。 3. **添加 iframe**：在应用的宿主 HTML 页面中添加一个 iframe，以连接应用中的历史机制。 #### 4. 为应用添加历史支持示例 以一个具有主类别屏幕和书籍显示屏幕的应用为例，目标是让用户能够在这两个屏幕之间前后移动。应用启动时，历史堆栈为空。当点击某个类别标签时，应插入一个以该类别命名的令牌，这反映了用户想要查看的书籍类型。每次将令牌插入历史堆栈时，`HistoryListener` 的 `onHistoryChanged(...)` 方法都会被调用。因此，不要直接使用 `DeckPanel` 的 `showWidget(...)` 方法来显示书籍显示屏幕，而是将显示书籍显示面板的逻辑移到 `onHistoryChanged(...)` 方法中。这也有助于处理用户使用特定令牌对页面进行书签标记的情况。 以下是修改后的应用类代码： ```java package com.apress.gwt.chapter6.client; import java.util.ArrayList; import com.google.gwt.core.client.EntryPoint; import com.google.gwt.core.client.GWT; import com.google.gwt.user.client.History; import com.google.gwt.user.client.HistoryListener; import com.google.gwt.user.client.Window; import com.google.gwt.user.client.rpc.AsyncCallback; import com.google.gwt.user.client.ui.Button; import com.google.gwt.user.client.ui.CheckBox; import com.google.gwt.user.client.ui.ClickListener; import com.google.gwt.user.client.ui.DeckPanel; import com.google.gwt.user.client.ui.FlexTable; import com.google.gwt.user.client.ui.Grid; import com.google.gwt.user.client.ui.Label; import com.google.gwt.user.client.ui.Panel; import com.google.gwt.user.client.ui.RootPanel; import com.google.gwt.user.client.ui.VerticalPanel; import com.google.gwt.user.client.ui.Widget; public class BookStore implements EntryPoint, ClickListener, HistoryListener { DeckPanel mainPanel; VerticalPanel booksPanel; ArrayList booksBeingDisplayed; FlexTable table; String userName = "VG"; private static ArrayList booksCategoryNames = new ArrayList(); static { booksCategoryNames.add("Computer"); booksCategoryNames.add("Fiction"); booksCategoryNames.add("Horror"); booksCategoryNames.add("Romance"); } private int CATEGORY_PANEL_INDEX = 0; private int BOOKS_PANEL_INDEX = 1; public void onModuleLoad() { mainPanel = new DeckPanel(); booksPanel = new VerticalPanel(); booksBeingDisplayed = new ArrayList(); table = new FlexTable(); mainPanel.add(createCategoryPanel()); mainPanel.add(booksPanel); RootPanel.get("slot1").add(mainPanel); initHistory(); } private void initHistory() { History.addHistoryListener(this); Stri ```