Primefaces Theme development: Create, package, and customize stunning themes using PrimeFaces

Although this book is about developing PrimeFaces themes, we will need a web application to actually test our designs. Also, a web application will be used to show how to integrate PrimeFaces into a web application and how components such as ThemeSwitcher are used in practice to allow a user to select their themes. Because of this, we will spend some time at the beginning creating and adding a web application to a Maven-based NetBeans project. When we start creating and using our own themes, the work that we will have done here will make it far easier to appreciate our creative efforts there.

While looking for a suitable set of Open Source (OS) JSF components several years ago, I discovered PrimeFaces almost by accident. What I found was a link to the PrimeFaces showcase. I was immediately impressed by the number of components that it offered and the fact that skins or themes were supported out of the box. Also, PrimeFaces uses industry-standard libraries such as jQuery and jQuery UI to make things work well and look good too. Because PrimeFaces uses the JSF standard extension framework, there are no headaches involved in integrating it into new or existing projects. In addition to providing a set of JSF components, it also provides a complete set of data model classes to support the various data-oriented components and some very useful utility classes as well. Last, but not least, PrimeFaces offers WebSocket support by integrating the excellent Atmosphere WebSocket library.

PrimeFaces also has a very active forum community, where I am often found answering questions asked by users, and hopefully getting them right too.

The version of PrimeFaces that I first used was 2.2, and at the time of writing this book, PrimeFaces has reached release 5.2, with 5.3 in the pipeline. The team of developers has done a wonderful job providing us with, in my opinion, the best OS JSF component library out there. It is worth paying a visit to the showcase at http://www.primefaces.org/showcase/, especially now that it has had a face lift and the very capable components are shown off in all their glory.

After launching NetBeans, open the File menu and select New Project from the available project types. Locate and select Maven. A list of Maven archetypes (project templates) is available. Select Web Application, as shown in the following screenshot:

Click on Next and the following screenshot appears:

Project Name is set to PFThemes.

Project Location is generated automatically and it does not need to be changed.

The following Maven properties are listed:

Now that we have set the name and location of the project, click on Next. This leads us to the Settings dialog box. This is where we set the application server and Java Enterprise Edition (EE) version that we are going to use for the project, as shown in the following screenshot:

I chose GlassFish because it is the Java EE reference implementation. I selected GlassFish Server 4.0 because this is the current release version of GlassFish and the nightly builds are available to me.

Once we have set the project settings, we can finish creating it. NetBeans presents us with a Project view containing our newly created project. If it hasn't opened a Project view, open the Windows menu and select Projects. You can also open a Files and a Services view. This allows us to check the files as they are built into the project, and through the Services view we can control things such as the GlassFish server, as well as other services such as database connections.

Now that we have successfully created the project, we have to change the project properties so that it adds the JSF framework to it.

Select the project and right-click on it. This opens a context menu, which allows us to perform different tasks and control various aspects of the project itself. We are interested in the one at the bottom, Properties. We click on it to open the Project Properties dialog box and select the Frameworks option, as shown in the following screenshot:

By clicking on the Add… button to the right, we can select a framework from a number of choices. We want JSF, so we select it and click on OK, as follows:

We return to the Project Properties | Frameworks dialog box, which looks like this:

The three tabs, Libraries, Configuration, and Components, are used to display and/or change the configuration of the JSF framework for our project. Libraries cannot be altered, but it shows that we are using Java EE 7 JSF version 2.2. I also changed the configuration as follows:

The JSF Servlet URL Pattern field has been changed to *.xhtml from the default one because it makes the linking of JSF pages easier. However, this is a purely personal preference and it is not something that you need to do.

Once you have set up the JSF framework to your satisfaction, click on OK, and the changes will be applied to our project.

We will use Maven to add all the required resources that we don't create ourselves, and this section will help us to understand how we add libraries to our project. PrimeFaces only requires that the PrimeFaces JAR file be added to our project. So, this is what we do:

When we build the project, Maven will cause the required file to be downloaded and added to our local Maven repository. It will copy the file into the WEB-INF/lib folder of the build target.

If we right-click on the project and select Build, Maven will do its magic. When it is finished, we can use the Files view to see the result. Click on the Files tab. Then open the project tree view. You will see an src and a target folder, as well as the project's pom.xml file and the NetBeans project configuration files.

Open the target folder. Then expand the PFThemes-1.0-SNAPSHOT folder. As we are confident that the build process will have worked correctly, we can now see the structure of the web application:

Although PrimeFaces does not require any additional dependencies, GlassFish does check each JAR file for optional dependencies and treats them as mandatory ones. Because of this rather petty strictness, we also need to add the commons-fileupload and commons-io dependencies. These are only required for the PrimeFaces fileupload component, which won't be used here. At the time of writing this book, GlassFish does not allow applications to be run with unsatisfied dependencies. So, we need to add the missing dependencies.

Add a dependency as you did before, but this time type in commons-fileupload in the query field and select version 1.3.1. Don't forget to click on Add before adding the commons-io dependency. For this, you select the 2.1 version.

Now build the project again. After the build is finished, right-click on the project and select Run.

This causes the GlassFish server to run and our application to be deployed. Once the project is deployed, NetBeans then opens its default browser and points it to the application's start page.

We should see something like this in Chrome:

Now that we have got the project running, we can add the other configuration files that we saw in an earlier screenshot.

Well done. You made it to the end of the first chapter with a working project and learned the repeatable steps that are required to create any PrimeFaces JSF web project using Maven.

In this chapter, we have successfully created a NetBeans Maven web project using the new project wizard, added the JSF framework to the project by adjusting the Project Properties, added the PrimeFaces component library as a dependency using Maven, added additional libraries as dependencies using Maven, and finally ran the project in GlassFish and viewed the start page of the application in a browser.

These steps are always the first steps that we need to take when creating a new PrimeFaces and JSF-based web application. Because of this, I felt that it's important that the first chapter of this book is devoted to this rather than the more fun things that we will be getting into later in the book.