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

2019-11-18 12:52:39

字體：大中小

來源：轉載

供稿：網友

　　把 Panel - Group Box 拖到頁面的底部。此時，選擇 Grid，如圖31 所示。Grid 以疊放的方式組織組件。
　　
　　圖 31.選擇 Grid
　　　創建 JSF Web 項目和頁面模板（4）（圖一）

　　從選項板選擇 Faces Components 下的 Image 組件（圖 32），然后把它拖到頁面的底部。
　　　
　　圖32. Image 組件
　　　創建 JSF Web 項目和頁面模板（4）（圖二）

　　圖 33. 面板中的圖像
　　　創建 JSF Web 項目和頁面模板（4）（圖三）

　　高亮顯示圖像框，然后轉到 Attribute 視圖（圖34）。像前面一樣選擇 File 文本框后的 Browse。
　　圖 34. 瀏覽圖像
　　　創建 JSF Web 項目和頁面模板（4）（圖四）

　　選擇 WEBSPHERE_22P.GIF，如圖35 所示。（記得更改文件名以使用相對路徑。）
　　圖 35.選擇 WEBSPHERE_22P.GIF
　　　創建 JSF Web 項目和頁面模板（4）（圖五）

　　模板應該看起來如圖36 所示。
　　圖 36. 帶有全部組件的 Template頁面
　　　創建 JSF Web 項目和頁面模板（4）（圖六）

　　最后，我們需要更新最后一個屬性。頁面中的所有組件都嵌入到一個 Body 標簽中。轉到屬性視圖并從下拉菜單中選擇 Body（圖 37）。
　　圖 37. 從 Attribute 視圖中選擇 BODY
　　　創建 JSF Web 項目和頁面模板（4）（圖七）

　　單擊 Image 字段后面的下拉框，然后選擇 Browse（圖 38）。
　　圖 38. 瀏覽圖像
　　　創建 JSF Web 項目和頁面模板（4）（圖八）

　　選擇 theme 文件夾中的 grid.gif （圖 39）。
　　圖 39. 選擇 grid.gif
　　　創建 JSF Web 項目和頁面模板（4）（圖九）

　　最后得到的頁面應該看起來如圖 40 所示。
　　圖 40. 最后得到的頁面
　　　創建 JSF Web 項目和頁面模板（4）（圖十）

　　選擇 PReview 標簽查看最后的結果，如圖 41 所示。
　　圖 41. 預覽標簽
　　創建 JSF Web 項目和頁面模板（4）（圖十）

　　保存并關閉模板文件。
　　
　　結束語
　　在本文中，我們介紹了 WebSphere Studio Version 5.1.1 提供的新 java Server Faces 工具，構建了一個 Web 項目，然后利用 Faces 組件創建了一個頁面模板。在本系列的下一部分，我們將創建 JSF 提交表單并利用 WebSphere Universal 測試環境來測試它們。

上一篇：創建 JSF Web 項目和頁面模板（2）

下一篇：創建 JSF Web 項目和頁面模板（3）