练习 3.3:添加树组件
在开始之前,必须先完成练习 3.2:添加选项卡式面板组件。
插入并配置树组件
- 插入“树”组件:
- 确保 JSP 文件已打开。选择“选项卡式面板”中的“树”面板。
- 在“选用板”中,通过单击“Faces Client 组件”抽屉来打开该抽屉。
- 将树组件拖放到“设计”视图中的“树”面板上。
- 配置“树”组件的属性:
- 宽度和高度(按像素或相对大小计算),允许您将树占据的范围局限于屏幕上的控制区内。如果树变得更大以及用户展开了节点,则会出现滚动条以查看“树”的不同区域。选择宽度为 600 像素,高度为 200 像素。
- 是否显示 root 节点。对于本教程,选择启用该属性。
- 节点选择,当启用此属性时,它将在树中的每个节点旁边创建一个复选框。选择启用节点选择。
- 确保提供了客户机端数据。如果已经完成了本教程中的其它部分,则您可能在“页数据”视图中已经具有一个 bean,而在“客户机数据”视图中具有与此 bean 相对应的 bean。否则,按练习 2.2:添加服务器端数据和练习 2.3:创建并配置客户机数据中所述创建这些 bean。
- 将数据绑定至“树”组件。您想要“树”显示用户及其投资组合的列表。
- 将 Root bean 从“客户机数据”视图拖动到“树”上。您为树给定一个起始点(作为树的根的 root 对象),然后指示应该将该 root 节点的哪些属性用于树的第一层。对于树中的每个节点,指定如何根据数据来查找子节点。
- 单击“属性”视图中的树,并选择树节点列表选项卡。
- 展开所有节点,并选择 root、users 和 portfolios。可以更改映射并选择其它节点,了解它们将如何影响树的显示。可以从给定节点中选择多个子代(如果有的话)。即使一个节点位于数据结构的中部(例如,“投资组合”具有各个位置的列表,而每个位置都具有股票),您也不必选择任何子节点,这会使所选择的节点成为叶节点。通过选择 root(隐式选择)、users 和 portfolios,就可以让“树”只显示数据的特定路径,并在投资组合上停止。
- 对于每个节点,可以定制如何显示节点。您可以执行以下几项操作:
- 如果节点具有任何属性,则可以选择将哪个属性用于节点的标签。
- 如果节点没有属性,则可以输入值作为节点标签。
- 可以指定一些图标来表示展开或折叠了节点,并覆盖缺省文件夹和文件图标。
对于 root 和 portfolios 节点,只有一种属性,因此,采用缺省选择就可以了。但是,User 类具有多种属性。单击 users 类并选择标签值字段的 @{lastName} 属性,以便 users 节点将显示用户的姓。
您所作的任何定制都是基于类的。这就意味着如果树在多个位置根据 User 类来显示节点,则那些节点全部都将具有相同的定制选项。无论在数据结构中引用了 User 多少次,都只有一个 User 类。
设置和管理事件处理程序
Faces Client 组件的事件处理程序是通过“快速编辑”视图编写的。对于“数据网格”或“树”组件,可以使用已提供的事件处理程序,也可以编写您自己的定制事件处理程序。已经提供了两个事件处理程序:
- 将选择的对象设置为目标组件中的根对象 - 此处理程序采用在当前控件中选择的对象(或者,该对象中的特定引用)并使其成为目标控件中的根对象。对于此类型的事件处理程序,目标控件可以是任何 Faces Client 组件(但是 Web Service 除外)和 Faces Client 支持的标准 JavaServer Faces 组件(这些组件绑定至作为事件源的同一类对象)。可能的目标控件的列表显示在出现的配置对话框中。在想要树形视图中的所选对象(源)确定显示在数据网格中的内容(目标)时,使用此事件处理程序。此处理程序不更改数据源中的任何数据值,但是它会设置显示在所选控件中的内容。
- 将选择的对象绑定至另一对象 - 此处理程序采用所选对象的值(或者,该对象中的特定引用)
并将其绑定至另一数据对象。此事件处理程序设置存储在数据对象(例如,Java bean 和关系数据库记录等等)中的数据值。例如,在 Faces Client 投资组合样本中,当用户从数据网格中选择特定股票时,该股票对象中的字段的值将复制至 placeHolderStock 数据对象,之后将用作 Web Service 的输入参数。该处理程序将更改存储在该对象中的值。
“树”还支持在使用 JavaScript 的浏览器上发生的几个客户机端事件。如果选择整个“树”组件,则在“快速编辑”视图中,在以某种方式处理树中的任何节点时,可以查看下列可以为其创建脚本的全局事件:
- onnodecollapse
- 当用户折叠节点时就会调用此事件,并允许开发者实现任意逻辑作为响应。如果特定节点的 oncollapse 事件已经具有对应的事件处理程序,则在调用此事件之前将调用该事件处理程序。
- onnodeexpand
- 当用户展开节点时就会调用此事件,并允许开发者实现任意逻辑作为响应。如果特定节点的 onexpand 事件已经具有对应的事件处理程序,则在调用此事件之前将调用该事件处理程序。
- onnodehighlight
- 当用户突出显示任何节点时就会调用此事件,并允许开发者实现任意逻辑作为响应。例如,导致执行某些计算、调用 URL 或者页面上发生一些更改。如果特定节点的 onhighlight 事件已经具有对应的事件处理程序,则在调用此事件之前将调用该事件处理程序。
- onnodeselect
- 当选择任何节点时就会调用此事件。必须启用节点选择才能激发此事件。如果特定节点的 onselect 事件已经具有对应的事件处理程序,则在调用此事件之前将调用该事件处理程序。
- onnodeunselect
- 当取消选择先前已选择的任何节点时就会调用此事件。必须启用节点选择才能激发此事件。如果特定节点的 onnodeunselect 事件已经具有对应的事件处理程序,则在调用此事件之前将调用该事件处理程序。
如果在树中选择单个节点,则“快速编辑”视图将显示下列局部事件:
- oncollapse
- 当用户折叠节点时就会调用此事件,并允许开发者实现任意逻辑作为响应。
- onexpand
- 当用户展开节点时就会调用此事件,并允许开发者实现任意逻辑作为响应。
- onhighlight
- 当用户突出显示指定节点时就会调用此事件,并允许开发者实现任意逻辑作为响应。例如,导致执行某些计算、调用 URL 或者页面上发生一些更改。
- onselect
- 当选择指定节点时就会调用此事件。必须启用节点选择才能激发此事件。
- onunselect
- 取消选择指定的节点时就会调用此事件。必须之前已选择了此事件且已启用了节点选择才能激发此事件。
对于每个类都要执行应用于节点的定制;因此,如果为 User 类实现事件处理程序,则在 User 类作为节点出现在树中的任何位置都将应用此事件。
注意:
- 如果指定的处理程序只用于给定节点,并且您还具有处理程序用于全局事件,则将首先调用局部处理程序。如果它返回 true,则会调用全局处理程序。
- 当在“快速编辑”视图中选择一个事件并单击代码面板时,您将看到一些注释,用来说明该事件的目的、它的参数以及期望的返回类型和值。
编辑样式
如果需要定制“树”组件的外观,则编辑名为 tree.css 的缺省“级联样式表”(CSS)。在“项目资源管理器”中,在您的项目的 /WebContent/theme/tree.css 中提供了此文件。
现在,您可以开始进行练习 3.4:添加图组件了。