Как построить динамическую сетку и показывать только три столбца подряд (JSF 2.2 и BootsFaces)

Question

Я пытаюсь разметить страницу с помощью Bootsfaces и JSF 2.2. Мне нравится показывать только три столбца подряд, а затем начинать новую строку, но я не знаю, как это реализовать.

<h:form>
    <b:container>
        <b:row>
        <ui:repeat value="#{ClientBean4.custs}" var="custs">
            <b:column col-md="4"><h:outputText id="output" value="#{ClientBean4.counter}" /> </b:column>
            <h:panelGroup rendered="#{ClientBean4.counter == 0}">
                </b:row><b:row>
            </h:panelGroup>
        </ui:repeat>
        </b:row>
    </b:container>
</h:form>

спустя долгое время я написал приведенный выше код, но его ошибка, такая как "h:panelgroup", должна быть правильно закрыта. Это означает, что я запустил PanelGroup, а затем закрыл строку, начал новую строку, а затем закрыл PanelGroup.

Итак, есть ли у кого-нибудь идея, как реализовать макет, где строка будет иметь три столбца (показывающих детали объекта клиента на столбец), затем закройте строку и начните новую строку. Обвисулы, я не знаю, сколько объектов будет в списке.

Answer 1

BootFaces предлагает компонент, который обрабатывает это. Более конкретно вы можете использовать <b:panelGrid columns="3"> для достижения этой цели. Это даст вам динамическую сеточную систему, которая будет расти вертикально по мере того, как вы ее заполняете, но сохраняете количество строк, которое вы укажете.

Вы можете увидеть компонент в действии здесь, https://showcase.bootsfaces.net/layout/panelgrids.jsf

PrimeFaces также имеет компонент для этого, но я предполагаю, что вы хотите использовать BootFaces, как это использует ваш оригинальный код. Если вы предпочитаете PrimeFaces, вы можете использовать <p:dataGrid> компонент, который делает что-то подобное. Этот компонент даже обрабатывает нумерацию страниц.