JSF 2.0, JPA, GlassFish and MySQL

JSF 2.0, JPA, GlassFish and MySQL

This Pet Catalog app explains a web application that
uses JSF 2.0, JPA, GlassFish and MySQL. I took this example  GlassFish
and MySQL, Part 2: Building a CRUD Web Application With Data Persistence
and modified it to use some of the new features JSF 2.0. 

• Download
  the sample code

Explanation of the usage of JSF 2.0, Java Persistence
APIs, Glassfish and MySQL in a sample Store Catalog Application

The image below shows the Catalog Listing page, which allows a user to
page through a list of items
in a store.

JSF 2.0 Facelets XHTML instead of JSP

For JSF 2.0, Facelets XHTML is the preferred way to declare JSF Web
Pages. JSP is supported for backwards compatibility, but not all JSF
2.0 features will be available for views using JSP as their page
declaration language.  JSF 2.0 Facelets has some nice features
like templating (similar in functionality to Tiles) and composite
components, which I'm not going to discuss here but you can read about
that in this article: http://www.ibm.com/developerworks/java/library/j-jsf2fu2/index.html
and in this Tech Tip Composite
UI Components in JSF 2.0.

The Catalog application's resources

JSF 2.0 standardizes how to define web resources. Resources are any
artifacts that a component may need in order to be rendered properly --
images, CSS, or JavaScript files.  With JSF 2.0 you put resources
in a resources
directory or a subdirectory.

In your Facelets pages, you can access css files with the  ,  javascript files with the
, and images with the JSF tags. The list.xhtml uses the  <h:outputStylesheet tag to load the styles.css stylesheet , and the <h:graphicImage tag to display images from the resources as
shown below:

 <h:outputStylesheet name="css/styles.css" target="body"/>

      

      <h:graphicImage library="images" name="banner_logo.gif"  />    

The Catalog application uses a resource bundle to contain the static
text and
error messages used by the Facelets pages. Putting messages in a
resource bundle makes it easier to modify and internationalize your
Application text.  The messages are in a properties file in a java
package directory.

The resource bundle is configured in the faces-config.xml File (you don't need any other
configuration in the faces-config.xml for JSF 2.0, as explained later
you no longer have to configure managed beans and navigation with XML).

The List.xhtml facelets page uses a JSF dataTable
component to display a list of
catalog items in an html table.  The dataTable component is useful when you want to show a set of
results in a table. In a JavaServer Faces application, the UIData
component
(the superclass of dataTable)  supports binding to a collection of
data objects. It does the
work of iterating over each record in the data source. The HTML dataTable
renderer
displays the data as an HTML table.

In the list.xhtml web page the dataTable is defined as shown
below: 
(Note: Red
colors
are for Java EE
tags, annotations code, 
and Green
is
for my code
or variables)

<h:dataTable value='#{catalog.items}' var='row'
border="1"

      cellpadding="2" cellspacing="0">

The value attribute of a dataTable
tag references the data to be included
in the table. The var
attribute specifies a
name that is used by the components within the dataTable
tag as an alias to the data referenced in the value
attribute of dataTable.  In the dataTable
tag from the List.jsp
page, the value attribute points to a list
of catalog items. The var
attribute points
to a single item in that list. As the dataTable
component iterates through the list, each reference to dataTableItem

 points to the current item in the
list.





 JSF 2.0 Annotations instead of XML configuration


The dataTable's value

      

      @ManagedBean

      @SessionScoped

