图 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. 使用本次练习中的相对路径
