Primefaces Buttons#

JSF Ext liefert CSS- und Javascript-Dateien zum Anpassen normaler Buttons an das Primefaces Layout.

Skins#

Skins können inzwischen über Maven konfiguriert werden. In der pom.xml:

	<dependency>
		<groupId>org.primefaces.themes</groupId>
		<artifactId>sunny</artifactId>
		<version>1.0.8</version>
	</dependency>

Und dann nur noch in der web.xml auswählen:

	<context-param>
		<param-name>primefaces.THEME</param-name>
		<param-value>sunny</param-value>
	</context-param>

Oder man bindet das Theme im Page-Template ein:

<h:outputStylesheet name="theme.css" library="primefaces-<theme>"/>

Custom Themes#

Da Primefaces auf JQuery aufbaut, kann der Online-Theme-Konfigurator für die Skins verwendet werden. Aus dem heruntergeladenen ZIP wird das Verzeichnis custom-theme nach <web-root>/resources/primefaces-<theme>/ extrahiert, sodass sich darin /images und /jquery-ui-1.9.1.custom.css befindet. /jquery-ui-1.9.1.custom.css wird nach theme.css umbenannt, damit Primefaces es findet. Oder eben wieder über die Anweisung <h:outputStylesheet>.

Menu#

Das Primefaces Menu unterstützt kein Behavior oder ActionEvent-Listener. Mit einem Workaround kann dies umgangen werden:

<p:menuitem>
	<h:commandLink styleClass="ui-menuitem-link ui-corner-all">
		<f:ajax/>
		<h:outputText value="Scopes"/>
		<e:load scopeId=":scopeList"/>
	</h:commandLink>
</p:menuitem>

Erklärung: Es wird ein <h:commandLink> innerhalb des <p:menuitem> platziert, der den Primefaces-Style enthält. Dieser unterstützt nun Behaviors und ActionEvents und sieht genauso aus.

Datatable#

Das Layout der Data-Tables kann mitunter etwas sperrig sein, weil sie sich nur bedingt an umgebende Container anpassen. Ein möglicher Fix besteht in CSS-Styles:

.ui-datatable table {
	table-layout: fixed !important;
}
.ui-datatable .ui-column-filter {
	width: 80px;
}
.ui-datatable tbody td, .ui-treetable tbody td {
	padding: 3px 4px;
}
.ui-datatable thead th, .ui-treetable thead th {
	padding: 3px 4px;
}
.ui-datatable tfoot td, .ui-treetable tfoot td {
	padding: 3px 4px;
}