Requirement: I have a demo2.jspx page. On demo2.jspx page I have an af:button named as “button 1”. Also I have an af:popup and inside an af:popup I have an af:panelGroupLayout. On click of the af:button it should display the af:popup with the dynamically created components inside it.

Solution: For solution to the above requirement followed the steps as shown below:

Step 1: Create an Oracle ADF Fusion Web Application. Name the application as: ActionListenerOnDynamicComponent.

Step 2: Drag and drop af:button from the component palette on the demo2.jspx. Create an actionListener for the af:button as actionListener=”#{pageFlowScope.MyBean2.createComponent}”.

Step 3: Drag and drop af:popup from the component palette on the demo2.jspx page and set the property as childCreation=”immediate” autoCancel=”disabled”. Also create a popupCanceledListener on the af:popup as popupCanceledListener= “#{pageFlowScope.MyBean2.popupCancelledListener}”. Inside popupCanceledListener we will write the code to execute when the af:popup gets cancelled.

Step 4: Drag and drop af:panelGroupLayout from the component palette inside af:popup and set layout=”vertical”. Create binding of the af:panelGroupLayout as binding= “#{pageFlowScope.MyBean2.parentGroupLayoutBind}”.

Step 5: Drag and drop af:showPopupBehavior inside the af:button from the component palette and set the properties as popupId=”p1″ triggerType=”click” align=”afterEnd”. This will allow us to load the af:popup on click of the af:button.

Thus, the complete demo2.jspx code is shown below:

<?xml version='1.0' encoding='UTF-8'?>
<jsp:root xmlns:jsp="" version="2.1" xmlns:f=""
          xmlns:af="">
    <jsp:directive.page contentType="text/html;charset=UTF-8"/>
    <f:view>
        <af:document title="demo2.jspx" id="d1">
            <af:form id="f1">
                <af:button text="button 1" id="b1" actionListener="#{pageFlowScope.MyBean2.createComponent}">
                    <af:showPopupBehavior popupId="p1" triggerType="click" align="afterEnd"/>
                </af:button>
                <af:popup childCreation="immediate" autoCancel="disabled" id="p1"
                          popupCanceledListener="#{pageFlowScope.MyBean2.popupCancelledListener}">
                    <af:panelGroupLayout layout="vertical" id="pgl1"
                                         binding="#{pageFlowScope.MyBean2.parentGroupLayoutBind}"/>
                </af:popup>
            </af:form>
        </af:document>
    </f:view>
</jsp:root>

Step 6: Now go to the MyBean2.java and write the below code:

• Method to add dynamically created component to a parent layout

    public void addComponent(UIComponent parentUIComponent, UIComponent childUIComponent) {
        parentUIComponent.getChildren().add(childUIComponent);
        AdfFacesContext.getCurrentInstance().addPartialTarget(parentUIComponent);
    }

• Code to create links dynamically on button click.

    public void createComponent(ActionEvent actionEvent) {
        //Clear the content of the Parent component
        parentGroupLayoutBind.getChildren().clear();
        for (int i = 0; i < 2; i++) {
            RichLink ui = new RichLink();
            ui.setId("li1" + i);
            ui.setText("Programmatically Created Link" + i);
            ui.setInlineStyle("font-weight:bold;");
            ui.addActionListener(getActionListener("actionForProgLink"));
            addComponent(getParentGroupLayoutBind(), ui);
        }
    }

• After this we are able to create a new Link on click of button, now next is to assign ActionListener to this Link. For this first I have to define an ActionListener method in bean. So I have added the below code

public void actionForProgLink(ActionEvent actionEvent) {
    FacesMessage infoMsg = new FacesMessage("Action Listener Invoked");
    infoMsg.setSeverity(FacesMessage.SEVERITY_INFO);
    FacesContext.getCurrentInstance().addMessage(null, infoMsg);
}

• Method to resolve actionListener

    private ActionListener getActionListener(String actionName) {
        MethodExpression methodExp = getMethodExpressionForAction("#{pageFlowScope.MyBean2." + actionName + "}");
        return new MethodExpressionActionListener(methodExp);
    }