public class Catalog
implements Serializable { 

      

      

By convention, the name of a managed bean is the same as the class
name, with the first letter of the class name in lowercase. To specify
a managed bean name you can use the name attribute of the ManagedBean
annotation, like this: @ManagedBean(name = "Catalog").

This Catalog ManagedBean items
property is defined as shown below:

The getItems()
method wraps a List of item objects in a DataModel.
UIData,
the superclass of dataTable,
supports data binding to a
collection of data objects represented by a DataModel
instance.  The data
collection underlying a DataModel instance is modeled as a collection
of row objects that can be accessed by a row index.  The APIs
provide mechanisms to position to a specified row index, and to
retrieve an object that represents the data that corresponds to the
current row index.   

The Item
properties Name, Photo, and price  are
displayed with the column
component:

<h:dataTable var="row" value="#{catalog.items}">

  <h:column>

      <f:facet name="header">

          <h:outputText value="#{msgs.Name}"/>

      </f:facet>

      <h:outputText value="#{row.name}"/>

 
</h:column>

  

  <h:column>

      <f:facet name="header">

          <h:outputText value="#{msgs.Photo}"/>

      </f:facet>

      

 
</h:column>

  <h:column>

      <f:facet name="header">

          <h:outputText value="#{msgs.Price}"/>

      </f:facet>

      <h:outputText value="#{row.price}"/>

 
</h:column>

      </h:dataTable>



      

The column
tags represent columns of data in a UIData
component. While
the UIData component is iterating over the rows of data, it processes
the UIColumn component associated with each column tag for each row in
the table.

The UIData component  iterates through the list
of items
(catalog.items) 
and displays the row.price.
Each
time UIData iterates through the list of items, it renders one cell in
each column.

The dataTable and column tags use facet
to represent parts of the
table that are not repeated or updated. These include headers,
footers,
and captions.

Using the Java Persistence API (JPA) with JSF

The

Catalog

@ManagedBean

      @SessionScoped

public class Catalog
implements Serializable {

    

    @PersistenceUnit(unitName
= "catalogPU")

    private EntityManagerFactory
      emf;

      

    private EntityManager getEntityManager() {

        return
emf.createEntityManager();

    }

      

    public List<Item>  getNextItems(int
maxResults, int firstResult) {  

       EntityManager em =
getEntityManager();

       try {     

         Query q = em.createQuery("select
object(o)
from Item as o");

         q.setMaxResults(maxResults);

         q.setFirstResult(firstResult);

         return
q.getResultList();

        } finally {

           
em.close();

       
}       

   }

    

      

The Java Persistence Query
APIs are used to create and execute queries that can return a
list of results.  The JPA Query interface provides
support for pagination via the setFirstResult() and setMaxResults()
methods: q.setMaxResults(int maxResult)
sets the maximum number of results to retrieve. q.setFirstResult(int startPosition)
sets the position of the first result to retrieve.

In the code below, we show the Item
entity class which maps to the  ITEM table that stores the
item instances. This is a
typical Java Persistence entity object. There are two requirements for
an entity:

1. annotating the class with an @Entity
   annotation.
   
2. annotating   the primary key identifier with @Id
   

Because the fields name, description.... are basic mappings from the
object fields to columns of the same name in the database table, they
don't have to be annotated.  The O/R  relationships with Address
and Product
are also annotated. For more information on
defining JPA entities see Pro
EJB 3: Java Persistence API book.

      @Entity

public class Item
implements java.io.Serializable {

      

    

   

    private Integer id;

    private String name;    

    private String description;    

    private String imageurl;    

    private String imagethumburl;  

    private BigDecimal price;

    @ManyToOne 

    private Address
address;

      

    @ManyToOne

    private Product
product;

     

    public Item() { }

     

    public String getName() {

       
return name;

    }

    public void setName(String name) {

       
this.name = name;

    }

    ... 

}    

      

      

The Catalog
ManagedBean pages through the list of Items
by
maintaining the PagingInfo.firstItem and PagingInfo.batchSize
attributes and passing these as
parameters to the  getNextItems(firstItem,
batchSize) method.
The catalog's
scope  is
defined with the annotation @SessionScoped,
a JSF Managedbean
with session scope will be stored in the session meaning that the
bean's properties will stay alive for the life of the Http Session.

A JSF commandButton
is  used to provide a button to click on to
display the next page of items.  The commandButton
tag is used to submit an action event
to the application. 

       <h:commandButton
      action="#{catalog.next}"
value="#{msgs.Next}" />   

      

This

commandButton action

   public String next() {

       if (firstItem + batchSize
< itemCount()) {

          
firstItem += batchSize;

       }

       return "list";

   } 

      

JSF 2.0 Simplified Navigation

The JavaServer Faces 2.0  NavigationHandler
convention adds .xhtml to the logical outcome of the action method (in
this example list)
and
loads that file, in this case, it loads the list.xhtml
page after this method returns. If the action doesn't begin with a
forward slash (/), JSF assumes that it's a relative path.  You can
specify an absolute path by adding the slash like this "/items/list".

A JSF commandLink
is  used to provide a link to click on to
display a page with the item details. This 

commandLink
action

   <h:column>

       <f:facet name="header">

          <h:outputText
value="Name"/>

       </f:facet>

       <h:commandLink action="#{catalog.getDetail}"
value="#{row.name}"/>   

   </h:column> 

      

The catalog
getDetail()
method  gets the item
data from the
current row of the dataModel,
and returns a string which causes the detail.xhtml
page to display
the item details :

    public String getDetail()
{

        item = (Item) model.getRowData();

        return "detail";

    }

      

The JavaServer Faces NavigationHandler
adds .xhtml to the logical outcome of the action, detail

 and loads
that file. In this case, the
JavaServer Faces implementation loads the detail.xhtml

The detail.xhtml uses the outputText
component to display the catalog
ManagedBean's item
properties:

 

   
<h:outputText
value="#{catalog.item.name}"
title="Name" />

   
<h:outputText value="#{catalog.item.description}"
title="Description"/>

    <h:graphicImage library="images" name="#{catalog.item.imageurl}" title="Imageurl" />

   
<h:outputText value="#{

.item.price}"
title="Price" />

   
<h:outputText value="#{

.item.address.city}"
title="Address" />

   
<h:outputText value="#{

.item.contactinfo.email}"
title="Address"/>
  

    

