В данном посте я постараюсь описать решения типичных проблем возникающих при работе с прекрасной библиотекой JSF компонентов PrimeFaces

Размер компонентов

Наверное каждый кто начинал пользоваться библиотекой задавался вопросом “Почему компоненты выглядят такими огромными, хотя в демо они смотрятся гораздо приличнее?”. Для решения этой проблемы достаточно добавить внутри тега <h:head></h:head> следующий CSS код:

1
2
3
4
5
6

.ui-widget {
  font-size: 75% !important;
}
.ui-widget .ui-widget {
  font-size: 100% !important;
}

PrimeFaces и Internet Explorer

При использовании данной библиотеки в IE могут возникать проблемы с рендерингом, для избавления от которых рекомендуется устанавливать заголовок X-UA-Compatible. В старых версиях библиотеки (до 3.0) это делалось установкой тега meta в начале <h:head></h:head>. Однако начиная с версии 3.0 библиотека сначала вставляет свой код в тег head, а уже следом за ним пользовательский. Для того что бы обойти эту проблему в третьей версии был определен facet “first”, содержимое которого вставляется в самое начало тега head:

1
2
3
4
5
6
7
8
9

<h:head>
  <f:facet name="first">
      <meta http-equiv="X-UA-Compatible" content="EmulateIE8" />
      <meta http-equiv="Content-Type" content="text/xhtml; charset=UTF-8" />
      <meta http-equiv="Cache-Control" content="no-cache" />
      <meta http-equiv="Pragma" content="no-cache" />
      <title><ui:insert name="title">Application Title</ui:insert></title>
  </f:facet>
</h:head>

Вертикальные табы в p:tabView

Поскольку компоненты библиотеки основаны на jQueryUI, то для создания вертикальных табов можно использовать решение из этого демо. Во первых необходимо добавить CSS код:

1
2
3
4
5
6
7
8

/* Vertical Tabs
----------------------------------*/
.ui-tabs-vertical { width: 55em; }
.ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 12em; }
.ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; }
.ui-tabs-vertical .ui-tabs-nav li a { display:block; }
.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-selected { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px; }
.ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; width: 40em;}

А во вторых подключить класс к нужному tabView

1

<p:tabView styleClass="ui-tabs-vertical" />

Данное решение было найдено по мотивам данных вопросов на StackOverflow: * Make tabs appear vertically on the side when using PrimeFaces TabView * Vertical Tabs with JQuery?

Пока что это все :) При появлении еще каких нибудь заметок, обязуюсь выложить их на всеобщее обозрение.