DevelopAjaxJSF2App

Contents

Develop Ajax-based JSF2 applications with PrimeFaces using Netbeans 6.8

Introduction

At the time of writing the tutorial, http://wiki.netbeans.org/DevelopJavaEE6App, in Nov 2009, I had to use plain vanilla JSF2 because there weren't many choices of Ajax-based JSF components for JSF 2.0 as yet. ICEfaces 2.0 was still in its Alpha and the integration with Netbeans 6.8 was still unclear and not documented. So after completing that tutorial, I went around looking for an Ajax-based JSF component library that works with JSF 2.0. At the time of writing this tutorial (Dec 2009), there are a few options which I found:

I downloaded the libraries for the above components and attempted to work it out in Netbeans 6.8, but I faced some challenges with some of the implementations. They either don't work very well, not complete or are hard to integrate into the Netbeans IDE. In the end, I chose PrimeFaces because of the followings:

  1. Easy to integrate into Netbeans IDE
  2. Provides many Ajax-based UI components out-of-the-box
  3. Well documented with examples

So, in this document, I will focus on the integration issues with PrimeFaces and Netbeans 6.8 IDE and demonstrate the use of one of the commonly used component, dataTable from PrimeFaces. Please refer to the previous tutorial for creating the EJBs and Managed Bean, I will start from creating the CustomerList page in this document.

Preparing Netbeans to use PrimeFaces

Before we are able to use PrimeFaces components in our facelets in Netbeans, we need to include its library in Netbeans and setup a few things.

  1. Download the PrimeFaces library (primefaces-2.0.0.RC.jar) from http://www.primefaces.org/downloads.html and store it somewhere in the local disk
  2. To allow future projects to use PrimeFaces, I chose to create a Global library in Netbeans for PrimeFaces.

    1. Select "Tools->Libraries" from the Netbeans menu
    2. In the Library Manager dialog, choose "New Library" and provide a name for the library, e.g. "PrimeFaces2".
    3. With the new PrimeFaces2 library selected, click on the "Add JAR/Folder..." button and select the jar file that was downloaded earlier and click OK to complete

  3. Next, we need to add the newly created library, PrimeFaces2 to the Web project

    1. Select the Web project, CustomerApp-war, from the Project view, right-click and select "Properties"
    2. Under the Libraries category, click on the "Add Library..." button (on the right), and choose the PrimeFaces2 library and click OK to complete

  4. Because we will be using Facelets in our demo, we will update the XHTML template so that all the XHTML files created will already have the required namespaces and "resources" needed for development

    1. Choose "Tools->Templates" from the Netbeans menu
    2. In the Template Manager dialog, select "Web->XHTML" and click the "Open in Editor" button
    3. Edit the content of the file so that it looks like this
        <?xml version="1.0" encoding="${encoding}"?>
        <#assign licenseFirst = "<!--">
        <#assign licensePrefix = "">
        <#assign licenseLast = "-->">
        <#include "../Licenses/license-${project.license}.txt">
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml"
              xmlns:f="http://java.sun.com/jsf/core"
              xmlns:h="http://java.sun.com/jsf/html"
              xmlns:p="http://primefaces.prime.com.tr/ui">
            <h:head>
                <meta http-equiv="Content-Type" content="text/html; charset=${encoding}"/>
                <title>TODO supply a title</title>
                <p:resources />
            </h:head>
            <h:body>
                <p>
                    TODO write content
                </p>
            </h:body>
        </html>
