练习 2.3:使用文件上载组件

在开始之前,必须完成练习 2.2:格式化数据表

既然显示了 PHOTO 列,就应该使用户能够上载分类信息广告的图片。这项功能对于 new_record.jsp 和 update_record.jsp 页特别重要。文件上载组件使用户能够浏览他们的文件系统,将文件上载到数据库,并让此文件即时出现在数据库中。

由于在创建和更新情况下使用文件上载组件的过程是类似的,因此此练习将允许更新页面对任何列表的当前图像进行更改。如果您愿意,在对更新页面完成操作时,可以对新的记录页面进行同样的更改。

将当前图片添加至页面

演示

您将注意到,更新表单只不过是一个 HTML 表,它的某些静态文本和某些输入组件绑定至 update_record 关系记录中的列。知道了这一点,您就可以添加行和列来修改该表单,就像修改任何 HTML 表那样。在以下的步骤中,您将添加一个新行来显示当前图片。

在显示关系记录列表的数据表中添加行和列比较复杂。有关将列添加至数据表的信息,参阅练习 1.2:使用关系记录列表和数据表组件中的调整缺省数据表

  1. 在“项目资源管理器”视图中双击 update_record.jsp 页。
  2. 将光标放在表的第一个单元格中(位于表的左上角)。此单元格被标记为 ID。
  3. 从菜单栏中单击表 > 添加行 > 在上面添加以在表的顶部创建一个新行,该新行将包含记录的当前图片。
  4. 在此新行的最左边的单元格中,输入当前图片:作为标签。
  5. 图像组件从“选用板”的“Faces 组件”抽屉拖动到该新行最右边的单元格中。

    与前一个示例不同,您将允许用户看到整个图像而不必限制图像大小,因此不要更改“属性”视图中的宽度和高度。

  6. 通过将 PHOTO 列从“页数据”视图拖动到新的图像组件上,将图像组件绑定至 update_recordPHOTO 列。现在就已经将图像组件绑定至数据库的 PHOTO 列表了。
  7. 在“属性”视图中,单击类型字段旁边的选择页数据对象 按钮。将打开“选择页数据对象”窗口。
  8. 单击 + 符号以展开 update_record 关系记录。
  9. 单击 IMAGETYPE (String)
  10. 单击确定

    现在,页面显示分类信息广告的当前图片(如果有的话)。您的页面看起来应该类似于下图:

    当前页面外观

将文件上载组件添加至页面

演示

接下来,在表的底部添加一个新行,用来包含文件上载组件。

  1. 通过在包含“电话号码:”文本的单元格内单击来将光标放在最后一行。
  2. 从菜单栏中单击表 > 添加行 > 在下面添加
  3. 在新行的第一个单元格内输入新图片:作为标签。
  4. 文件上载组件从“选用板”的“Faces 组件”抽屉中拖动到新行的最后一个单元格中。
  5. 以绑定图像组件的方式将文件上载组件绑定至 update_record 关系记录的 PHOTO 列。PHOTO 出现在文本字段中,显示此组件被绑定至 PHOTO 列,并且上载的文件将放在该列中。

    您的页面看起来应该类似于下图:

    当前页面外观

  6. 如果希望的话,保存该页面并测试它。

现在,您可以开始进行练习 2.4:使用导航规则了。

使用条款 | 反馈
(C) Copyright IBM Corporation 2000, 2005. All Rights Reserved.