如何通过JSF和PrimeFaces动态添加UI组件

Question

I'm writing an application for collecting some data. In this application I may create some fields. Every field has its own name and type (single line text, text area, radiobutton etc).

So, when a user opens the page, the application renders all fields to him for collecting data. All fields created dynamically so which field types my application will render I don't know.

So, my question, how to add ui components dynamically? For example I have selectOne menu with enum of fields type. When I select, for example, "text area" I need to add on view element text area.

I try something but it doesn't work.

My JSF page:

<h:form>
                <p:panel id="panel" header="Create/Edit field" style="margin-bottom:10px;">
                    <p:messages id="messages"/>
                    <h:panelGroup layout="block" styleClass="row">
                        <h:panelGroup layout="block" styleClass="col-sm-4">
                            <h:panelGrid columns="3" cellpadding="5">
                                <h:outputLabel for="fieldName" value="Field name:"/>
                                <p:inputText id="fieldName" value="#{field.name}" required="true"/>

                                <p:outputLabel for="fieldType" value="Field type:"/>
                                <p:selectOneMenu id="fieldType" value="#{editFieldController.currentType}"
                                                 styleClass="selectpicker" style="width: 100%">
                                    <p:ajax listener="#{editFieldController.onSelectType}"/>
                                    <f:selectItems value="#{editFieldController.types}"/>
                                </p:selectOneMenu>
                            </h:panelGrid>
                        </h:panelGroup>
                        <h:panelGroup layout="block" styleClass="col-sm-4">
                            <h:panelGrid columns="2">
                                <h:outputText value="Is Active: "/>
                                <p:selectBooleanCheckbox value="#{field.isActive}"/>
                                <h:outputText value="Is Required: "/>
                                <p:selectBooleanCheckbox value="#{field.isRequired}"/>
                            </h:panelGrid>
                        </h:panelGroup>

                        <h:panelGroup layout="block" styleClass="row">
                            <h:panelGrid binding="#{editFieldController.dynamicGrid}">
                            <h1> Its type info</h1>
                            </h:panelGrid>
                        </h:panelGroup>
                    </h:panelGroup>
                </p:panel>
                <p:commandButton value="Submit" update="panel"/>
            </h:form>

Method from my managed bean which contains logic for which element I should add to view:

public void onSelectType(){
    switch (currentType){
        case MULTI_LINE_TEXT:
            Application app = FacesContext.getCurrentInstance().getApplication();
           if(dynamicGrid == null){
                dynamicGrid = (HtmlPanelGrid) app.createComponent(HtmlPanelGrid.COMPONENT_TYPE);
            }
            dynamicGrid.getChildren().add(new InputTextarea());
            break;
        case SINGLE_LINE_TEXT:
            System.out.println();
            break;
        case RADIO_BUTTON:
            break;
    }
}

I tried to debug it and dynamicGrid children list increment when I choose "MULTI_LINE_TEXT" in selectOne menu. But, I haven't this text area on my view.

Answer 1

A more declarative approach for dynamic forms:

• create a simple field metadata object containing at least the input widget type
• provide a list of these field metadata objects via your view bean or another service
• use a p:repeat to iterate over this list
• for each input widget type put one label-widget-pair inside the repeat
  • bind their rendered attribute to an expression checking for the widget type, eg #{field.type == 'TEXTAREA'}
  • bind the value of the input widget to a Map in your view bean, eg #{myView.fieldValues[field.id]}

Depending on the needed degree of dynamics, you may also need to update the p:repeat if the fields change.