JSF 2 ui: repeat: group all n elements inside a div

Question

Given the collection that I want to organize on the page as follows:

<!-- Group 0 --> <div style="float:left;"> <div><!-- Item 0 --></div> <div><!-- Item 1 --></div> <!-- ... --> <div><! -- Item n - 1 --></div> </div> <!-- Group 1 --> <div style="float:left;"> <div><!-- Item n --></div> <div><!-- Item n + 1 --></div> <!-- ... --> <div><! -- Item 2n - 1 --></div> </div> <!-- ... --> <!-- Group g --> <div><!-- Item gn --></div> <div><!-- Item gn + 1 --></div> <!-- ... --> <div><! -- Item (g + 1)n - 1 --></div> </div> 

Is there some trick that I can use to do this inside ui: repeat or some other technique, preferably other than creating a custom component?

Answer 1

You can check the current round loop with the varStatus attribute and print an intermediate </div><div style="float: left;"> if necessary.

eg. every 3 elements:

 <div style="float: left;"> <ui:repeat value="#{bean.list}" var="item" varStatus="loop"> <h:outputText value="&lt;/div&gt;&lt;div style='float: left;'&gt;" escape="false" rendered="#{not loop.first and loop.index % 3 == 0}" /> <div>#{item}</div> </ui:repeat> </div> 

Please note that this cannot be done as plain HTML inside <h:panelGroup> , because it will lead to uncorrected XML, therefore <h:outputText escape="false"> with them as XML entities.

---

Update according to the comments, here's an alternative approach having a <div> defined only once, which is probably less confusing:

 <ui:repeat value="#{bean.list}" var="item" varStatus="loop"> <h:outputText value="&lt;div style='float: left;'&gt;" escape="false" rendered="#{loop.index % 3 == 0}" /> <div>#{item}</div> <h:outputText value="&lt;/div&gt;" escape="false" rendered="#{loop.last or (loop.index + 1) % 3 == 0}" /> </ui:repeat> 

Answer 2

If possible, I would break the server-side collection:

 <ui:repeat value="#{groups}" var="group"> <div style="float:left;"> <ui:repeat value="#{group.items}" var="item"> <div>#{item.content}</div> </ui:repeat> </div> </ui:repeat> 

another option could be (not tested, not sure about size behavior in particular):

 <ui:repeat value="#{items}" var="group" varStatus="status" step="n"> <div style="float:left;"> <ui:repeat value="#{items}" var="item" offset="#{status.index}" size="#{status.index + n}"> <div>#{item.content}</div> </ui:repeat> </div> </ui:repeat> 

EDIT: The second version has been replaced