Java Magazine Logo
Originally published in the May/June 2013 issue of Java Magazine. Subscribe today.

New to Java, Part 1: Three Hundred Sixty–Degree Exploration of Java EE 7

by Jean-François “Max” Bonbhel

Learn how to use the new and important APIs added to Java EE 7.

This article is the first part of a three-part series, and it will demonstrate how to use Java EE 7 improvements and newer Web standards such as HTML5, WebSocket, and JSON processing to build modern enterprise applications.

In this part, we will see in detail how to use NetBeans IDE 7.3 and GlassFish 4 to build a complete three-tier end-to-end application using the following technologies, which are built into Java EE 7: 

  • Java Persistence API (JPA) 2.1 (JSR 338)

  • JavaServer Faces (JSF) 2.2 (JSR 344)

  • Contexts and Dependency Injection (CDI) 1.1 (JSR 346) 

Note: The complete source code for the application designed in this article can be downloaded here.

What Is Java EE? 

Java Platform, Enterprise Edition (Java EE) is a dedicated Java platform for developing and running enterprise applications. Java EE provides all you need to create large-scale, multitiered, scalable, reliable, and secure network applications for business. 

Prerequisites

Enough explanation is provided in this guide to get you started with the sample application; however, this article is not a comprehensive Java EE tutorial. Readers are expected to know about basic Java EE concepts, such as Enterprise JavaBeans (EJB), JPA, and CDI. The Java EE 6 Tutorial is a good place to learn all these concepts.

Download and install the following software, which was used to develop the application described in this article: 

Note: This article was tested using the latest version of NetBeans IDE (version 7.3, at the time this article was written).

It is based on work created and shared by Arun Gupta, Java evangelist at Oracle.

Create a Real-Life Enterprise Application with NetBeans IDE 7.3

In this practical section, we will build a real-life Java EE 7 enterprise application step by step so that you can learn quickly the basics about the new and important APIs improved in Java EE 7, such as JPA 2.1, JSF 2.2, and CDI 1.1.

What we are going to do is create a typical three-tier Java EE 7 Web application that allows customers to view the show times for a movie showing at a seven-theater Cineplex and then to make reservations.

new-to-java-pt1-f1

Figure 1 shows the features that will be added and explained in this article and the upcoming Part 2 and Part 3.

Table 1 details the components designed in this article and the selected technology used in each component’s implementation.

FLOW DESCRIPTION
USER INTERFACE WRITTEN ENTIRELY IN JSF
SHOW BOOKING SHOW TIME FOR THE SELECTED MOVIE AND ALL MOVIES CONFIRM THE SELECTION USES LIGHTWEIGHT EJB BEANS TO COMMUNICATE WITH THE DATABASE USING JPA

Table 1

Specifically, we will perform the following tasks: 

  • Install and configure GlassFish and NetBeans IDE 7.3.

  • Load a sample Maven application by following the instructions and guidance.

  • Review the configured datasource and generate database artifacts, such as tables.

  • Create the Web pages that allow a user to book a particular movie show in a theater.

  • Add and update existing code in order to demonstrate the usage of different technology stacks in the Java EE 7 platform.

  • Run and test the sample application.

Install and Configure NetBeans IDE 7.3 and GlassFish 4

Let’s establish our development environment by downloading and installing the latest version of NetBeans IDE and GlassFish.

  1. Download and install the latest version of NetBeans IDE:

    1. Download the All or Java EE version of NetBeans IDE 7.3 or higher.

    2. Follow the installation instructions here.

  2. Download the GlassFish server and configure it in NetBeans IDE. To be sure we use GlassFish as our application server, we are going to specify it in NetBeans IDE:

    1. Download GlassFish 4.0.

    2. Unzip the compressed file in the location where you want the glassfish4 folder to be placed.

    3. Open NetBeans IDE and click the Services tab.

    4. Right-click Servers and then choose Add Server, as shown in Figure 2.

      new-to-java-pt1-f2

      Figure 2

    5. Select GlassFish Server 3+ in the Add Server Instance wizard, as shown in Figure 3.

      new-to-java-pt1-f3

      Figure 3

    6. Type GlassFish4.0b80 in the Name field, and click Next.

    7. Click Browse, browse to the location where you unzipped the GlassFish files, and select the glassfish4 folder.

    8. Click Finish

