图 11. 新创建的页面模板
　　　

　　现在，我们将会第一次看到选项板中的 faces 组件，并且把一些可视组件拖到 stocktemplate 上。
　　
　　如果您不在 web 透视图中，现在就转到它。确保 stocktemplate.jtpl 是打开的。您将会在工作台的右面看到 palette。faces components 部分包括标准的 jsf 组件以及一些 ibm 扩展组件。展开 faces components 部分，然后选择 panel-group box 组件。（图 12）
　　　
　　图 12. 可视选项板
　　　
　　把 panel-group box 组件拖到空白的 stocktemplate.jtpl 上，如图 13 所示。如果 jtpl 上有一些文本，则在拖动组件之前将其删除掉。将会显示一个对话框，要求您选择组件的类型。选择 list，如图 14 所示。
　　图 13. 把组件拖到设计视图中
　　　
　　图 14. list 面板
　　　
　　该面板允许 web 开发人员并排布置组件。因此，我们将把两个图像拖到面板上。从 faces 面板（图 15）中选择 image 组件并把它拖到 list 面板上。
　　图 15. image 组件
　　　
　　重复上述步骤，使两个图像并列，如图 16 所示。
　　图 16. panel 组件中的 image 组件
　　　
　　可以通过添加属性来自定义组件。选择第一个图像然后转到左下角。这将会激活属性视图，其中应该包括 web 页面上所选项（在本例中为图像）的属性信息。选择 file 文本框后面的 browse 按钮，如图 17 所示。
　　图 17. 选择图像
　　　
　　展开 web 应用程序，一直到 theme 文件夹，然后选择 tradebanner1.gif。（图 18）
　　图 18. 选择图像
　　　
　　将会显示如图 19 中所示的页面。接下来，在 jtpl 页面上，选择 section image 组件。
　　图 19. tradebanner1 图像
　　　
　　为了本次练习的目的，转到 attribute 视图，然后删除 file 名称字段中的 /pts/ ，如图 20 所示，这样，最后得到的相对路径如图 21 所示。（进行此修改的目的是避免工具的 beta 版本工具中关于绝对路径名和页面模板的错误；否则，将不能正确解析 tradebanner1.gif。）
　　图 20. 使用本次练习中的相对路径