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