Tuesday, 26 January 2016

Programmatically create component inside af:popup at runtime on click of af:button.

Requirement: I have a demo.jspx page. On demo.jspx page I have two af:button named as “Drilling” and “Turning”.

When I click on the “Drilling” button it should load an af:popup. Inside that af:popup it should display three af:outputText named as: DrillingMethod1, DrillingMethod2, and DrillingMethod3.

When I click on the “Turning” button it should load an af:popup. Inside that af:popup it should display three af:outputText named as: TurningMethod1, TurningMethod2, and TurningMethod3.

Note: DrillingMethod1, DrillingMethod2, and DrillingMethod3 are stored in a List in Java Bean. Similarly, TurningMethod1, TurningMethod2, and TurningMethod3are also stored in a List in Java Bean. We will be iterating these List items and creating the components based on the numbers of elements in the each of these Lists.

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: DynamicComponentInsidePopup.

Step 2: Create a demo.jspx page.

Step 3: Do the following sub steps as shown below:
1.       Drag and drop two af:button and one af:popup from the component palette. Drag and drop af:panelGroupLayout inside af:popup.
2.       Create the binding for the af:popup as binding="#{pageFlowScope.MyBean.popupBinding}".
3.       Create popupCanceledListener for the af:popup as popupCanceledListener="#{pageFlowScope.MyBean.popupCancelListener}".
4.       Create the binding for the af:panelGroupLayout as binding="#{pageFlowScope.MyBean.panelGroupLayoutBinding}".
5.       Change the layout property of the af:panelGroupLayout as layout="vertical"
6.       Name the text of the first af:button as text="Drilling". Create the actionListener as actionListener="#{pageFlowScope.MyBean.showDrillingMachines}" and binding as binding="#{pageFlowScope.MyBean.drillingButtonBinding}"
7.       Name the text of the second af:button as text=" Turning". Create the actionListener as actionListener="#{pageFlowScope.MyBean.showTurningMachines}" and binding as binding="#{pageFlowScope.MyBean.turningButtonBinding}"
8.       Drag and drop af:showPopupBehavior from the component palette and set the properties as popupId="p1" triggerType="click" align="afterEnd" inside both the af:button.
9.       Thus the complete demo.jspx page code is shown below:
<?xml version='1.0' encoding='UTF-8'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"
                <jsp:directive.page contentType="text/html;charset=UTF-8" />
                                <af:document title="demo.jspx" id="d1">
                                                <af:form id="f1">
                                                                <af:button text="Drilling" id="b1"
                                                                                <af:showPopupBehavior popupId="p1" triggerType="click"
                                                                                                align="afterEnd" />
                                                                <af:button text="Turning" id="b2"
                                                                                <af:showPopupBehavior popupId="p1" triggerType="click"
                                                                                                align="afterEnd" />
                                                                <af:popup childCreation="immediate" autoCancel="disabled" id="p1"
                                                                                <af:panelGroupLayout id="pgl1"
                                                                                                layout="vertical" />
Step 4: Now got to MyBean.java class and write the code as shown below:
package com.susanto;

import java.util.ArrayList;
import java.util.Arrays;
import java.util.ListIterator;
import javax.faces.component.UIComponent;
import javax.faces.event.ActionEvent;
import oracle.adf.view.rich.component.rich.RichPopup;
import oracle.adf.view.rich.component.rich.layout.RichPanelGroupLayout;
import oracle.adf.view.rich.component.rich.nav.RichButton;
import oracle.adf.view.rich.component.rich.output.RichOutputText;
import oracle.adf.view.rich.context.AdfFacesContext;
import oracle.adf.view.rich.event.PopupCanceledEvent;

public class MyBean {
        private RichPopup popupBinding;
        ArrayList<String> drillingMethods = new ArrayList<String>(Arrays.asList(
                        "DrillingMethod1", "DrillingMethod2", "DrillingMethod3"));
        ArrayList<String> turningMethods = new ArrayList<String>(Arrays.asList(
                        "TurningMethod1", "TurningMethod2", "TurningMethod3"));
        private RichPanelGroupLayout panelGroupLayoutBinding;
        private RichButton drillingButtonBinding;
        private RichButton turningButtonBinding;

        public MyBean() {

        public void showTurningMachines(ActionEvent actionEvent) {
                for (int i = 0; i < turningMethods.size(); i++) {
                        RichOutputText richOutputText = new RichOutputText();
                        richOutputText.setId("richOutputLabel" + 1 + i);
                        addComponent(getPanelGroupLayoutBinding(), richOutputText);

        public void showDrillingMachines(ActionEvent actionEvent) {
                for (int i = 0; i < drillingMethods.size(); i++) {
                        RichOutputText richOutputText = new RichOutputText();
                        richOutputText.setId("richOutputLabel" + 1 + i);
                        addComponent(getPanelGroupLayoutBinding(), richOutputText);

        public void popupCancelListener(PopupCanceledEvent popupCanceledEvent) {

        public void addComponent(UIComponent parentUIComponent,
                        UIComponent childUIComponent) {

        public void setPopupBinding(RichPopup popupBinding) {
                this.popupBinding = popupBinding;

        public RichPopup getPopupBinding() {
                return popupBinding;

        public void setPanelGroupLayoutBinding(
                        RichPanelGroupLayout panelGroupLayoutBinding) {
                this.panelGroupLayoutBinding = panelGroupLayoutBinding;

        public RichPanelGroupLayout getPanelGroupLayoutBinding() {
                return panelGroupLayoutBinding;

        public void setDrillingButtonBinding(RichButton drillingButtonBinding) {
                this.drillingButtonBinding = drillingButtonBinding;

        public RichButton getDrillingButtonBinding() {
                return drillingButtonBinding;

        public void setTurningButtonBinding(RichButton turningButtonBinding) {
                this.turningButtonBinding = turningButtonBinding;

        public RichButton getTurningButtonBinding() {
                return turningButtonBinding;
Step 5: Save all and run the application. Thus, the ran application is shown below:
Step 6: Click on the Drilling button. On click of Drilling button it display the popup with all the Drilling methods as shown below:
Step 7: Click on the Turning button. On click of Drilling button it display the popup with all the Turning methods as shown below:
Thus, the solution to our requirement.

If you like this post please comments, share and like me on Facebook.

Thanks & Regards,
Susanto Paul