优化Ajax应用：处理返回按钮与CSS优雅界面构建

### 优化Ajax应用：处理返回按钮与CSS优雅界面构建 #### 1. 处理返回按钮 许多Ajax应用存在一个常见问题，即它们对页面变化的处理不佳。由于Ajax应用通常不刷新页面却会改变状态，当页面刷新或用户使用返回按钮离开页面时，应用状态可能会丢失。传统网页应用中，用户习惯通过点击链接浏览网站，并使用返回按钮回到上一个浏览页面。当熟悉这种操作的用户使用Ajax应用浏览数据时，也会期望使用返回按钮回到之前查看的数据。若Ajax应用未明确处理返回按钮，它会卸载并返回上一个网页，用户再返回时，应用会回到初始状态，之前的操作进度就丢失了。 要求Ajax应用用户适应这种特性，或期望浏览器开发者为Ajax应用发明新选项，都是不现实的。因此，Ajax应用需要合理处理这些可用性问题。 GWT提供了一个很好的解决方案，它结合了浏览器的历史记录功能和HTML锚点。大家都熟悉浏览器的历史记录以及使用后退和前进按钮。浏览器会记住用户访问过的上一个页面，用户点击后退回到上一个页面后，还能通过点击前进返回。虽然用户对HTML锚点不太熟悉，但网页开发者很了解。在HTML中，锚点是使用`<a>`标签创建的可点击链接，通常称为超链接，而锚点一般指同一页面内的链接。例如，可以这样标记页面中的一个部分： ```html <a name="anyName">any spot in the page</a> ``` 然后使用以下代码链接到该位置： ```html <a href="#anyName">go to the spot</a> ``` 当用户点击超链接时，浏览器会滚动页面，使焦点落在名为`anyName`的锚点上。浏览器会将此作为历史记录项记住，但不会刷新网页，因为链接在当前页面内。如果用户点击一系列这样的内部链接，就可以使用返回按钮在不刷新页面的情况下浏览文档。此外，用户还可以右键点击喜欢的链接，选择在新窗口的锚点位置打开。 为了支持这一功能，浏览器通过在页面URL中添加`#`符号来跟踪这些内部链接。例如，当用户点击上述超链接时，URL会变为： ``` http://www.yourdomain.com/index.html#anyName ``` 可以看到，浏览器会在URL后面添加锚点名称和`#`符号。当用户在另一个窗口打开此URL时，浏览器会加载`index.html`页面，并将焦点设置到`anyName`位置。 GWT利用浏览器的这种锚点行为实现了历史记录功能。`Hyperlink`小部件只能使用一个表示应用状态的令牌字符串值（即锚点名称）进行实例化。这与浏览器的后退和前进按钮以及在新窗口打开链接的功能很好地集成。当用户通过点击链接在应用中前进时，应用不会刷新，并能跟踪自身状态。当用户按下返回按钮时，应用会根据锚点令牌值收到状态已更改的事件，并相应调整状态。当用户根据令牌在新窗口打开Ajax应用时，应用可以处理该令牌以呈现适当的状态。 要在应用中实现此功能，需要设计一个可以用字符串令牌表示的应用状态模型。例如，在多搜索应用中，状态由用户的搜索字符串表示。每次用户执行搜索时，应用会将一个令牌添加到浏览器历史记录中。点击返回按钮就可以回到上一次的搜索结果，这与普通搜索引擎网页的行为一致。数据库编辑器应用使用令牌表示当前显示的视图，用户浏览数据时，应用会将令牌添加到浏览器历史记录中，用户可以轻松使用返回按钮回到上一个视图。 确定历史记录令牌的正确状态粒度后，只需使用GWT的`History`类来管理和接收浏览器历史记录栈的事件。可以使用`History.addToken`方法添加新的历史记录令牌，这与用户点击`Hyperlink`小部件的效果相同。此操作会将`#`符号和令牌添加到当前URL中。以下是多搜索应用在用户提交搜索查询后添加历史记录令牌的代码示例： ```java private void onSearch(){ String query = searchBox.getText(); if( query.length() > 0 ){ History.newItem(query); } } ``` 实现浏览器历史记录功能的另一部分是响应历史记录栈的变化。可以通过实现GWT的`HistoryListener`接口，并将监听器添加到`History`类中来实现。`History`接口是一个简单的接口，只有`onHistoryChanged`方法： ```java public interface HistoryListener { void onHistoryChanged(String historyToken); } ``` 实现此接口时，应用必须根据提供的历史记录令牌改变其状态。在多搜索应用中，该令牌是搜索字符串，应用会根据此字符串检索搜索结果。以下是多搜索应用中实现此功能的代码： ```java History.addHistoryListener( new HistoryListener(){ public void onHistoryChanged(String historyToken){ listener.onSearch(historyToken); } }); ``` 这段代码将`HistoryListener`接口添加到`History`类中，并通过将历史记录令牌作为搜索查询提交给`onSearch`函数来处理`onHistoryChanged`事件（应用控制器会处理`onSearch`方法，从各个搜索引擎请求搜索结果）。 #### 2. 使用CSS创建优雅界面 使用HTML声明式地构建界面，规则少且无需编译步骤，便于进行实验。这种自由带来了有趣且有创意的界面，但也存在一些问题。HTML文档缺乏规则，导致它们杂乱无章、难以阅读和维护。当需要在多个HTML文件中更改相似元素时，就需要手动逐个更新，这既繁琐又容易出错。可以使用级联样式表（CSS）在应用之间共享这些样式。 ##### 2.1 连接GWT小部件与CSS 以HelloWorld应用生成的HTML宿主文件中的CSS为例： ```html <style> body,td,a,div,p{font-family:arial,sans-serif} div,td{color:#000000} a:link,.w,.w a:link{color:#0000cc} a:visited{color:#551a8b} a:active{color:#ff0000} </style> ``` 生成的CSS包含在HTML文档的`<style>`标签中。也可以将标签内容（不包括`<script>`标签本身）复制到一个名为`HelloWorld.css`的外部文件中。该文件需要放在公共目录中，以便编译步骤将其包含在部署中。然后在HTML文件的头部添加以下链接标签来导入CSS文件： ```html <link rel="stylesheet" type="text/css" href="HelloWorld.css" /> ``` 另一种处理方式是将CSS代码嵌入到编译后的模块中。 CSS的结构由一系列规则组成，每个规则有一个或多个选择器，后面跟着用花括号括起来的样式属性。选择器用于选择HTML文档中应用样式的元素。在上述示例中，选择器根据标签名选择所有元素。CSS还允许根据元素的类属性或ID选择元素。使用GWT小部件时，无法确定具体使用了哪些元素，因此需要在小部件上设置属性。GWT使用元素的类属性，称为小部件的样式名。每个小部件都有三个方法来设置其样式名： - `setStyleName`：设置小部件使用的样式名，如果小部件之前有其他样式名，会被移除。 - `addStyleName`：为小部件添加一个样式名，小部件可以有多个样式名，之前的样式名会保留。 - `removeStyleName`：从小部件中移除一个样式名，其他样式名保留。 例如，在博客编辑器和数据库编辑器应用中使用的`TitleCommandBar`小部件，在其构造函数中设置样式名： ```java public TitleCommandBar( String title ){ initWidget( titlePanel ); titlePanel.setWidth("100%"); se ```