Oracle Fusion Middleware Tag Reference for Oracle ADF Faces
12c (12.2.1.4.0)

E81455-02

<af:clientListener>

clientListener clientlistenerclient


The clientListener tag is a declarative way to register a client-side listener script to be executed when a specific event type is fired. This tag will be ignored for any server-rendered components, as it is only supported by rich client components.

Before using the clientListener tag, be sure to look for any existing behavior tags which might eliminate the need for scripts. For example, the af:showPopupBehavior tag simplifies what it takes to display a popup.

Accessibility Guidelines

Using event types of mouseDown, mouseUp, mouseMove, mouseOver, and mouseOut can create a application that does not work for a keyboard only user. If you use one of these event types, make sure you provide alternate access to the same content for a keyboard only user.

Do not initiate a change in context, like showing a popup, on focus or blur event types. A change in context will make your application hard to use by a keyboard only user, and confusing for someone using a screen reader.

This example will invoke the JavaScript method "showPopupFromAction" when the button is clicked and will then manually display a popup.

<af:resource type="javascript"> /** * Shows a popup from an "action" type event. * @param {AdfActionEvent} actionEvent the event being handled */ function showPopupFromAction(actionEvent) { actionEvent.cancel(); var eventSource = actionEvent.getSource(); var popup = eventSource.findComponent("popup"); popup.show({align:AdfRichPopup.ALIGN_AFTER_START, alignId:eventSource.getClientId()}); } </af:resource> <af:popup id="popup" contentDelivery="immediate"> <af:panelGroupLayout layout="vertical" inlineStyle="width: 300px;"> <af:outputText value="Hello World."/> </af:panelGroupLayout> </af:popup> <af:commandButton text="Click Me"> <af:clientListener type="action" method="showPopupFromAction"/> </af:commandButton>

The following table lists component family-specific event types:

Event Type Component Family Description
action Command Fires when user triggers the command component dialog Dialog Fires when user clicks dialog OK/Cancel buttons disclosure ShowDetail Fires when disclosure state is toggled inlineFrameLoad inlineFrame Queued when the internal iframe fires its load event load Document Fires when the document finishes loading popupOpening Popup Fired prior to opening a popup popupOpened Popup Fired after popup is opened popupClosed Popup Fired after popup is closed propertyChange All Fired when a component property is changed query Query Fired when a query action happens(when user clicks the search icon in quickQuery or the search button in the query component) rowDisclosure Tree, TreeTable Fired row disclosure state is toggled selection Table, Tree, TreeTable Fires when selection state changes sort Table Fires when user sorts data valueChange Input, Select* Fires when the value of an input control is changed

The following table lists input (mouse/keyboard) event types. These events are delivered for all components (though in some cases may be consumed or blocked by a specific component implementation):

Event Type Description
click Fires when the user clicks on the component dblClick Fires when the user double clicks on the component contextMenu Fires when the user clicks on the component using the right mouse button mouseDown Fires when the user performs a mouse down on the component mouseUp Fires when the user performs a mouse up on the component mouseMove Fires when the user moves the mouse while over the component mouseOver Fires when the mouse enters the component mouseOut Fires when the mouse leaves the component keyDown Fires when the user presses a key down while the component has focus keyUp Fires when the user releases a key from being down while the component has focus keyPress Fires when a successful key press occurs while the component has focus focus Fires when the component gains keyboard focus blur Fires when the component loses keyboard focus

Attributes

Name Type Supports EL? Description
type String no the type of client-side component event to listener for method String no the client-side javascript method to invoke when triggered by an event of the specified type type