Book Image

PrimeFaces Cookbook

Book Image

PrimeFaces Cookbook

Overview of this book

PrimeFaces is the de facto standard in the Java web development. PrimeFaces is a lightweight library with one jar, zero-configuration, and no required dependencies. You just need to download PrimeFaces, add the primefaces-{version}.jar to your classpath and import the namespace to get started. This cookbook provides a head start by covering all the knowledge needed for working with PrimeFaces components in the real world. "PrimeFaces Cookbook" covers over 100 effective recipes for PrimeFaces 3.x which is a leading component suite to boost JSF applications. The book's range is wide‚Äí from AJAX basics, theming, and input components to advanced usage of datatable, menus, drag & drop, and charts. It also includes creating custom components and PrimeFaces Extensions.You will start with the basic concepts such as installing PrimeFaces, configuring it, and writing a first simple page. You will learn PrimeFaces' theming concept and common inputs and selects components. After that more advanced components and use cases will be discussed. The topics covered are grouping content with panels, data iteration components, endless menu variations, working with files and images, using drag & drop, creating charts, and maps. The last chapters describe solutions for frequent, advanced scenarios and give answers on how to write custom components based on PrimeFaces and also show the community-driven open source project PrimeFaces Extension in action.
Table of Contents (17 chapters)
PrimeFaces Cookbook
Credits
About the Authors
About the Reviewers
www.PacktPub.com
Preface
Index

Setting up and configuring the PrimeFaces library


PrimeFaces is a lightweight JSF component library with one JAR file, which needs no configuration and does not contain any required external dependencies. To start with the development of the library, all we need is to get the artifact for the library.

Getting ready

You can download the PrimeFaces library from http://primefaces.org/downloads.html, and you need to add the primefaces-{version}.jar file to your classpath. After that, all you need to do is import the namespace of the library, which is necessary to add the PrimeFaces components to your pages, to get started.

If you are using Maven (for more information on installing Maven, please visit http://maven.apache.org/guides/getting-started/maven-in-five-minutes.html), you can retrieve the PrimeFaces library by defining the Maven repository in your Project Object Model (POM) file as follows:

Tip

Downloading the example code

You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the files e-mailed directly to you.

<repository>
  <id>prime-repo</id>
  <name>PrimeFaces Maven Repository</name>
  <url>http://repository.primefaces.org</url>
</repository>

Add the dependency configuration as follows:

<dependency>
  <groupId>org.primefaces</groupId>
  <artifactId>primefaces</artifactId>
  <version>3.4</version>
</dependency>

At the time of writing this book, the latest and most stable version of PrimeFaces was 3.4. To check out whether this is the latest available or not, please visit http://primefaces.org/downloads.html. The code in this book will work properly with PrimeFaces 3.4. In prior versions or the future versions, some methods, attributes, or components' behaviors may change.

How to do it...

In order to use PrimeFaces components, we need to add the namespace declarations into our pages. The namespace for PrimeFaces components is as follows:

xmlns:p="http://primefaces.org/ui"  

For PrimeFaces Mobile, the namespace is as follows:

xmlns:p="http://primefaces.org/mobile"

That is all there is to it. Note that the p prefix is just a symbolic link and any other character can be used to define the PrimeFaces components. Now you can create your first page with a PrimeFaces component as shown in the following code snippet:

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">
    <f:view contentType="text/html">
        <h:head />
        <h:body>
            <h:form>
                <p:spinner />
            </h:form>
        </h:body>
    </f:view>
</html>

This will render a spinner component with an empty value as shown in the following screenshot:

A link to the working example for the given page is given at the end of this recipe.

How it works...

When the page is requested, the p:spinner component is rendered with the renderer implemented by the PrimeFaces library. Since the spinner component is a UI input component, the request-processing lifecycle will get executed when the user inputs data and performs a post back on the page.

Note

For the first page, we also needed to provide the contentType parameter for f:view, since the WebKit-based browsers, such as Google Chrome and Apple Safari, request the content type application/xhtml+xml by default. This would overcome unexpected layout and styling issues that might occur.

There's more...

PrimeFaces only requires Java 5+ runtime and a JSF 2.x implementation as mandatory dependencies. There are some optional libraries for certain features.

Dependency

Version

Type

Description

JSF runtime

2.0 or 2.1

Required

Apache MyFaces or Oracle Mojarra

iText

2.1.7

Optional

DataExporter (PDF)

Apache POI

3.7

Optional

DataExporter (Excel)

Rome

1.0

Optional

FeedReader

commons-fileupload

1.2.1

Optional

FileUpload

commons-io

1.4

Optional

FileUpload

Note

Please ensure that you have only one JAR file of PrimeFaces or specific PrimeFaces Theme in your classpath in order to avoid any issues regarding resource rendering.

Currently PrimeFaces supports the web browsers IE 7, 8, or 9, Safari, Firefox, Chrome, and Opera.

PrimeFaces Cookbook Showcase application

This recipe is available in the PrimeFaces Cookbook Showcase application on GitHub at https://github.com/ova2/primefaces-cookbook. You can find the details there for running the project. When the server is running, the showcase for the recipe is available at http://localhost:8080/primefaces-cookbook/views/chapter1/yourFirstPage.jsf.