首页 > 学院 > 开发设计 > 正文

创建 JSF Web 项目和页面模板(2)

2019-11-18 12:52:34
字体:
来源:转载
供稿:网友

  
图 11. 新创建的页面模板

  
 创建 JSF Web 项目和页面模板(2)(图一)


  现在,我们将会第一次看到选项板中的 Faces 组件,并且把一些可视组件拖到 StockTemplate 上。
  
  假如您不在 Web 透视图中,现在就转到它。确保 StockTemplate.jtpl 是打开的。您将会在工作台的右面看到 Palette。Faces Components 部分包括标准的 JSF 组件以及一些 IBM 扩展组件。展开 Faces Components 部分,然后选择 Panel-Group Box 组件。(图 12)
   
  
图 12. 可视选项板

  
 创建 JSF Web 项目和页面模板(2)(图二)

  把 Panel-Group Box 组件拖到空白的 StockTemplate.jtpl 上,如图 13 所示。假如 JTPL 上有一些文本,则在拖动组件之前将其删除掉。将会显示一个对话框,要求您选择组件的类型。选择 List,如图 14 所示。
  
图 13. 把组件拖到设计视图中

  
 创建 JSF Web 项目和页面模板(2)(图三)

  
图 14. List 面板

  
 创建 JSF Web 项目和页面模板(2)(图四)

  该面板答应 Web 开发人员并排布置组件。因此,我们将把两个图像拖到面板上。从 Faces 面板(图 15)中选择 Image 组件并把它拖到 List 面板上。
  
图 15. Image 组件

  
 创建 JSF Web 项目和页面模板(2)(图五)

  重复上述步骤,使两个图像并列,如图 16 所示。
  
图 16. Panel 组件中的 Image 组件

  
 创建 JSF Web 项目和页面模板(2)(图六)

  可以通过添加属性来自定义组件。选择第一个图像然后转到左下角。这将会激活属性视图,其中应该包括 Web 页面上所选项(在本例中为图像)的属性信息。选择 File 文本框后面的 Browse 按钮,如图 17 所示。
  
图 17. 选择图像

  
 创建 JSF Web 项目和页面模板(2)(图七)

  展开 Web 应用程序,一直到 theme 文件夹,然后选择 tradebanner1.gif。(图 18)
  
图 18. 选择图像

  
 创建 JSF Web 项目和页面模板(2)(图八)

  将会显示如图 19 中所示的页面。接下来,在 JTPL 页面上,选择 section image 组件。
  
图 19. tradebanner1 图像

  
 创建 JSF Web 项目和页面模板(2)(图九)

  为了本次练习的目的,转到 Attribute 视图,然后删除 file 名称字段中的 /pts/ ,如图 20 所示,这样,最后得到的相对路径如图 21 所示。(进行此修改的目的是避免工具的 Beta 版本工具中关于绝对路径名和页面模板的错误;否则,将不能正确解析 tradebanner1.gif。)
  
图 20. 使用本次练习中的相对路径

  
创建 JSF Web 项目和页面模板(2)(图十)


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表