Primefaces Themes

Filed Under: JSF

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.

  1. Visit Primefaces Maven repository.
  2. Primefaces Themes - Primefaces Maven Repository Site

  3. Navigate into your preferred theme, like aristo below.
  4. Primefaces Themes - Primefaces Aristo Theme

  5. Select the version last version to be downloaded.
  6. Primefaces Themes - Primefaces Aristo Theme - Download Last Version

  7. Download the aristo-1.0.1.jar file.
  8. Primefaces Themes - Primefaces Aristo Theme - Downloaded

  9. 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:
  10. pom.xml

    
    <!-- Primefaces Theme Library -->
    <dependency>
    	<groupId>org.primefaces.themes</groupId>
    	<artifactId>afterdark</artifactId>
    	<version>1.0.10</version>
    </dependency>
    
  11. Define THEME CONTEXT parameter at your deployment descriptor (web.xml) with theme name as a value.
  12. web.xml

    
    <context-param>
    	<param-name>primefaces.THEME</param-name>
    	<param-value>afterdark</param-value>
    </context-param>
    
  13. No need for adding any of styles files into your pages, cause Primefaces will handle everything for you.
  14. In case you would like make the theme dynamic, define an EL expression as the param value.
  15. 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.

Primefaces Theme - Primefaces Afterdark Theme - Sample

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

Primefaces Theme - Primefaces Blitzer Theme - Sample 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.

Primefaces Theme - ThemeRoller Site

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:

  1. Using ThemeRoller for creating your own theme.
  2. Primefaces Theme - ThemeRoller - Create Custom Theme

  3. 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.
  4. Click on the download theme button that will direct you into download page.
  5. From the version option select 1.10.4 for compatibility issue.
  6. From components option deselect ToggleAll so that your theme only includes skinning styles.
  7. Primefaces Theme - ThemeRoller - Download Theme - Setup Version & Components Configurations

  8. At the bottom of the download page, just download your theme would look like below.
  9. Primefaces Theme - ThemeRoller - Download Theme - Download

    Primefaces Theme - ThemeRoller - Download Theme - Downloaded Theme

  10. Create a structure of folders that comply with the Primefaces theme structure standard. Look below:
  11. Primefaces Theme - ThemeRoller - Theme Structure Standard

  12. META-INF folder should contain resources which in turn contains primefaces-yourtheme folder. In our case we’ve named primefaces-journaldev.
  13. Primefaces-journaldev folder should contains your css and images.
  14. 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.
  15. Primefaces Theme - ThemeRoller - Rename Your Style

  16. 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.
  17. Primefaces Theme - ThemeRoller - Change Images Inside your theme

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

  21. Package your theme into JAR file using jar -cvf yourTheme.jar PATH-INTO-YOUR-META-INF-FOLDER. Look JAR below.
  22. Primefaces Theme - Package Theme As JAR File

  23. 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.
  24. 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>
    
  25. Configure your web.xml file by changing the primefacs.THEME param.
  26. 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>
    
  27. Running your application.
  28. Primefaces Theme - Running Application

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

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.

Comments

  1. VeroF says:

    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

  2. jose says:

    Still is wrong….

  3. Jeison G says:

    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}’]}”)

    1. Mohammad Amr says:

      Thanks Jeison G,

      I will update it soon,

      Regards,

Leave a Reply

Your email address will not be published. Required fields are marked *

close
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages