PrimeFaces Blueprints

By Sudheer Jonna , Ramkumar Pillai
  • Instant online access to over 8,000+ books and videos
  • Constantly updated with 100+ new titles each month
  • Breadth and depth in over 1,000+ technologies
  1. Creating a "Hello World" Application

About this book

Through this book, you will gain practical experience in building web applications for a variety of business models. Starting with a basic application that will help you get acquainted with UI application development using PrimeFaces, you will learn about the significance of Ajax components. You will then be introduced to code compilation and generation in PrimeFaces. Following our first application, you will learn how to develop an employee registration application utilizing the form components of PrimeFaces. You will then learn how to use the layout and grouping components demonstrated through a POS application.

Finally, you will discover how to build rich and interactive applications such as an online shopping cart, a movie portal, an e-commerce application, a news portal, an online chat messenger, and also a healthcare products application, each illustrating the intuitive components offered by PrimeFaces.

Publication date:
August 2014
Publisher
Packt
Pages
310
ISBN
9781783983223

 

Chapter 1. Creating a "Hello World" Application

This chapter will show you how to create your own "Hello World" application in order to give you a head start with the application development for PrimeFaces. This chapter will provide you with a brief introduction to its features and its role in web applications, with a step-by-step setup and configuration. Most importantly, it will give you an insight into how Ajaxified components change the old development trend. We will also learn how to make application development easier with code completion, IDE support, and the code generator tool used for creating the CRUD web application. The specific topics that will be covered in this chapter are as follows:

  • An introduction to PrimeFaces, its features, and its role in customized application development

  • PrimeFaces setup and configuration for development

  • How to quickly develop a project: a "Hello World" application, in this case

  • How to change the old trend of development using Ajaxified components

  • How to use code completion, NetBeans bundles PrimeFaces, and the code generator tool

 

An introduction to JavaServer Faces and PrimeFaces


JavaServer Faces (JSF) is a component-based MVC framework used for building rich User Interface (UI) Java web applications. JSF is a powerful framework with a six-phase lifecycle, and it will automate the common web application tasks such as decoding the user input, processing the input validations and conversions, and rendering or updating the output in the form of generated HTML. Page authors can easily build a customized UI by just dragging-and-dropping the reusable components on the page that provide a rich look and feel to modern UI applications. JSF has built-in support for input conversions and validations, and Ajax support for the components.

Going by the growing popularity of JSF technology, many open source and proprietary UI component frameworks were created to have user interfaces with a fancier look and feel. These component suites were created by introducing their own new components and extending the standard JSF components with additional features. Among all these component suites, PrimeFaces is the best and most popular component suite considering its features, quick releases with more new components and bug fixes, ease of development, extensive documentation, and support from its community.

PrimeFaces is a leading, lightweight, open source user interface component library for JSF-based web applications. In the JSF world, it is miles ahead of the other existing component sets because of the many features it has at its disposal:

  • Over 100 sets of components

  • Built-in Ajax-supported components

  • Ease of development, as there are no configurations required

  • A single jar install without the need for any mandatory third-party libraries

  • More than 30 predefined themes and custom themes by using the ThemeRoller support

  • Multibrowser support

It is so well designed that it is important to consider its importance when developing web applications. Page authors and application developers can easily develop web pages by simply dragging-and-dropping the components of the webpage and then adding the required features in a step-by-step fashion: customizing the CSS style classes, extending the component widgets, and rendering according to the custom requirements.

 

Setting up and configuring PrimeFaces


PrimeFaces is a lightweight single library with minimal external libraries. The only external libraries required are those with component-specific features. Apart from these component-specific features, projects only require JSF runtime implementations such as Oracle Mojarra or Apache MyFaces.

The setup and configuration for Maven and non-Maven users is explained in the following two sections.

Setting up and configuring using Maven

