練習 2.2:格式化資料表

在準備好開始格式化資料表之前,您必須先完成模組 1:建立含資料連線的網頁練習 2.1:匯入必要的資源的全部動作。

all_records.jsp 頁面的資料表有一個實用的外觀。 它會顯示資料庫所有記錄以及先前想要前往的其他頁面的鏈結,但它不太好看。 在這個練習中,您將新增分頁器、樣式規則和銷售項目圖片來改進這份資料表。

重新命名直欄標頭

顯示說明文件

在許多情況下,您並不希望資料表中的直欄標頭和資料庫的直欄名稱完全相同。 下列步驟說明如何適當地重新命名資料表直欄標頭。

  1. 在「專案瀏覽器」視圖中,按兩下 all_records.jsp 頁面。
  2. 按一下資料表中的主要種類直欄標頭。
  3. 在「內容」視圖中,將文字欄位從「主要種類」改成種類
  4. 如果您想要的話,請重新命名其他直欄。
  5. 儲存頁面。

格式化 JSF 輸出元件

顯示說明文件

您也可以格式化輸出元件。 在這些步驟中,您將格式化 {PRICE} 輸出元件,使它顯示成貨幣值,而不是一般數字。

  1. 按一下頁面中的 {PRICE} 輸出元件。
  2. 在「內容」視圖中,將類型十進位改成貨幣
  3. 現在,每個項目的價格都會顯示成貨幣樣式,而不是一般數字。

    您也可以在不同的資料類型上,如百分比、日期和時間等,使用其他樣式和格式。 您也可以自訂輸出元件的格式來顯示「內容」視圖所未列出的資料類型,如電話號碼。

  4. 儲存頁面。

排序資料

顯示說明文件

現在,資料並未依照任何次序排列。 為了提供較有組織的廣告清單給使用者,請依照種類來排列記錄清單,使類似的項目分組在一起。

  1. 用滑鼠右鍵按一下「頁面資料」視圖中的 all_recordlist (ADS),再按一下快速功能表中的配置。這時會開啟「配置資料清單」視窗。

    如果出現警告訊息,指出無法建立資料庫連線,就表示在測試網站之後,伺服器保持執行中。 如果出現這個情況,請按一下每個對話框中的取消,再依照練習 1.3:測試網站中的停止伺服器所說明來停止伺服器。

  2. 在這個視窗的狀況標籤中,按一下排序方式標籤。
  3. 在「可用的直欄」窗格中,按一下 MAINCATEGORY。
  4. 按一下 > 按鈕,將 MAINCATEGORY 直欄移到「排序方式」窗格中。

    這時視窗應該看起來如下:

    配置「資料清單」視窗

  5. 按一下關閉來套用排序的變更。

    現在,資料會依照種類來排序。您可以依照資料庫中的任何直欄來排序。

新增分頁器

顯示說明文件

您可以使用分頁器,而不用同時將所有記錄顯示在資料表中。 分頁器會自動將記錄分割成設定大小的頁面,且不會在專案中建立任何新的 JSP 檔。

  1. 按一下資料表中的任何位置。
  2. 在「內容」視圖中,按一下視圖左側 HTML 標示清單中的 h:dataTable
  3. 在「內容」視圖中,按一下左側標示清單中的顯示選項
  4. 每頁列數欄位中,輸入 5
  5. 按一下新增 Web 樣式分頁器。這時資料表底端會出現分頁器的外觀圖片。

    Page Designer 中分頁器的視覺化是一個位置保留區影像,不會實際反映將顯示多少頁面,因為這只有在瀏覽器載入頁面時,才能夠確定。

  6. 儲存頁面。

    如果您想要的話,您可以嘗試各種不同樣式的分頁器和頁面統計資料元件來尋找頁面所最適用者。

將群組框中的元件佈置成清單

顯示說明文件

您可以將各直欄內的元素組合起來,產生比較好看的佈置,不必每個資料表直欄各有正好一個輸出元件。 您將依照在隱藏的 HTML 表格中所用的類似方式,利用群組框來安排元件。 明確地說,在新增影像元件來視覺化加強網站之後,您將取出每個廣告的大部分文字資訊,將它放在單一資料表格直欄中,之後, 它將標示為 DETAILS。

  1. 從選用區的 Faces 元件抽屜中,將畫面 - 群組框元件拖曳至資料表的 TITLE 直欄。 這時會開啟「選取類型」視窗。
  2. 在「選取類型」視窗中,選取清單作為群組框類型,再按一下確定

    這時會有一個清單群組框將放在其中的元件佈置在單一直欄或列中,可以採用垂直或水平方向。

  3. 按一下群組框來選取它。
  4. 利用「內容」視圖,將方向改成垂直
  5. {TITLE} 元件拖曳到清單群組框中。您將元件新增到群組框之後,群組框中的指示文字就會消失。
  6. 從選用區的 Faces 元件抽屜中,將影像元件拖曳至清單群組框中。 將影像元件放在群組框的下邊緣有助於確定影像會放在標題之下。
  7. 按一下您剛才新增的影像元件。
  8. 利用「內容」視圖的大小區,將寬度設成 60 個像素,將高度設成 50 個像素。 這可確保不論影像在資料庫中的大小為何,它們都會在您的頁面中顯示成 60x50。
  9. 將「頁面資料」視圖中的 PHOTO 直欄拖曳至影像元件,以將影像元件連結至 all_recordlist 的 PHOTO 直欄。 這會使影像元件顯示在每筆記錄的 PHOTO 直欄中找到的影像資料。
  10. 在「內容」視圖的「基本」標籤中,按一下類型欄位旁的選取頁面資料物件 選取頁面資料物件 按鈕 按鈕。這時會開啟「選取頁面資料物件」視窗。
  11. 按一下 + 號來展開 all_recordlist 關聯式記錄清單。
  12. 按一下 IMAGETYPE (String)
  13. 按一下確定
  14. 儲存頁面。

    這時頁面應該看起來如下:

    現行頁面外觀

