一、綜述

Pager，分頁組件。在介紹分頁組件前，首先了解一下SimpleFramework的數據訪問集接口IDataObjectQuery，分頁組件在接口設計上依賴于IDataObjectQuery，其目標是提供一個編程一致、可靠并且高性能的結果集。

目前IDataObjectQuery有三個實現：

List

DB

Lucene

如果你不了解SimpleFramework的數據訪問機制(SimpleADO)，建議參考一下：

http://simpleframework.net/doc/d2/3.4.html

1.1 Pager組件

分頁組件的接口設計很簡單，定義如下：

 

public interface IPagerHandle extends IComponentHandle {  
    int getCount(ComponentParameter compParameter) throws Exception;  
 
    void process(ComponentParameter compParameter, int start) throws Exception;  
 
    IDataObjectQuery<?> createDataObjectQuery(ComponentParameter compParameter)  
            throws Exception;   
}  
 

 

先看看標紅的兩個函數：

getCount定義了數據集的總數;

process將從某一位置(start)開始，然后獲取之后的n條數據(n在PagerBean中定義了每次處理數據的條數，PagerBean可通過compParameter獲取)

很簡單的邏輯，但如果每次讓用戶來實現getCount和process，我想一定會頭大：(

原因如下：

count、start和n處理起來比較繁瑣

每一種數據源處理方式不一樣，比如：db、緩存、lucense，甚至nosql

如何輸出數據展示層

分頁組件為了簡化實現的難度，又定義了一個函數：

 

IDataObjectQuery<?> createDataObjectQuery(ComponentParameter compParameter) throws Exception;  
 

這豈不是越來越復雜嗎?其實分頁組件同時還提供了一個抽象類AbstractPagerHandle來達到簡化的目的，你只要繼承自AbstractPagerHandle，getCount和process就不需要實現了，只需要提供分頁的數據集IDataObjectQuery即可。

說一下如何輸出數據展示層。

Pager組件不像TablePager組件有固定的數據展示方式，數據如何展示則完全取決于使用者本身，Pager組件通過提供dataPath屬性(定義的jsp路徑)來處理數據展示。

那么在jsp文件中，又如何得到當前分頁的數據呢?

因為AbstractPagerHandle已經實現了process函數，該函數會把當前頁的數據以List的形式放在request中，為了方便調用，你可以在jsp定義如下代碼：

 

List data = PagerUtils.getPagerList(request); 

1.2 TablePager組件

TablePager組件繼承自Pager組件，因為是基于列和行的展示方式，所以其dataPath屬性被設定了一個不可更改的值，可以理解為TablePager組件內置了數據展示的jsp文件，這個jsp文件會根據定義好的列屬性來展示表格數據。

ITablePagerHandle還定義了什么呢：

 

AbstractTablePagerData createTablePagerData(ComponentParameter compParameter)  
         throws Exception; 

 

這個函數的目的是告訴內置的jsp文件如何通過AbstractTablePagerData對象生成基于的表格數據展示(HTML)，后續將會詳細介紹這個對象。

1.3 GroupTablePager

GroupTablePager組件繼承自TablePager組件，提供了按表格某一列(目前不支持多列)分組功能。

二、原理

見下圖

 

 

三、實踐

3.1 Pager組件

3.1.1 Pager組件的聲明

 

<pager name="testPager" containerId="idTestPager" 
       handleClass="net.simpleframework.TestPagerHandle" 
       dataPath="test_pager.jsp" pageItems="20">  
</pager> 

 

 

聲明一個名稱為testPager的分頁組件。

3.1.2 通過ID與HTML頁面元素綁定

在HTML頁面中，你需要定義一個區域，并且這個區域的ID和pager組件的containerId屬性值一樣，SimpleFramework將把Pager組件在后臺產生的HTML代碼放到這個指定的ID區域內。

 

<div id="idTestPager"></div> 

 

 

3.1.3 定義數據源

對于一般用戶來講，實現getCount和process是沒有意義的，直接繼承自抽象類AbstractPagerHandle會更簡單(詳見綜述部分)，如果數據來自緩存，代碼如下：

 

public IDataObjectQuery<?> createDataObjectQuery(  
       final ComponentParameter compParameter) throws Exception {  
    // 創建一些數據TestBean，并添加到List  
    List<?> data = Arrays.asList(new TestBean(), new TestBean(), new TestBean());  
    return new ListDataObjectQuery(data);  
} 

 

如果來自數據庫：

 

public IDataObjectQuery<?> createDataObjectQuery(  
       final ComponentParameter compParameter) throws Exception {  
    // 從數據庫查詢  
    return DataObjectManagerFactory.getQueryEntityManager(getApplication()).query(  
                    new SQLValue("select * from test"));  
}  
 

 

3.1.4 編寫數據展示層

數據源創建后，需要在屬性dataPath指定的文件test_pager.jsp下編寫數據展示。

如何在test_pager.jsp中獲取當前分頁的數據呢?在綜述部分已經講到，通過 List data = PagerUtils.getPagerList(request); 獲取當前分頁的數據。

剩下需要做的，就是遍歷data，并輸出HTML和樣式了。

提出一個問題，data的大小是多少?(pageItems指定的個數)

3.2 TablePager組件

因為繼承自分頁組件，表格組件擁有分頁組件的所有屬性，屬性dataPath已沒有意義，因為總是調用內置的jsp頁面。

3.2.1 TablePager組件的聲明

 

<tablePager name="testTablePager" containerId="idTestTablePager" 
    handleClass="net.simpleframework.TestTablePagerHandle" 
    pageItems="30"> 
</tablePager> 

 

 

聲明一個名稱為testTablePager的表格組件。

3.2.2 通過ID與HTML頁面元素綁定

和分頁組件一樣，定義一個區域，并設置containerId屬性。

 

<div id="idTestTablePager"></div> 

 

 

3.2.3 定義表格列

 

<tablePager name="testTablePager" containerId="idTestTablePager" 
    handleClass="net.simpleframework.TestTablePagerHandle" 
    pageItems="30"> 
  <columns> 
    <column columnName="n1" sort="false" /> 
    <column columnName="n2" sort="false" separator="true" 
      headerStyle="width: 180px;" style="width: 180px;" /> 
    <column columnName="n3" separator="true" 
      headerStyle="width: 120px;" style="width: 120px;" /> 
    <column columnName="n4" separator="true" 
      headerStyle="width: 120px;" style="width: 120px;" /> 
  </columns> 
</tablePager> 

 

 

 

如上，紅色部分。其屬性含義為：

columnName：列唯一名稱，***英文，對應后臺bean的屬性值或Map的Key值

columnText：列的顯示名稱，即你在表格頭所看見的，如果為空則顯示columnName

columnSqlName：數據源的列名，等于columnName時可為空

sort：標識該列是否可以排序

defaultExport：是否導出該列

headerStyle：列頭的樣式，等同于HTML中style的值

style：行的樣式

3.2.4 定義數據源

參考分頁組件的數據源定義：)

