| |
把 panel - group box 拖到页面的底部。此时，选择 grid，如图31 所示。grid 以叠放的方式组织组件。
图 31.选择 grid
从选项板选择 faces components 下的 image 组件（图 32），然后把它拖到页面的底部。
图32. image 组件
图 33. 面板中的图像
高亮显示图像框，然后转到 attribute 视图（图34）。像前面一样选择 file 文本框后的 browse。
图 34. 浏览图像
选择 websphere_22p.gif，如图35 所示。（记得更改文件名以使用相对路径。）
图 35.选择 websphere_22p.gif
模板应该看起来如图36 所示。
图 36. 带有全部组件的 template页面
最后，我们需要更新最后一个属性。页面中的所有组件都嵌入到一个 body 标签中。转到属性视图并从下拉菜单中选择 body（图 37）。
图 37. 从 attribute 视图中选择 body
单击 image 字段后面的下拉框，然后选择 browse（图 38）。
图 38. 浏览图像
选择 theme 文件夹中的 grid.gif （图 39）。
图 39. 选择 grid.gif
最后得到的页面应该看起来如图 40 所示。
图 40. 最后得到的页面
选择 preview 标签查看最后的结果，如图 41 所示。
图 41. 预览标签
保存并关闭模板文件。
结束语
在本文中，我们介绍了 websphere studio version 5.1.1 提供的新 java server faces 工具，构建了一个 web 项目，然后利用 faces 组件创建了一个页面模板。在本系列的下一部分，我们将创建 jsf 提交表单并利用 websphere universal 测试环境来测试它们。
|
|
