Developing stunning themes for web applications has

never been easier! PrimeFaces delivers a powerful set

of features that enable JSF developers to create and
customize awesome themes on the Web. With more than
30 out-of-the-box themes, jQuery integration, a mobile UI
toolkit, Ajax Push technology, and much more, PrimeFaces
takes JSF application development to a whole new level!

What you will learn from this book

Use Maven to create JSF projects that use
PrimeFaces technology and themes
Create a custom theme using jQuery UI tools
Package your theme for distribution and
use your PrimeFaces-based themes as
drop-in libraries

Develop additional look and feel elements

that themes do not already supply and apply
them dynamically to views without causing
page refreshes
Learn about modern web technologies used
in premium themes and layouts

Who this book is written for

Learn about theme best practices and mobile

specific themes

$ 34.99 US
22.99 UK

community experience distilled

P U B L I S H I N G

pl

Prices do not include

local sales tax or VAT
where applicable

Visit www.PacktPub.com for books, eBooks,

code, downloads, and PacktLib.

C o m m u n i t y

Sudheer Jonna

If you are a web designer who wants to create and modify

PrimeFaces themes, then this book is for you. Basic
knowledge of JSF, CSS, and HTML is assumed.

Sa
m

Learn about standard theme icons,

custom icons and Font Awesome icons
in PrimeFaces application

Andy Bailey

This book is a hands-on, example-rich guide to creating

and customizing PrimeFaces themes, using various tools.
Beginning with creating a JSF project and integrating the
PrimeFaces library, this book will introduce you to the
features of theme components, how they are structured, and
how PrimeFaces uses jQuery UI to apply a theme to your
application. You will use a combination of JavaScript and
CSS to enhance your application with the help of scheduler
components and go on to adapt and package your custom
theme so that it is compatible with Resource Manager.
Finally, you will explore PrimeFaces mobile apps, ensuring
themes are compatible with your mobile applications and
best practices for theme design.

ee

PrimeFaces Theme Development

PrimeFaces Theme
Development

Fr

E x p e r i e n c e

D i s t i l l e d

PrimeFaces Theme
Development
Create, package, and customize stunning themes using
PrimeFaces

Andy Bailey

Sudheer Jonna

In this package, you will find:

The authors biography

A preview chapter from the book, Chapter 1 'To Skin an App'
A synopsis of the books content
More information on PrimeFaces Theme Development

About the Authors

Andy Bailey is a middle-aged Java enthusiast. He has been involved in Java

development since the humble beginnings of Java 1.0.1 in 1995. He thoroughly

enjoys challenges even more so now than ever.
He has had a varied career, including extended employment with the UK Ministry
of Defence, youth outreach programs as a volunteer, and a volunteer paramedic.
After gaining a degree in computer science with artificial intelligence from the
University of Sussex, he immigrated to Germany in 1996. He learned how to speak
and write in German while being involved in projects as diverse as 24/7 multimedia
live streaming and buffering free multimedia playback to design, develop, and build
systems to control, monitor, and analyze data collected from gaming machines in a
widely distributed environment.

This is his first publication. However, he has helped review other publications,
including PrimeFaces Cookbook.

Sudheer Jonna was born in Andhra Pradesh, India, in 1987. Currently, he works
as a senior software engineer in Chennai, India. He completed his master's degree
in computer applications from JNTU. In the past 4-5 years, he worked on providing
architectural designs and building various web applications based on JSF, Struts,
Spring, jQuery, JPA, EJB, and various Java EE and frontend technologies.
He is a JSF and PrimeFaces expert. He has been working with the PrimeFaces
component library since 2011. He worked as a committer and project member
of PrimeFaces and PrimeFaces Extensions open source projects. He has been a
well-known, recognized member of the PrimeFaces community for the past few
years. He is also the author of Learning PrimeFaces Extensions Development and
PrimeFaces BluePrints books, Packt Publishing. He worked as reviewer for PrimeFaces
Beginner's Guide and community reviewer for many other books.
Besides working with the aforementioned technologies, he also writes technical
articles, provides online training, designs and develops web application architecture,
writes books and reviews, and provides suggestions through online forums and
blogs. He is interested in the research and development of various popular Java
EE frameworks and many other latest technologies.
He shares his knowledge through GitHub (https://github.com/sudheerj).
He recently started blogging (http://sudheerjonna.blogspot.in/).
You can follow him on Twitter (@SudheerJonna) or contact him on Gmail at
[email protected].

Preface
One of the most popular and commonly used web application frameworks
today is JavaServer Faces (JSF) 2.2. Since the introduction of JSF 2, there are a
plethora of component libraries that provide more functionality than that provided
by standard JSF components. PrimeFaces is one of the leading component libraries
available today.
PrimeFaces not only provides a rich set of UI components, but also has the concept
of themes integrated from the beginning. PrimeFaces themes use jQuery UI as a
foundation, which makes adapting to the existing or creating completely customized
themes a gentle and rewarding process. Because jQuery UI is used to create themes,
there is a plethora of documentation and tools available for you to use. This makes
working with PrimeFaces themes very easy.
This book is aimed at the developers of Java Server Faces web applications; these
applications use the PrimeFaces component library. Together, we are going to have a
look at how to use built-in PrimeFaces themes, adjust these themes to fit a particular
application's needs, and finally create custom themes for both desktop- and mobilebased web apps. By the time you have read this book and worked on the examples
provided in its chapters, you will hopefully have gained valuable insights into the
PrimeFaces technology, and especially into how PrimeFaces themes can be used to
enrich user experience for your applications.
The practical exercises in the book can be run using any web server that supports
JSF2/2.2 and Java 6+. The IDE used for the examples in the book was NetBeans 8.0.1,
but any IDE that supports Maven and a suitable web/application server can be used
in its place.

Preface

What this book covers

Chapter 1, To Skin an App, covers how to create a JSF project and integrate the
PrimeFaces library into it. The chapter is meant to bring all the readers onto a level
playing field and provide a platform from which both the book and a PrimeFaces
theme can be built.
Chapter 2, Introducing PrimeFaces Themes, compares the standard JSF and PrimeFaces
components and highlights that JSF does not provide for theming by itself, but it
does provide mechanisms to extend the capabilities of the framework to include
themes and a rich set of components.
Chapter 3, jQuery UI, ThemeRoller, and the Anatomy of a Theme, explains how at
theme is structured and how PrimeFaces uses jQuery UI to apply a theme to
your application.
Chapter 4, A PrimeFaces inputText Component in Detail, takes a simple UI component
and uses browser developer tools to examine and change the CSS rules applied to
it. In this chapter, we will strip away some of the mysteries involved in applying a
Theme to your application.
Chapter 5, Let's Get Creative, builds on the work in the previous chapter by using a
custom theme and tweaking it according to our needs. This will expose some of the
weaknesses of ThemeRoller-generated themes and how to compensate for them.
Chapter 6, Icons, explains the role of icons in the PrimeFaces web application by using
icons from the standard theme icon set, creating custom icons, and applying them
on some PrimeFaces components for demonstration purposes. This chapter also
introduces the Font Awesome icons apart from the regular ThemeRoller icons.
Chapter 7, Dynamic Changes a Working Example, explores how to use a combination
of JavaScript and CSS to enhance an application. Themes can only do so much
and quite often, we want to enhance the way a PrimeFaces component looks like
depending on the state of the underlying data.
Chapter 8, Mobile Web Apps, talks about PrimeFaces Mobile and how to create
customized mobile themes using ThemeRoller and apply a customized mobile theme
that is suitable for mobile web applications.
Chapter 9, The Final Touches, explains how to make sure that the newly created
desktop/mobile theme is complete by applying it to the PrimeFaces showcase
application and performing the common component-specific CSS modifications to
finalize the theme JAR files according to users' interests.

Preface

Chapter 10, Theme Design Best Practices, looks at best practices in theme development.
We will also look at generally applicable best practices in web design as well as those
for rich Internet applications and PrimeFaces themes.
Chapter 11, Premium Themes and Layouts, and Third-party Converter Tools, explores the
usage of premium themes and layouts and how modern technologies such as LESS
CSS Preprocessor, the Google Material Design language, and so on, introduced in
them to provide amazing templates. This chapter also introduces third-party theme
converter tools that are available in the market.

To Skin an App
In this chapter, you will be introduced to the PrimeFaces JSF (short for JavaServer
Faces) component library, and you will create a Maven-based JSF web application.
This application will be used throughout the book to demonstrate and test the things
that we will learn in each chapter and section.
In this chapter, we will cover the following topics:

Why we need to create an app

An introduction to the PrimeFaces library

Creating a Maven JSF project

Integrating the PrimeFaces library into a Maven JSF project

Adding the additional dependencies that GlassFish needs

Building the project

Running the project

[1]

To Skin an App

Why we need to create an app

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.

The PrimeFaces library

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.

Creating a NetBeans Maven JSF project

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:

[2]

Chapter 1

Click on Next and the following screenshot appears:

[3]

To Skin an App

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:

Artifact Id: This cannot be changed. It is the name of your project.

Group Id: This can be edited as required. This sets the base package
for the project.
Version: This does not need to be changed.
Project: This is the last property that we will use to set the root
package for all the Java classes in the project.

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.
You can use any Java EE 7 container that supports the Java EE 7 web
profile that you like. The list of potential servers is long, but Tomcat
(http://tomcat.apache.org/), TomEE (http://tomee.apache.
org/), and WildFly (http://wildfly.org/) are suitable ones. Tomcat
and TomEE are freely available from the Apache Software Foundation
(http://apache.org/)and WildFly is available from RedHat.
[4]

Chapter 1

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.
The JSF framework is part of the Java EE 7 standard version. It
allows developers to build views/pages that are separate from the
business logic and data models that make up the middle tier of
data-driven applications. Because PrimeFaces builds on the facilities
provided by JSF, we need to add it to our project.

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:

[5]

To Skin an App

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:

[6]

Chapter 1

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.
The Components tab does allow us to add the PrimeFaces library to
our project. However, it adds the version bundled with NetBeans,
and not the one that we will be using for our project, which is
PrimeFaces 5.2 at the time of writing this book.

[7]

To Skin an App

Once you have set up the JSF framework to your satisfaction, click on OK, and the
changes will be applied to our project.
While we have been doing this, NetBeans should have been building
the project in the background, including the creation of the project
from its Maven archetype. Maven downloads quite a large number
of files when a project is created. Luckily for us, it only does this
once. Maven also maintains a local repository of resources on our
workstation for us so that once a file is downloaded from the Maven
Central Repository it doesn't need to be download from there again.

Adding the PrimeFaces library and

related dependencies 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:
1. By clicking on the + symbol to the left of the project in the Project view,
we open the project tree, as follows:

The following is a brief explanation of the folders, as listed in the

previous screenshot:

Web Pages: This is where we will add views or pages to

our application.

Source Packages: Here, Java source code is managed.

[8]

Chapter 1

Other Sources: This allows us to add other types of files which may
be needed for the project. We will use this facility. So, its purpose
should become clear, eventually.

Dependencies: Here we tell Maven the JAR files that we want to

add to our project.

Runtime Dependencies and Java Dependencies: These are not

important for this project. Feel free to browse them at your leisure.

Project Files: This is where NetBeans manages both the Maven

project's pom.xml file and the NetBeans project configuration file.
While we don't need to look at these now, we will visit the pom.xml
file in the later chapters. So, if you want to preview these files, please
feel free to do so.

2. Meanwhile, we are going to add PrimeFaces 5.2 to our project. Right-click

on the Dependencies folder and select Add Dependency... from the context
menu. This opens the Add Dependency dialog box, as shown in the
following screenshot:

[9]

To Skin an App

Usually, you only have the Search tab available in a newly created project.
Maven allows us to add local projects as dependencies to a project,
which is what the Open Projects tab is for. It also allows us to add
dependencies that are defined in a parent Maven project file, and
this is what the Dependency Management tab is for.

3. Type org.primefaces into the Query field of the Search tab, and then go
and make a drink or something that takes a little time.
Not only have we earned a break, but we also need time to
allow Maven to download and install the Maven Central
Repository index in our local Maven repository. This takes time
because there are a very large number of resources available
there. If you already use Maven for your projects, you obviously
won't need a lot of time. The break might be welcome, though.

Once the Maven Central Repository index is available, you will see
something like this:

[ 10 ]

Chapter 1

4. Select the 5.2 version and click on Add. Maven then adds the dependency
to our project.

Building the project

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:

The Java EE 7 standard mandates a formal folder structure for

web applications. The META-INF and WEB-INF folders are where
application-specific resources are stored. Under WEB-INF, you
will see a classes folder, a lib folder, and several configuration
files. Don't worry if you don't see any or all of the configuration
files. Only web.xml is generated by default; the others will be
created later in this chapter. The classes folder is to where Java
classes are compiled. The lib folder is where JAR files, such as the
PrimeFaces JAR file, are added.

[ 11 ]

To Skin an App

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.

Running the project

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.
I use Google Chrome as my NetBeans default browser because NetBeans
provides a Chrome plugin that allows us to debug scripts in our pages
as well as other useful services. I am not going to force you to use a
particular browser, but I do recommend that you use Google Chrome
for the aforementioned reasons. The only browser-related thing that you
should avoid is using Internet Explorer below version 8. The latest JSF
technologies are not guaranteed to work with the older Internet Explorer
versions, and the visual experience, even with Internet Explorer 8, is
underwhelming compared to modern browsers.

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.
[ 12 ]

Chapter 1

Summary
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.

[ 13 ]

Get more information PrimeFaces Theme Development

Where to buy this book

You can buy PrimeFaces Theme Development from the Packt Publishing website.
Alternatively, you can buy the book from Amazon, BN.com, Computer Manuals and most internet
book retailers.
Click here for ordering and shipping details.

www.PacktPub.com

Stay Connected: