练习 2.5:绑定数据并定制显示
在开始之前,必须先完成练习 2.4:配置数据网格组件。
绑定数据并定制显示
您想在“数据网格”中显示投资组合位置(已购买的股票),以便用户可以查看给定投资组合的内容、对数据进行翻页、对数据进行排序以及编辑数量以执行一些简单的分析工作。
- 在“客户机数据”视图中,浏览至 root.users.portfolios.positions 节点,并将它拖动到“设计”视图中的“数据网格”上。将为 Position 类的所有字段的基本数据显示自动设置“数据网格”。

- 确保已选择“数据网格”,然后单击“属性”视图中 odc:dataGrid 下的列选项卡以定制列。可以使用向上和向下按钮来重新排列各列的顺序。还可以使用添加和除去按钮来添加或除去列。当选择某行时,可以输入列标题的标签、宽度和值。缺省情况下,使用属性值作为列标题。
对于本教程:
- 除去 refNum 属性。
- 采用一种对您有意义的方式来对各列进行重新排序。
- 输入更具有描述性的列标题。
- 选择“数据网格”中的任何单元格,并选择“属性”视图中的列详细信息选项卡。“属性”视图中各个选项卡的内容是动态的,它将自动更改以反映所选列。在“列”选项卡上,您可以:
- 配置列标题(在“列列表”选项卡中也可以执行此操作)。
- 指定列的对齐方式
- 指定列的宽度(以像素计)
- 指定列是应该显示只读数据还是显示可编辑字段
- 指定是否应该对某列中各单元格的内容加下划线,以便直观提示用户单击这些单元格将产生一些特殊行为
对于本教程:
- 对于
quantity、price 和 purchased date
,选择右对齐。
- 对于
quantity
,选择可编辑列内容。
- 还可以配置各列的显示方式。单击列详细信息选项卡,您将看到格式列表,它具有下面这四个选项:
- 字符串,这是一个基本字段,没有定义任何格式,即使该字段中的数据是数字或日期也是如此
- 数字,它会将列的格式定义为数字,并指定诸如样式和格式之类的内容
- 日期/时间,它允许您定制日期、时间或日期/时间格式
- 掩码,它允许您创建输入掩码
对于本教程:
- 将
Purchased Date
列设置为日期/时间。如果要在“数据网格”中显示日期,而实际上您将“数据网格”中的列的格式设置为“日期”,则这样设置是很重要的。否则,将显示自从 1970 年 1 月 1 日 00:00:00 GMT 以来所经过的毫秒数,因为此毫秒数是 Java 或 JavaScript 中的“日期”对象的内部表示。
- 将
price
和 quantity
列设置为数字。
设置和管理事件处理程序
Faces Client 组件的事件处理程序是通过“快速编辑”视图编写的。对于“数据网格”或“树”组件,可以使用已提供的事件处理程序,也可以编写您自己的定制事件处理程序。已经提供了两个事件处理程序:
- 将选择的对象设置为目标组件中的根对象 - 此处理程序采用在当前控件中选择的对象(或者,该对象中的特定引用)并使其成为目标控件中的根对象。对于此类型的事件处理程序,目标控件可以是任何 Faces Client 组件(但是 Web Service 除外)和 Faces Client 支持的标准 JavaServer Faces 组件(这些组件绑定至作为事件源的同一类对象)。可能的目标控件的列表显示在出现的配置对话框中。在想要树形视图中的所选对象(源)确定显示在数据网格中的内容(目标)时,使用此事件处理程序。此处理程序不更改数据源中的任何数据值,但是它会设置显示在所选控件中的内容。
- 将选择的对象绑定至另一对象 - 此处理程序采用所选对象的值(或者,该对象中的特定引用)并将其绑定至另一数据对象。此事件处理程序设置存储在数据对象(例如,Java bean 和关系数据库记录等等)中的数据值。例如,在 Faces Client 投资组合样本中,当用户从数据网格中选择特定股票时,该股票对象中的字段的值将复制至 placeHolderStock 数据对象,之后将用作 Web Service 的输入参数。该处理程序将更改存储在该对象中的值。
如果选择数据网格,则“快速编辑”视图将显示下列事件:
- onhighlight
- 当用户突出显示某行时就会调用此事件,并允许开发者实现任意逻辑作为响应。例如,导致执行某些计算、调用 URL 或者页面上发生一些更改。
- onselect
- 选择某行时就会调用此事件。必须启用行选择才能激发此事件。
- onunselect
- 取消选择某行时就会调用此事件。必须之前已选择了此事件且已启用了行选择才能激发此事件。
注意:当在“快速编辑”视图中选择一个事件并单击代码面板时,您将看到一些注释,用来说明该事件的目的,更重要的是,用来说明它的参数以及期望的返回类型和值。
编辑样式
如果需要定制数据网格的外观,则编辑名为 datagrid.css 的缺省级联样式表(CSS)。在“项目导航器”中,在您的项目的 /WebContent/theme/datagrid.css 中提供了此文件。更多地了解组件样式。
现在,您可以开始进行练习 2.6:在服务器上测试了。