练习 3.2:添加选项卡式面板组件

在开始之前,必须先完成练习 3.1:导入必需的资源

插入并配置选项卡式面板组件

  1. 插入“选项卡式面板”组件:
    1. 确保 tutorial.jsp 文件已打开。
    2. 在“选用板”中,通过单击“Faces 组件”抽屉来打开该抽屉。
    3. 选项卡式面板组件拖放到“设计”视图中的任何位置。
  2. 配置“选项卡式面板”组件的属性:
    1. 将“选项卡式面板”的宽度高度分别设置为 700 像素和 250 像素。
    2. 在“属性”窗口的左边,选择面板列表。确保所有面板都将显示完成按钮属性显示为 true。(还可以使用面板列表窗口来添加新面板以及移动或定制现有面板)。
    3. 单击“添加面板”,因为显示本教程需要三个面板。
    4. 定制每个面板的标签。对于第一个面板,输入数据网格;对于第二个面板,输入;对于第三个面板,输入
    尽管在本教程中仅更改了这些属性设置,但是“选项卡式面板”组件还有可更改的其它属性设置。例如:
  3. 选择“数据网格”面板。将数据网格组件拖动到“数据网格”面板上。
“设计”视图中的“选项卡式面板”

管理事件处理程序

“选项卡式面板”组件使用 JavaScript 来支持浏览器上的几个重要客户机端事件。如果选择“选项卡式面板”(选择选项卡区域),则在“快速编辑”视图中您将看到下列事件:

事件

描述

onpanelenter

当进入“选项卡式面板”控件中的任何面板时就会调用此事件。这使得页面开发者能够为该事件添加任意业务逻辑、验证用户输入的信息或者为要显示的面板准备信息。

onpanelexit

当退出“选项卡式面板”控件中的任何面板时就会调用此事件。这使得页面开发者能够为该事件添加任意业务逻辑、验证用户输入的信息和拒绝离开面板,或者控制流向下一个面板的流。此事件很重要,因为在“向导”方式下(具有“下一步”和“上一步”按钮,而不具有一些选项卡)使用“选项卡式面板”时,可以使用此事件来创建复杂的流。

oninitialpanelshow

当“选项卡式面板”控件首次显示在用户界面中时就会调用此事件。

onfinish

当用户按了“完成”按钮时(如果已经启用了该按钮)就会调用此事件。这允许页面开发者为该事件添加业务逻辑,例如,验证用户输入的信息。

oncancel

当按了“取消”按钮时就会调用此事件。

对于 OnCancel 和 OnFinish 事件,应该只包括用来验证是否可以提交或取消“选项卡式面板”的逻辑,并执行适当的操作。不要从那些处理程序中提交表单,原因是框架将自动完成此操作。

如果您单击给定面板中的空白处,则将看到下列事件。

事件

描述

onenter

当进入所选面板时就会调用此事件。此事件与全局 onpanelenter 事件的行为完全一样,只不过此事件是特定于给定面板的,并且允许开发者为该面板指定专用逻辑。

onexit

退出所选面板时就会调用此事件。此事件与全局 onpanelexit 事件的行为完全一样,只不过此事件是特定于给定面板的,并且允许开发者为该面板指定专用逻辑。

如果局部指定的处理程序只用于给定面板,并且您还具有处理程序用于全局事件,则将首先调用专用处理程序。如果它对 OnExit 返回非空值,或者对 OnEnter 返回 true,则将调用全局处理程序。

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

编辑样式

如果需要定制“选项卡式面板”的外观,则编辑名为 tabpanel.css 的缺省“级联样式表”(CSS)。在“项目导航器”中,在您的项目的 /WebContent/theme/tabtree.css 中提供了此文件。

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

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