Как настроить внешний вид компонентов primefaces?

#jsf #primefaces

#jsf #primefaces

Вопрос:

Как мне оформить компоненты primefaces и указать их расположение на веб-страницах? Ссылки на любой образец загружаемого приложения были бы высоко оценены.

Ответ №1:

Расположение компонентов:

В Primefaces есть некоторые компоненты, которые имеют атрибуты position, такие как p:dialog :

 <p:dialog header=”Header TextwidgetVar=”dialog” position=”10,50”>
 ...
</p:dialog>
  

В примере позиция задана в виде пары [x, y], связанной с верхним левым углом окна браузера. Здесь также допустимы такие значения, как «top», «bottom», «left», «right» или «center». Если атрибут опущен, положение диалогового окна центрируется.

Для всех других компонентов можно использовать позиционирование css, либо определяемое атрибутом style or styleClass , который доступен для многих компонентов Primefaces, либо определяемое в отдельном css-макете.

В следующем примере задается абсолютное положение для p:dataTable :

 <p:dataTable value="#{testBean.selectOptions}" var="item"
             style="position:absolute; top:50px; left:240px;">
  

Primefaces даже поставляется с собственным p:layout тегом, который также можно использовать для позиционирования.

Стиль

Этого можно достичь с помощью тем Primefaces. Кроме того, в документации Primefaces (за которую вам придется заплатить начиная с версии 2.1) перечислены все классы стилей css для каждого компонента. Вы можете адаптировать их к своим потребностям.