How to bind EL value of dynamically created JSF component to a bean property?

Question

How can I set dynamically a JSF dynamicPanelGrid with some components (e.g. some inputtexts) and then fetch their values and store them into the object and database? I have created a sample object model, a Facelets view with a "placeholder" for the dynamically generated HtmlPanelGrid and a backing bean where I create the HtmlPanelGrid instance and its components. Here is the code for each:

The model:

@Entity
@Table(name = "imageviewer_crreviewerformdata")
public class CRReviewerFormData implements Serializable {

private static final long serialVersionUID = 1L;

@Id
@GeneratedValue
@Column(name = "FdId")
private Long fdId;

@Column(name = "Input1")
private String input1;

@Column(name = "Input2")
private String input2;

@Column(name = "Input3")
private String input3;

/* getters & setters*/
// ...

The view:

<p:commandButton value="View" action="#{reviewReportBean.updateDynamicPanelGrid()}"
                   oncomplete="dlg.show()" icon="ui-icon-image" >
    <f:param name="selectedImage" value="#{cRImageData.imName}" />
</p:commandButton>
...
<p:outputPanel id="outerContainerDynamicPanelGrid" autoUpdate="true">
    <h:panelGrid id="innerContainerDynamicPanelGrid"
                    binding="#{reviewReportBean.dynamicPanelGrid}">
    </h:panelGrid>
</p:outputPanel>
<p:commandButton id="viewSaveForm" value="Save" 
                    action='#{reviewReportBean.saveReport()}'>
</p:commandButton>
<p:commandButton id="viewEditForm" value="Edit" 
                    action='#{reviewReportBean.editReport()}'>
</p:commandButton>
...

The controller:

@ManagedBean(name = "reviewReportBean")
@ViewScoped
public class ReviewReportBean implements Serializable { 
    private static final long serialVersionUID = 1L;
    private String imageOfInterest;
    private HtmlPanelGrid dynamicPanelGrid;
    private CRReviewerFormData cRReviewerFromData;
    // ...
    @PostConstruct
    public void init(){     
        dynamicPanelGrid = new HtmlPanelGrid();
        FacesContext facesContext = FacesContext.getCurrentInstance();
        ConfigOptionsBean configOptionsBean = (ConfigOptionsBean) facesContext.getApplication().getVariableResolver().resolveVariable(facesContext, "configOptionsBean");

        cRReviewerFromData = new CRReviewerFormData();
    }

    @SuppressWarnings("unused")
    public void updateDynamicPanelGrid() {

        RequestContext requestContext = RequestContext.getCurrentInstance();
        Application application = FacesContext.getCurrentInstance().getApplication();
        dynamicPanelGrid.getChildren().clear();

        Row row1 = (Row) application.createComponent(Row.COMPONENT_TYPE);
        row1.setRendered(true);
        Row row2 = (Row) application.createComponent(Row.COMPONENT_TYPE);
        row2.setRendered(true);     
        Row row3 = (Row) application.createComponent(Row.COMPONENT_TYPE);
        row3.setRendered(true);

        HtmlOutputLabel label1 = (HtmlOutputLabel)application.createComponent(HtmlOutputLabel.COMPONENT_TYPE);      
        label1.setValue("I am the first label");
        label1.setStyle("font-weight:bold;color:black");
        label1.setId("label1");     
        HtmlOutputLabel label2 = (HtmlOutputLabel)application.createComponent(HtmlOutputLabel.COMPONENT_TYPE);      
        label2.setValue("I am the second label");
        label2.setStyle("font-weight:bold;color:red");
        label2.setId("label2");     
        HtmlOutputLabel label3 = (HtmlOutputLabel)application.createComponent(HtmlOutputLabel.COMPONENT_TYPE);      
        label3.setValue("I am the third label");
        label3.setStyle("font-weight:bold;color:red");
        label3.setId("label3");

        HtmlInputText input1 = (HtmlInputText)application.createComponent(HtmlInputText.COMPONENT_TYPE);
        input1.setId("input1"); 
        //How can i set inputtext value to something 
        //like: #{cRReviewReportBean.input1} in order to store 
        //form data (cRReviewerFromData)?

        HtmlInputText input2 = (HtmlInputText)application.createComponent(HtmlInputText.COMPONENT_TYPE);        
        input2.setId("input2");
        //How can i set inputtext value to something
        // like: #{cRReviewReportBean.input2} in order to store 
        //form data (cRReviewerFromData)?

        HtmlInputText input3 = (HtmlInputText)application.createComponent(HtmlInputText.COMPONENT_TYPE);
        input3.setId("input3");
        input3.setValueBinding(arg0, arg1);
        //How can i set inputtext value to something 
        //like: #{cRReviewReportBean.input3} in order to store
        // form data (cRReviewerFromData)?

        dynamicPanelGrid.setColumns(2);

        dynamicPanelGrid.getChildren().add(label1);
        dynamicPanelGrid.getChildren().add(input1);     
        dynamicPanelGrid.getChildren().add(label2);
        dynamicPanelGrid.getChildren().add(input2);     
        dynamicPanelGrid.getChildren().add(label3);
        dynamicPanelGrid.getChildren().add(input3);
        requestContext.update(":viewDatagridForm:innerContainerDynamicPanelGrid");
    }
    // ...
}

How can I bind the value of dynamically created HtmlInputText components to bean properties?

Answer 1

HtmlInputText input1 = (HtmlInputText)application.createComponent(HtmlInputText.COMPONENT_TYPE);
input1.setId("input1"); 
//How can i set inputtext value to something 
//like: #{cRReviewReportBean.input1} in order to store 
//form data (cRReviewerFromData)?

Use UIComponent#setValueExpression() on the value attribute of the component.

So, given that this property is a String

private String input1;

and having this helper method (which is also available in OmniFaces)

public static ValueExpression createValueExpression(String valueExpression, Class<?> valueType) {
    FacesContext context = FacesContext.getCurrentInstance();
    return context.getApplication().getExpressionFactory()
        .createValueExpression(context.getELContext(), valueExpression, valueType);
}

this should do:

HtmlInputText input1 = (HtmlInputText)application.createComponent(HtmlInputText.COMPONENT_TYPE);
input1.setId("input1"); 
input1.setValueExpression(createValueExpression("#{cRReviewReportBean.input1}", String.class));