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

Question

我正在写一份收集数据的申请书。在这个应用程序中，我可以创建一些字段。每个字段都有自己的名称和类型（单行文本、文本区域、单选按钮等）

因此，当用户打开页面时，应用程序将所有字段呈现给他以收集数据。 所有字段都是动态创建的，所以我的应用程序将呈现哪些字段类型我不知道

那么，我的问题是，如何动态添加ui组件？例如，我有selectOne菜单，其中枚举字段类型。 例如，当我选择“文本区域”时，我需要添加视图元素文本区域

我尝试了一些东西，但不起作用

我的JSF页面：

<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>

方法，该方法包含我应该添加到视图中的元素的逻辑：

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;
    }
}

我试图调试它，当我在selectOne菜单中选择“多行文字”时dynamicGrid子列表会增加。但是，我的视图中没有这个文本区域

Answer 1

更具声明性的动态表单方法：

• 创建一个简单的field元数据对象，其中至少包含输入小部件类型
• 通过视图bean或其他服务提供这些字段元数据对象的列表
• 使用p:repeat遍历此列表
• 对于每个输入小部件类型，将一个标签小部件对放在repeat中
  • 将其rendered属性绑定到检查小部件类型的表达式，例如#{field.type == 'TEXTAREA'}
  • 将输入小部件的value绑定到视图bean中的Map，例如#{myView.fieldValues[field.id]}

根据所需的动态程度，如果字段发生更改，您可能还需要更新p:repeat