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

A blog on Oracle JDeveloper, ADF, MAF, MCS and other mobile and web topics inspired by questions and answers posted on the OTN forums.



Frank Nimphius

Search

Archives
« September 2015
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