Adding additional PrimeFaces themes

In this section, we are going to turn to the power of Maven to add additional themes. We can do this because the PrimeFaces team has made them available as dependencies. The only difference here is that they haven't made them available on Maven Central Repository. Instead, they are available on PrimeFaces Maven repository.

In order to get Maven to point to the PrimeFaces repository, we need to add an entry in the project's pom.xml file.

Open the pom.xml file, which will be found in the project's Project Files folder. Under the name tag (highlighted in the following code), add everything in the repositories tag and save the file:

 <name>PFThemes</name>
  <repositories>
    <repository>
      <id>prime-repo</id>
      <name>PrimeFaces Maven Repository</name>
      <url>http://repository.primefaces.org</url>
      <layout>default</layout>
    </repository>
  </repositories>

Now, after doing this, we can add additional themes as dependencies to our project. In the pom.xml file, scroll down until you find the dependencies tag. We will now add a dependency for the bootstrap theme.

By adding the following snippet of XML to the pom project, we add all the openly available PrimeFaces themes to the project:

    <dependency>
      <groupId>org.primefaces.themes</groupId>
      <artifactId>all-themes</artifactId>
      <version>1.0.10</version>
    </dependency>

By building the project, we cause Maven to download the theme.jar file and add it to the project's runtime.

What happens when we run the project? Try it and see what happens. Navigate to the difference.xhtml page that we created earlier. Is anything different now that we have added the bootstrap theme?

The theme being used is still the default theme—aristo. So, we obviously need to tell the project to use the new one. Fortunately, PrimeFaces makes this very easy for us.

We need to open the web.xml file and add the following XML code:

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

Now, save the changes and rerun, build, and run the project.

Refresh the difference.xhtml page. See the changes? We can display the value of the theme setting in our page. You need to add the following highlighted code to difference.xhtml before the </h:panelGrid> tag page:

  <h:outputText id="currentThemeLabel" value="Current theme"/>
  <h:outputText id="currentThemeValue" value= "#{initParam['primefaces.THEME']}"/>
</h:panelGrid>

Refresh the difference.xhtml page in your browser and you should see the current theme bootstrap.

We can not only set the theme for our project, but also change it while the project is running. Furthermore, we can allow users to choose which theme they wish to use without affecting the choices that other users make.