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.

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.

As a JSF developer, you should already have in-depth knowledge of general Java programming, JSF and/or Java EE 6 or 7, (X)HTML, CSS, and JavaScript. In addition to this, a familiarity with the PrimeFaces component library will be of help when reading and working through the examples in the book. A working knowledge of Maven will also be of help.

The following are the additional requirements for this book:

If you already have ideas for a custom theme, then you will have an even more enjoyable time in the later chapters.

The most important thing that you will need is a desire to be creative when designing web applications. A well-thought-out look and feel of an application is what gives your users the best first impression. These impressions are the ones that are the strongest and most lasting.

You will need the following additional resources as well:

Because we don't want to enter the debate about which browser is the best and why others shouldn't be used, the choice of browser is up to you. I prefer using Google Chrome because of its developer tools as well as for more mundane reasons. The only requirement is that it supports CSS3, HTML5, and JavaScript and has a tool for the examination and changing of DOM elements on the fly. The screenshots in this book will show me using Google Chrome.

This book is for the following two main audiences:

The book is also aimed at anyone who is interested in JSF because with JSF, it is easy for non-UI specialists to create user interfaces and with PrimeFaces, it is easy to build them with a good look and feel from the word go. The book explains how PrimeFaces themes work and, more importantly, provides insights into how to create custom themes.

In this book, you will find a number of styles of text that distinguish between different kinds of information. Here are some examples of these styles, and an explanation of their meaning.

Code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles are shown as follows: "Fortunately, the schedule component provides a simple client-side API, which includes the update() method to save the bandwidth and increase the page load performance."

A block of code is set as follows:

<h:form id="mainform">
  <h:panelGrid id="maintable" columns="2">
    <h:outputLabel id="simpleLabel1" value="A standard inputText component:" for="standardInput"/>
    <h:inputText id="standardInput"/>
    <p:outputLabel id="pfLabel2" value="A PrimeFaces inputText component:" for="pfInput"/>
    <p:inputText id="pfInput"/>
  </h:panelGrid>
</h:form>

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:

<p:submenu id="chapter2" label="Chapter 2">
  <p:menuitem id="c2difference" value="Differences" url="/chapter2/difference.xhtml"/>
  <p:menuitem id="c2morecomponents" value="Mini Showcase" url="/chapter2/morecomponents.xhtml"/>
</p:submenu>

Any command-line input or output is written as follows:

git clone https://github.com/primefaces/showcase.git

New terms and important words are shown in bold. Words that you see on the screen, in menus or dialog boxes for example, appear in the text like this: "Choose the file or drag and drop the ThemeRoller theme in the ZIP format and click on the create theme jar button."

Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or may have disliked. Reader feedback is important for us to develop titles that you really get the most out of.

To send us general feedback, simply send an e-mail to <[email protected]>, and mention the book title via the subject of your message.

If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide on www.packtpub.com/authors.

Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.