Primefaces Themes

Today we will look into Primefaces Themes. Primefaces is integrated with powerful ThemeRoller CSS framework. Currently there are 30+ pre-designed Primefaces free themes that you can preview and download from Primefaces theme gallery.

This tutorial will provide you complete explanation of how you can apply a Primefaces theme and create your own custom primefaces theme.

The samples provided below consider the Calendar component. We will use this for our Primefaces theme example and apply custom theme on it.

Applying Primefaces Theme

Applying a primefaces theme in your project is very easy. Just follow below steps to apply a theme easily.

Visit Primefaces Maven repository.

Navigate into your preferred theme, like aristo below.

Select the version last version to be downloaded.

Download the aristo-1.0.1.jar file.

Append the downloaded JAR into your classpath. The same downloading can be done through using of Maven Dependencies like below we will use afterdark theme:

pom.xml


		<!-- Primefaces Theme Library -->
		<dependency>
			<groupId>org.primefaces.themes</groupId>
			<artifactId>afterdark</artifactId>
			<version>1.0.10</version>
		</dependency>

Define THEME CONTEXT parameter at your deployment descriptor (web.xml) with theme name as a value.

web.xml

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

No need for adding any of styles files into your pages, cause Primefaces will handle everything for you.
In case you would like make the theme dynamic, define an EL expression as the param value.

web.xml

	
	<context-param>
		<param-name>primefaces.THEME</param-name>
		<param-value>#{calendarManagedBean.theme}</param-value>
	</context-param>

Look below at the running sample that uses the Afterdark theme.

And look below at the running sample that uses blitzer theme.

And so on.

Creating a New Primefaces Theme

If you’d like to create your own primefaces custom theme instead of using the pre-defined ones, that is easy as well because ThemeRoller provides a powerful and easy to use inline visual tool.

Applying your own custom primefaces theme is the same way as applying a pre-defined theme. However you need to migrate the downloaded theme files from ThemeRoller to Primefaces Theme infrastructure. For creating and applying your custom theme, you have to follow the below steps:

Using ThemeRoller for creating your own theme.

Look above at the Calendar component that will be used inside the running application once your custom theme has applied. For sample purpose click on the link for generating the same theme as it’s modifiable by tuning the arguments at the left pane.
Click on the download theme button that will direct you into download page.
From the version option select 1.10.4 for compatibility issue.
From components option deselect ToggleAll so that your theme only includes skinning styles.

At the bottom of the download page, just download your theme would look like below.

Create a structure of folders that comply with the Primefaces theme structure standard. Look below:

META-INF folder should contain resources which in turn contains primefaces-yourtheme folder. In our case we’ve named primefaces-journaldev.
Primefaces-journaldev folder should contains your css and images.
Return back into downloaded theme, extract the zip file into your desk and navigate into css folder and search for jquery-ui-1.10.4.custom.css and rename it to be theme.css.

