How to Configure Java Web Application using Primefaces Framework to use AdminFaces

Introduction

This is an article where the main focus is about how to configure a Java web application so that it can use AdminFaces template. Just check several articles containing information about the Java web application before going on for further configuration. That article is the one with the title of ‘How to Create maven-based Web Application in NetBeans IDE’ in this link. It is an article referring on how to create a maven-based Java web application. Next, the article in this link with the title of ‘How to Add JSF Library to a maven-based Web Application in NetBeans IDE’. That article is giving information about how to add JSF library to the maven-based Java web application. The last one, it is an article which is giving information on how to add Primefaces functionality to the Java web application in this link. It is an article with the title of ‘How to Add Primefaces Library to a maven-based Java Web Application in NetBeans IDE’.

Configure Java Web Application to use AdminFaces

Soon after the Java web application with JSF library and also Primefaces framework is available, just perform several configuration in order to use AdminFaces. There are several configuration which is necessary in order to use AdminFaces. There is the ‘pom.xml’ file configuration to register the necessary package. Furthermore, there is the ‘web.xml’ file configuration to be able to use and execute AdminFaces. So, the following steps are in order to configure the Java web application for using AdminFaces :

Configure the ‘pom.xml’ file

So, the following is the first configuration part which is focusing on the ‘pom.xml’ file as follow :

1. First of all, just add the necessary AdminFaces package definition in the ‘pom.xml’. Just search it in the maven repository. Actually, there are two AdminFaces package definition which is useful as follows :

   <!-- https://mvnrepository.com/artifact/com.github.adminfaces/admin-theme -->
   <dependency>
        <groupId>com.github.adminfaces</groupId>
        <artifactId>admin-theme</artifactId>
        <version>1.3.2</version>
   </dependency>
   <!-- https://mvnrepository.com/artifact/com.github.adminfaces/admin-template -->
   <dependency>
        <groupId>com.github.adminfaces</groupId>
        <artifactId>admin-template</artifactId>
        <version>1.3.2</version>
   </dependency>
   

   As exist in the AdminFaces package definition above, there are two types of package. The first one is the ‘admin-theme’ and the second one is the ‘admin-template’.

2. After finding the package definition available in the maven repository, add it to the ‘pom.xml’ file of the Java web application. So, the following is the display after adding the above AdminFaces package definition in the ‘pom.xml’ file :

   <dependencies>
       <dependency>
           <groupId>javax</groupId>
           <artifactId>javaee-api</artifactId>
           <version>${jakartaee}</version>
           <scope>provided</scope>
       </dependency>
       <!-- https://mvnrepository.com/artifact/org.primefaces/primefaces -->
       <dependency>
           <groupId>org.primefaces</groupId>
           <artifactId>primefaces</artifactId>
           <version>11.0.0</version>
       </dependency>
       <!-- https://mvnrepository.com/artifact/com.github.adminfaces/admin-theme -->
       <dependency>
           <groupId>com.github.adminfaces</groupId>
           <artifactId>admin-theme</artifactId>
           <version>1.3.2</version>
       </dependency>
   </dependencies>

Configure the ‘web.xml’ file

Following after, just continue on to configure the ‘web.xml’ file as follows :

1. In this first step, just add several configuration in the ‘web.xml’ file in order for the AdminFaces is properly working. Normally, in this case, the ‘web.xml’ exist as part of the project exist in ‘Web Pages/WEB-INF’. The configuration is as in the following lines :

   <context-param>
      <param-name>javax.faces.PROJECT_STAGE</param-name>
      <param-value>Development</param-value>
   </context-param>
   <context-param>
      <param-name>primefaces.THEME</param-name>
      <param-value>admin</param-value>
   </context-param>
   <context-param>
      <param-name>primefaces.FONT_AWESOME</param-name>
      <param-value>true</param-value>
   </context-param>
   <servlet>
      <servlet-name>Faces Servlet</servlet-name>
      <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
      <load-on-startup>1</load-on-startup>
   </servlet>
   

2. Continue on, just replace the old lines of configuration which is available as follow :

   <servlet-mapping>
   <servlet-name>Faces Servlet</servlet-name>
   <url-pattern>/faces/*</url-pattern>
   </servlet-mapping>
   

   With the following one available as the new one below :

   <servlet-mapping>
   <servlet-name>Faces Servlet</servlet-name>
   <url-pattern>*.xhtml</url-pattern>
   </servlet-mapping>

3. In summary, just add all of the above configuration lines above in the ‘web.xml’ file which exist in the ‘Web Pages/WEB-INF’. Overall, the content of the ‘web.xml’ will be in the following appearance :

        <?xml version="1.0" encoding="UTF-8"?>
           <web-app version="4.0" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd">
             <context-param>
                 <param-name>javax.faces.PROJECT_STAGE</param-name> 
                 <param-value>Development</param-value>
             </context-param>
             <context-param>
                 <param-name>primefaces.THEME</param-name>
                 <param-value>admin</param-value>
             </context-param>
             <context-param>
                 <param-name>primefaces.FONT_AWESOME</param-name>
                 <param-value>true</param-value>
             </context-param>
             <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>*.xhtml</url-pattern>
             </servlet-mapping>
             <session-config>
                 <session-timeout>
                 30
                 </session-timeout>
             </session-config>
             <welcome-file-list>
                 <welcome-file>faces/index.xhtml</welcome-file>
             </welcome-file-list>
          </web-app>
   

Preparing Java Web Application Code

After configuring the Java web application, just prepare the necessary source code. In this case, just use the main file with the name of ‘index.xhtml’. If there is no file with the name of ‘index.xhtml’, just create a new one. After creating the file with the name of ‘index.xhtml’, fill it with the following content :

<?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml" 
xmlns:ui="http://java.sun.com/jsf/facelets"
template="/admin.xhtml">
</ui:composition>

Last but not least, just build, compile and run the Java web application. When it is finally running, just access the ‘index.xhtml’ file. If there are no other error appear, the following image will appear :