Skip to main content

About ClientListener and ServerListener

ClientListener, by its meaning, is fired/triggered by its source component to execute some client side script been defined in java scripts. Oracle defines it as "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. ClientListener is more generic and could be used anywhere there is a need for java scripts insertion. But ADF already provides some specific tag listener for some special occasion,  for example: the af:showPopupBehavior tag simplifies what it takes to display a popup.

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

ServerListener, is fired/triggered by a custom client event to execute some server side actions. Oracles defines as "The serverListener tag is a declarative way to register a server-side listener that should be executed when a custom client event is fired. This tag will be ignored for any server-rendered components, as it is only supported for the rich client. The target method must return void and take one argument, a ClientEvent object."

The server side actions could be defined in a managed beans supporting the source components of the server listener. So the actions could be just a view layer action or it could be a method defined in business components (Application Module or View Objects) and exposed to client data control.

To fire a custom event from the client, use the AdfCustomEvent.queue() Javascript method. The Javascript having AdfCustomEvent.queue() should be called by the ClientListener, and AdfCustomEvent.queue() method is calling the server side action defined in ServerListener.

The AdfCustomEvent.queue() JavaScript method enables you to fire a custom event from any component whose clientComponent attribute is set to true. The custom event object contains information about the client event source and a map of parameters to include on the event. The custom event can be set for immediate delivery (that is, during the Apply Request Values phase), or non-immediate delivery (that is, during the Invoke Application phase).

For example, in the File Explorer application, after entering a file name in the search field on the left, users can press the Enter key to invoke the search. As Example 5-12 shows, this happens because the inputText field contains a clientListener that invokes a JavaScript function when the Enter key is pressed.

The JavaScript contains the AdfCustomEvent.queue method that takes the event source, the string enterPressedOnSearch as the custom event type, a null parameter map, and False for the immediate parameter.
The inputText component on the page also contains the following serverListener tag:
Because the type value enterPressedOnSearch is the same as the value of the parameter in the AdfCustomEvent.queue method in the JavaScript, the method that resolves to the method expression #{explorer.navigatorManager.searchNavigator.searchOnEnter} will be invoked.

Reference:
ClientListener
SeverListener
Sending custom event from client to the server

Comments