Open your theme.css file and change all the images paths to be url(“#{resource[‘primefaces-journaldev:imagesimages/{image}’]”) rather than url(“images/{image}”). Look below at a sample of fragments of our theme.css file.

As you’ve noticed, all of images urls are changed to be used in conjunction with Faces resource object.
Copy your theme.css file and images file into your primefaces-yourtheme, in our case they will be located inside primefaces-journaldev folder.

Package your theme into JAR file using jar -cvf yourTheme.jar PATH-INTO-YOUR-META-INF-FOLDER. Look JAR below.

Import your JAR into your project build path, remember that we’ve used the Primefaces Calendar project that was introduced some time ago. Easiest way to create a lib directory at the project root and copy the jar file into it. Then add the jar file to the project build path.

Since we need to package the project jar file when we build the project, we need to make some changes in the pom.xml file to copy the journaldev.jar file to WEB-INF/lib directory of the WAR file. The changes are easy, all we need is to add a configuration to include the jar file to WEB-INF/lib directory for maven-war-plugin plugin. Our final pom.xml file looks like below.

pom.xml

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<groupId>com.journaldev</groupId>
	<artifactId>Primefaces-Calendar-Sample</artifactId>
	<packaging>war</packaging>
	<version>0.0.1-SNAPSHOT</version>
	<name>Primefaces-Calendar-Sample</name>
	<url>http://maven.apache.org</url>
	<repositories>
		<repository>
			<id>prime-repo</id>
			<name>PrimeFaces Maven Repository</name>
			<url>http://repository.primefaces.org</url>
			<layout>default</layout>
		</repository>
	</repositories>
	<dependencies>
		<!-- Servlet -->
		<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>servlet-api</artifactId>
			<version>2.5</version>
			<scope>provided</scope>
		</dependency>
		<!-- Faces Implementation -->
		<dependency>
			<groupId>com.sun.faces</groupId>
			<artifactId>jsf-impl</artifactId>
			<version>2.2.4</version>
		</dependency>
		<!-- Faces Library -->
		<dependency>
			<groupId>com.sun.faces</groupId>
			<artifactId>jsf-api</artifactId>
			<version>2.2.4</version>
		</dependency>
		<!-- Primefaces Version 5 -->
		<dependency>
			<groupId>org.primefaces</groupId>
			<artifactId>primefaces</artifactId>
			<version>5.0</version>
		</dependency>
		<!-- JSP Library -->
		<dependency>
			<groupId>javax.servlet.jsp</groupId>
			<artifactId>javax.servlet.jsp-api</artifactId>
			<version>2.3.1</version>
		</dependency>
		<!-- JSTL Library -->
		<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>jstl</artifactId>
			<version>1.1.2</version>
		</dependency>
		<!-- Primefaces Theme Library -->
		<dependency>
			<groupId>org.primefaces.themes</groupId>
			<artifactId>blitzer</artifactId>
			<version>1.0.10</version>
		</dependency>
	</dependencies>
	<build>
		<sourceDirectory>src/main/java</sourceDirectory>
		<plugins>
			<plugin>
				<artifactId>maven-war-plugin</artifactId>
				<version>2.3</version>
				<configuration>
					<warSourceDirectory>WebContent</warSourceDirectory>
					<failOnMissingWebXml>false</failOnMissingWebXml>
					<webResources>
						<resource>
							<directory>lib</directory>
							<includes>
								<include>**/*.jar</include>
							</includes>
							<targetPath>WEB-INF/lib</targetPath>
						</resource>
					</webResources>
				</configuration>
			</plugin>
			<plugin>
				<artifactId>maven-compiler-plugin</artifactId>
				<version>3.1</version>
				<configuration>
					<source>1.6</source>
					<target>1.6</target>
				</configuration>
			</plugin>
		</plugins>
	</build>

</project>

Configure your web.xml file by changing the primefacs.THEME param.

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
	http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
	id="WebApp_ID" version="2.5" metadata-complete="true">
	<servlet>
		<servlet-name>Faces Servlet</servlet-name>
		<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
		<load-on-startup>1</load-on-startup>
	</servlet>
	<servlet-mapping>
		<servlet-name>Faces Servlet</servlet-name>
		<url-pattern>/faces/*</url-pattern>
	</servlet-mapping>
	<servlet-mapping>
		<servlet-name>Faces Servlet</servlet-name>
		<url-pattern>*.xhtml</url-pattern>
	</servlet-mapping>
	<context-param>
		<description>State saving method: 'client' or 'server' (=default). See JSF Specification 2.5.2</description>
		<param-name>javax.faces.STATE_SAVING_METHOD</param-name>
		<param-value>client</param-value>
	</context-param>
	<context-param>
		<param-name>primefaces.THEME</param-name>
		<param-value>journaldev</param-value>
	</context-param>
	<listener>
		<listener-class>com.sun.faces.config.ConfigureListener</listener-class>
	</listener>
</web-app>

Running your application.

As you’ve noticed, the calendar component has used the new custom theme.