Requirement: I have a demo.jspx page. On that page I have three af:button: The af:button names are: “Create InputText Component” , “Create Label Component” , and “Create Button Component“. Also, I have one af: panelFormLayout in the demo.jspx page.|
Now when I click on any of these af:button, it should create the corresponding component dynamically at runtime inside the af:panelFormLayout. Also, I will set the various properties of the created component like Id, text, etc at runtime.
Solution: For solution of the above requirement follow the steps as shown below:
Step 1: Create an Oracle ADF Fusion Web application.
Step 2: Create a demo.jspx page in the ViewController project of our application.
Step 3: Drag and Drop three af:button from the component palette on the demo.jspx page. Name the three af:button as “Create InputText Component” , “Create Label Component” , and “Create Button Component“. Create an actionListener for all the three af:button. Thus, the actionListener for the created af:button are: actionListener=”#{pageFlowScope.MyBean.createInputTextComponent}” , actionListener=”#{pageFlowScope.MyBean.createLabelComponent}” , and actionListener=”#{pageFlowScope.MyBean.createButtonComponent}” respectively.
Now, drag and drop af:panelFormLayout from the component palette in the demo.jspx page. Set the inlineStyle=”height:337px; background-color:InfoBackground;” , and create the binding for the af:panelFormLayout as binding=”#{pageFlowScope.MyBean.panelFormLayoutBinding}”.
Thus, the complete demo.jspx page is shown below:
Step 4: Now, go to the MyBean.java and write the codes for each of the created ActionEvent as shown below:
package com.susanto;
import javax.faces.component.UIComponent;
import javax.faces.event.ActionEvent;
import oracle.adf.view.rich.component.rich.input.RichInputText;
import oracle.adf.view.rich.component.rich.layout.RichPanelFormLayout;
import oracle.adf.view.rich.component.rich.nav.RichButton;
import oracle.adf.view.rich.component.rich.output.RichOutputLabel;
import oracle.adf.view.rich.context.AdfFacesContext;
public class MyBean {
private RichPanelFormLayout panelFormLayoutBinding;
public MyBean() {
}
public void addComponent(UIComponent parentUIComponent, UIComponent childUIComponent) {
parentUIComponent.getChildren().add(childUIComponent);
AdfFacesContext.getCurrentInstance().addPartialTarget(parentUIComponent);
}
public void createInputTextComponent(ActionEvent actionEvent) {
RichInputText richInputText = new RichInputText();
richInputText.setId("rit1");
richInputText.setLabel("Name");
richInputText.setValue("Susanto Paul");
richInputText.setContentStyle("font-weight:bold;color:green");
addComponent(getPanelFormLayoutBinding(), richInputText);
}
public void createLabelComponent(ActionEvent actionEvent) {
RichOutputLabel richOutputLabel = new RichOutputLabel();
richOutputLabel.setId("rol1");
richOutputLabel.setValue("I am a Label");
addComponent(getPanelFormLayoutBinding(), richOutputLabel);
}
public void createButtonComponent(ActionEvent actionEvent) {
RichButton richButton = new RichButton();
richButton.setId("rb1");
richButton.setText("I am a Button");
addComponent(getPanelFormLayoutBinding(), richButton);
}
public void setPanelFormLayoutBinding(RichPanelFormLayout panelFormLayoutBinding) {
this.panelFormLayoutBinding = panelFormLayoutBinding;
}
public RichPanelFormLayout getPanelFormLayoutBinding() {
return panelFormLayoutBinding;
}
}
Step 5: Save all and run the application. Thus, ran application is shown below:
Step 6: Now when we click the “Create InputText Component” , “Create Label Component” , and “Create Button Component” button, the corresponding ADF Faces components gets created 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
601 total views, 1 views today