將群組框中的元件佈置成格線

顯示說明文件

群組框也可以將元件組織在類似表格的格式中。 清單類型群組框只能有一個列或直欄,但格線類型群組框可以有任意數目的列或直欄。 在這些步驟中,您要將 {PRICE} 和 {PHONE} 元件移到資料表的 DESCRIPTION 直欄中以及併入它們的標籤。

  1. 從選用區的 Faces 元件抽屜中,將「畫面 - 群組框」元件拖曳至資料表的 DESCRIPTION 直欄。 這時會開啟「選取類型」視窗。
  2. 按一下格線作為要新增的元件類型,再按一下確定
  3. 按一下新的格線群組框。
  4. 利用「內容」視圖,將這個群組框的直欄數設成 2
  5. 從選用區的 Faces 元件抽屜中,將輸出元件拖曳至格線群組框中。

    這個輸出元件會成為銷售項目的說明標籤。 每個輸出元件都會在表格的左側資料格中,有一個這類的標籤。

  6. 按一下輸出元件(在 Page Designer 中,它會顯示為 outputText),利用「內容」視圖,將說明指派給它。
  7. 將頁面現有的 {DESCRIPTION} 元件拖曳到格線群組框的下邊緣。

    如果將元件拖曳到群組框的正確位置時發生問題,請試試看按住滑鼠按鈕來檢視游標。 群組框中的游標位置會指出當您放開滑鼠按鈕時,元件將出現的位置。 在這個練習中,您應該在游標位於上一元件的右側時放開滑鼠按鈕。

  8. 從選用區中,將另一個輸出元件拖放到群組框的右側。
  9. 利用「內容」視圖,將價格:指派給它。
  10. 將現有的 {PRICE} 輸出元件拖曳到「價格」輸出文字的右側。
  11. 依照相同方式,針對 {PHONE} 元件的標籤來拖曳新的輸出元件,然後將它標示為「電話:」。
  12. 將現有的 {PHONE} 元件拖曳至「電話」輸出文字右邊的格線群組框中。這時頁面應該看起來如下:

    現行頁面外觀

  13. 將現有的更新清單超鏈結拖放到 DESCRIPTION 直欄中,但在格線群組框內。

    執行這個動作的最佳方式是按住鏈結圖示本身 鏈結圖示,直接將它拖曳到格線群組框下面。這個方式會同時移動文字標籤和鏈結圖示,能夠保持鏈結的功能。 如果只移動鏈結或文字,鏈結會無法運作。 如果發生這個情況,請按一下功能表列中的編輯 > 復原,再重試一次。

  14. 刪除資料表的空白 PRICE、PHONE 和 UPDATE 直欄。

    如果要刪除直欄,請按一下直欄,再開啟「內容」視圖。 之後,按一下視圖左側 HTML 標示清單中的 h:dataTable,從視圖右側清單中選取您要刪除的直欄,按一下移除

  15. 按一下「說明」直欄的標頭,利用「內容」視圖,將它的欄位改成詳細資料

    頁面應該看起來如下:

    現行頁面外觀

  16. 儲存頁面。

套用樣式表規則

顯示說明文件

階式樣式表 (CSS) 不但是控制網站外觀與操作方式的最佳方式之一,它們也可用來控制個別 JavaServer Faces 元件的外觀和操作方式。 在下一節中,您將利用專案所提供的 CSS 檔來變更這個頁面的外觀。 明確地說,您要將一個規則套用在直欄標頭上,再將兩個規則套用在列上,來建立在資料表中區分各列的替代顏色效果。

  1. 按一下其中一個直欄標頭來選取資料表。
  2. 在「內容」視圖中,按一下 h:dataTable
  3. 按一下「內容」視圖右上方的所有屬性按鈕
  4. 屬性名稱下方,按一下 headerClass 項目。這個設定用來控制資料表的標頭列外觀。
  5. 之後,按一下 headerClass 旁邊的欄位中的選取類別 按鈕。

    這時會開啟「選取類別」視窗,來顯示專案樣式表中可用的所有樣式。現在,這個專案只有一個樣式表。

  6. 展開樣式表,然後按一下 .columnHeaderClass
  7. 按一下確定

    「選取類別」視窗

  8. 之後,按一下屬性名稱下的 rowClasses 項目,再按一下欄位中的選取類別 按鈕來重新開啟「選取類別」視窗。rowClasses 選項用來控制各列在資料表中的外觀。
  9. 展開樣式表,這次要同時選取 .rowClass1.rowClass2 規則,請按住 Ctrl 鍵來按一下它們。 這兩個規則有不同的顏色設計,同時選取它們會替換列顏色。
  10. 按一下確定
  11. 最後,將頁面儲存起來,在測試伺服器中執行它。

    如果您不熟悉在伺服器上執行應用程式,請參閱練習 1.3:測試網站

    當您測試頁面時,它應該看起來如下:

    現行頁面外觀

現在,您已知道一些將資料表變成比較有趣的竅門。

現在您已準備好開始進行練習 2.3:使用檔案上載元件

讀者意見
(C) Copyright IBM Corporation 2000, 2005. All Rights Reserved.