ADF Faces 表格應用基礎案例一:應用List<Class>填充文本表格

基礎環境:

Oracle Fusion Middleware Tag Reference for Oracle ADF Faces

11g Release 2 (11.1.2.4.0)

E17491-06 

<af:table>表格組件是ADF Faces的重要數據展現組件,更準確的描述是表格風格(或表格式)的數據展現組件,它可以通過綁定管理Bean或VO獲得要展示的數據。本文介紹了基於Class作爲數據模型,應用管理Bean實現表格內容填充的開發過程。


前置,創建基礎工程(名稱爲“DemoTable”):

wKiom1eMYqHRb62oAABzB6nP9as452.png-wh_50

wKiom1eMa6OwOdgeAADEZAb0aOI497.png-wh_50


開發過程:

  1. 創建一個類(Class)作爲表格行的數據模型。

  2. 創建JSPX頁面以及表格組件。

  3. 通過後臺管理Bean將數據發送給表格完成展現過程。



  1. 創建數據模型類,命名爲TableRow,內涵3個屬性:id,name,descr。

wKioL1eMa6Pha1skAAB72FeRUS0528.png-wh_50

wKiom1eMa6TwsX3HAABETuGH0ks746.png-wh_50


wKioL1eMa6STMR6OAADhZ0CgBic741.png-wh_50

TableRow類代碼:

package demo.table.app.view;

public class TableRow {
    private String id,name,descr;

    public TableRow(String id, String name, String descr) {
        super();
        this.id = id;
        this.name = name;
        this.descr = descr;
    }

    public void setId(String id) {
        this.id = id;
    }

    public String getId() {
        return id;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getName() {
        return name;
    }

    public void setDescr(String descr) {
        this.descr = descr;
    }

    public String getDescr() {
        return descr;
    }
}

2.創建JSPX頁面以及表格組件。

新建JSPX頁面,名爲demo1.jspx

wKioL1eMa6TRt3frAAB5t6utFI8608.png-wh_50

wKiom1eMa6Xgf3CnAAArnc85z0s431.png-wh_50

從右側的組件清單中選擇Table組件,拖拽至頁面範圍內。

wKiom1eMa6WzWQj9AAFOsnG3Zec067.png-wh_50

IDE提示表格基礎配置,這一步驟不做修改,直接完成,生成表格組件的默認代碼。

wKioL1eMa6WjHZphAABtOQGWuz4567.png-wh_50

同時IDE提示會輔助插入相關標籤代碼,點解確認按鈕即可。

wKiom1eMa6ayyg4UAAAgA0OTE0Q637.png-wh_50

wKioL1eMa6aDbLWHAAAa0HM8gOo164.png-wh_50

生成後的默認頁面狀態

wKioL1eMa6aR-_PuAAFk-hZOw5k633.png-wh_50

此時頁面中的源代碼:順便提一句,表格屬性rowBandingInterval指的是間隔高亮顯示的行數,0表示不設定。

<?xml version='1.0' encoding='UTF-8'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1" xmlns:af="http://xmlns.oracle.com/adf/faces/rich"
          xmlns:f="http://java.sun.com/jsf/core">
    <jsp:directive.page contentType="text/html;charset=UTF-8"/>
    <f:view>
        <af:document title="demo1.jspx" id="d1">
            <af:form id="f1">
                <af:table var="row" rowBandingInterval="0" id="t1">
                    <af:column sortable="false" headerText="col1" id="c1">
                        <af:outputText value="#{row.col1}" id="ot1"/>
                    </af:column>
                    <af:column sortable="false" headerText="col2" id="c2">
                        <af:outputText value="#{row.col2}" id="ot2"/>
                    </af:column>
                    <af:column sortable="false" headerText="col3" id="c3">
                        <af:outputText value="#{row.col3}" id="ot3"/>
                    </af:column>
                    <af:column sortable="false" headerText="col4" id="c4">
                        <af:outputText value="#{row.col4}" id="ot4"/>
                    </af:column>
                    <af:column sortable="false" headerText="col5" id="c5">
                        <af:outputText value="#{row.col5}" id="ot5"/>
                    </af:column>
                </af:table>
            </af:form>
        </af:document>
    </f:view>
</jsp:root>



3.通過後臺管理Bean將數據發送給表格完成展現過程。

3.1創建管理Bean類,擁有列表屬性“data”,初始化的時候實例化4個表格對象。

package demo.table.app.view;

import java.util.ArrayList;
import java.util.List;

public class TableBean {
    List<TableRow> data = new ArrayList<TableRow>();

    public TableBean() {
        super();
        data.add(new TableRow("1", "張三", "測試用戶1"));
        data.add(new TableRow("2", "李四", "測試用戶2"));
        data.add(new TableRow("3", "王五", "測試用戶3"));
        data.add(new TableRow("4", "奧特曼", "測試用戶4"));
    }

    public void setData(List<TableRow> data) {
        this.data = data;
    }

    public List<TableRow> getData() {
        return data;
    }
}

3.2註冊管理Bean

wKiom1eMa6ejYhDrAAEo0yVWSf0994.png-wh_50

wKiom1eMa6fB12qjAAAOmsa2Lhs107.png-wh_50

3.3修改表格代碼

在<af:table>標籤中,增加“value="#{bean1.data}"”

修正列信息,與數據模型類的屬性想對應:

<af:table var="row" rowBandingInterval="0" id="t1" value="#{bean1.data}">
    <af:column sortable="false" headerText="id" id="c1">
     <af:outputText value="#{row.id}" id="ot1"/>
  </af:column>
  <af:column sortable="false" headerText="name" id="c2">
     <af:outputText value="#{row.name}" id="ot2"/>
  </af:column>
  <af:column sortable="false" headerText="descr" id="c3">
     <af:outputText value="#{row.descr}" id="ot3"/>
  </af:column> 
</af:table>

至此即可運行工程查看結果,右鍵點擊JSPX文件,選擇“Run”菜單項:

wKioL1eMa6eTrMPWAADK8DPFMCw367.png-wh_50

運行效果如圖:

wKioL1eMa6ejhlDhAAAvQO7dmMw792.png-wh_50

將表格屬性rowBandingInterval值修改爲1,運行效果如圖:

wKiom1eMcE7xWf5VAAAJ5ErSDGw646.png-wh_50


小結:根據開發過程分析可以得出,ADF中表格的開發調用線索:

  1. 頁面中定義表格組件

  2. 組件的關鍵屬性通過EL表達式的方式將調用流指向了目標管理Bean

  3. 管理Bean提供表格組件可接受行數據模型對象清單。

  4. 行數據模型對象可以由自定義Class(get/set屬性訪問器)或Map對象提供。


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章