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.
Primefaces Themes
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:
- Define THEME CONTEXT parameter at your deployment descriptor (web.xml) with theme name as a value.
- 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.
pom.xml
<!-- Primefaces Theme Library -->
<dependency>
<groupId>org.primefaces.themes</groupId>
<artifactId>afterdark</artifactId>
<version>1.0.10</version>
</dependency>
web.xml
<context-param>
<param-name>primefaces.THEME</param-name>
<param-value>afterdark</param-value>
</context-param>
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.
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:images/{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="https://maven.apache.org/POM/4.0.0" xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="https://maven.apache.org/POM/4.0.0 https://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>https://maven.apache.org</url> <repositories> <repository> <id>prime-repo</id> <name>PrimeFaces Maven Repository</name> <url>https://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.
- Running your application.
- As you’ve noticed, the calendar component has used the new custom theme.
web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance"
xmlns="https://java.sun.com/xml/ns/javaee" xmlns:web="https://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
xsi:schemaLocation="https://java.sun.com/xml/ns/javaee
https://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>
Primefaces Themes Example Summary
Changing primefaces themes maybe the most adhoc work that can be achieved arbitrarily. Primefaces provides you the excellent way to define a new theme or use a pre-defined theme for your application. This tutorial intended to explain you how can create your own custom theme. Download the sample project from below link.
Hi I want to know information about theme that is used in your website. Can you help me please.
Hi admin, it was a wonderful article
Nowadays, the file to be renamed to “theme.css” is “jquery-ui.theme.css”. I have to delete the cache browser in order to see the changes
Still is wrong….
Thanks for share,
I think you have a mistake on your tutorial.
This is wrong:
url(“#{resource[‘primefaces-journaldev:imagesimages/{image}’]“)
I have this according to primefaces docs.
url(“#{resource[‘primefaces-journaldev:images/{image}’]}”)
Thanks Jeison G,
I will update it soon,
Regards,