X

The blog for hints & tips about Oracle Application Development Framework and Mobile Application Framework

  • ADFv
    September 8, 2011

Adding a clientListener dynamically at runtime using JavaScript

Frank Nimphius
Master Principal Product Manager

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.


                                         
    
                    
          
        
              
       

                                
                                                                

Be the first to comment

Comments ( 0 )
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.