练习 3.3:添加树组件

在开始之前,必须先完成练习 3.2:添加选项卡式面板组件

插入并配置树组件

  1. 插入“树”组件:
    1. 确保 JSP 文件已打开。选择“选项卡式面板”中的“树”面板。
    2. 在“选用板”中,通过单击“Faces Client 组件”抽屉来打开该抽屉。
    3. 组件拖放到“设计”视图中的“树”面板上。
  2. 配置“树”组件的属性:
  3. 确保提供了客户机端数据。如果已经完成了本教程中的其它部分,则您可能在“页数据”视图中已经具有一个 bean,而在“客户机数据”视图中具有与此 bean 相对应的 bean。否则,按练习 2.2:添加服务器端数据练习 2.3:创建并配置客户机数据中所述创建这些 bean。
  4. 将数据绑定至“树”组件。您想要“树”显示用户及其投资组合的列表。
    1. 将 Root bean 从“客户机数据”视图拖动到“树”上。您为树给定一个起始点(作为树的根的 root 对象),然后指示应该将该 root 节点的哪些属性用于树的第一层。对于树中的每个节点,指定如何根据数据来查找子节点。
    2. 单击“属性”视图中的,并选择树节点列表选项卡。
    3. 展开所有节点,并选择 rootusersportfolios。可以更改映射并选择其它节点,了解它们将如何影响树的显示。可以从给定节点中选择多个子代(如果有的话)。即使一个节点位于数据结构的中部(例如,“投资组合”具有各个位置的列表,而每个位置都具有股票),您也不必选择任何子节点,这会使所选择的节点成为叶节点。通过选择 root(隐式选择)、usersportfolios,就可以让“树”只显示数据的特定路径,并在投资组合上停止。
    4. 对于每个节点,可以定制如何显示节点。您可以执行以下几项操作:
      • 如果节点具有任何属性,则可以选择将哪个属性用于节点的标签。
      • 如果节点没有属性,则可以输入值作为节点标签。
      • 可以指定一些图标来表示展开或折叠了节点,并覆盖缺省文件夹和文件图标。

      对于 rootportfolios 节点,只有一种属性,因此,采用缺省选择就可以了。但是,User 类具有多种属性。单击 users 类并选择标签值字段的 @{lastName} 属性,以便 users 节点将显示用户的姓。

      您所作的任何定制都是基于类的。这就意味着如果树在多个位置根据 User 类来显示节点,则那些节点全部都将具有相同的定制选项。无论在数据结构中引用了 User 多少次,都只有一个 User 类。
“选项卡式面板”中的“树”组件

设置和管理事件处理程序

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

“树”还支持在使用 JavaScript 的浏览器上发生的几个客户机端事件。如果选择整个“树”组件,则在“快速编辑”视图中,在以某种方式处理树中的任何节点时,可以查看下列可以为其创建脚本的全局事件:

onnodecollapse
当用户折叠节点时就会调用此事件,并允许开发者实现任意逻辑作为响应。如果特定节点的 oncollapse 事件已经具有对应的事件处理程序,则在调用此事件之前将调用该事件处理程序。
onnodeexpand
当用户展开节点时就会调用此事件,并允许开发者实现任意逻辑作为响应。如果特定节点的 onexpand 事件已经具有对应的事件处理程序,则在调用此事件之前将调用该事件处理程序。
onnodehighlight
当用户突出显示任何节点时就会调用此事件,并允许开发者实现任意逻辑作为响应。例如,导致执行某些计算、调用 URL 或者页面上发生一些更改。如果特定节点的 onhighlight 事件已经具有对应的事件处理程序,则在调用此事件之前将调用该事件处理程序。
onnodeselect
当选择任何节点时就会调用此事件。必须启用节点选择才能激发此事件。如果特定节点的 onselect 事件已经具有对应的事件处理程序,则在调用此事件之前将调用该事件处理程序。
onnodeunselect
当取消选择先前已选择的任何节点时就会调用此事件。必须启用节点选择才能激发此事件。如果特定节点的 onnodeunselect 事件已经具有对应的事件处理程序,则在调用此事件之前将调用该事件处理程序。
如果在树中选择单个节点,则“快速编辑”视图将显示下列局部事件:
oncollapse
当用户折叠节点时就会调用此事件,并允许开发者实现任意逻辑作为响应。
onexpand
当用户展开节点时就会调用此事件,并允许开发者实现任意逻辑作为响应。
onhighlight
当用户突出显示指定节点时就会调用此事件,并允许开发者实现任意逻辑作为响应。例如,导致执行某些计算、调用 URL 或者页面上发生一些更改。
onselect
当选择指定节点时就会调用此事件。必须启用节点选择才能激发此事件。
onunselect
取消选择指定的节点时就会调用此事件。必须之前已选择了此事件且已启用了节点选择才能激发此事件。

对于每个类都要执行应用于节点的定制;因此,如果为 User 类实现事件处理程序,则在 User 类作为节点出现在树中的任何位置都将应用此事件。

注意:

编辑样式

如果需要定制“树”组件的外观,则编辑名为 tree.css 的缺省“级联样式表”(CSS)。在“项目资源管理器”中,在您的项目的 /WebContent/theme/tree.css 中提供了此文件。

现在,您可以开始进行练习 3.4:添加图组件了。

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