セットの要素に基づいてブートストラップアコーディオンリピートを作成する

Question

このページの最後の例に従って、ブートストラップの崩壊（アコーディオン）を作成しようとしています。この例では今

​​

、div要素の数は、ハードこの場合、図3に示すように、符号化されます。 JAVA Setの値の数に基づいて同じものを作りたいと思います。

私の知識から、私は、UIを使用しようとしています：りんごは、整数の集合（ユニークリスト）である。この

<ui:repeat value="#{myBean.apples}" var="apples"> 
</ui:repeat> 

のように繰り返します。ここで

は完全なコードです：

     <h:panelGroup layout="block" 
          rendered="#{researcherQueriesDetailBean.offerPersonDTO.size() > 0}"> 

          <div class="panel-group" id="accordion" role="tablist" 
           aria-multiselectable="true"> 

           <ui:repeat value="#{researcherQueriesDetailBean.offerMakers}" 
            var="offerMakers"> 


            <div class="panel panel-default"> 
             <div class="panel-heading" role="tab" id="headingOne"> 
              <h4 class="panel-title"> 



               <a role="button" data-toggle="collapse" 
                data-parent="#accordion" href="#sample-list" 
                aria-expanded="false" aria-controls="sample-list"> 
                Sample Availability </a> 


              </h4> 
             </div> 


             <div id="sample-list" class="panel-collapse collapse" 
              role="tabpanel" aria-labelledby="headingOne"> 
              <div class="panel-body"></div> 
             </div> 
            </div> 
           </ui:repeat> 

          </div> 
         </h:panelGroup> 

私はUIを置くことでトラブルを抱えています：アコーディオンパネルはそれもset.Is内の要素の数に応じて繰り返されるように、コードで繰り返しこのようにすることが可能ですか？この場合のコード参照は参考になります。

ありがとうございました。あなたのコードによると

Answer 1

：

<ui:repeat value="#{researcherQueriesDetailBean.offerMakers}" 
      var="offerMaker"> 
    <div class="panel panel-default"> 
     <div class="panel-heading" role="tab" id="headingOne"> 
      <h4 class="panel-title"> 
       <a role="button" data-toggle="collapse" 
        data-parent="#accordion" href="#sample-list" 
        aria-expanded="false" aria-controls="sample-list"> 
        Sample Availability </a> 
      </h4> 
     </div> 
     <div id="sample-list" class="panel-collapse collapse" 
      role="tabpanel" aria-labelledby="headingOne"> 
      <div class="panel-body"></div> 
     </div> 
    </div> 
</ui:repeat> 

あなたはofferMakersにわたり反復を行っているが、「私はあなたがIntegersのセットを反復処理するために言うとき、あなたは何のためにオブジェクトを使用して表示されていないが、私はドンセットがどのように動作するかを理解していると思います。あなたはこのコードを繰り返す場合

とにかく、あなただけの、反復を取得するには、次であなたに<ui:repeatを変更すると、あなたは私が何を意味するかが表示されますされます：あなたは動のアコーディオンを作成したい場合は

<ui:repeat value="#{researcherQueriesDetailBean.offerMakers}" 
      var="offerMaker"> 
    <div class="panel panel-default"> 
     <div class="panel-heading" role="tab" id="headingOne"> 
      <h4 class="panel-title"> 
       <a role="button" data-toggle="collapse" 
        data-parent="#accordion" href="#sample-list" 
        aria-expanded="false" aria-controls="sample-list"> 

         OFFERMAKER VALUE IS: #{offerMaker} 
       </a> 
      </h4> 
     </div> 
     <div id="sample-list" class="panel-collapse collapse" 
      role="tabpanel" aria-labelledby="headingOne"> 
      <div class="panel-body"></div> 
     </div> 
    </div> 
</ui:repeat> 

Setあなたの中に元素の量（大きさ）に応じて、あなたはこのような何かをお勧めします：あなたのResearcherQueriesDetailBeanには、次のメタを持つことになり

<c:forEach begin="0" end="#{researcherQueriesDetailBean.offerMakersSize}" var="i"> 
    <div class="panel panel-default"> 
     <div class="panel-heading" role="tab" id="heading#{i}"> 
      <h4 class="panel-title"> 
       <a role="button" data-toggle="collapse" 
        data-parent="#accordion" href="#hh#{i}" 
        aria-expanded="false" aria-controls="sample-list"> 
        Collapsible group #{i} 
       </a> 
      </h4> 
     </div> 
     <div id="hh#{i}" class="panel-collapse collapse" 
      role="tabpanel" aria-labelledby="heading#{i}"> 
      <div class="panel-body">some info #{i}</div> 
     </div> 
    </div> 
</c:forEach> 

をOD：forEachの「バインドされていません。 『：私はforEachの を使用する場合

public Integer getOfferMakersSize(){ 
    return offerMakers.size(); 
}