练习 2.5:绑定数据并定制显示

在开始之前,必须先完成练习 2.4:配置数据网格组件

绑定数据并定制显示

您想在“数据网格”中显示投资组合位置(已购买的股票),以便用户可以查看给定投资组合的内容、对数据进行翻页、对数据进行排序以及编辑数量以执行一些简单的分析工作。

  1. 在“客户机数据”视图中,浏览至 root.users.portfolios.positions 节点,并将它拖动到“设计”视图中的“数据网格”上。将为 Position 类的所有字段的基本数据显示自动设置“数据网格”。
    已绑定的数据网格
  2. 确保已选择“数据网格”,然后单击“属性”视图中 odc:dataGrid 下的选项卡以定制列。可以使用向上向下按钮来重新排列各列的顺序。还可以使用添加除去按钮来添加或除去列。当选择某行时,可以输入列标题的标签、宽度和值。缺省情况下,使用属性值作为列标题。
    对于本教程:
    1. 除去 refNum 属性。
    2. 采用一种对您有意义的方式来对各列进行重新排序。
    3. 输入更具有描述性的列标题。
  3. 选择“数据网格”中的任何单元格,并选择“属性”视图中的列详细信息选项卡。“属性”视图中各个选项卡的内容是动态的,它将自动更改以反映所选列。在“列”选项卡上,您可以:对于本教程:
    1. 对于 quantity、price 和 purchased date,选择右对齐。
    2. 对于 quantity,选择可编辑列内容
  4. 还可以配置各列的显示方式。单击列详细信息选项卡,您将看到格式列表,它具有下面这四个选项:对于本教程:
    1. Purchased Date 列设置为日期/时间。如果要在“数据网格”中显示日期,而实际上您将“数据网格”中的列的格式设置为“日期”,则这样设置是很重要的。否则,将显示自从 1970 年 1 月 1 日 00:00:00 GMT 以来所经过的毫秒数,因为此毫秒数是 Java 或 JavaScript 中的“日期”对象的内部表示。
    2. pricequantity 列设置为数字

设置和管理事件处理程序

Faces Client 组件的事件处理程序是通过“快速编辑”视图编写的。对于“数据网格”或“树”组件,可以使用已提供的事件处理程序,也可以编写您自己的定制事件处理程序。已经提供了两个事件处理程序:

  1. 将选择的对象设置为目标组件中的根对象 - 此处理程序采用在当前控件中选择的对象(或者,该对象中的特定引用)并使其成为目标控件中的根对象。对于此类型的事件处理程序,目标控件可以是任何 Faces Client 组件(但是 Web Service 除外)和 Faces Client 支持的标准 JavaServer Faces 组件(这些组件绑定至作为事件源的同一类对象)。可能的目标控件的列表显示在出现的配置对话框中。在想要树形视图中的所选对象(源)确定显示在数据网格中的内容(目标)时,使用此事件处理程序。此处理程序不更改数据源中的任何数据值,但是它会设置显示在所选控件中的内容。
  2. 将选择的对象绑定至另一对象 - 此处理程序采用所选对象的值(或者,该对象中的特定引用)并将其绑定至另一数据对象。此事件处理程序设置存储在数据对象(例如,Java bean 和关系数据库记录等等)中的数据值。例如,在 Faces Client 投资组合样本中,当用户从数据网格中选择特定股票时,该股票对象中的字段的值将复制至 placeHolderStock 数据对象,之后将用作 Web Service 的输入参数。该处理程序将更改存储在该对象中的值。

如果选择数据网格,则“快速编辑”视图将显示下列事件:

onhighlight
当用户突出显示某行时就会调用此事件,并允许开发者实现任意逻辑作为响应。例如,导致执行某些计算、调用 URL 或者页面上发生一些更改。
onselect
选择某行时就会调用此事件。必须启用行选择才能激发此事件。
onunselect
取消选择某行时就会调用此事件。必须之前已选择了此事件且已启用了行选择才能激发此事件。

注意:当在“快速编辑”视图中选择一个事件并单击代码面板时,您将看到一些注释,用来说明该事件的目的,更重要的是,用来说明它的参数以及期望的返回类型和值。

编辑样式

如果需要定制数据网格的外观,则编辑名为 datagrid.css 的缺省级联样式表(CSS)。在“项目导航器”中,在您的项目的 /WebContent/theme/datagrid.css 中提供了此文件。更多地了解组件样式

现在,您可以开始进行练习 2.6:在服务器上测试了。

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