JSFとPrimeFacesを介してUIコンポーネントを動的に追加する方法

Question

いくつかのデータを収集するためのアプリケーションを作成しています。このアプリケーションでは、いくつかのフィールドを作成することがあります。すべてのフィールドには独自の名前とタイプ（1行のテキスト、テキストエリア、ラジオボタンなど）があります。

したがって、ユーザーがページを開くと、アプリケーションはデータを収集するためにすべてのフィールドを表示します。 すべてのフィールドが動的に作成されるため、私のアプリケーションでレンダリングされるフィールドタイプはわかりません。

私の質問、動的にUIコンポーネントを追加する方法は？たとえば、フィールド型の列挙型を持つselectOneメニューがあります。 たとえば、「テキスト領域」を選択すると、ビュー要素のテキスト領域を追加する必要があります。

私は何かを試みますが、うまくいきません。

私のJSFページ：私はビューに追加すべき要素のためのロジックが含まれている私の、マネージドBeanから

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

私はそれをデバッグしようとしたとdynamicGrid子リストの増分selectOneメニューで「MULTI_LINE_TEXT」を選択します。しかし、私はこのテキスト領域を私の視点では持っていません。ダイナミックフォームの

Answer 1

Aより宣言的なアプローチ：

• ビューBeanまたは別のサービスを介してこれらのフィールドのメタデータ・オブジェクトのリストを提供し、少なくとも入力ウィジェットタイプ
• を含む単純fieldメタデータオブジェクトを作成
• 各入力ウィジェットタイプについて、このリスト
• を反復するp:repeatを使用して、繰り返しの内側に1ラベルウィジェットのペアを入れ
  • は、そのrendered属性をウィジェットタイプをチェックする式にバインドします。 #{field.type == 'TEXTAREA'}
  • 入力ウィジェットのvalueをビューBeanのMapにバインドします。 #{myView.fieldValues[field.id]}

ダイナミクスの必要度に応じて、あなたはまた、フィールドが変更された場合p:repeatを更新する必要があるかもしれません。