創(chuàng)建 JSF Web 項(xiàng)目和頁面模板（2）

2019-11-18 12:52:34

字體：大中小

供稿：網(wǎng)友

　　圖 11. 新創(chuàng)建的頁面模板
　　　創(chuàng)建 JSF Web 項(xiàng)目和頁面模板（2）（圖一）

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

創(chuàng)建 JSF Web 項(xiàng)目和頁面模板（2）（圖二）

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

創(chuàng)建 JSF Web 項(xiàng)目和頁面模板（2）（圖三）

　　圖 14. List 面板
　　　創(chuàng)建 JSF Web 項(xiàng)目和頁面模板（2）（圖四）

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

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

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

創(chuàng)建 JSF Web 項(xiàng)目和頁面模板（2）（圖七）

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

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

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