优化Ajax应用：处理返回按钮与CSS样式设计

# 优化Ajax应用：处理返回按钮与CSS样式设计 ## 1. 处理返回按钮 ### 1.1 Ajax应用返回按钮问题 许多Ajax应用存在页面变化处理不佳的问题。由于Ajax应用通常不刷新页面但会改变状态，当页面刷新或用户使用返回按钮离开页面时，应用状态可能丢失。传统网页应用中，用户习惯通过点击链接和使用返回按钮浏览网站。而在使用Ajax应用时，若应用未明确处理返回按钮，点击返回会卸载应用并返回上一网页，再次返回时应用恢复初始状态，用户之前的操作进度丢失。 ### 1.2 GWT的解决方案 GWT利用浏览器历史记录功能和HTML锚点提供了一个很好的解决方案。 - **HTML锚点**：在HTML中，可使用`<a>`标签创建锚点。例如： ```html <a name="anyName">any spot in the page</a> <a href="#anyName">go to the spot</a> ``` 当用户点击超链接时，浏览器滚动页面使焦点位于名为`anyName`的锚点处，且不刷新页面。浏览器会将此操作记录在历史记录中。 - **GWT历史记录实现**：GWT的`Hyperlink`小部件通过一个令牌字符串值（锚点名称）实例化，代表用户点击超链接后应用的状态。这与浏览器的前进和后退按钮以及在新窗口中打开链接的功能很好地集成。用户在应用中点击链接前进时，应用不刷新并能跟踪状态；点击返回按钮时，应用根据锚点令牌值接收状态改变事件并调整状态。 ### 1.3 实现步骤 #### 1.3.1 确定状态模型 需要确定一个能用字符串令牌表示的应用状态模型。例如，在多搜索应用中，状态由用户的搜索字符串表示；数据库编辑器应用中，令牌表示当前显示的视图。 #### 1.3.2 添加历史记录令牌 使用GWT的`History`类管理和接收浏览器历史记录栈的事件。可使用`History.addToken`方法添加新的历史记录令牌，例如多搜索应用中： ```java private void onSearch(){ String query = searchBox.getText(); if( query.length() > 0 ){ History.newItem(query); } } ``` #### 1.3.3 响应历史记录变化 实现`GWT`的`HistoryListener`接口并将监听器添加到`History`类。`HistoryListener`接口只有`onHistoryChanged`方法： ```java public interface HistoryListener { void onHistoryChanged(String historyToken); } ``` 多搜索应用中的实现示例： ```java History.addHistoryListener( new HistoryListener(){ public void onHistoryChanged(String historyToken){ listener.onSearch(historyToken); } }); ``` ## 2. 创建优雅的CSS界面 ### 2.1 HTML与CSS的结合 使用HTML构建界面具有灵活性，但缺乏规则导致代码混乱、难以阅读和维护。可使用级联样式表（CSS）在应用间共享样式。 ### 2.2 连接GWT小部件与CSS 每个GWT小部件都有三个设置样式名称的方法： - **setStyleName**：设置小部件使用的样式名称，若有之前的样式名称会被移除。 - **addStyleName**：为小部件添加样式名称，小部件可有多个样式名称。 - **removeStyleName**：移除小部件的一个样式名称。 例如，`TitleCommandBar`小部件在构造函数中设置样式名称： ```java public TitleCommandBar( String title ){ initWidget( titlePanel ); titlePanel.setWidth("100%"); setStyleName("gwtapps-TitleBar"); titleLabel = new Label( title ); titleLabel.setStyleName("gwtapps-TitleBarTitle"); titleLabel.setWordWrap( false ); titlePanel.add( titleLabel ); } ``` 对应的CSS样式： ```css .gwtapps-TitleBar{ border-bottom:1px solid #ddd; margin-top:20px; width:500px; } .gwtapps-TitleBarTitle{ font-size:16pt; font-weight:bold; } ``` ### 2.3 CSS常用属性 #### 2.3.1 指定颜色 CSS颜色属性可使用十六进制RGB表示法，如`#000000`表示黑色，`#FFFFFF`表示白色。也可使用HTML或CSS标准颜色名称。 #### 2.3.2 指定单位 CSS的`width`属性值可使用多种格式，常见的有像素和百分比格式： ```css div { width: 250px } p { width: 50% } ``` 不同长度单位如下表所示： | 单位类型 | 示例 | 描述 | | ---- | ---- | ---- | | 厘米 | 5cm | 告诉浏览器屏幕上显示的物理长度，但受操作系统屏幕分辨率定义影响，不太可靠 | | 毫米 | 50mm | | | 英寸 | 1in | | | 点 | 12pt | 标准字体测量单位，1英寸等于72点 | | 相对单位em | 1.5em | 相对于元素的默认字体大小 | | 像素 | 11px | 表示屏幕上的实际像素 | | 百分比 | 50% | 相对于元素父元素的大小 | #### 2.3.3 使用字体属性 CSS提供了多个调整文本样式的属性，如下表： | 属性 | 示例 | 描述 | | ---- | ---- | ---- | | font-family | font-family: Arial,sans-serif | 指定用于渲染文本的字体列表，优先使用列表中的第一个字体 | | font-weight | font-weight: bold <br> font-weight: normal | 通常用于设置文本加粗，也有其他权重选项 | | font-size | font-size: 12pt <br> font-size: 11px <br> font-size: 1.2em | 使用CSS长度