In this section, we will define the various Maven configuration steps required to run a PrimeFaces-based application. Perform the following steps:

  1. Configure the PrimeFaces library dependency or Maven coordinates in your project pom.xml file as shown here:

               <dependency>
                     <groupId>org.primefaces</groupId>
                     <artifactId>primefaces</artifactId>
                     <version>5.0</version>
               </dependency>
  2. Add the PrimeFaces repository to the repositories list of your project pom.xml file as follows:

               <repository>
                     <id>prime-repo</id>
                     <name>Prime Repo</name>
                     <url>http://repository.primefaces.org</url>
               </repository>

    Note

    Note that this step is not required for releases after PrimeFaces 4.0. The team started adding its library in the Maven central repository.

  3. Configure either of the JSF runtime implementations, Oracle Mojarra or Apache MyFaces. Choose either of the following two blocks of code:

    • This is the runtime implementation for Oracle Mojarra:

      <dependency>
          <groupId>com.sun.faces</groupId>
          <artifactId>jsf-impl</artifactId>
          <version>2.2.6</version>6
      </dependency>
    • This is the runtime implementation for Apache MyFaces:

      <dependency>
          <groupId>org.apache.myfaces.core</groupId>
          <artifactId>myfaces-impl</artifactId>
          <version>2.2</version>
      </dependency>

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.

Depending on the component-specific features, you can use the following mandatory and optional dependencies. Here is a list of dependencies categorized into mandatory and optional. The following are the mandatory dependencies:

Dependencies

Version

Description

JSF runtime

2.0, 2.1, and 2.2

Oracle's Mojarra or Apache MyFaces implementation

PrimeFaces

5.0

The PrimeFaces UI component library

The following are the optional dependencies:

Dependencies

Version

Description

iText

2.7

To use the DataExporter component for PDF format

POI

3.7

To use the DataExporter component for Excel format

Rome

1.0

To use the Feed reader component

commons-fileupload

1.3