3.2.5 實例化AbstractTablePagerData對象

表格組件的Handle接口ITablePagerHandle需要實例化AbstractTablePagerData對象，其目標是在數據源和表格展示層搭建一個轉換器，這個轉化器定義了表格Render(展示)所需要的所有信息。

下面列舉AbstractTablePagerData定義的一些常用方法：

 

// 定義了表格列，默認從表格組件定義（前面紅色部分）中獲取，所以可以覆蓋此方法來動態生成表格列  
Map<String, TablePagerColumn> getTablePagerColumns();  
 
// 傳遞數據源中的對象dataObject，并轉為表格需要的數據Map。  
// 比如，dataObject中含有日期類型，可以在put到Map中轉為帶格式的字符串（仍按日期排序）  
Map<Object, Object> getRowData(Object dataObject);  
 

 

表格組件同樣也提供了抽象類AbstractTablePagerHandle，目的是簡化實例AbstractTablePagerData的操作。

四、高級特性

4.1 數據刷新

在客戶端通過javascript來刷新分頁組件，代碼示例如下：

 

$Actions["testPager"]();  
或  
$Actions["testTablePager"].refresh(params);  
 

 

數據刷新是基于ajax的，調用時可以動態傳遞一些參數。

4.2 定義操作事件

4.2.1 jsLoadedCallback

分頁組件裝載后，將觸發此事件，數據刷新完成后也會觸發此事件，舉個例子：

 

<tablePager name="testTablePager" containerId="idTestTablePager" 
    handleClass="net.simpleframework.TestTablePagerHandle" 
    pageItems="30"> 
  <jsLoadedCallback> 
    // 初始化表格行，使之具備拖放操作  
    TableRowDraggable.init("idTestTablePager", "tafelTreeselected");      
  </jsLoadedCallback> 
</tablePager> 

 

 

 

4.2.2 jsRowClick和jsRowDblclick

定義表格組件行的單擊和雙擊事件，其函數原型為：

 

function click(item) {  
 // item為行TR對象  
} 

 

示例如下：

 

<tablePager name="testTablePager" containerId="idTestTablePager" 
    handleClass="net.simpleframework.TestTablePagerHandle" 
    pageItems="30"> 
  <jsRowClick> 
    alert(item.getAttribute("id")); // 打印行id  
  </jsRowClick> 
</tablePager> 

 

 

 

4.3 一些不常用的屬性

解釋一些不經常使用的屬性含義：

pagerBarLayout：分頁按鈕的布局，有四個值，top、bottom、both、none，含義為，在數據上方顯示、在數據下方顯示、上下方都顯示、都不顯示

title：組件左上方要顯示的一些文本

indexPages：分頁按鈕(數字部分)顯示個數

noResultDesc：當沒有數據，顯示的文本提示信息

csvExportAction：導出的js代碼，空為系統提供的js代碼，false將禁止導出功能

jobView：定義查看數據角色，需機構應用模塊的支持

五、總結

還是留給讀者吧：)

下次將介紹Window組件。