Bravo! Now your environment is ready for fun.

Walk Through the Sample Application

In this section, we will download the sample application. Then we will walk through the application so we get an understanding of the application architecture. 

  1. Download the initial NetBeans project:

    1. Download the sample application here.

    2. Unzip the compressed file in the location where you want the movieplex7 folder to be placed.

    3. Open NetBeans IDE and from the File menu, choose Open Project.

    4. Select the unzipped directory, and click Open Project. The project structure is shown in Figure 4.

      new-to-java-pt1-f4

      Figure 4

    5. Opening the project will prompt you to create a configuration file to configure the base URI of the REST resources bundled in the application, as shown in Figure 5. The application already contains a source file that provides the needed configuration, so click Cancel to dismiss this dialog box.

      new-to-java-pt1-f5

      Figure 5

  2. Take a look at the Maven configuration:

    1. Open the Project Files node of the movieplex7 project and double-click the pom.xml file.

    2. In the pom.xml file, you can see that the javaee-api is specified as a project dependency, as shown in Figure 6. This will ensure that Java EE 7 APIs are retrieved from Maven. Notice that a particular version number is specified and this must be used with the downloaded GlassFish 4.0 build. 

      new-to-java-pt1-f6

      Figure 6

Review the Datasource and Generate the Database Schema

In this section, we will see in detail how the components of the application are using JPA to communicate with the database. 

  1. Configure the datasource:

    1. Open the Other Sources node of the movieplex7 project and then expand the src/main/resources node.

    2. Open the META-INF node, and double-click persistence .xml. By default, NetBeans opens the file in Design View.

    3. Click the Source tab to view the XML source file, which is shown in Figure 7

      new-to-java-pt1-f7

      Figure 7

      Notice that <jta-data-source> is commented out; that is, no datasource element is specified. This element identifies the JDBC resource to connect to in the runtime environment of the underlying application server.

      The Java EE 7 platform defines a new default datasource that must be provided by the runtime. This preconfigured datasource is accessible under the JNDI name java:comp/DefaultDataSource.

      The JPA 2.1 specification says that if neither the jta-data-source element nor the non-jta-data-source element is specified, the deployer must specify a Java Transaction API (JTA) datasource or the default JTA datasource must be provided by the container.

    4. For GlassFish 4, the default datasource is bound to the JDBC resource jdbc/___default. Clicking back and forth between the Design view and the Source view might prompt the warning shown in Figure 8. This will get resolved when we run the application. Click OK to dismiss the dialog box.

      new-to-java-pt1-f8

      Figure 8

  2. Generate the database schema. The scripts to generate the schema are located in the META-INF directory. Because the location of these scripts is specified as a URL, the scripts can be loaded from outside the WAR file as well.

    1. Open the Other Sources node of the movieplex7 project and then expand the src/main/resources node.

    2. Open the META-INF node and execute the create .sql script to generate the database schema shown in Figure 9

      new-to-java-pt1-f9

      Figure 9

JPA 2.1 introduces a new range of javax.persistence.schema-generation.* properties that can be used to generate database artifacts such as tables, indexes, and constraints in a database schema. This feature allows your JPA domain object model to be directly generated in a database. The generated schema might need to be tuned for the production environment. The properties, their meanings, and possible values are explained in Table 2.

PROPERTY MEANING VALUES
javax.persistence.schemageneration. database.action SPECIFIES THE ACTION TO BE TAKEN BY THE PERSISTENCE PROVIDER WITH REGARD TO THE DATABASE ARTIFACTS none, create, drop-and-create, drop
javax.persistence.schemageneration. Create-source SPECIFIES WHETHER THE CREATION OF DATABASE ARTIFACTS IS TO OCCUR ON THE BASIS OF THE OBJECT/RELATIONAL MAPPING METADATA, A DATA DEFINITION LANGUAGE (DDL) SCRIPT, OR A COMBINATION OF THE TWO metadata, script, metadata-then-script, script-then-metadata

Table 2

Create the Web Pages to Allow a User to Book a Movie

