Question

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

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

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

我尝试了一些东西，但它没有用。

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

来自我的托管bean的方法，其中包含我应该添加到其中的元素的逻辑：

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

当我选择＆＃34; MULTI_LINE_TEXT＆＃34;时，我尝试调试它并dynamicGrid子列表增量。在selectOne菜单中。但是，在我看来，我没有这个文本区域。

Answer 1

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

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

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

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

1 个答案: