Java EE 7 Hands-on Lab

In this code:

In this file, remove <ui:define> sections where name attribute value is ‘top’ and ‘left’. These sections are inherited from the template.

Replace <ui:define> section with ‘content’ name such that it looks like:

The code builds an HTML form that has two textareas – one to display the chat log and the other to display the list of users currently logged. A single text box is used to take the user name or the chat message. Clicking on ‘Join’ button takes the value as user name and clicking on ‘Send’ takes the value as chat message.

JavaScript methods are invoked when these buttons are clicked and these are explained in the next section. The chat messages are sent and received as WebSocket payloads. There is an explicit button to disconnect the WebSocket connection. output div is the placeholder for status messages. The WebSocket initialization occurs in ‘websocket.js’ included at the bottom of the fragment.

Give the name as ‘websocket’ and click on ‘Finish’.

The WebSocket endpoint URI is calculated by using standard JavaScript variables and appending the URI specified in the ChatServer class. WebSocket is initialized by calling new WebSocket(...). Event handlers are registered for lifecycle events using onXXX messages. The listeners registered in this script are explained in the table.

Any relevant data is passed along as parameter to the function. Each method prints the status on the browser using writeToScreen utility method. The join method sends a message to the endpoint that a particular user has joined. The endpoint then broadcasts the message to all the listening clients. The send_message method appends the logged in user name and the value of the text field and broadcasts to all the clients similarly. The onMessage method updates the list of logged in users as well.

to

The outputLink tag renders an HTML anchor tag with an href attribute. ${facesContext.externalContext.requestContextPath} provides the request URI that identifies the web application context for this request. This allows the links in the left navigation bar to be fully-qualified URLs.

Click on ‘Chat Room’ to see the output.

The ‘CONNECTED’ status message is shown and indicates that the WebSocket connection with the endpoint is established.

Please make sure your browser supports WebSocket in order for this page to show up successfully. Chrome 14.0+, Firefox 11.0+, Safari 6.0+, and IE 10.0+ are the browsers that support WebSocket. A complete list of supported browsers is available at caniuse.com/websockets.

Open the URI localhost:8080/movieplex7 in another browser window. Enter ‘Duke’ in the text box in the first browser and click ‘Join’.

Notice that the user list and the status message in both the browsers gets updated. Enter ‘James’ in the text box of the second browser and click on ‘Join’. Once again the user list and the status message in both the browsers is updated. Now you can type any messages in any of the browser and click on ‘Send’ to send the message.

The output from two different browsers after the initial greeting looks like as shown.

Here it shows output from Chrome on the top and Firefox on the bottom.

Chrome Developer Tools or Firebug in Firefox can be used to monitor WebSocket traffic.

AbstractItemReader is an abstract class that implements ItemReader interface. The ItemReader interface defines methods that read a stream of items for chunk processing. This reader implementation returns a String item type as indicated in the class definition.

Add @Named as a class-level annotations and it allows the bean to be injected in Job XML. Add @Dependent as another class-level annotation to mark this bean as a bean defining annotation so that this bean is available for injection.

Resolve the imports.

This method initializes a BufferedReader from ‘META-INF/sales.csv’ that is bundled with the application.

Sampling of the first few lines from ‘sales.csv’ is shown below:

Each line has a show identifier comma separated by the total sales for that show. Note that the last line (5^th record in the sample) has an intentional typo. In addition, 17^th record also has an additional typo. The lab will use these lines to demonstrate how to handle parsing errors.

The readItem method returns the next item from the stream. It returns null to indicate end of stream. Note end of stream indicates end of chunk, so the current chunk will be committed and the step will end.

Resolve the imports.

ItemProcessor is an interface that defines a method that is used to operate on an input item and produce an output item. This processor accepts a String input item from the reader, SalesReader in our case, and returns a Sales instance to the writer (coming shortly). Sales is the pre-packaged JPA entity with the application starter source code.

Add @Named and @Dependent as class-level annotations so that it allows the bean to be injected in Job XML.

Resolve the imports.

This method takes a String parameter coming from the SalesReader, parses the value, populates them in the Sales instance, and returns it. This is then aggregated with the writer.

The method can return null indicating that the item should not be aggregated. For example, the parsing errors can be handled within the method and return null if the values are not correct. However this method is implemented where any parsing errors are thrown as exception. Job XML can be instructed to skip these exceptions and thus that particular record is skipped from aggregation as well (shown later).

Resolve the imports.

AbstractItemWriter is an abstract class that implements ItemWriter interface. The ItemWriter interface defines methods that write to a stream of items for chunk processing. This writer writes a list of Sales items.

Add @Named and @Dependent as class-level annotations so that it allows the bean to be injected in Job XML.

Resolve the imports.

Override writeItems method from the abstract class by adding the following code:

Batch runtime aggregates the list of Sales instances returned from the SalesProessor and makes it available as List in this method. This method iterates over the list and persist each item in the database.

The method also specifies @Transactional as a method level annotation. This is a new annotation introduced by JTA 1.2 that provides the ability to control transaction boundaries on CDI managed beans. This provides the semantics of EJB transaction attributes in CDI beans without dependencies such as RMI. This support is implemented via an implementation of a CDI interceptor that conducts the necessary suspending, resuming, etc. 

In this case, a transaction is automatically started before the method is called, committed if no checked exceptions are thrown, and rolled back if runtime exceptions are thrown. This behavior can be overridden using rollbackOn and dontRollbackOn attributes of the annotation.

Resolve the imports.

In ‘Files’ tab, expand the project → ‘src’ → ‘main’ → ‘resources’, right-click on ‘META-INF’, select ‘New’, ‘Folder’, specify the name as ‘batch-jobs’, and click on ‘Finish’.

Right-click on the newly created folder, select ‘New’, ‘Other’, select ‘XML’, ‘XML Document’, click on ‘Next >’, give the name as ‘eod-sales’, click on ‘Next’, take the default, and click on ‘Finish’.

Replace contents of the file with the following:

This code shows that the job has one step of chunk type. The <reader>, <processor>, and <writer> elements define the CDI bean name of the implementations of ItemReader, ItemProcessor, and ItemWriter interfaces. The item-count attribute defines that 3 items are read/processed/aggregated and then given to the writer. The entire reader/processor/writer cycle is executed within a transaction.

The <skippable-exception-classes> element specifies a set of exceptions to be skipped by chunk processing.

CSV file used for this lab has intentionally introduced couple of typos that would generate NumberFormatException. Specifying this element allows skipping the exception, ignore that particular element, and continue processing. If this element is not specified then the batch processing will halt. The skip-limit attribute specifies the number of exceptions a step will skip.

In ‘Projects’ tab, right-click on ‘org.javaee7.movieplex7.batch’ package, select ‘New’, ‘Java Class’. Enter the name as ‘SalesBean’ and click on ‘Finish’ button.

Add the following code to the bean:

This method uses BatchRuntime to get an instance of JobOperator, which is then used to start the job. JobOperator is the interface for operating on batch jobs. It can be used to start, stop, and restart jobs. It can additionally inspect job history, to discover what jobs are currently running and what jobs have previously run.

Add @Named and @RequestScoped as class-level annotations. This allows the bean to be injectable in an EL expression.

Resolve the imports.

and add the following method:

This method uses a pre-defined @NamedQuery to query the database and return all the rows from the table.

Resolve the imports.

Right-click on the newly created folder, select ‘New’, ‘Other’, ‘JavaServer Faces’, ‘Facelets Template Client’, and click on ‘Next >’.

Give the File Name as ‘sales’. Click on ‘Browse’ next to ‘Template:’, expand ‘Web Pages’, ‘WEB-INF’, select ‘template.xhtml’, and click on ‘Select File’. Click on ‘Finish’.

In this file, remove <ui:define> sections where name attribute value is ‘top’ and ‘left’. These sections are inherited from the template.

Replace <ui:define> section with ‘content’ name such that it looks like:

This code displays the show identifier and sales from that show in a table by invoking SalesBean.getSalesData(). First command button allows invoking the job that processes the CSV file and populates the database. The second command button refreshes the page.

Right-click on the yellow bulb to fix namespace prefix/URI mapping for h:. This needs to be repeated for f: prefix.

Notice, a new ‘Sales’ entry is displayed in the left navigation bar.

The empty table indicates that there is no sales data in the database.

Now the table is populated with the sales data.

Note that record 5 is missing from the table, as this records did not have correct numeric entries for the sales total. The Job XML for the application explicitly mentioned to skip such errors.

This bean will be used to invoke the REST endpoint.

Resolve the imports.

ClientBuilder is the main entry point to the Client API. It uses a fluent builder API to invoke REST endpoints. A new Client instance is created using the default client builder implementation provided by the JAX-RS implementation provider. Client are heavy-weight objects that manage the client-side communication infrastructure. It is highly recommended to create only required number of instances of Client and close it appropriately.

In this case, Client instance is created and destroyed in the lifecycle callback methods. The endpoint URI is set on this instance by calling the target method. Note that the endpoint address is dynamically created by injecting an instance of HttpServletRequest. This is a new feature added in CDI 1.1

A request is prepared by calling the request method. HTTP GET method is invoked by calling get method. The response type is specified in the last method call and so return value is of the type Movie[].

Right-click on the newly created folder, select ‘New’, ‘Other’, ‘JavaServer Faces’, ‘Facelets Template Client’, and click on ‘Next >’.

Give the File Name as ‘movies’. Click on ‘Browse’ next to ‘Template:’, expand ‘Web Pages’, ‘WEB-INF’, select ‘template.xhtml’, and click on ‘Select File’. Click on ‘Finish’.

Replace <ui:define> section with ‘content’ name such that it looks like:

This code fragment invokes getMovies method from MovieClientBean, iterates over the response in a for loop, and display the name of each movie with a radio button. The selected radio button value is bound to the EL expression #{movieBackingBean.movieId}.

The code also has a button with ‘Details’ label and looks for ‘movie.xhtml’ in the same directory. We will create this file later.

Click on the yellow bulb in the left bar to resolve the namespace prefix-to-URI resolution. This needs to be completed for h:, c:, and f: prefixes.

Add the following field:

Add getters/setters by right-clicking on the editor pane and selecting ‘Insert Code’ (Ctrl+I shortcut on OSX). Select the field and click on ‘Generate’.

Add @Named and @SessionScoped class-level annotations and implements Serializable.

Resolve the imports.

Running the project (Fn+F6 shortcut on OSX) and clicking on ‘Movies’ in the left navigation bar shows the output as shown.

The list of all the movies with a radio button next to them is displayed.

This code reuses the Client and WebTarget instances created in @PostConstruct. It also adds a variable part to the URI of the REST endpoint, defined using {movie}, and binds it to a concrete value using resolveTemplate method. The return type is specified as a parameter to the get method.

Replace <ui:define> with ‘content’ name such that it looks like:

Click on the yellow-bulb to resolve the namespace prefix-URI mapping for h:.

The output values are displayed by calling the getMovie method and using the id, name, and actors property values.

Click on the ‘Back’ button to select another movie.

This button displays a label ‘Delete’, invokes the method deleteMovie from ‘MovieClientBean’, and then renders ‘movies.xhtml’.

This code again reuses the Client and WebTarget instances created in @PostConstruct. It also adds a variable part to the URI of the REST endpoint, defined using {movieId}, and binds it to a concrete value using resolveTemplate method. The URI of the resource to be deleted is prepared and then delete method is called to delete the resource.

Make sure to resolve the imports.

Running the project shows the output shown.

Select a movie and click on Delete button. This deletes the movie from the database and refreshes list on the page. Note that a redeploy of the project will delete all the movies anyway and add them all back.

@Provider allows this implementation to be discovered by the JAX-RS runtime during the provider scanning phase. @Consumes indicates that this implementation will consume a JSON representation of the resource.

Make sure to resolve imports from the appropriate package as shown.

Click on the hint (shown as yellow bulb) on the class definition and select ‘Implement all abstract methods’.

This method ascertains if the MessageBodyReader can produce an instance of a particular type.

This code reads a type from the input stream in. JsonParser, a streaming parser, is created from the input stream. Key values are read from the parser and a Movie instance is populated and returned.

Resolve the imports.

@Provider allows this implementation to be discovered by the JAX-RS runtime during the provider scanning phase. @Produces indicates that this implementation will produce a JSON representation of the resource.

Resolve the imports as shown.

Resolve the imports.

The IDE provide a hint to implement abstract methods as:

Click on the hint (show as yellow bulb) on the class definition and select ‘Implement all abstract methods’.

This method ascertains if the MessageBodyWriter supports a particular type.

Originally, this method was called to ascertain the length in bytes of the serialized form of t. In JAX-RS 2.0, this method is deprecated and the value returned by the method is ignored by a JAX-RS runtime. All MessageBodyWriter implementations are advised to return -1.

This method writes a type to an HTTP message. JsonGenerator writes JSON data to an output stream in a streaming way. Overloaded write methods are used to write different data types to the stream.

Resolve the imports.

Replace <ui:define> section with ‘content’ name such that it looks like:

This code creates a form to accept input of id, name, and actors of a movie. These values are bound to fields in MovieBackingBean. The click of command button invokes the addMovie method from MovieClientBean and then renders ‘movies.xhtml’.

Click on the hint (show as yellow bulb) to resolve the namespace prefix/URI mapping as shown.

Generate getters and setters by clicking on the menu item ‘Source’ and then ‘Insert Code’.

along with rest of the <commandButton>s.

This method creates a new Movie instance, populates it with the values from the backing bean, and POSTs the bean to the REST endpoint. The register method registers a MovieWriter that provides conversion from the POJO to JSON. Media type of application/json is specified using MediaType.APPLICATION_JSON.

Resolve the imports as shown

A new movie can be added by clicking on ‘New Movie’ button.

Click on ‘Add’ button. The ‘Movie Id’ value has to be greater than 20 otherwise the primary key constraint will be violated. The table definition may be updated to generate the primary key based upon a sequence; however this is not done in the application.

The updated page looks like as shown

Note that the newly added movie is now displayed.

Add the following class-level annotations:

This makes the bean to be EL-injectable and automatically activated and passivated with the request.

Resolve the imports.

This lab will mimic the sending and consuming of a message by an explicit call to the bean from a JSF page.

Add the following field to the class:

This field contains the message sent to the queue. This field’s value is bound to an inputText in a JSF page (created later). Constraints have been specified on this bean that enable validation of data on form submit. It requires the data to consists of two numerical digits, followed by a comma, and then two more numerical digits. If the message does not meet the validation criteria then the error message to be displayed is specified using message attribute.

This could be thought as conveying the customer identifier and the points accrued by that customer.

Generate getter/setters for this field. Right-click in the editor pane, select ‘Insert Code’ (Ctrl+I shortcut on OSX), select ‘Getter and Setter’, select the field, and click on ‘Generate’.

The Java EE Platform requires a pre-configured JMS connection factory under the JNDI name java:comp/DefaultJMSConnectionFactory. If no connection factory is specified then the pre-configured connection factory is used. In a Java EE environment, where CDI is enabled by default anyway, a container-managed JMSContext can be injected as:

This code uses the default factory to inject an instance of container-managed JMSContext.

JMSContext is a new interface introduced in JMS 2. This combines in a single object the functionality of two separate objects from the JMS 1.1 API: a Connection and a Session.

When an application needs to send messages it use the createProducer method to create a JMSProducer that provides methods to configure and send messages. Messages may be sent either synchronously or asynchronously.

When an application needs to receive messages it uses one of several createConsumer or createDurableConsumer methods to create a JMSConsumer. A JMSConsumer provides methods to receive messages either synchronously or asynchronously.

All messages are then sent to a Queue instance (created later) identified by java:global/jms/pointsQueue JNDI name. The actual message is obtained from the value entered in the JSF page and bound to the message field.

Resolve the imports.

Click on ‘OK’.

Add the following class-level annotations:

This allows the bean to refered from an EL expression. It also activates and passivates the bean with the request.

JMSDestinationDefinition is a new annotation introduced in JMS 2. It is used by the application to provision the required resources and allow an application to be deployed into a Java EE environment with minimal administrative configuration. This code will create Queue with the JNDI name java:global/jms/pointsQueue.

This code creates JMSConsumer in a try-with-resources block which is then used to synchronously receive a message. Note that JMSConsumer is created as an auto-managed resource and so is closed automatically after receiving each message. Alternatively asynchronous message delivery can also be setup using Message Driven Beans. However that is not covered in this lab.

This code creates a QueueBrowser to look at the messages on a queue without removing them. It calculates and returns the total number of messages in the queue.

Make sure to resolve the import from javax.jms.Queue, take all other defaults.

In ‘Web Pages’, right-click on newly created folder, select ‘Facelets Template Client’, give the File Name as ‘points’. Click on ‘Browse’ next to ‘Template:’, expand ‘Web Pages’, ‘WEB-INF’, select ‘template.xhtml’, and click on ‘Select File’. Click on ‘Finish’.

Replace the <ui:define> section with ‘content’ name such that it looks like:

Click on the yellow bulb to resolve namespace prefix/URI mapping for h: prefix.

This page displays the number of messages in the current queue. It provides a text box for entering the message that can be sent to the queue. The first command button invokes sendMessage method from SendPointsBean and refreshes the page. Updated queue count, incremented by 1 in this case, is displayed. The second command button invokes receiveMessage method from ReceivePointsBean and refreshes the page. The queue count is updated again, decremented by 1 in this case.

If the message does not meet the validation criteria then the error message is displayed on the screen.

Click on ‘Points’ to see the output as:

The output shows that the queue has 0 messages. Enter a message ‘1212’ in the text box and click on ‘Send Message’ to see the output as shown.

This message is not meeting the validation criteria and so the error message is displayed.

Enter a message as ‘12,12’ in the text box and click on ‘Send Message’ button to see the output as:

The updated count now shows that there is 1 message in the queue. Click on ‘Receive Message’ button to see output as:

The updated count now shows that the message has been consumed and the queue has 0 messages.

Click on ‘Send Message’ 4 times to see the output as:

The updated count now shows that the queue has 4 messages. Click on ‘Receive Message’ 2 times to see the output as:

The count is once again updated to reflect the 2 consumed and 2 remaining messages in the queue.

In this file, remove <ui:define> sections with ‘top’ and ‘left’ name attributes. These sections are inherited from the template.

Replace <ui:define> section with ‘content’ name such that it looks like:

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

Click on the yellow bulb as shown and click on the suggestion to add namespace prefix/URI mapping for h:. Repeat the same for f: prefix as well.

Add @Named class-level annotation to make the class EL-injectable.

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

Add implements Serializable to the class as beans with @FlowScoped annotation need to be passivation capable, and thus serializable.

Add the following field:

and generate getters/setters by going to ‘Source’, ‘Insert Code’, selecting ‘Getter and Setter’, and select the field.

Inject EntityManager in this class by adding the following code:

Add the following convenience method:

This method will return the movie name based upon the selected movie.

Alternatively, movie id and name may be passed from the selected radio button and parsed in the backing bean. This will reduce an extra trip to the database.

Resolve the imports.

In this file, remove <ui:define> sections with ‘top’ and ‘left’ name attributes. These sections are inherited from the template.

Replace <ui:define> section with ‘content’ name such that it looks like:

This code builds an HTML form that displays the chosen movie 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}. Command button with value ‘Back’ allows going back to the previous page and the other command button with value ‘Confirm’ takes to the next view in the flow, ‘confirm.xhtml’ in our case.

Typically a user will expect the show times only 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. A different query may be written that displays only the shows available for this movie; however this is not part of the application.

Right-click on the yellow bulb to fix namespace prefix/URI mapping for h:. This needs to be repeated for c: and f: prefix as well.

And the following methods:

These methods will parse the values received from the form. Also add the following method:

This method will find the first theater available for the chosen movie and show the timing.

Additionally a list of theaters offering that movie may be shown in a separate page.

Resolve the imports.

In this file, remove <ui:define> sections wht ‘top’ and ‘left’ name attributes. These sections are inherited from the template.

Replace ‘<ui:define>’ section with ‘content’ name such that it looks like:

The code displays the selected movie, show timing, and theater if available. The reservation can proceed if all three are available. ‘print.xhtml’ is the last page that shows the confirmed reservation and is shown when ‘Book’ commandButton is clicked.

actionListener can be added to commandButton to invoke the business logic for making the reservation. Additional pages may be added to take the credit card details and email address.

Right-click on the yellow bulb to fix namespace prefix/URI mapping for ‘c:’. This needs to be repeated for ‘h:’ prefix as well.

In this file, remove <ui:define> sections wht ‘top’ and ‘left’ name attributes. These sections are inherited from the template.

Replace <ui:define> section with ‘content’ name such that it looks like:

This code displays the movie name, show timings, and the selected theater.

Right-click on the yellow bulb to fix namespace prefix/URI mapping for ‘h:’.

The commandButton initiates exit from the flow. The action attribute defines a navigation rule that will be defined in the next step.

This lab takes the declarative approach.

Right-click on ‘Web Pages/booking’ folder, select ‘New’, ‘Other’, ‘XML’, ‘XML Document’, give the name as ‘booking-flow’, click on ‘Next>’, take the default of ‘Well-formed Document’, and click on ‘Finish’.

Replace the generated code with the following:

This defines the flow graph. It uses the parent element used in a standard faces-config.xml but defines a <flow-definition> inside it.

<flow-return> defines a return node in a flow graph. <from-outcome> contains the node value, or an EL expression that defines the node, to return to. In this case, the navigation returns to the home page.

to

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.

Click on ‘Book a movie’ to see the page as shown.

Select a movie, say ‘The Shiningr and click on `Pick a time’ to see the page output as shown.

Pick a time slot, say ‘04:00’, click on ‘Confirm’ to see the output as shown.

Click on ‘Book’ to confirm and see the output as:

Feel free to enter other combinations, go back and forth in the flow and notice how the values in the bean are preserved.

Click on ‘home’ takes to the main application page.