In this section, we will create Web pages that allow a user to book a particular movie show in a theater. We are going to use a new feature introduced with version 2.2 of JSF.

JSF 2.2 introduces Faces Flow, which provides an encapsulation of related views/pages with application-defined entry and exit points. Faces Flow borrows core concepts from Oracle ADF task flows, Spring Web Flow, and Apache MyFaces CODI.

Our application will build a flow that allows the user to make a movie reservation. The flow will contain four pages whose purpose is the following: 

  • Booking page: Displays the list of movies

  • Show Times page: Displays the list of available show times for the selected movie

  • Confirmation page: Allows a user to create a reservation for a selected movie, show time, and theater

  • Print page (Reservation Confirmed): Shows the reservation information

We will also use the WEB-INF/template.xhtml file to define the template of the Web page with a header, a left navigation bar, and a main content section. The file is located in the WEB-INF directory so that the template is accessible only from the pages that are bundled with the application. If the template were bundled with the rest of the pages, it would be accessible outside the application and, thus, other external pages could use it as well.  

  1. Create the Booking page:

    1. In NetBeans IDE, right-click the Web Pages node of the movieplex7 project and select New and then Folder.

    2. Type booking in the Folder Name field, and click Finish.

    3. Right-click the newly created folder, and select New and then Other.

    4. In the dialog box, select JavaServer Faces in the Categories section and Facelets Template Client in the File Types section, as shown in Figure 10. Then click Next.

      new-to-java-pt1-f10

      Figure 10

    5. Type booking in the File Name field.

    6. Click Browse next to Template and then select the template .xhtml file under the WEB-INF node.

    7. Click Finish.

  2. Edit and modify the booking .xhtml file:

    1. Change the <ui:define> section, so it looks like that shown in Listing 1.

      <ui:define name="content">
         <h2>Pick a movie</h2>
         <h:form prependId="false">
      
           <h:selectOneRadio value="#{booking.movieId}" 
      layout="pageDirection" required="true">
             <c:forEach items="#{movieFacadeREST.all}" var="m">
               <f:selectItem itemValue="#{m.id}" itemLabel="#{m.name}"/>
            </c:forEach>
          </h:selectOneRadio>
                          
          <h:commandButton id="shows" value="Pick a time" action="showtimes" />}"/>
        </h:form>
      </ui:define>
      
      
      
      Listing 1


      The code in Listing 1 builds an HTML form that displays the list of movies as radio buttons. The chosen movie is bound to #{booking.movieId}, which will be defined as a flow-scoped bean. The value of the action attribute on commandButton refers to the next view in the flow, which, in our case, is showtimes .xhtml in the same directory.

    2. Click the hint (denoted with a yellow lightbulb) and click the suggestion to add a namespace prefix. Do the same for the c: and f: prefix, as shown in Figure 11.

      new-to-java-pt1-f11

      Figure 11

  3. Create a booking Java bean and define it as a flow:

    1. Right-click the Source Packages node of the movieplex7 project and select New and then Java Class.

    2. Type Booking in the Name field and enter org.glassfish .movieplex7.booking in the Package Name field.

    3. Add the @Named class-level annotation to make the class Expression Language (EL)–injectable.

    4. Add @FlowScoped("booking") to define the scope of bean as the flow. The bean is automatically activated or passivated as the flow is entered or exited.

      Add the following property in the Booking.java file: int movieId.

    5. Generate getters/setters by right-clicking anywhere in the edited source code.

    6. Select Insert Code, then select Getter and Setter, and select the field.

    7. Add the public String getMovieName() method, as shown in Listing 2. This method will return the movie name based upon the selected movie.

      public String getMovieName() {
          try {
              return em.createNamedQuery("Movie.findById", 
      Movie.class).setParameter("id", 
      movieId).getSingleResult().getName();
          } catch (NoResultException e) {
              return "";
          }
      }
      


      Listing 2

    8. Inject EntityManager in this class by adding the following code: 

      @PersistenceContext
      EntityManager em;
      


      Alternatively, a movie ID and name can be passed from the selected radio button and parsed in the backing bean. This will prevent an extra trip to the database.

  4. Create the Show Times page:

    1. Repeat Steps 1 and 2 to change the content of the <ui:define> section, as shown in Listing 3 

      <ui:define name="content">
        <h2>Show Times for <font color="red">#{booking.movieName}
      </font></h2>
        <h:form>
          <h:selectOneRadio value="#{booking.startTime}" 
      layout="pageDirection" required="true">
            <c:forEach items="#{timeslotFacadeREST.all}" var="s">
              <f:selectItem itemValue="#{s.id},#{s.startTime}" 
      itemLabel="#{s.startTime}"/>
            </c:forEach>
          </h:selectOneRadio>
          <h:commandButton value="Confirm" action="confirm" />
          <h:commandButton id="back" value="Back" action="booking" />
        </h:form>
      </ui:define>
      
      
      
      Listing 3


      The code in Listing 3 builds an HTML form that displays the chosen movie’s name and all the show times. #{timeslotFacadeREST.all} returns the list of all the movies and iterates over them using a c:forEach loop. The ID and start time of the selected show are bound to #{booking.startTime}. The (value="Back") command button allows the user to go back to the previous page, and the (value="Confirm") command button takes the user to the next view in the flow, which is confirm.xhtml, in our case. 

      Typically, a user will expect to see only the show times for the selected movie, but all the show times are shown here. This allows us to demonstrate going back and forth within a flow if an incorrect show time for a movie is chosen.

  5. Modify the Booking.java file:

    1. Add the properties and methods that will parse the values received from the form, as shown in Listing 4

      String startTime;
      int startTimeId;
      public String getStartTime() {
          return startTime;
      }
      
      public void setStartTime(String startTime) {
          StringTokenizer tokens = 
      new StringTokenizer(startTime, ",");
          startTimeId = 
      Integer.parseInt(tokens.nextToken());
          this.startTime = tokens.nextToken();
      }
      public int getStartTimeId() {
          return startTimeId;
      }
      
      
      
      Listing 4

       

    2. Add another method that will find the first theater available for the chosen movie and show time, as shown in Listing 5.

      public String getTheater() {
        // for a movie and show
        try {
          // Always return the first theater
          List<ShowTiming> list = 
              em.createNamedQuery
      ("ShowTiming.findByMovieAndTimingId", 
              ShowTiming.class)
            .setParameter("movieId", movieId)
            .setParameter("timingId", startTimeId)
            .getResultList();
          if (list.isEmpty())
            return "none";
          return list
            .get(0)
            .getTheaterId()
           .getId().toString();
        } catch (NoResultException e) {
          return "none";
        }
      }
      
      
      
      Listing 5

       

  6. Create the Confirmation page:

    1. Repeat Steps 1 and 2 to change the content of the <ui:define> section, as shown in Listing 6

      <ui:define name="content">
        <c:choose>
          <c:when test="#{booking.theater == 'none'}">
            <h2>No theater found, choose a different time</h2>
            <h:form>
              Movie name: #{booking.movieName}<p/>
              Starts at: #{booking.startTime}<p/>
              <h:commandButton id="back" value="Back" 
      action="showtimes"/>
            </h:form>
          </c:when>
          <c:otherwise>
            <h2>Confirm ?</h2>
            <h:form>
              Movie name: #{booking.movieName}<p/>
              Starts at: #{booking.startTime}<p/>
              Theater: #{booking.theater}<p/>
              <p/><h:commandButton id="next" value="Book" 
      action="print"/>
              <h:commandButton id="back" value="Back" 
      action="showtimes"/>
            </h:form>
          </c:otherwise>
        </c:choose>
      </ui:define>
      
      
      
      Listing 6


      The code in Listing 6 displays the selected movie, the show time, and the theater, if available. The reservation can proceed if all three are available. print.xhtml, identified by the action of the command Button with the Book value, is the last page, which shows the confirmed reservation.

      actionListener can be added to the commandButton to invoke the business logic for making the reservation.

  7. Create the Print page (Reservation Confirmed):

    1. Repeat Steps 1 and 2 to change the content of the <ui:define> section, as shown in Listing 7.  

      <ui:define name="content">
        <h2>Reservation Confirmed</h2>
        <h:form>
          Movie name: #{booking.movieName}<p/>
          Starts at: #{booking.startTime}<p/>
          Theater: #{booking.theater}<p/>
          <p><h:commandButton id="home" 
      value="home" action="/index" /></p>
        </h:form>
      </ui:define>
      
      
      
      Listing 7


      The code in Listing 7 displays the movie name, the show times, and the selected theater. The commandButton is an exit point from the flow and takes the user back to the home page of the application.

  8. Configure the flow: 

    Since all the pages (booking .xhtml, showtimes.xhtml, confirm.xhtml, and print.xhtml) are in the same directory, the runtime needs to be informed that the views in this directory are to be treated as view nodes in a flow.

    1. Right-click the Web Pages/booking folder, and select New and then Other.

    2. Select XML and then XML Document.

    3. Type booking-flow in the Name field and click Finish.

    4. Modify the generated XML file booking-flow.xml so it looks like Listing 8

      <faces-config version="2.2" 
      xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="
          http://xmlns.jcp.org/xml/ns/javaee
              http://xmlns.jcp.org/xml/ns/javaee/web-
      facesconfig_2_2.xsd"> 
          <flow-definition id="booking">
          </flow-definition>
      </faces-config>
      
      
      
      Listing 8

       

  9. Invoke the flow in the template.xhtml file. To do this, edit the WEB-INF/template .xhtml file and change the commandLink from the code shown in Listing 9 to the code shown in Listing 10

    <h:commandLink action="item1">Item 1</h:commandLink>
    
    
    
    Listing 9

      

    <h:commandLink action="booking">Book a movie</h:commandLink>
    
    
    
    Listing 10

     

