练习 2.3:使用文件上载组件
在开始之前,必须完成练习 2.2:格式化数据表。
既然显示了 PHOTO 列,就应该使用户能够上载分类信息广告的图片。这项功能对于 new_record.jsp 和 update_record.jsp 页特别重要。文件上载组件使用户能够浏览他们的文件系统,将文件上载到数据库,并让此文件即时出现在数据库中。
由于在创建和更新情况下使用文件上载组件的过程是类似的,因此此练习将允许更新页面对任何列表的当前图像进行更改。如果您愿意,在对更新页面完成操作时,可以对新的记录页面进行同样的更改。
将当前图片添加至页面
您将注意到,更新表单只不过是一个 HTML 表,它的某些静态文本和某些输入组件绑定至 update_record 关系记录中的列。知道了这一点,您就可以添加行和列来修改该表单,就像修改任何 HTML 表那样。在以下的步骤中,您将添加一个新行来显示当前图片。
在显示关系记录列表的数据表中添加行和列比较复杂。有关将列添加至数据表的信息,参阅练习 1.2:使用关系记录列表和数据表组件中的调整缺省数据表。
- 在“项目资源管理器”视图中双击 update_record.jsp 页。
- 将光标放在表的第一个单元格中(位于表的左上角)。此单元格被标记为 ID。
- 从菜单栏中单击表 > 添加行 > 在上面添加以在表的顶部创建一个新行,该新行将包含记录的当前图片。
- 在此新行的最左边的单元格中,输入当前图片:作为标签。
- 将图像组件从“选用板”的“Faces 组件”抽屉拖动到该新行最右边的单元格中。
与前一个示例不同,您将允许用户看到整个图像而不必限制图像大小,因此不要更改“属性”视图中的宽度和高度。
- 通过将 PHOTO 列从“页数据”视图拖动到新的图像组件上,将图像组件绑定至 update_record 的 PHOTO 列。现在就已经将图像组件绑定至数据库的 PHOTO 列表了。
- 在“属性”视图中,单击类型字段旁边的选择页数据对象
按钮。将打开“选择页数据对象”窗口。
- 单击 + 符号以展开 update_record 关系记录。
- 单击 IMAGETYPE (String)。
- 单击确定。
现在,页面显示分类信息广告的当前图片(如果有的话)。您的页面看起来应该类似于下图:

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

- 如果希望的话,保存该页面并测试它。
现在,您可以开始进行练习 2.4:使用导航规则了。