To use the fileupload component (when web server / application server doesn't support servlet 3.0)

commons-io

2.2

To use the fileupload component

Setting up and configuring for non-Maven (or Ant) users

In this section, we will define the various non-Maven (or Ant) configurations required to run a PrimeFaces-based application. Perform the following steps:

  1. Download the PrimeFaces library from the official download section of PrimeFaces at http://www.primefaces.org/downloads.html.

  2. Following this, add the PrimeFaces JAR library to the classpath.

  3. You should then download either the JSF library runtimes from Oracle's Mojarra or those from Apache MyFaces from their official sites and add them to the classpath. You can access the JSF library at Oracle by going to https://javaserverfaces.java.net/2.2/download.html or alternatively access it at Apache by going to http://myfaces.apache.org/download.html.

  4. After this, you should download the component-specific third-party libraries from their official site and add them to the classpath.

Application-level configuration

As you know, PrimeFaces is a JSF-based component suite. Therefore, the first thing you have to do is configure the JSF Faces Servlet in your project deployment descriptor file (web.xml). The following is a mandatory configuration for any JSF-based application:

<servlet>
  <servlet-name>Faces Servlet</servlet-name>
  <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
  <load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
  <servlet-name>Faces Servlet</servlet-name>
  <url-pattern>/faces/*</url-pattern>
</servlet-mapping>
<servlet-mapping>
  <servlet-name>Faces Servlet</servlet-name>
  <url-pattern>*.jsf</url-pattern>
</servlet-mapping>
<servlet-mapping>
  <servlet-name>Faces Servlet</servlet-name>
  <url-pattern>*.faces</url-pattern>
</servlet-mapping>
<servlet-mapping>
  <servlet-name>Faces Servlet</servlet-name>
  <url-pattern>*.xhtml</url-pattern>
</servlet-mapping>

Tip

It is not mandatory to use all of the JSF extensions or servlet mappings. Any of the preceding servlet mappings is enough to configure Faces Servlet to your project.

There are other configurations that can be made to your project. These are shown in the following table:

Context parameter name

Default value

Description

THEME

Aristo

Used to apply a specific theme to your application. All theme names are valid values.

SUBMIT

Full

Enables the Ajax submit mode. The valid values are full and partial.

DIR

Ltr

Defines the component content orientation. The valid values are ltr and rtl.

RESET_VALUES

False

When this is enabled, any Ajax-updated inputs are reset first. The valid values are true and false.

SECRET

PrimeFaces

Defines the secret key to encrypt-decrypt the value of the expressions that are exposed in rendering StreamedContents.

CLIENT_SIDE_ VALIDATION

False

Controls client-side validations to the form components.

UPLOADER

Auto

Defines the fileuploader mode. The valid values are auto, native, and commons.

As an example, the following code snippet configures a theme with context-param:

<context-param>
         <param-name>primefaces.THEME</param-name>
         <param-value>delta</param-value>
</context-param>

Checking the JSF runtime compatibility

PrimeFaces 5.0 supports all the JSF runtime versions: 2.0, 2.1, and 2.2 at the same time using feature detection without having to compile a dependency to any specific version. In other words, some of the features that are available are based on the runtime version used. The newly released JSF 2.2 version supports more popular HTML5.

The runtime detection policy for PrimeFaces is quite useful for the newly added features in JSF library. The JSF 2.2 passthrough attribute's feature is a good example of the runtime detection policy. That is, the passthrough attribute only gets rendered if the runtime is JSF 2.2.

An introduction to the autofocus and pattern HTML5 attributes' integration with PrimeFaces can be seen in the following example:

<!DOCTYPE html>
<html xmlns="http://www.w3c.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:pt="http://xmlns.jcp.org/jsf/passthrough">
   <h:head>
   </h:head>
      <h:body>
        <h:form>
           <p:inputText value="#{bean.value}" pt:autofocus="autofocus" pt:pattern= "[A-Za-z]"/>
        </h:form>
      </h:body>
</html>
 

Developing your first PrimeFaces application


In the previous section, you have learned how to set up and configure PrimeFaces for JSF-based web applications. To start using its components in your web project, you have to add the following namespace at the top of the namespace section:

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

Once you have successfully completed the setup and configuration for PrimeFaces, you will be shown how to develop a simple "Hello World" application by simply following these steps:

  1. The first step is to create a simple helloworld.xhml page. This will display the "Hello World" message from the PrimeFaces Panel component. You will be able to display this message using the following section of code:

    <!DOCTYPE html>
    <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>
        <title>Primefaces Hello World page</title>
      </h:head>
      <h:body>
         <h:form>
             <p:panel  header="Hello" footer="Blueprints world"style="width:300px;margin-left:40%;margin-top:15%">
               Welcome to Primefaces  
             </p:panel>
         </h:form>
      </h:body>
    </f:view>
    </html>
  2. Following this, package the application somewhere in the target directory (by default) and then run the application with the help of the following Maven commands:

    mvn clean package
    mvn jetty:run
    

    or:

    mvn tomcat:run
    
  3. After this, go to the browser address bar and access the "Hello World" application by navigating to http://localhost:8080/chapter01/views/helloworld.jsf.

  4. You should now be able to see the Hello World message with the help of the panel component in the web page. This can be seen in the following screenshot:

 

Change the old trend of development with Ajaxified components


One of the design goals of the PrimeFaces component suite is to simplify the web development by using Ajaxified components. The Partial Processing and Partial Page Rendering features play a major role in creating a powerful AJAX framework.

Learning Partial Processing

PrimeFaces provides the Partial Processing feature in order to execute the JSF lifecycle phases required for the specified components with the help of a process attribute. Here, you can only process the required components instead of the entire web page, which are called lightweight requests. This occurs quite commonly, such as when creating the PrimeFaces web pages. This is done with the help of registration form fields, which include a certain group of validation results that validate the different components depending on the executed action. However, you can avoid unnecessary validations for other components and prevent validation errors on the submission of the form. The process attribute is not only used to process the specific components but also to process the specific regions with the help of the @this,@form, @parent, @none, and @all expressions. You can also combine the components with these simple expressions at the same time using a comma separator (,).

The most common scenario is the dependent drop-down input values along with the other required components of the same page. This feature can be explained with an example.

In the case of submitting the order details, you can see one or more dependent relationships. In this example, a list of products depends on the selected category and the list of orders depends on the selected product. Firstly, you have to select the category and then based on this category, select the product. After choosing the product, you then select one order from the list of populated orders. You should also assume that this registration form contains other required form fields such as a calendar and the inputText components. The preceding use case scenario is represented in the following code snippet:

<h:outputText value="Category: " />
<p:selectOneMenu id="categories" value="#{ppController.category}">
<f:selectItems value="#{ppController.categories}" />
<p:ajax listener="#{ppController.updateProducts}" event="change" update="products" process="@this"/>
</p:selectOneMenu>

<h:outputText value="Product: " />
<p:selectOneMenu id="products" value="#{ppController.product}">
<f:selectItems value="#{ppController.products}" />
<p:ajax listener="#{ppController.updateOrders}" event="change" update="orders" process="@this"/>
</p:selectOneMenu>

<h:outputText value="Order: " />
<p:selectOneMenu id="orders" value="#{ppController.order}">
<f:selectItems value="#{ppController.orders}" />
</p:selectOneMenu>

<h:outputText value="Number of Orders: " />
<p:inputText value="#{ppController.ordersCount}" id="ordercount" /> 
  required="true" />

<h:outputText value="Date of Order: " />
<p:calendar value="#{ppController.selectdate}" id="selectdate" /> 
  required="true" />

You can clearly see that without using the Partial Processing feature, validation errors might occur on the number of orders of the input field and the date of the order calendar components.

Partial Page Rendering

PrimeFaces provides the Partial Page Rendering (PPR) feature to update certain specified components instead of the whole page with the help of the update attribute. You will be able to see the updated output without refreshing the page. The update attribute accepts both components and simple expressions such as @this, @form, @parent, @none, and @all. As before, you can use the comma-separated list of components and expressions at the same time to update the value.

The following code updates the welcome message from one container to another container:

<h:form id="loginform">
    <h:outputText value="Enter username"/>
    <p:inputText value="#{pprController.username}"action="#{pprController.updateOutput}" value="Update" >
    <p:ajax event="change" update=":welcomeform:message"  />
    </p:inputText>
</h:form>
<h:form id="welcomeform">
    <h:outputText id="message" value="#{pprController.message}"/>
</h:form>
public String updateOutput() {
    message = "Hello!!! welcome to PrimeFaces BluePrints";
    return null;
}

Remember that you have to include the full absolute client path when the target component resides in a different container.

Partial submit

Even though the Partial Processing feature creates lightweight requests, the entire form's data is sent to the server during the Ajax post requests, just like any other non-Ajax request. The JSF core implementation, with PrimeFaces, serializes all of the form fields instead of the partially-processed components. This becomes a drawback for the larger views, which contain a large number of components.

The Partial submit feature can be used to reduce the network traffic for larger views; this posts only the partially-processed form data to the server. Before introducing the Partial submit feature, all of the form data was sent to the server, but this meant that any information of the unprocessed components was ignored on the server-side.

By default, the Partial submit feature is disabled, but you can enable it to make it global using the following configuration:

<context-param>
    <param-name>primefaces.SUBMIT</param-name>
    <param-value>partial</param-value>
</context-param>

The command action components such as commandButton and commandLink, and ajaxbehavior components such as p:ajax equipped with the partialsubmit property which overrides the global configuration for each component base:

<p:commandButton value="Submit" partialSubmit="true" />
<p:commandLink  partialSubmit="true" />
<p:ajax partialSubmit="true" />

PrimeFaces polling

PrimeFaces introduced one more Ajax component that makes periodical Ajax requests to the servers. This component is quite useful when you need to populate server information on the frontend at regular intervals, and the most common example is updating the server time at regular intervals for the frontend web pages. The following code snippet shows how to update the system time at a regular period of time:

<h:form id="form">      
    <p:poll interval="2" listener="#{pollingController.updateTime}" update="servertime" />
    <h:outputText id="servertime" value="#{pollingController.systemTime}" />    
</h:form>

The poll component behavior is handled with the help of the interval, autoStart, and stop attributes along with the client-side API functions.

 

PrimeFaces code completion, NetBeans bundles PrimeFaces, and the code generation tool


You can use any of your favorite Integrated Development Environment (IDE) tools for the development of web pages. Popular IDEs such as Eclipse and NetBeans support code completion for quick UI development.

Eclipse code completion

Firstly, you need to have the JSF facet enabled in order to work with IDE code completion. The following steps will need to be performed in order for the PrimeFaces code completion to be used with the Eclipse IDE:

  1. The first thing you need to do is enable the JSF facet by checking the JavaServer Faces facet under Project Facets.

  2. Go to Properties | Project | Facets and select the JavaServer Faces checkbox. This can be seen in the following screenshot:

  3. If the wizard tells you that further configurations are required, then you have to download or manage the JSF libraries in order to support the code completion feature.

  4. Otherwise, the final step in order for the code completion to work with JSF and PrimeFaces tags is just using Ctrl + spacebar on your keyboard. What you should now see is presented in the following screenshot:

NetBeans code completion

NetBeans versions 6.9 and above support the PrimeFaces code completion feature without requiring any configuration. The following screenshot represents all the available properties of the accordionPanel component using the code completion feature:

NetBeans bundles PrimeFaces

NetBeans versions 7.0 and above provide built-in support for the PrimeFaces component suite. When creating a new project, you have to select the JSF framework from the list of all Frameworks and then select the PrimeFaces component suite from the Components tab, as shown in the following screenshot:

The code generation tool

The NetBeans IDE provides a developer-friendly environment for Java developers, especially for JSF development, which has many cool features. This tool is a forked version of the JSF pages from the entity class wizard, but the difference is that it creates PrimeFaces pages with a page layout, menus, and dialog boxes. You can easily generate the entire CRUD web application just by selecting the entity classes.

Remember that NetBeans 8.0 provides the code generation tool within the IDE itself. It is not necessary to install the plugin in this version.

You should follow these steps in order to work with the PrimeFaces code generation tool:

  1. Firstly, download the latest version of the nbpfcrudgen-x.x-y.y.yimpl.zip plugin file and unzip the package that contains the .nbm file. You can access this by visiting http://sourceforge.net/projects/nbpfcrudgen/files/.

  2. Then launch your latest NetBeans IDE and install any updates by navigating to Help | CheckUpdates from the menu.

  3. Following this step, go to Tools | Plugins. Click on the Downloaded tab and then click on the Add Plugins button.

  4. Browse to the location where you downloaded the NBM file and select the file that makes the module appear in the list of downloaded modules.

  5. Click on the Install button. The NetBeans IDE Installer will now display the summary of the modules that are ready to be installed. Click on Next and accept the license agreement.

    Note

    At the time of this writing, there were no licenses attached to the module, but the tool is released under both CDDL and GPL licenses.

  6. At the time of writing this, the tool is not signed and NetBeans warns you about the security. Click on the Continue button to proceed with the installation steps. If you are not ready to use the unsigned code, then click on the Cancel button as you can choose to wait for a signed, updated version.

  7. NetBeans will complete the installation process. If the IDE version doesn't match the module implementation, then the installation process will be aborted.

  8. Finally, the module is installed and it will display the module name under the Installation tab as PrimeFaces CRUD generator.

Generating a CRUD application

The following steps are used to create any PrimeFaces project in the NetBeans IDE:

  1. If you are using the latest version of NetBeans, then please make sure you add the latest version of PrimeFaces instead of an older, bundled version. You can add the latest version of PrimeFaces (PrimeFaces 5.0 at the time of writing this) by navigating to Tools | Ant | Libraries.

  2. Navigate to File | New | Project. Choose the Java Web option from Categories and the Web application option from Projects.

  3. Then create a new project, name it, and choose the project location.

  4. After this, configure the server settings that require J2EE version and frameworks.

  5. Finally, you should choose the Component tab to select the latest PrimeFaces version and click on Finish to create the project.

Adding entities and generating PrimeFaces pages

In this section, we will provide a step-by-step approach to generate the PrimeFaces pages from the added entities:

  1. Navigate to File | New File from the menu. Choose the Persistence option from Categories and the Entity Classes from Database option from File Types.

  2. Then you can configure the database tables, entity classes, and mapping options to generate the corresponding entities for the database.

  3. Following this, navigate to File | New File from the menu. Choose the PrimeFaces CRUD Generator option from Categories and the PrimeFaces Pages from Entity Classes option from File Types.

  4. Finally, you can configure it to generate the PrimeFaces pages and class files. Click on Finish to complete the code generation process.

If you have followed all the preceding steps correctly, then you are ready to run the application with a built-in Glassfish server. Click on the Run button in order to check the generated pages. You can have a look at some sample pages generated using the code generation tool in the following subsections.

Display page layout, dataTable list, and menu features

You can see that the page layout, dataTable list, and menu features are created by default:

The dataTable create operation using the dialog component

You can create the dataTable record from the dialog component by providing the details as follows. This is shown in the following screenshot:

The dataTable update operation using the dialog component

You can update the dataTable record details using the dialog component as follows:

The dataTable read or view operation using the dialog component

You can view a particular dataTable record's details using the dialog component as follows:

 

Summary


In this chapter, you have been introduced to the PrimeFaces component suite, its features, and its role in developing custom applications. You have also learned about the setup and configuration for the PrimeFaces library by creating a simple "Hello World" application by using the panel components, changing the old development trend with Ajaxified components, using the PrimeFaces code completion technique, making use of NetBeans support, and using the code generator tool.

In the next chapter, you will be shown the form components of the PrimeFaces library along with how to create a customized web application that allows you to make an employee registration form.

About the Authors

  • Sudheer Jonna

    Sudheer Jonna was born in Nellore, India. Currently, he works as a senior software engineer in Singapore. He completed his master's degree in computer applications from JNTU University. In the past few years, he has worked on building various Java and JavaScript web applications based on JSF, PrimeFaces, Struts, Spring, REST, jQuery, Angular, React, and VueJS. He has also worked on many JavaEE and API development technologies, such as JPA (Hibernate), EJB, GraphQL, and Sequelize.

    He is the founder of GeekoTek company and is a longtime JSF and Prime products expert. He is also a project member of the PrimeFaces, PrimeFaces Extensions, and PrimeNG open source projects. He is the author of three other Packt books, titled Learning PrimeFaces Extension Development, PrimeFaces BluePrints, and PrimeFaces Theme Development. He has worked as a technical reviewer on a few books. He is a regular speaker, trainer, reviewer, blogger, organizer, and active member of public forums. He is interested in R&D on the latest technologies.

    He shares his knowledge through his personal website. You can follow him on Twitter with the handle @SudheerJonna.

    Browse publications by this author
  • Ramkumar Pillai

    Ramkumar Pillai is the leading authority on latest global technical trends and a proficient technical architect of the Java J2EE technology. He has been employed by major software companies across the globe, and he currently works as a senior consultant in advanced web technology.

    He can be described as a smart professional with significant IT experience in technical architecture and project management on leading Java technology stacks. He has received acclaim for his contributions to PrimeFaces, Grails and Groovy, and Play Frameworks all through his career in the form of deliverables, documentation, or presentations. He was also a co-speaker at the conference on the latest trends in the web technology stack at Dallas, Texas, in September 2012.

    When he is not working, he creates web designs and illustrations for retail marketing portals and blogs about almost anything, be it Big Data or his favorite Bonsai culture.

    He has also been a lead consultant for companies such as Triadic Technologies and Smarterscart. He is the kind of person who believes "good is the enemy of great", and he is currently working on a few research and development projects that are not related to his favorite subject, Java.

    Browse publications by this author
Book Title
Access this book and the full library for just $5/m.
Access now