PrimeFaces Cookbook: Here are over 100 recipes for PrimeFaces, the ultimate JSF framework. It's a great practical introduction to leading-edge Java web development, taking you from the basics right through to writing custom components.

In this chapter, readers will be introduced to PrimeFaces themes and the concepts involved. Later on, we will build on these concepts to learn the theming of the PrimeFaces components. The theming concept used in PrimeFaces is similar to the jQuery ThemeRoller CSS Framework (http://jqueryui.com/themeroller). All PrimeFaces components are designed to allow a developer to integrate them seamlessly into the look and feel of an entire web application. At the time of writing, there are 35 plus ready-to-use themes, which you can preview and download from the PrimeFaces theme gallery (http://primefaces.org/themes.html).

Powered by ThemeRoller, PrimeFaces separates structural CSS from skinning CSS. The difference between the two CSS concepts is the topic of the first recipe. Installation and customization of PrimeFaces themes along with creation of new themes will be detailed. We will also see how to adjust the font family and font size throughout the PrimeFaces components .Adapted...

Each component is styled with CSS and contains two layers of style information—structural or component-specific and skinning or component-independent styles.

In this recipe, you will understand the difference between these two types of CSS, learn some useful selectors, and see an exemplary styling of the PickList component in the generated HTML.

PrimeFaces themes are bundled as JAR files and available for download at the PrimeFaces repository (http://repository.primefaces.org/org/primefaces/themes). Each theme can be quickly previewed before download at PrimeFaces Theme Gallery (http://primefaces.org/themes.html) or tested in the PrimeFaces ShowCase with an integrated theme switcher.

In this recipe, we will install and configure themes to use them in an JSF application. The steps to accomplish this task are straightforward.

<dependency>
  <groupId>org.primefaces.themes</groupId>
  &lt...

How to customize theme styles is one of the most asked questions by the PrimeFaces users. There are simple rules to be followed to overwrite bundled theme styles with custom CSS. There is no need to edit bundled themes and repackage theme JAR files.

In this recipe, we will present two examples for theme customization—one for SelectOneMenu and another for the Tree component. We will see how to change styles for a particular component or for all components of the same type. Furthermore, we will learn tips for where to place custom CSS in order to overwrite the PrimeFaces styles.

Customizing default styles on input components is a special task often asked about by the PrimeFaces users. They also ask for a recommended method for removing styles on form components. The reason to do that can be a company style guide and corporate identity throughout all applications.

In this recipe, we will find out a way to customize the PrimeFaces styles on input components and see if it is possible at all to disable theming on such components.

Each PrimeFaces theme has a specific font family and font size, which can be different from theme to theme. This may have a disadvantage in a multi-theme application because switching from one theme to another would cause a broken layout. Furthermore, default font sizes of themes might be bigger than expected. Hence, it is important to know how to change font properties of the PrimeFaces components globally.

In this recipe, we will learn how to adjust the font family and font size throughout the web application.

.ui-widget, .ui-widget .ui-widget {
    font-size: 90% !important;
}

Themable components look different in Internet Explorer 7 and 8, and browsers such as Google Chrome, Safari, or Firefox. There is a reason for that, which will be explained in this recipe. The main question is, do we need to take care of that? An update to Internet Explorer 9 or higher would be enough, but it is not always possible by reason of supporting web applications running in "old" browsers or due to some company-wide restrictions.

In this recipe, we will see if there are any ways to overcome this issue.

We sometimes need to create our own themes instead of using the pre-defined ones. Web applications should often feature a company-specific look and feel, which is constant and preset by company-wide style guides. Creating new themes is easy with PrimeFaces because it is powered by the ThemeRoller CSS framework (http://jqueryui.com/themeroller). ThemeRoller provides a powerful and easy-to-use online visual tool.

In this recipe, we will go on systematically and show all needed steps to create a new theme.

Getting ready

To gain first-hand experience with the ThemeRoller online visual tool, go to the ThemeRoller home page, explore the available theme Gallery, and play with the CSS properties to see changes for jQuery widgets embedded on the page. All CSS changes will be applied on the fly.

Multi-themable web applications require a theme switcher component. The default PrimeFaces' theme switcher is a component, which enables switching themes on the fly without a round-trip to the server. We speak about a stateless theme switcher because the current selected theme is only known on the client side.

In this recipe, we will show the usage of such a stateless theme switcher.

<p:themeSwitcher style="width:165px" effect="fade">
    <f:selectItem itemLabel="Choose Theme" itemValue=""/>
    <f:selectItems value="#{userSettingsController.themes}"/>
</p:themeSwitcher>

@ManagedBean
@SessionScoped
public class UserSettingsController implements Serializable {

    public Map<String, String...

By default, PrimeFaces theme switcher only changes the theme on the fly without sending an AJAX or full-page request. Users often want to get notified when the current theme has been changed in order to be able to update user preferences or settings.

In this recipe, we will implement two stateful theme switchers, which are able to save the current selected theme on the server side.

How to do it...

The next listing demonstrates a stateful theme switcher with attached AJAX behavior.

<p:themeSwitcher id="statefulSwitcher1" 
                 value="#{userSettingsController.theme}"
                 style="width:165px" effect="fade">
    <f:selectItem itemLabel="Choose Theme" itemValue=""/>
    <f:selectItems value="#{userSettingsController.themes}"/>
    <p:ajax listener="#{userSettingsController.saveTheme}"/>
</p:themeSwitcher>

Another advanced theme switcher supports displaying theme previews in the form of small images.

We can develop...