Apply Client/Server listener to programmatically created components, apply JavaScript to ADF Faces components at run time

Sharing is Caring
Hello All
This post is next in series of “Working with ADF Faces Components programmatically“. In this post, I’ll show you that how to apply client/server listener (to execute some javascript function) to a programmatically created component (inputText, outputText etc)
Previous posts are-Creating dynamic layout (form and UI Component) using ADF Faces
Get Value from programmatically created components, Iterate over parent component to get child values in ADF Faces 
Apply ActionListener to programmatically created buttons/link in ADF

Let’s see the implementation part (Jdev 12.13) –

    • First created a fusion web application and a page in the viewController project
    • Dropped a button on the page, on this button action I will create an inputText programmatically
    • To create new inputText I have added following code (described in previous posts)

    /**Method to add dynamically created component to a parent layout
     * @param parentUIComponent
     * @param childUIComponent
    public void addComponent(UIComponent parentUIComponent, UIComponent childUIComponent) {
        //Code to create af:inputText and add it to panelgroup layout
        RichInputText ui = new RichInputText();
        ui.setValue("Programmatically Created Input Text");
        //getParentGroupLayoutBind is the component binding of parent panel group layout
        addComponent(getParentGroupLayoutBind(), ui);


    • Now first part is done – Creation of input text next is to assign client and server listener to it
      So for that first, we have to add some JavaScript function in the page that will be called using clientListener
      I have added this JavaScript function in the page, it just fires a custom event from the client and passes the component value as a parameter


        function demoJsFunction(evt){
          var comp = evt.getSource();
          AdfCustomEvent.queue(comp, "ServerEventToGetValue", {fvalue:comp.getSubmittedValue()}, true);


    • One more thing is to define server listener method in managed bean so that we can apply it to inputText at runtime

    /**Server Listener - It will be called on execution of client side javascript
     * @param clientEvent
    public void testServerListener(ClientEvent clientEvent) {
        //To get value passed from Client Event
        String val = clientEvent.getParameters().get("fvalue").toString();
        FacesMessage msg=new FacesMessage("Server Listener Called and value in inputText is - " + val);
        FacesContext.getCurrentInstance().addMessage(null, msg);



    • Now create clientListener/ServerListener programmatically and assign both to inputText
      Pass server listener method name along with managed bean name


 // Create new Client Listener and assign method name and type
 ClientListenerSet CL = new ClientListenerSet();
 CL.addListener("click", "demoJsFunction");
 //Add Server listener , assign client event name and resolve pre-defined serverlistener

// Add clientListener/ServeListener to inputText

Helper method to resolve expression-

/**To Resolve ServerListener method
* @param s
* @return
public MethodExpression getMethodExpression(String s) {

FacesContext fc = FacesContext.getCurrentInstance();
ELContext elctx = fc.getELContext();
ExpressionFactory elFactory = fc.getApplication().getExpressionFactory();
MethodExpression methodExpr = elFactory.createMethodExpression(elctx, s, null, new Class[] {
ClientEvent.class });
return methodExpr;



  • All done, now run application and check, click on the button it will create an inputText

now click on input text and see server listener is called 🙂

Apply Client/Server listener

This is how we can apply javascript in programmatically created components
Cheers 🙂 Happy Learning

Related Posts

0 thoughts on “Apply Client/Server listener to programmatically created components, apply JavaScript to ADF Faces components at run time”

  1. HI ,

    I did same but I'm getting belwo error in console.

    Uncaught TypeError: Cannot read property 'getSource' of undefined

    java.util.Set clientAttributes = new HashSet();

    clientButton is the binding for UI button and I'm doing businesslogic in action listener after that I'm calling javascript .

    private void calljavascript(String script ){
    org.apache.myfaces.trinidad.render.ExtendedRenderKitService service =
    service.addScript(FacesContext.getCurrentInstance(), script);


    function doNavigate(evt) {
    var maplist = evt.getSource().getProperty("personsMap");

  2. Hi Vinod

    Where you have adeed this JavaScript function ?
    function doNavigate(evt) {
    var maplist = evt.getSource().getProperty("personsMap");

    is it under map component ?


Leave a Reply

Your email address will not be published. Required fields are marked *