< 上一個課程 | 下一個課程 >

第 2.1 課：格式化資料表

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

重新命名直欄標頭

在許多情況下，您並不希望資料表中的直欄標頭和資料庫的直欄名稱完全相同。 下列步驟說明如何適當地重新命名資料表直欄標頭。
  1. 在「企業瀏覽器」視圖中，按兩下 all_records.jsp 頁面
  2. 按一下資料表中的主要種類直欄標頭。
  3. 在「內容」視圖中，按一下 h:outputText 標籤， 將值文字欄位中的 Maincategory 改為 Category。
  4. 必要的話，請重新命名其他直欄。
  5. 儲存頁面。

格式化輸出元件

您也可以格式化輸出元件。 在這些步驟中，您將格式化 {PRICE} 輸出元件，使它顯示成貨幣值，而不是一般數字。
  1. 按一下頁面中的 {PRICE} 輸出元件。
  2. 在「內容」視圖中，從類型下拉清單中選取貨幣。 現在，每個項目的價格都會顯示成貨幣樣式，而不是一般數字。您也可以在不同的資料類型上，如百分比、日期和時間等，使用其他樣式和格式。 您也可以自訂輸出元件的格式來顯示「內容」視圖所未列出的資料類型，如電話號碼。
  3. 儲存頁面。

排序資料

現在，資料並未依照任何次序排列。 為了提供較有組織的廣告清單給使用者，請依照種類來排列記錄清單，使類似的項目分組在一起。
  1. 在「頁面資料」視圖中（視窗 > 顯示視圖 > 頁面資料）， 用滑鼠右鍵按一下 all_recordlist (ADS)，再按一下快速功能表中的配置。這時會開啟「配置關聯式記錄清單」視窗。 如果出現警告訊息，指出無法建立資料庫連線，就表示在測試網站之後，伺服器保持執行中。 如果出現這個情況，請在每一個對話框按一下「取消」，停止伺服器； 請參閱測試網站中的「停止伺服器」。
  2. 選取從範圍中擷取現有的記錄或記錄清單和重複使用現有的記錄或記錄清單中的 Meta 資料定義，然後按下一步。
  3. 在下一個視窗中，按一下來選取 ADS，再按下一步。
  4. 在下一個視窗的右邊，按一下排序結果。 這時會開啟「順序」視窗。
  5. 在「可用的直欄」窗格中，按一下 MAINCATEGORY。
  6. 按一下 > 按鈕，將 MAINCATEGORY 直欄移到「排序方式」窗格中。 視窗如下所示：
    「配置關聯式記錄清單」視窗上的「排序方式」標籤。
  7. 按一下關閉，關閉「順序」視窗。
  8. 按一下完成，套用變更。現在，資料會依照種類來排序。您可以依照資料庫中的任何直欄來排序。

新增分頁器

您可以使用分頁器，而不用同時將所有記錄顯示在資料表中。 分頁器會自動將記錄分割成設定大小的頁面，且不會在專案中建立任何新的 JSP 檔。
  1. 按一下資料表中的任何位置。
  2. 在「內容」視圖中，從視圖左邊的 HTML 標示清單中按一下 h:dataTableEx。
  3. 在 h:dataTableEx 之下按一下顯示選項標籤。
  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 直欄中找到的影像資料。 如果未列出 PHOTO (ByteArray) 直欄， 請在「頁面資料」視圖中用滑鼠右鍵按一下 all_recordlist (ADS)， 再從功能表中選取配置。按一下確定，關閉 URL 視窗（如果已開啟）。 在「配置關聯式記錄清單」視窗中， 按下一步。選取 ADS，然後按下一步。 按一下勾選 PHOTO (ByteArray) 的勾選框，然後按一下完成。
  10. 按一下您插入的圖片。在「內容」視圖的 hx:graphicImageEx 標籤上， 按一下類型欄位旁邊的選取頁面資料物件 按鈕。 這時會開啟「選取頁面資料物件」視窗。
  11. 按一下展開 all_recordlist （服務資料物件） > all_recordlist (ADS)。
  12. 按一下 IMAGETYPE (String)。
  13. 按一下確定，儲存頁面。
頁面現在如下所示：
目前頁面外觀。

使用群組框格線來調整版面配置

群組框也可以將元件組織在類似表格的格式中。 清單類型群組框只能有一個列或直欄，但格線類型群組框可以有任意數目的列或直欄。 在這些步驟中，您要將 {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. 刪除資料表中空白的 PRICE 和 PHONE 直欄。若要刪除直欄，請按一下直欄，再開啟「內容」視圖。 接著，從視圖左邊的 HTML 標示清單中按一下 h:dataTable， 再從視圖右邊的清單中選取您要刪除的直欄，然後按一下「移除」。
  14. 按一下「說明」直欄的標頭，利用「內容」視圖，將它的值欄位改成詳細資料。 頁面如下所示：
    頁面目前的外觀。
  15. 將頁面儲存起來，並加以測試。 如果不熟悉如何在伺服器上執行應用程式，請參閱第 1.3 課：測試網站。
測試頁面時，外觀如下所示：
頁面目前在測試期間的外觀。

任何沒有相關圖形的廣告會顯示中斷的鏈結。 在下一課，您將瞭解如何在頁面中加入檔案上載元件來新增或變更廣告的圖形。

課程回顧

您已完成第 2.1 課。在這一課，您已學到如何以各種方式來格式化資料表。
您已學到如何：
  • 變更直欄標題。
  • 排序表格中的資料。
  • 加入分頁器將資料分割成幾個更小的網頁。
  • 以各種方式利用群組框來變更表格在網頁上的版面配置。
< 上一個課程 | 下一個課程 >
意見