Hot Deployment and Session Retention with JSF 2.0 and Glassfish

• Incremental compile of all JSF 2.0  artifacts when you save.
• Auto-deploy of all web or Java EE 6 artifacts
• Session retention: maintain stateful sessions across
  re-deployments

Conclusion

This concludes the sample application which demonstrates a pet catalog
web application which uses JSF 2.0, JPA, GlassFish and MySQL.

Running the Sample Application

1. If you haven't already done so, download and install NetBeans IDE , GlassFish , and MySQL Community
   Server . You can download and install GlassFish with
   NetBeans as a single bundle.
2. Follow these instructions
   to install JSF Mojarra 2.0.0 Beta2 on GlassFish v2 or Glassfish v3
   
3. Download
   the sample code.

Create the Pet Catalog database

In order to run the sample code you first have to create the Pet
Catalog database
and fill in  the Item table.

1. Start NetBeans IDE
   
2. Ensure that GlassFish is registered in the NetBeans IDE, as
   follows:
   • Click the Services tab in the NetBeans IDE.
   • Expand the Servers node. You should see GlassFish v2 in
     the list of servers. If not,
     register GlassFish v2 as follows:
     • Right-click the Servers node and select Add Server.
       This opens an Add Server Instance wizard.
     • Select GlassFish v2 in the server list of the
       wizard
       and click the Next button.
     • Enter the location information for the server and
       click
       the Next button.
     • Enter the admin name and password and click the
       Finish
       button.
3. 
   
4. Start the MySQL or Java DB database as follows:
   • Click the Services tab in the NetBeans IDE.
   • Expand the databases node. You should see the Java DB
     database in the list of databases. If you have installed the MySQL
     server database, you should also see the MySQL database in the list of
     databases.. Note:  Java DB 
     comes bundled with Netbeans, you can  download MySQL separately.

   • Right-mouse click on the Java DB or MySQL server
     database
     and select Start.
5. If you installed MySQL, set the properties of the MySQL
   server database as follows:
   • Right-click on the MySQL server database and select
     Properties. This opens the MySQL Server Properties dialog box, as shown
     in
     Figure 8.
     
      
     
     

     Figure 8. MySQL Server Basic Properties

      
     
     

   • In the Basic Properties tab, enter the server host name
     and port number. The IDE specifies localhost as the
     default server host name and 3306 as the default server
     port number.
   • Enter the administrator user name, if not displayed,
     and the
     administrator password -- the default
     administrator password is blank.
   • Click the Admin Properties tab.
   • Enter an appropriate path in the Path/URL to admin tool
     field. You
     can find the path by browsing to the location of a MySQL Administration
     application such as the MySQL Admin Tool.
   • Enter an appropriate path in the Path to start command.
     You can
     find the path by browsing to the location of the MySQL start command.
     To find the start command, look for mysqld in the bin
     folder of the MySQL installation directory.
   • Enter an appropriate path in the Path to stop command
     field. You
     can find the path by browsing to the location of the MySQL stop
     command. This is usually the path to mysqladmin in the bin
     folder of the MySQL installation directory. If the command is mysqladmin,
     in the Arguments field, type -u root stop to grant root
     permissions for stopping the server. The Admin Properties tab should
     look similar to
     Figure 9.
     
      
     
     

     Figure 9. MySQL Server Administration Properties

      
     
     

   • Click the OK button.

    
   

6. Right-click on the MySQL server or Java DB database and
   select Start.
