第 2.1 課：格式化資料表

1. 在「專案瀏覽器」視圖中，按兩下 all_records.jsp 頁面
2. 按一下資料表中的主要種類直欄標頭。
3. 在「內容」視圖中，按一下 h:outputText 標籤， 將值文字欄位中的 Maincategory 改為 Category。
4. 必要的話，請重新命名其他直欄。
5. 儲存頁面。

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

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

1. 按一下資料表中的任何位置。
2. 在「內容」視圖中，從視圖左邊的 HTML 標示清單中按一下 h:dataTableEx。
3. 在 h:dataTableEx 之下按一下顯示選項標籤。
4. 在每頁列數欄位中，輸入 5。
5. 按一下新增 Web 樣式分頁器旁的按鈕。 這時資料表底端會出現分頁器的外觀圖片。 Page Designer 中分頁器的視覺化是一個位置保留區影像，不會實際反映將顯示多少頁面，因為這只有在瀏覽器載入頁面時，才能夠確定。
6. 儲存頁面。 如果您想要的話，您可以嘗試各種不同樣式的分頁器和頁面統計資料元件來尋找頁面所最適用者。

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. 按一下確定，儲存頁面。

頁面現在如下所示：

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 課。在這一課，您已學到如何以各種方式來格式化資料表。