jsfhashsetuirepeat

Making bootstrap accordion repeat based on elements of a set

I am trying to make the bootstrap collapse(accordion) according to the last example in this page.

http://www.w3schools.com/Bootstrap/bootstrap_collapse.asp

Now in this example, the number of divs are hard coded, 3 in this case. I want to make the same based on the number of values in a JAVA Set .

From my knowledge, i am trying to use ui:repeat like this

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

where apples is a set(unique list) of integers.

Here is the complete code:

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

I am having trouble in placing the ui:repeat in the code so that the accordion panels are repeated according to the number of elements in the set.Is it even possible to do it this way? Any code reference in this case would be helpful.

Thanks.

Solution

  • According to your code: 

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

    You are doing the iteration over offerMakers but I don't see you using the objects for anything, when you say to iterate over a set of Integers but i don't think you understand how a set behaves.

    Anyways, if you iterate with this code, you will only get one iteration, change you <ui:repeat with the following and you will see what I mean: 

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

    If you wanted to create dinamic accordions depending on the amount of elements(size) in you Set then you might want something like this: 

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

    Where your ResearcherQueriesDetailBean would have the following method: 

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