7. Create the petcatalog database as follows:
   • Right-mouse click on the Java DB or MySQL server
     database
     and select Create Database.
     This will
     open a create Database window.
   • Enter the database name catalog for Java DB or
     petcatalog
     for MySQL.
     
     
     
     
     
     For Java DB enter userid
     password app app as shown
     below:
     
     
     
     
     
      Click O.K. to accept the
     displayed settings.
     
8. Create the tables in the catalog database
   as follows:
   • Underneath Databases you should see a database
     connection for
     the petcatalog database. For example
     MySQL:

     or Java DB:

   • Right-mouse click on the petcatalog connection and
     select Connect.
   • Right-mouse click on the petcatalog connection and
     select Execute Command. This will open up a SQL command window.
   • Copy the contents of the catalog.sql
     file in the riapetcatalog\exercises\exercise0

     
     directory and paste the contents into
     the SQL command window, as shown in below: 
     
              
     
       

   
        
   • Click the Run SQL icon
     (Ctrl+Shift+E) above the SQL command window.
   
        
   • Note: It is ok to see this: "Error code -1, SQL state 42Y55:
     'DROP TABLE' cannot be performed on 'ITEM' because it does not exist.
     Line 2, column 1" . This just means you are deleting a table that does
     not exist.  If you need to delete and recreate the tables you will
     not  see this message the second time.
     
          
   
      
   
    

 
9. View the data in the Pet
   Catalog database Item table as follows:
   
      
   
        
   • Underneath Databases you should see a database
     connection for
     the petcatalog database. For example
     MySQL:
            
              
                
                  
                
              
            
     or Java DB:
            
              
                
                  
                
              
            
          
   
        
   • If the database connection is broken like in the
     following diagram:
     
            
     
            
     
              
     • Right-mouse click on the petcatalog connection and
       select Connect. as shown below:
       
                  
       
                
     
              
     • if prompted for a password, for MySQL leave it
       blank, for JavaDB enter user app password app.
     
            
     
          
   
        
   • Expand
     the Tables node below the petcatalog database in the
     Services window. You should see the item table under the
     Tables node. You can expand the item table node to see
     the table columns, indexes, and any foreign keys, as shown in below :

     Figure 12. An Expanded Table Node

      
     
     
     You can view the contents of a table or column by right-clicking the
     table or column and selecting View Data as shown  below:
     
      
     
     

     Figure 13. Viewing the Contents of a Table

     
     
     
     

10. Follow these
    instructions to Create a JDBC Connection pool and JDBC resource.Name
    the  pool mysql_petcatalog_rootPool and the jndi resource
    jdbc/petcatalog. Note: you do not have to create a JDBC connection pool
    and resource if you use the Netbeans wizard to generate JPA entities
    from database tables as described in this article GlassFish
    and MySQL, Part 2: Building a CRUD Web Application With Data Persistence.

Running the Sample solution:

If you want to run the sample solution, you have to create the catalog
database tables first as described above.

1. If you haven't already download
   the sample code and start the NetBeans IDE. Unzip the catalog.zip
   file which you downloaded, this will create a catalog directory with
   the project code.
2. Open the
   catalog/setup/sun-resources.xml file and verify that the
   property values it specifies match those of the petcatalog database and
   jdbc resources you created. Edit the property values as necessary.
   
    
   
3. Open the catalog project as follows:
   • In NetBeans IDE, click Open Project in the File menu.
     This opens the Open Project dialog.
   • Navigate in the Open Project dialog to the catalog 
     directory and click the Open Project button.

    
   
   In response, the IDE opens the catalog project. 
   You can view the logical structure of the project in the Projects
   window (Ctrl-1).

4. Run the catalog by right-clicking on the catalog
   project in the Projects window and selecting Run Project. The NetBeans
   IDE compiles the application, deploys it on Glassfish, and brings up
   the default page in your browser.  (at
   http://localhost:8080/catalog/).

For more information see the following
resources:

• JSF 2.0 Home page
  Project Mojarra
• SDN
  JavaServer Faces Page
  
• JSF
  2 fu, Part 1: Streamline Web application development
• Composite
  UI Components in JSF 2.0
  
• Creating
  Your First Java EE 6 Application
• Facelets article
  
• Roger Kitain's
  Blog (co-spec lead for JSF 2.0)
• Ed Burns's Blog
  (co-spec lead for JSF 2.0)
• Jim Driscoll's
  Blog
  
• Pro
  EJB 3: Good Java Persistence API book
• Java
  Persistence reference page on GlassFish Project