В данной статье я хочу поговорить о некоторых лайфхаках и приемах при работе с accordionPanel Primefaces.
 

Иногда дефолтного функционала аккордеонов может не хватать для отображения и распределения информации на странице. Тогда приходится прибегать к нестандартному подходу.

Разбиение обьектов листа на отдельные аккордеоны

Рассмотрим довольно стандартный аккордеон (совсем немного подправлены стили). В качестве value в аккордион мы подаем обычный лист объектов.

Но что если нам нужно, чтобы каждый объект из листа представлял собой отдельный аккордеон? Тут на помощь приходит тэг <p:repeat>. Необходимо обернуть accordionPanel в тэг repeat и в качестве value подать в repeat то, что было у нас в value в accordionPanel. А уже переменную из repeat, подать в value accordionPanel.

В итоге мы получим вот такой набор аккордеонов из одного листа.

Преимущество этого метода в том, что мы можем работать с каждым аккордеоном по отдельности, размещать между ними блоки или другую необходимую информацию, а также оборачивать их в другие блоки. О чем и пойдет речь в следующем примере.

Аккордеон внутри аккордеона

Например мы хотим, чтобы наш аккордеон с объектами, находился внутри другого аккордеона. То есть как бы сворачивался полностью в одну строчку, как показано на примере.

До:

После:

Тут все еще проще. Как вы наверное догадались, нам необходимо обернуть уже получившуюся конструкцию в еще один accordionPanel. Если вам нужен только один такой раскрывающийся список, то value можно не писать. Если же вам нужно чтобы этих списков было много повторите первый способ(оберните все в тэг repeat)

Все методы представленные выше, нужны в основном для упрощения размещения объектов на странице. Поговорим теперь о стилизации аккордеона.

Правильная тень на аккордион

AccordionPanel имеет внутри себя два блока: ui-accordion-header и ui-accordion-content. Когда мы вешаем тень на оба этих блока, то они, соответственно, оба по своим границам приобретают тень.

Можно конечно как-то поиграться с позицией тени или навесить на область между ними статический блок, но это все равно будет выглядеть костыльно. Поэтому когда мы хотим задать тень так, чтобы она шла всегда по границе аккордеона, нам нужно создать внешний блок вокруг аккордеона и уже на него определить тень.

Именно для этого мы сначала с помощью разделили аккордеоны на отдельные. То же самое применимо и в случае, когда нам нужно закруглить края аккордеона. Просто используйте border-radius на внешнем <div/> аккордеона.