Adding event handlers to a tabbed panel

Adding event handlers to a tabbed panel

Tabbed panels can have associated events. Using the Quick Edit view for a selected Faces component, you can define actions for specific events.

Create a JSF enabled dynamic Web project.

Create a JSF page.

Add a tabbed panel component to the page.

To add an event handler to a tabbed panel:

Right-click the tabbed panel component and select
Edit Events. The Quick Edit view opens.

Click an event from the event list. After selecting an event from the event list, you can add a script for that event in one of the following ways:

Enter the script directly into the script editor.

Right-click the script editor and select
Insert Snippet then select a script from the list in the pop-up menu.

Click
Use pre-defined behavior then specify the
Action and the
Target.

Drag a snippet from the Snippets view into the script editor.

Table 1. Adding event handlers to a tabbed panel
Event Description Supported component
oncancel Actioned when the user clicks
Cancel, if it has been enabled. With the event handler for this event, you can add business logic, such as clearing values filled in by the user in some input fields. The event object has one property: tabpanelForm - the HTML form surrounding the tabbed panel .
Tabbed panel
onenter Actioned when a panel in a Tabbed Panel is entered. If the event handler returns true, then the tabbed panel can enter the new panel; otherwise, the focus remains on the previous panel. With the event handler for this event, you can do things such as verify information that the user enters or prepare information displayed in the panel. The event object has one property: tobeEnterPanel - the ID of the panel that is going to be entered. Panel in a tabbed panel
onexit Actioned when a panel in a Tabbed Panel is exited. The event handler can return three different values:

A panel ID, that will be the next entered panel instead of the default next panel.

True, the default next panel will be displayed.

False or does not return anything, the focus remains on the current panel.
With the event handler for this event, you can add arbitrary business logic like verifying input by the user and refusing to leave the panel if verification fails or controlling the flow to the next panel. This event handler can be used to create complex flows when the Tabbed Panel is used with the Next and Previous buttons. The event object has one property: tobeExitPanel - the ID of the panel that is going to be entered. Panel in a tabbed panel
onfinish This event is supported by the Tabbed Panel control and is actioned when the user clicks Finish, if it has been enabled. With the event handler for this event, you can add arbitrary business logic like verifying information input by the user and submitting a form. The event object has one property: tabpanelForm - the HTML form surrounding the tabbed panel . Tabbed panel
oninitialpanelshow This event is actioned before the tabbed panel is rendered on the page. The return value from this event handler determines which panel will be initially active. If there is no return value then the first panel will be displayed. If the user wants a panel other than the first panel to be displayed initial the return value must be the ID of that panel. Tabbed panel
onpanelenter This event is supported by the Tabbed Panel control and is fired when the user enters any panel in the tabbed panel. If the panel already has an event handler for its onenter event, then that event will be called before this. If the event handler returns true, then the tabbed panel will be able to enter the new panel; otherwise, the focus remains on the previous panel. With the event handler for this event, you can add some common business logic that needs to be invoked when entering any panel. The event object has one property: tobeEnterPanel - the ID of the panel that is going to be entered. Tabbed panel
onpanelexit This event is supported by the Tabbed Panel control and is fired when the user exits any panel in the tabbed panel. If the panel already has an event handler for its onexit event, then that event will be called before this. If the event handler returns true, then the tabbed panel will be able to exit the panel; otherwise, the focus remains on the current panel. With the event handler for this event, you can add some common business logic which needs to be invoked when exiting any panel. The event object has one property: tobeExitPanel - the ID of the panel that is going to be exited. Tabbed panel

Event	Description	Supported component
oncancel	Actioned when the user clicks Cancel, if it has been enabled. With the event handler for this event, you can add business logic, such as clearing values filled in by the user in some input fields. The event object has one property: tabpanelForm - the HTML form surrounding the tabbed panel .	Tabbed panel
onenter	Actioned when a panel in a Tabbed Panel is entered. If the event handler returns true, then the tabbed panel can enter the new panel; otherwise, the focus remains on the previous panel. With the event handler for this event, you can do things such as verify information that the user enters or prepare information displayed in the panel. The event object has one property: tobeEnterPanel - the ID of the panel that is going to be entered.	Panel in a tabbed panel
onexit	Actioned when a panel in a Tabbed Panel is exited. The event handler can return three different values: A panel ID, that will be the next entered panel instead of the default next panel. True, the default next panel will be displayed. False or does not return anything, the focus remains on the current panel. With the event handler for this event, you can add arbitrary business logic like verifying input by the user and refusing to leave the panel if verification fails or controlling the flow to the next panel. This event handler can be used to create complex flows when the Tabbed Panel is used with the Next and Previous buttons. The event object has one property: tobeExitPanel - the ID of the panel that is going to be entered.	Panel in a tabbed panel
onfinish	This event is supported by the Tabbed Panel control and is actioned when the user clicks Finish, if it has been enabled. With the event handler for this event, you can add arbitrary business logic like verifying information input by the user and submitting a form. The event object has one property: tabpanelForm - the HTML form surrounding the tabbed panel .	Tabbed panel
oninitialpanelshow	This event is actioned before the tabbed panel is rendered on the page. The return value from this event handler determines which panel will be initially active. If there is no return value then the first panel will be displayed. If the user wants a panel other than the first panel to be displayed initial the return value must be the ID of that panel.	Tabbed panel
onpanelenter	This event is supported by the Tabbed Panel control and is fired when the user enters any panel in the tabbed panel. If the panel already has an event handler for its onenter event, then that event will be called before this. If the event handler returns true, then the tabbed panel will be able to enter the new panel; otherwise, the focus remains on the previous panel. With the event handler for this event, you can add some common business logic that needs to be invoked when entering any panel. The event object has one property: tobeEnterPanel - the ID of the panel that is going to be entered.	Tabbed panel
onpanelexit	This event is supported by the Tabbed Panel control and is fired when the user exits any panel in the tabbed panel. If the panel already has an event handler for its onexit event, then that event will be called before this. If the event handler returns true, then the tabbed panel will be able to exit the panel; otherwise, the focus remains on the current panel. With the event handler for this event, you can add some common business logic which needs to be invoked when exiting any panel. The event object has one property: tobeExitPanel - the ID of the panel that is going to be exited.	Tabbed panel