• Helper method to resolve ActionListener

    private MethodExpression getMethodExpressionForAction(String actionName) {
        Class[] argtypes = new Class[1];
        argtypes[0] = ActionEvent.class;
        FacesContext facesCtx = FacesContext.getCurrentInstance();
        Application app = facesCtx.getApplication();
        ExpressionFactory elFactory = app.getExpressionFactory();
        ELContext elContext = facesCtx.getELContext();
        return elFactory.createMethodExpression(elContext, actionName, null, argtypes);
    }

• Just pass the name of method to resolve it

ui.addActionListener(getActionListener("actionForProgLink"));

Thus, the complete MyBean2.java code is shown below:

package com.susanto;

import javax.el.ELContext;
import javax.el.ExpressionFactory;
import javax.el.MethodExpression;

import javax.faces.application.Application;
import javax.faces.application.FacesMessage;
import javax.faces.component.UIComponent;
import javax.faces.context.FacesContext;
import javax.faces.event.ActionEvent;
import javax.faces.event.ActionListener;
import javax.faces.event.MethodExpressionActionListener;

import oracle.adf.view.rich.component.rich.layout.RichPanelGroupLayout;
import oracle.adf.view.rich.component.rich.nav.RichLink;
import oracle.adf.view.rich.context.AdfFacesContext;
import oracle.adf.view.rich.event.PopupCanceledEvent;
import oracle.adf.view.rich.event.PopupFetchEvent;

public class MyBean2 {
    private RichPanelGroupLayout parentGroupLayoutBind;

    public MyBean2() {
    }

    public void popupCancelledListener(PopupCanceledEvent popupCanceledEvent) {
        parentGroupLayoutBind.getChildren().clear();
    }

    public void createComponent(ActionEvent actionEvent) {
        //Clear the content of the Parent component
        parentGroupLayoutBind.getChildren().clear();
        for (int i = 0; i < 2; i++) {
            RichLink ui = new RichLink();
            ui.setId("li1" + i);
            ui.setText("Programmatically Created Link" + i);
            ui.setInlineStyle("font-weight:bold;");
            ui.addActionListener(getActionListener("actionForProgLink"));
            addComponent(getParentGroupLayoutBind(), ui);
        }
    }

    public void addComponent(UIComponent parentUIComponent, UIComponent childUIComponent) {
        parentUIComponent.getChildren().add(childUIComponent);
        AdfFacesContext.getCurrentInstance().addPartialTarget(parentUIComponent);
    }

    public void actionForProgLink(ActionEvent actionEvent) {
        FacesMessage infoMsg = new FacesMessage("Action Listener Invoked");
        infoMsg.setSeverity(FacesMessage.SEVERITY_INFO);
        FacesContext.getCurrentInstance().addMessage(null, infoMsg);
    }

    private ActionListener getActionListener(String actionName) {
        MethodExpression methodExp = getMethodExpressionForAction("#{pageFlowScope.MyBean2." + actionName + "}");
        return new MethodExpressionActionListener(methodExp);
    }

    private MethodExpression getMethodExpressionForAction(String actionName) {
        Class[] argtypes = new Class[1];
        argtypes[0] = ActionEvent.class;
        FacesContext facesCtx = FacesContext.getCurrentInstance();
        Application app = facesCtx.getApplication();
        ExpressionFactory elFactory = app.getExpressionFactory();
        ELContext elContext = facesCtx.getELContext();
        return elFactory.createMethodExpression(elContext, actionName, null, argtypes);
    }

    public void setParentGroupLayoutBind(RichPanelGroupLayout parentGroupLayoutBind) {
        this.parentGroupLayoutBind = parentGroupLayoutBind;
    }

    public RichPanelGroupLayout getParentGroupLayoutBind() {
        return parentGroupLayoutBind;
    }
}

Step 7: Save all and run the application. Thus, the ran application is shown below:

Step 8: Click on button 1 and we will get the popup with two dynamically created links as shown below:

Step 9: On click of any one of the link the actionListener gets called and actionListener will display the below message:

Hence, the solution to our requirement.

If you like the post please comment, share, and do join me on Facebook. Please subscribe to my YouTube Channel for video tutorials.

Thanks & Regards,
Susanto Paul

 478 total views,  2 views today