Adding a clientListener dynamically at runtime using JavaScript

In ADF Faces, the client listener component - af:clientListener - is added to ADF Faces components to listen for component events that should be handled in JavaScript on the client. The following JavaScript function allows you to add a client listener dynamically at runtime, which may become handy when working on client side integration, or use cases that cannot be implemented on the server: for example, adding custom behavior to a command button that is part of an existing ADF Faces component and not exposed in the property palette.

/*
 * componentId - the client component of the ADF Faces component to add the 
                 client listener to. This componentId must reflect naming 
                 containers as the search is absolute
 * eventType   - ADFFaces component event type like 'action','click','select' 
 *               etc. Note that the chosen event type must be supported by the 
 *               component as otherwise the ADF Faces assertion check fails. 
 *               E.g. an inputText field does not have an 'action' event type but 
 *              'focus', 'blur', 'valueChange','mouseOver' etc.
 * newListener - a JavaScript function: function name(evt){} that must exist on the 
 *               page that hosts the component to which the client listener is added. 
 *               The newListener argument is not passed with quotes
 */
function addComponentListener(componentId, eventType, newListener){
  var component = AdfPage.PAGE.findComponentByAbsoluteId(componentId);
  if(component != null){
     component.addEventListener(eventType,newListener);               
  }
}

To add a client listener to a command button 'cb1' that is located in the page (no naming containers) so that next time a users hits the button it shows a hello world alert, you use the following call

addComponentListener('cb1','action',helloWorld); 

The hello world function looks as shown below:

function helloWorld(evt){
  alert(evt.getSource()+' says Hello World');
}

This prints the command button instance with an attached "helloe world" in a JavaScript alert.


        
    
Comments:

Post a Comment:
Comments are closed for this entry.
About

The Oracle JDeveloper forum ranks in the Top 5 of the most active forums on the Oracle Technology Network (OTN).



The OTN Harvest blog is a summary of selected topics posted on the OTN Oracle JDeveloper forum.



It is an effort to turn knowledge exchange into an interesting read for developers who enjoy little nuggets of wisdom





Frank Nimphius

Search

Archives
« April 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today