commandLink renders an HTML anchor tag that behaves like a form submit button. The action attribute points to the directory where all views for the flow are stored. This directory already contains booking-flow.xml, which defines the flow of the pages. 

Test Our Sample Application

Now it’s time to test our movie reservation application. We will invoke all the pages we created.

  1. Run the project by right- clicking the movieplex7 node and then selecting Run. The browser shows the updated output, as shown in Figure 12.

    new-to-java-pt1-f12

    Figure 12

  2. Click Book a movie to see the Booking page, as shown in Figure 13.

    new-to-java-pt1-f13

    Figure 13

  3. Select a movie, for example, The Shining, and click Pick a time to see the Show Times page, which is shown in Figure 14.

    new-to-java-pt1-f14

    Figure 14

  4. Pick a time, for example, 04:00, and click Confirm to see the Confirmation page, as shown in Figure 15.

    new-to-java-pt1-f15

    Figure 15

  5. Click Book to confirm the reservation and see the Reservation Confirmed page, which is shown in Figure 16

    new-to-java-pt1-f16

    Figure 16

Bravo!

Conclusion

Learn More


 GlassFish resources

 Java EE 7—Introduction

 Java EE 7 Hands-on Lab

 Java EE Platform specification

Java EE 7 includes a number of interesting new features. In this article, we created a three-tier Web application using the following technology, which is part of Java EE 7:

  • Java Persistence API 2.1 (JSR 338)

  • JavaServer Faces 2.2 (JSR 344)

  • Contexts and Dependency Injection 1.1 (JSR 346)

Our sample movieplex7 Web application was designed so that each of the new APIs matches a specific need, for example, JavaServer Faces was used to implement the user interface and Enterprise JavaBeans and the Java Persistence API were used to implement the “show booking” functionality. 

In the next articles in this series, we will improve the movieplex7 Web application by adding three new functionalities—Add/Delete Movie, ticket sales, movie points, and chat room—using important components and APIs provided by Java EE 7, such as Batch Applications for the Java Platform 1.0 (JSR 352), Java API for JSON Processing 1.0 (JSR 353), Java API for WebSocket 1.0 (JSR 356), Java Transaction API 1.2 (JSR 907), and JAX-RS 2.0 (JSR 339).


bonbhel-headshot

Jean-François “Max” Bonbhel is an IT professional with more than 11 years of experience. A senior consultant and trainer at Fujitsu Canada, he has worked with different technologies and programming languages, including Java and Java EE, Microsoft, Oracle, and open source. Bonbhel is leading the expansion of the Java user groups movement in Africa.