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 TurningMethod3 are 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:
- Drag and drop two af:button and one af:popup from the component palette. Drag and drop af:panelGroupLayout inside af:popup.
- Create the binding for the af:popup as binding=”#{pageFlowScope.MyBean.popupBinding}”.
- Create popupCanceledListener for the af:popup as popupCanceledListener=”#{pageFlowScope.MyBean.popupCancelListener}”.
- Create the binding for the af:panelGroupLayout as binding=”#{pageFlowScope.MyBean.panelGroupLayoutBinding}”.
- Change the layout property of the af:panelGroupLayout as layout=”vertical”
- 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}”
- 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}”
- 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.
- Thus, the complete demo.jspx page 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="demo.jspx" id="d1">
<af:form id="f1">
<af:button text="Drilling" id="b1" binding="#{pageFlowScope.MyBean.drillingButtonBinding}"
actionListener="#{pageFlowScope.MyBean.showDrillingMachines}">
<af:showPopupBehavior popupId="p1" triggerType="click" align="afterEnd"/>
</af:button>
<af:button text="Turning" id="b2" binding="#{pageFlowScope.MyBean.turningButtonBinding}"
actionListener="#{pageFlowScope.MyBean.showTurningMachines}">
<af:showPopupBehavior popupId="p1" triggerType="click" align="afterEnd"/>
</af:button>
<af:popup childCreation="immediate" autoCancel="disabled" id="p1"
binding="#{pageFlowScope.MyBean.popupBinding}"
popupCanceledListener="#{pageFlowScope.MyBean.popupCancelListener}">
<af:panelGroupLayout id="pgl1" binding="#{pageFlowScope.MyBean.panelGroupLayoutBinding}"
layout="vertical"/>
</af:popup>
</af:form>
</af:document>
</f:view>
</jsp:root>
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) {
panelGroupLayoutBinding.getChildren().clear();
for (int i = 0; i < turningMethods.size(); i++) {
System.out.println(turningMethods.get(i));
RichOutputText richOutputText = new RichOutputText();
richOutputText.setId("richOutputLabel" + 1 + i);
richOutputText.setValue(turningMethods.get(i));
addComponent(getPanelGroupLayoutBinding(), richOutputText);
}
}
public void showDrillingMachines(ActionEvent actionEvent) {
panelGroupLayoutBinding.getChildren().clear();
for (int i = 0; i < drillingMethods.size(); i++) {
System.out.println(drillingMethods.get(i));
RichOutputText richOutputText = new RichOutputText();
richOutputText.setId("richOutputLabel" + 1 + i);
richOutputText.setValue(drillingMethods.get(i));
addComponent(getPanelGroupLayoutBinding(), richOutputText);
}
}
public void popupCancelListener(PopupCanceledEvent popupCanceledEvent) {
panelGroupLayoutBinding.getChildren().clear();
}
public void addComponent(UIComponent parentUIComponent, UIComponent childUIComponent) {
parentUIComponent.getChildren().add(childUIComponent);
AdfFacesContext.getCurrentInstance().addPartialTarget(parentUIComponent);
}
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:
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
448 total views, 1 views today