5. Lastly, we need to add the following statements in the web.xml file of the Web project for PrimeFaces to work correctly
    <servlet-mapping>
        <servlet-name>Faces Servlet</servlet-name>
        <url-pattern>/faces/*</url-pattern>
        <url-pattern>*.jsf</url-pattern>
    </servlet-mapping>
    <servlet>
        <servlet-name>Resource Servlet</servlet-name>
        <servlet-class>
            org.primefaces.resource.ResourceServlet
        </servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>Resource Servlet</servlet-name>
        <url-pattern>/primefaces_resource/*</url-pattern>
    </servlet-mapping>
    <context-param>
        <param-name>com.sun.faces.allowTextChildren</param-name>
        <param-value>true</param-value>
    </context-param>
Up to this point, we are done setting up and configuring the environment for PrimeFaces to work in Netbeans. We will next create the Customer Listing and Details views

Creating the Customer Listing and Details views

In this section, we will be creating the Customer Listing view using facelets.

  1. In the project view, right-click on the project, CustomerApp-war and select "New->XHTML..."

    Note: if XHTML is not in the list, select "Other..." and then File Type, XHTML under the Web category.
  2. Specify a name for the new XHTML file, CustomerList. A new file with the extension, .xhtml will be created under the web directory. Edit the new file, CustomerList.xhtml so that it looks like the followings:
    <html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.prime.com.tr/ui">
    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>Customer Listing</title>
        <p:resources />
    </h:head>
    <h:body>
        <h:form>
            <h1><h:outputText value="Customer Listing"/></h1>
        <p:dataTable var="item" value="#{customer.customers}" id="customerList"
                     paginator="true" rows="10">
            <p:column>
                <f:facet name="header">
                    <h:outputText value="Customer ID" />
                </f:facet>
                <h:commandLink action="#{customer.showDetails(item)}" value="#{item.customerId}"/>
            </p:column>
            <p:column>
                <f:facet name="header">
                    <h:outputText value="Name"/>
                </f:facet>
                <h:outputText value="#{item.name}"/>
            </p:column>
            <p:column>
                <f:facet name="header">
                    <h:outputText value="CreditLimit"/>
                </f:facet>
                <h:outputText value="#{item.creditLimit}"/>
            </p:column>
            <p:column>
                <f:facet name="header">
                    <h:outputText value="Discount %"/>
                </f:facet>
                <h:outputText value="#{item.discountCode.rate}"/>
            </p:column>
            <p:column>
                <f:facet name="header">
                    <h:outputText value="State"/>
                </f:facet>
                <h:outputText value="#{item.state}"/>
            </p:column>
            <p:column>
                <f:facet name="header">
                    <h:outputText value="City"/>
                </f:facet>
                <h:outputText value="#{item.city}"/>
            </p:column>
            <p:column>
                <f:facet name="header">
                    <h:outputText value="Zip"/>
                </f:facet>
                <h:outputText value="#{item.zip}"/>
            </p:column>
            <p:column>
                <f:facet name="header">
                    <h:outputText value="Phone"/>
                </f:facet>
                <h:outputText value="#{item.phone}"/>
            </p:column>
            <p:column>
                <f:facet name="header">
                    <h:outputText value="Email"/>
                </f:facet>
                <h:outputText value="#{item.email}"/>
            </p:column>
        </p:dataTable>
        </h:form>
    </h:body>
    </html>
Notice the above contents looks very similar to that of the CustomerList.jsp created in the previous tutorial, except that now it uses PrimeFaces components, <p:dataTable ...>, <p:column>, ...
3. Create another view for the Customer Details, CustomerDetails.xhtml, and edit the content to look like this:
    <html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.prime.com.tr/ui">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>Customer Details</title>
        <p:resources />
    </head>
    <body>
        <h1><h:outputText value="Customer Details"/></h1>
        <h:form>
            <h:panelGrid columns="2" bgcolor="#eff5fa">
                <h:outputLabel value="Customer ID:"/>
                <h:inputText id="customerId" value="#{customer.details.customerId}" disabled="true"/>
                <h:outputLabel value="Customer Name:"/>
                <h:inputText id="customerName" value="#{customer.details.name}"/>
                <h:outputLabel value="Credit Limit:"/>
                <h:inputText id="creditLimit" value="#{customer.details.creditLimit}"/>
                <h:outputLabel value="Discount Code"/>
                <h:selectOneMenu id="discountCode" value="#{customer.details.discount}">
                    <f:selectItems value="#{customer.discountCodes}"/>
                </h:selectOneMenu>
                <h:outputLabel value="Email:"/>
                <h:inputText id="email" value="#{customer.details.email}"/>
                <h:outputLabel value="Phone:"/>
                <h:inputText id="phone" value="#{customer.details.phone}"/>
                <h:outputLabel value="Fax:"/>
                <h:inputText id="fax" value="#{customer.details.fax}"/>
                <h:outputLabel value="Address (Line 1):"/>
                <h:inputText id="address1" value="#{customer.details.addressline1}"/>
                <h:outputLabel value="Address (Line 2):"/>
                <h:inputText id="address2" value="#{customer.details.addressline2}"/>
                <h:outputLabel value="State:"/>
                <h:inputText id="state" value="#{customer.details.state}"/>
                <h:outputLabel value="City:"/>
                <h:inputText id="city" value="#{customer.details.city}"/>
                <h:outputLabel value="Zip:"/>
                <h:inputText id="zip" value="#{customer.details.zip}"/>
            </h:panelGrid>
        </h:form>
    </body>
    </html>
Note: for the purpose of this demonstration, which is focused on the PrimeFaces integration, I have not included the implementation for the Update and Delete functions.
4. Now that we have the pages, we need to define the flow from the Listing to the Details. Navigate to the faces-config.xml file in the Web project and open it in the editor. Connect the 2 pages as shown in the diagram below:

File:4-4-PageFlow.png
Recall the code in the CustomerMBean that helps to achieve this:
    /**
     * Action handler - user selects a customer record from the list
     * (data table) to view/edit
     * @param customer
     * @return outcome string 
     */
    public String showDetails(Customer customer)
    {
        this.customer = customer;
        return "DETAILS";
    }
5. At this point, we are ready to see the results of our work. In the project view, from the CustomerApp project, right-click and select "Clean and Build", and after making sure that there are no errors, right-click and select "Deploy".
6. Open a browser and go to the URL, http://localhost:8080/CustomerApp-war/CustomerList.jsf, and you should see a screen similar to this one below:

Verify that the navigation works by clicking on the Customer ID hyperlinks which will bring you to the Customer Details page

Summary

Finally, with the help of PrimeFaces components, Ajax-based JSF2 application is made possible and easy in Netbeans 6.8. But it is a matter time, when the others will provide their component libraries that complies with JSF2.0 and are easy to integrate with Netbeans 6.8. Until then, it is PrimeFaces that I will be dependent upon to create my JSF2 applications. There are many more very cool UI components that can be used, see the demo here, http://www.primefaces.org:8080/prime-showcase/ui/home.jsf.

Hope this help those who are in need of an Ajax-based framework for their JSF2 applications.

--Christopherlam 09:34, 21 December 2009 (UTC)

See Also

For other related resources, see the followings:

Not logged in. Log in, Register

By use of this website, you agree to the NetBeans Policies and Terms of Use. © 2012, Oracle Corporation and/or its affiliates. Sponsored by Oracle logo