創建 JSF Web 項目和頁面模板（2）

2019-11-18 12:52:34

字體：大中小

來源：轉載

供稿：網友

　　圖 11. 新創建的頁面模板
　　　創建 JSF Web 項目和頁面模板（2）（圖一）

　　現在，我們將會第一次看到選項板中的 Faces 組件，并且把一些可視組件拖到 StockTemplate 上。
　　
　　假如您不在 Web 透視圖中，現在就轉到它。確保 StockTemplate.jtpl 是打開的。您將會在工作臺的右面看到 Palette。Faces Components 部分包括標準的 JSF 組件以及一些 IBM 擴展組件。展開 Faces Components 部分，然后選擇 Panel-Group Box 組件。（圖 12）
　　　
　　圖 12. 可視選項板
　　　創建 JSF Web 項目和頁面模板（2）（圖二）

　　把 Panel-Group Box 組件拖到空白的 StockTemplate.jtpl 上，如圖 13 所示。假如 JTPL 上有一些文本，則在拖動組件之前將其刪除掉。將會顯示一個對話框，要求您選擇組件的類型。選擇 List，如圖 14 所示。
　　圖 13. 把組件拖到設計視圖中
　　　創建 JSF Web 項目和頁面模板（2）（圖三）

　　圖 14. List 面板
　　　創建 JSF Web 項目和頁面模板（2）（圖四）

　　該面板答應 Web 開發人員并排布置組件。因此，我們將把兩個圖像拖到面板上。從 Faces 面板（圖 15）中選擇 Image 組件并把它拖到 List 面板上。
　　圖 15. Image 組件
　　　創建 JSF Web 項目和頁面模板（2）（圖五）

　　重復上述步驟，使兩個圖像并列，如圖 16 所示。
　　圖 16. Panel 組件中的 Image 組件
　　　創建 JSF Web 項目和頁面模板（2）（圖六）

　　可以通過添加屬性來自定義組件。選擇第一個圖像然后轉到左下角。這將會激活屬性視圖，其中應該包括 Web 頁面上所選項（在本例中為圖像）的屬性信息。選擇 File 文本框后面的 Browse 按鈕，如圖 17 所示。
　　圖 17. 選擇圖像
　　　創建 JSF Web 項目和頁面模板（2）（圖七）

　　展開 Web 應用程序，一直到 theme 文件夾，然后選擇 tradebanner1.gif。（圖 18）
　　圖 18. 選擇圖像
　　　創建 JSF Web 項目和頁面模板（2）（圖八）

　　將會顯示如圖 19 中所示的頁面。接下來，在 JTPL 頁面上，選擇 section image 組件。
　　圖 19. tradebanner1 圖像
　　　創建 JSF Web 項目和頁面模板（2）（圖九）

　　為了本次練習的目的，轉到 Attribute 視圖，然后刪除 file 名稱字段中的 /pts/ ，如圖 20 所示，這樣，最后得到的相對路徑如圖 21 所示。（進行此修改的目的是避免工具的 Beta 版本工具中關于絕對路徑名和頁面模板的錯誤；否則，將不能正確解析 tradebanner1.gif。）
　　圖 20. 使用本次練習中的相對路徑
　　創建 JSF Web 項目和頁面模板（2）（圖十）