Coding the Example Application

This section describes how to code the example application.

Getting Started

Before you start coding the example, you need to perform some set-up tasks:

Register the server with your NetBeans IDE.
Create a directory for the example you will build.
Specify some settings.

Register the Server with NetBeans IDE

Launch the NetBeans IDE.
From the menu, select Tools→Server Manager.
Click Add Server.
In the Add Server Instance dialog, select Sun Java System Application Server from the Server menu.
(Optional) Enter a name for the server in the Name field.
Click Next.
Click Browse to find the location of the Application Server installation.
Click Next.
Enter the user name you chose when you installed the Application Server in the Admin Username field.
Enter the password for this username in the Admin Password field.
Click Finish.
Click Close.

Create a Directory for the Example

Create another directory at the same level as the example directory and call it myexample. You'll put the First Cup application that you build while following this tutorial in this directory.
Copy the entire bp-project folder from the example directory to the myexample directory.

Specify Some Settings

In the myexample/bp-project directory, copy the build.properties.sample file to build.properties.
Open the build.properties file in a text editor.
Set the javaee.home property to the path of your Application Server installation. Use forward slashes in the path, even if you are on the Windows platform. For example, you would enter C:/myServer instead of C:\myServer.
Set the firstcup.tutorial.home property to the location of your firstcup tutorial installation, such as C:/firstcup.
Change example to myexample in the path specified by the javaee.server.passwordfile property.
Open the admin-password.txt file from the myexample/bp-project directory in a text editor.
Set the AS_ADMIN_PASSWORD property to your Application Server password.
Save the build.properties and admin-password.txt files and close them.

Creating the Web Service Endpoint

The DukesAgeService endpoint is a simple web service. Web services are web-based applications that use open, XML-based standards and transport protocols to exchange data with calling clients. Both the requests and responses are sent as XML documents, and are usually sent as HTTP packets. This makes interoperability between different systems and applications easy, as it is not necessary for the client to know the underlying architecture of the server and vice-versa to make a successful web service call.

Web services are designed to be independent of the client. Typically web service endpoints are publicly available to a wide variety of clients, and the clients are located throughout the internet. This is called “loose coupling,” as the clients and servers are connected only by the standard XML-based requests and responses. For this reason, DukesAgeService will be developed in its own application module, and deployed separately from the DukesBirthdayBean enterprise bean and firstcup web client.

JAX-WS Endpoints

DukesAgeService is a JAX-WS endpoint implemented as a servlet. Servlets are web components that run in the web container.

You'll begin by creating a servlet class, then decorate the class with the @WebServiceannotation to make the class a web service endpoint, and finally you will add the getDukesAge method to calculate and return Duke's age.

Creating the Endpoint

In NetBeans IDE or another editor, create a Java class source file called DukesAge.java in the com.sun.firstcup.webservice package.

Create the Project in NetBeans IDE

Select File→New Project.
Select Web in the Categories pane.
Select Web Application in the Projects pane.
Click Next.
Set Project Name to firstcup-dukes-age.
Set the Project Location to <INSTALL>/myexample, in which INSTALL is the location of the firstcup tutorial installation.
Select your Application Server from the Server menu.
Select Java EE 5 from the Java EE Version menu.
Set Context Path to /DukesAgeService
Click Finish.
You should now see the module you created in the Projects pane.
From the Projects pane, right-click on the index.jsp file and select Delete. Click Yes in the dialog.

Create the `DukesAge` Class

Select File→New File.
Make sure firstcup-dukes-age is selected in the Project menu.
Select Java Classes in the Categories pane.
Select Java Class in the File Types pane.
Click Next.
Set Class Name to DukesAge.
Set Package to com.sun.firstcup.webservice.
Click Finish.
You should now see the DukesAge.java file inside the com.sun.firstcup.webservice package in the Projects pane. The DukesAge.java file should also be open in the editor pane.

Annotate the `DukesAge` Class as a Web Service

Add a @WebService annotation to the class.

@WebService
public class DukesAge {
...
}

Remove the Default Constructor

Highlight the following default constructor and delete it, as web service endpoints do not require a default constructor.
```
public DukesAge() {
}
```

Add the `getDukesAge` Method

Create a public getDukesAge method with a return type of int.
```
public int getDukesAge() {
}
```
Add a @WebMethod annotation to getDukesAge.
```
@WebMethod
public int getDukesAge() {
}
```

Add the following code to getDukesAge:

Calendar dukesBirthday = new GregorianCalendar(1995, Calendar.MAY, 23);
Calendar now = Calendar.getInstance();

int dukesAge = now.get(Calendar.YEAR) - dukesBirthday.get(Calendar.YEAR);
dukesBirthday.add(Calendar.YEAR, dukesAge);

if (now.before(dukesBirthday)) {
    dukesAge--;
}
return dukesAge;

Resolve the Import Statements

Right-click in the Editor.
Select Fix Imports.
In the Fix Imports dialog, choose the javax.jws.WebService package for the WebService class.
Select File→Save from the menu to save the file.

Building and Deploying the Web Service

Building `DukesAgeService`

Select firstcup-dukes-age in the Projects tab.
Right-click firstcup-dukes-age and select Build Project.

Deploying the Web Service Endpoint

The DukesAgeService endpoint was packaged in a WAR file, firstcup-dukes-age.war. Now you'll deploy firstcup-dukes-age.war to the Application Server. This task gives instructions on deploying firstcup-dukes-age.war in NetBeans IDE.

Select firstcup-dukes-age in the Projects tab.
Right-click firstcup-dukes-age and select Deploy Project.

Creating the Enterprise Bean

DukesBirthdayBean is a stateless session bean. Stateless session beans are beans that do not maintain a conversational state with a client. With stateless session beans the client makes isolated requests that do not depend on any previous state or requests. If you require conversational state, you use stateful session beans.

To create DukesBirthdayBean you need to create two Java source files: DukesBirthdayBean, the enterprise bean class; and DukesBirthdayRemote, the enterprise bean business interface. The enterprise bean class and the business interface are the only files you need to create an enterprise bean.

Creating `DukesBirthdayBean` in NetBeans IDE

This section has instructions for creating the enterprise application and DukesBirthdayBean enterprise bean.

Creating the Enterprise Application

In this task, you will create an enterprise application archive (EAR) that will contain the DukesBirthdayBean enterprise bean and firstup web client.

Select File→New Project.
Select Enterprise in the Categories pane.
Select Enterprise Application in the Projects pane.
Click Next.
Set Project Name to firstcup.
Set the Project Location to <INSTALL>/myexample.
By default the wizard creates an enterprise bean module firstcup-ejb and a web application module firstcup-war. Leave everything in the dialog as it is.
Click Finish.

Setting the Context Root

In this task, you will specify the context root to identify the web application in a J2EE server.

Expand the firstcup module in the Projects pane.
In the Configuration Files node, double-click the application.xml file.
In application.xml, locate the context-root element.
Change the context root from /firstcup-war to /firstcup.
Select File → Save to save the file.
Right-click the firstcup-war module in the Projects pane.
Select Properties from the popup menu.
In the Categories tree, select Run.
Change the Context Path to /firstcup.
Click OK.

Creating the `DukesBirthdayBean` Enterprise Bean Class

Now you'll create the enterprise bean class and business interface source files in NetBeans IDE. The DukesBirthdayRemote business interface is a remote interface.

Select firstcup-ejb project in the Projects tab.
Select File→New File.
Select Enterprise in the Categories pane.
Select Session Bean in the File Types pane.
Click Next.
Set EJB Name to DukesBirthdayBean.
Set the Package name to com.sun.firstcup.ejb.
Set the Session Type to Stateless.
Uncheck Local and check Remote under Create Interface.
Click Finish.

Modify `DukesBirthdayBean.java`

Now you'll add the code that calculates the difference in age in years between Duke and the user.

In DukesBirthdayBean.java, delete the empty default constructor that NetBeans IDE generated.

Directly after the class declaration, paste in the following code:

private static Logger logger = 
        Logger.getLogger("com.sun.firstcup.ejb.DukesBirthdayBean");
public int getAgeDifference(Date date) {
    int ageDifference;

    Calendar theirBirthday = new GregorianCalendar();
    Calendar dukesBirthday = new GregorianCalendar(1995, Calendar.MAY, 23);

    // Set the Calendar object to the passed in Date
    theirBirthday.setTime(date);

    // Subtract the user's age from Duke's age
    ageDifference = dukesBirthday.get(Calendar.YEAR) - 
    theirBirthday.get(Calendar.YEAR);
    logger.info("Raw ageDifference is: " + ageDifference);
    // Check to see if Duke's birthday occurs before the user's. If so, 
    // subtract one from the age difference
    if (dukesBirthday.before(theirBirthday) && (ageDifference > 0)) {
        ageDifference--;
    }
    logger.info("Final ageDifference is: " + ageDifference);

    return ageDifference;
}

Right-click in the editor window and select Fix Imports.
Choose the java.util.logging.Logger fully-qualified name for the Logger class.
Choose the java.util.Date fully-qualified name for the Date class.
Click OK.
Right-click within the new getAgeDifference method and select EJB Methods→Add to Remote Interface.
Select File→Save.

Modify `DukesBirthdayRemote.java`

Expand the firstcup-ejb module in the Projects pane.
Double-click DukesBirthdayRemote.java under Source Packages→com.sun.firstcup.ejb.
Right-click in the editor window and select Fix Imports.
Select java.util.Date as the fully-qualified class name of the Date class and click OK.
Remove the throws clause from the method definition so that you are left with int getAgeDifference(Date date);.
Select File→Save.

Creating the Web Client

To create the web client, you need to perform the following tasks:

Set the firstcup-war module to support JavaServer Faces technology. This will create a web.xml file that has a mapping to FacesServlet.
Create a web service client.
Create a resource bundle to hold localized messages used by the JSP pages.
Configure the resource bundle in the configuration file.
Create the DukesBDay managed bean class.
Configure DukesBDay in the configuration file.
Create the greeting.jsp page.
Configure the navigation rules in the configuration file.
Create the response.jsp page.

Setting `firstcup-war` to Support JavaServer Faces Technology

All JavaServer Faces applications must include a mapping to the FacesServlet instance in their deployment descriptors. The FacesServlet instance accepts incoming requests, passes them to the life cycle for processing, and initializes resources.

You create the mapping to FacesServlet in the web application's deployment descriptor. Rather than adding the mapping to the web.xml file directly, NetBeans IDE will create the web.xml file and perform the mapping to FacesServlet for you when you specify that your web application supports JavaServer Faces technology. To do this, perform the following task.

Setting `firstcup-war` to Support JavaServer Faces Technology

Right-click the firstcup-war module of the firstcup enterprise application in the Projects pane.
Select Properties from the popup menu.
Select Frameworks from the Categories tree.
Click Add.
Select JavaServer Faces from the list of choices in the dialog.
Click OK.
Change the servlet URL mapping to /firstcupWeb/*.
This path will be the path to the FacesServlet instance. All requests must include this path in between the application's context path and the page in the URL. Users don't have to include this path in the URL because firstcup includes an index.jsp page that forwards users to the greeting.jsp page when they enter the following URL:
```
http://localhost:8080/firstcup
```
Deselect the Validate XML checkbox.
Click OK.
The remaining steps tell you how to perform the forward to greeting.jsp from the index.jsp page.
Expand the firstcup-war module in the Projects pane and double-click Web Pages.
Right-click welcomeJSF.jsp, select Delete from the popup menu, and click Yes in the dialog.
Double-click index.jsp.
NetBeans IDE generated this file when you created the firstcup project.
Delete everything on the page.

Enter the following in the index.jsp page:

<jsp:forward page="/firstcupWeb/greeting.jsp"/>

Save the file by selecting File → Save from the menu bar.

Creating a Web Service Client for the `firstcup-war` Web Module

The firstcup-war web module must consume the firstcup-dukes-age web service in order to get Duke's current age. For this to happen, you need to create a web service client for the firstcup-war web module.

Creating a Web Service Client for the `firstcup-war` Web Module

Select firstcup-war from the Project pane.
Select File → New File.
Select Web Services from the Categories pane.
Select Web Service client from the File Types pane.
Click Next.
Select WSDL URL.
Into the WSDL URL field, enter the following location of the WSDL file of the web service that the web service client will consume.
http://localhost:8080/DukesAgeService/DukesAgeService?WSDL
Into the Package field, enter the following package where the client files will be generated.
com.sun.firstcup.webservice
Click Finish.

Creating a Resource Bundle

In this section, you'll create the resource bundle that contains the static text and error messages used by the JSP pages. The firstcup client supports both English and Spanish locales. Therefore you need to create two properties files, each of which will contain the messages for one of the locales.

Creating a Resource Bundle

Right-click firstcup-war in the Projects pane.
Select New → File/Folder from the popup menu.
Select the Other category, then Properties File from the New File dialog.
In the New Properties File dialog, enter WebMessages in the File Name field.
In the Folder field, enter src/java/com/sun/firstcup/web as the location of the file.
Click Finish.

After NetBeans IDE creates the properties file, enter the following messages or copy them from here to the file:

Welcome=Hi. My name is Duke. Let us find out who is older -- You or me. 
DukeIs=Duke is
YearsOldToday=years old today.
Instructions=Enter your birthday and click submit.
YourBD=Your birthday
Pattern=MM/dd/yyyy
DateError=Please enter the date in the form MM/dd/yyyy.
YouAre=You are 
Year=year
Years=years
Older=older than Duke!
Younger=younger than Duke!
SameAge= the same age as Duke!
Submit=Submit
Back=Back

These messages will be referenced from the JSP pages.

Save the file by selecting File → Save from the menu.
To add the Spanish translations of the messages, copy the properties file WebMessages_es.properties from <INSTALL>/firstcup/example/firstcup/firstcup-war/src/java/com/sun/firstcup/webto <INSTALL>/firstcup/myexample/firstcup/firstcup-war/src/java/com/sun/firstcup/web.
You can create multiple properties files, each with a set of messages for a different locale. By storing localized static text and messages in resource bundles, you don't need to create a separate set of JSP pages for each locale.
Refresh the files in the application by selecting File → Refresh All Files from the menu bar.

Configuring the Resource Bundle in the Configuration File

To make the resource bundle available to the application, you need to configure it in the configuration file, by performing the following task.

Configuring the Resource Bundle

Expand the firstcup-war module in the Projects pane.
Open the folders Web Pages → WEB-INF.
Double-click faces-config.xml.
Before the end-tag of the faces-config element, add the following elements:
```
<application>
    <resource-bundle>
        <base-name>com.sun.firstcup.web.WebMessages</base-name>
        <var>bundle</var>
    </resource-bundle>
    <locale-config>
        <default-locale>en</default-locale>
        <supported-locale>es</supported-locale>
    </locale-config>
</application>
```
The base-name element of the resource-bundle element identifies the fully-qualified class name of the resource bundle. The var element identifies the name by which the JSP pages will reference the resource bundle. The locale-config element identifies the locales supported by the resource bundle.
Save the file by selecting File → Save from the menu bar.

Adding a Dependency on the Enterprise Bean Module

The firstcup-war module depends on some classes in the firstcup-ejb module. You need to tell NetBeans IDE that this dependency exists by performing the following task.

Adding a Dependency on the Enterprise Bean Module

Right-click the firstcup-war module in the Projects pane.
Select Properties.
Select Libraries from the Categories pane.
Select Add Project.
Navigate to <INSTALL>/myexample/firstcup.
Select the firstcup-ejb project.
Click Add Project JAR Files.
Make sure Build Required Projects is selected.
Click OK.

Creating the `DukesBDay` Managed Bean Class

The DukesBDay JavaBeans component is a backing bean. A backing bean is a JavaServer Faces managed bean that acts as a temporary data storage for the values of the components included on a particular JavaServer Faces page. A managed bean is a JavaBeans component that a JavaServer Faces application instantiates and stores in scope. The section following this one describes more about managed beans and how to configure them.

This section describes how to create the DukesBDay class. To create the class you need to do the following:

Create an empty class.
Decorate the bean with a web service reference and an enterprise bean reference.
Add a property that accesses Duke's current age from the web service.
Add a property that accesses the user's current birth date.
Add a property that accesses the age difference from the DukesBirthdayBean enterprise bean.
Add a property that acceses the absolute value of the age difference.

Creating an Empty Class

Right-click the firstcup-war module in the Projects pane.
Select New → Java Class
Enter DukesBDay in the Class Name field.
Enter com.sun.firstcup.web in the Package field.
Click Finish.

Adding an Enterprise Bean Reference

Directly after the class declaration, add a private variable to hold a reference to the enterprise bean using the @EJB annotation:
```
@EJB
private DukesBirthdayRemote dukesBirthday;
```

Adding Properties to the Bean

During this task, you will add the following properties to the DukesBDay bean:

age for getting Duke's age from the web service.
yourBD to hold the user's birth date.
ageDiff to get the age difference from the enterprise bean.
absAgeDiff to hold the absolute value of the age difference.

After the dukesBirthday variable declaration, add the following private variables:

private int age;
private Date yourBD;
private int ageDiff;
private int absAgeDiff;

Initialize the variables by adding the following inside the default constructor:
```
age = -1;
yourBD = null;
ageDiff = -1;
absAgeDiff = -1;
```

Generating the Accessor Methods for the Properties

Right-click in the editor window.
Select Refactor→Encapsulate Fields from the popup window.
In the Encapsulate Fields dialog, de-select the getDukesBirthday checkbox and the setDukesBirthday checkbox.
Click Next.
Click Do Refactoring in the Refactoring pane at the bottom of the IDE window.
You should now see two methods for each property, one to set the value and one to get the value of the variable for that property.

Getting Duke's Current Age

While performing this task, you will add some code to the getAge method to access Duke's current age from the web service.

Expand the firstcup-war module.
Expand the Web Service References node in the firstcup-war module.
From within the Web Service References node, go to DukesAgeService→DukesAgeService→DukesAgePort→getDukesAge.

Drag the getDukesAge operation from inside the DukesAgePort node to the getAge method in DukesBDay.java in the editor, directly before the return age; statement so that your getAge method looks like this:

public int getAge() {
        
    try { // Call Web Service Operation
        com.sun.firstcup.webservice.DukesAgeService service = 
                    new com.sun.firstcup.webservice.DukesAgeService();
        com.sun.firstcup.webservice.DukesAge port = 
                    service.getDukesAgePort();
        // TODO process result here
        int result = port.getDukesAge();
        System.out.println("Result = "+result);
    } catch (Exception ex) {
        // TODO handle custom exceptions here
    } 
    return age;
}

In the getAge method of DukesBDay, change the line int result = port.getDukesAge(); so that the age variable rather than the result variable is set to the result of the call to port.getDukesAge:
```
age = port.getDukesAge();
```
Remove the following line from the getAge method.
```
System.out.println(“Result = “+result);
```

Getting the Age Difference from the `DukesBirthdayBean` Enterprise Bean

During this task, you will add code to the getAgeDiff method to get the difference in age between the user's age and Duke's age from the EJB and to set the absAgeDiff variable to the absolute value of the age difference.

Inside the getAgeDiff method, directly before the return statement, add the following code:
```
ageDiff = dukesBirthday.getAgeDifference(yourBD);
setAbsAgeDiff(Math.abs(ageDiff));
```

Adding Import Statements

Right-click in the editor window.
Select Fix Imports from the popup menu.
Select java.util.Date as the fully qualified name of the Date class.
Click OK.

Saving `DukesBDay`

Select File → Save.

Configuring the `DukesBDay` Bean in the Configuration File

JavaServer Faces technology allows you to use the configuration file to initialize, configure, and store managed beans in one of the following scopes:

Request, which begins when the user submits a page and ends when the response is rendered.
Session, which begins when a user first accesses a page and ends when the user's session ends, such as when the user's session times out.
Application, which lasts until the server stops the application.

Once a bean is configured, a JavaServer Faces page can create and access the bean. In this section, you'll configure the DukesBDay managed bean.

Configuring the `DukesBDay` Managed Bean

Expand the firstcup-war module in the Projects pane.
Open the folders Web Pages → WEB-INF.
Double-click faces-config.xml.
Right-click in the editor window and select JavaServer Faces → Add Managed Bean.
In the Add Managed Bean dialog, enter dukesBDay in the Bean Name field.
Enter com.sun.firstcup.web.DukesBDay in the Bean Class field.
Select session from the scope menu.
Enter DukesBDay backing bean in the Bean Description field.
Click Add.
You should now see the following in the faces-config.xml file:
```
<managed-bean>
  <description>DukesBDay backing bean</description>
  <managed-bean-name>dukesBDay</managed-bean-name>
  <managed-bean-class>com.sun.firstcup.web.DukesBDay</managed-bean-class>
  <managed-bean-scope>session</managed-bean-scope>
</managed-bean>
```
The managed-bean-name element is the name by which the JavaServer Faces pages will refer to the bean. The managed-bean-class element is the fully-qualified class name of the bean. The managed-bean-scope element is the scope in which the bean is saved. You specify session scope because you need an instance of the bean to be available for the entire session so that all pages can access the values held by the bean.
Select File → Save to save the file.

Creating the `greeting.jsp` Page

The greeting.jsp page includes the welcome message, displays Duke's current age, and accepts the user's birth date. To create the page, you need to perform the following tasks:

Create an empty JSP page.
Declare the JavaServer Faces tag libraries.
Add an f:view and an h:form tag.
Add the output label components to display localized messages and text.
Add an input component to accept the birth date.
Register a converter on the input component to convert the date to the proper type.
Add a custom error message to display if conversion fails.
Add a button component so that the user can submit the page.

Creating an Empty JSP Page

To create an empty JSP page, do the following:

Right-click the firstcup-war module in the Projects pane.
Select New → JSP from the popup menu.
Enter greeting in the JSP File Name field.
Click Finish.
In the greeting.jsp file, after the html tag, replace any head tag that is already in the page and add the following one, which defines the content type:
```
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <title>Firstcup Greeting Page</title>
</head>
```
Remove the beginning and ending body tags.
Remove <h1>JSP Page</h1> from the file.
Select File → Save to save the file.

Declaring the JavaServer Faces Tag Libraries

JavaServer Faces technology defines JSP custom tags for representing UI components, converters, validators, and event listeners on a JSP page. A custom tag provides a way to reference some Java logic from a JSP page, thereby freeing page authors from including the logic in the page and allowing them to reuse the logic by adding the same tag in any of their JSP pages. See the Custom Tags chapter of the Java EE tutorial for more information.

Custom tags are defined in tag libraries. JavaServer Faces technology defines two tag libraries. The HTML Render Kit library defines all of the standard UI component tags. Each instance of a component tag used on a page represents a corresponding stateful component object on the server. The core tag library defines tags for representing type converters, data validators, event listeners, and other objects and functions. Similarly to the component tags, each instance of a converter, validator or listener tag represents an object on the server.

To use the tags in a page, you need to declare the tag libraries.

To declare the tag libraries, do the following:

After the ending head tag in greeting.jsp, add a taglib declaration for the HTML render kit tag library:
```
<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html" %>
```
When using a particular tag from this tag library, a page author must use the prefix h: to specify in which tag library the tag is defined. The uri resolves to the tag library definition.
After the taglib declaration from the previous step, add a taglib declaration for the core tag library:
```
<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core" %>
```
Again, when the page author uses a tag from this library, he or she must use the f: prefix to specify that the tag is defined in the core tag library.

Adding the `f:view` and `f:form` Tags

A JavaServer Faces page is represented by a tree of UI components. When a JavaServer Faces implementation processes the page during the page's life cycle, it will traverse the tree of components and perform such tasks as converting the values of the components to the proper type, validate the components' values, and store the components' values in backing beans.

Every JSP page that uses JavaServer Faces technology must include a view tag, which is defined in the core tag library. The view tag represents the root of the component tree. All JavaServer Faces component tags must be included inside the view tag.

A typical JavaServer Faces page also includes a form in which the user enters some data in input fields and clicks a button to submit the form. If the page contains a form, it must also have a form tag. All components that are part of the form submission must be inside the form tag.

To add the view and form tags to the page:

After the tag library declarations, add beginning and ending f:view tags:
```
<f:view>
</f:view>
```
In between the beginning and ending f:view tags, add beginning and ending h:form tags:
```
<f:view>
   <h:form>
   </h:form>
</f:view>
```

Adding Output Labels to Display Read-only Content

One of the more commonly used component tags is the outputText tag, which represents a read-only component that only displays content. The greeting.jsp page contains outputText tags that display the welcome message, the instructions, the label for the input component, and Duke's current age.

The outputText tags that display the localized messages reference the messages from the resource bundle that you configured previously. The outputText tag that displays Duke's age references the age from the age property of DukesBDay bean.

To reference values for display, the outputText tags use the expression language syntax defined by the unified expression language. The expression language syntax allows you to use the . or [] notation to reference objects and their properties. The name by which an expression references an object is defined in the configuration file. For example, an expression must refer to the WebMessages resource bundle with the name bundle. For more information on the expression language, see the Expression Language section of the Introduction to JavaServer Pages chapter of the Java EE tutorial.

While doing the following exercise, you might want to refer to the WebMessages.properties file, the DukesBDay bean, and the faces-config.xml file that you created earlier.

To reference the read-only values displayed on the greeting page using outputText tags and expressions, add the following tags:

In between the beginning and ending h:form tags, add an outputText tag that displays “Hi. I'm Duke. Let's see who's older - you or me.” and add some h2 tags around it.
```
<h2><h:outputText value="#{bundle.Welcome}"/></h2>
```
The value attribute of the outputText tag specifies the text to display. In this case, the value attribute uses an expression to reference the message stored in the resource bundle, called bundle, under the key, Welcome.
After the outputText tag you added in the previous step, add an outputText tag that displays “Duke is”. Add an extra space between the closing curly brace and the double quote of the expression so that there will be a space between “Duke Is” and the text following it on the page:
```
<h:outputText value="#{bundle.DukeIs} "/>
```
After the outputText tag you added in the previous step, add an outputText tag that displays Duke's age:
```
<h:outputText value="#{dukesBDay.age}"/>
```
The dukesBDay part of the expression refers to the DukesBDay bean. The age part of the expression refers to the age property of DukesBDay bean.
After the outputText tag you added in the previous step, add a paragraph tag and another outputText tag to display the instructions for filling out the form.
```
<p><h:outputText value="#{bundle.Instructions}"/>
```
After the outputText tag you added in the previous step, add another paragraph tag and an outputText tag that displays the label for the input component. Add an extra space at the end of this expression too:
```
<p><h:outputText value="#{bundle.YourBD} "/>
```

Adding an Input Component to Accept the User's Birth Date

Another commonly used component tag is the inputText tag. This tag represents a text field, which accepts input from the user. The inputText tag also uses expressions to reference values. However, the inputText tag can use the expressions to set values as well as get them. The inputText tag on the greeting.jsp page accepts the user's birth date and sets this value into the yourBD property of the DukesBDay bean.

To add the inputText tag, do the following:

Add a beginning and ending inputText tag, right after the previous outputText tag that you added and give it an ID of userBirthday:
```
<h:inputText id="userBirthday">
</h:inputText>
```
Later, you'll register a converter on this component. Any error messages displayed as a result of conversion failing will reference this id attribute.
Add to the inputText tag a value attribute that references the yourBD property of DukesBDay:
```
<h:inputText id="userBirthday" 
   value="#{dukesBDay.yourBD}">
</h:inputText>
```

Registering a Converter on the Input Component

JavaServer Faces technology includes a set of standard converters and validators that you can register on components in order to convert and validate their data. You register a converter or validator by nesting the tag representing the converter or validator inside the input component's tag.

To add a converter to the input component discussed in the previous section, do the following:

Add an f:convertDateTime tag inside the inputText tag and specify the acceptable format of the input:
```
<h:inputText ...>
   <f:convertDateTime pattern="MM/dd/yyyy" />
</h:inputText>
```
If the user does not enter something that can be converted to a Date type or the date the user entered is not of the specified pattern then a conversion error occurs. The next section describes how to create an error message and display it.
After the ending inputText tag, add an outputText tag that tells the user what the acceptable pattern is. Add an extra space in between the double-quote and the pound sign of the expression so that there will be space between the text field and the text displayed by this outputText tag:
```
<h:outputText value=" #{bundle.Pattern}"/>
```

Adding an Error Message to Display if Conversion Fails

To specify an error message to be displayed if conversion fails, do the following:

Add a converterMessage attribute to the inputText tag and use it to specify the error message:
```
<h:inputText id="userBirthday" 
   value="#{dukesBDay.yourBD}" 
   converterMessage="#{bundle.DateError}">
</h:inputText>
```
If the conversion of the user's input fails, the following message, stored with the DateError key in the resource bundle will display on the page:
```
Please enter the date in the format MM/dd/yyyy.
```
Add a paragraph tag followed by a message tag to indicate where the error message must appear on the page, right before the ending form tag:
```
<p><h:message for="userBirthday" style="color:red"/>
</h:form>
```
The style attribute indicates the style of the error message. In this case, the error message text will be red. The for attribute references the ID of the component that generated the error.

Adding a Button for Submitting the Form

In order for the user to submit the form with his or her birth date to the server, he or she needs to click a button or a hyperlink, thereby causing a form submit.

To add a button to the page, do the following:

Right before the message tag you added in the previous section, add the following paragraph tag and commandButton tag:
```
<p><h:commandButton value="#{bundle.Submit}" action="success"/>
```
Save the file by selecting File → Save from the menu.

The value attribute indicates the text that is displayed on the button. Again, you could use an expression to refer to this value. The action attribute indicates a logical outcome, which tells the page navigation system which page to display next. The following section explains the navigation system.

Defining Page Navigation

JavaServer Faces technology supports a powerful rule-based system for defining the flow of pages in an application. These rules are defined in the configuration file. To define the page navigation rules for the firstcup application, do the following:

Defining Page Navigation Rules

Expand the firstcup-war module in the Projects tree.
Open the folders Web Pages → WEB-INF.
Double-click faces-config.xml.
Right-click in the editor window and select JavaServer Faces → Add Navigation Rule.
In the Add Navigation Rule dialog, enter /greeting.jsp in the Rule from View field.
Click Add.
Repeat steps 4 through 6 except enter /response.jsp in the Rule from View field.
Right-click in the editor again and select JavaServer Faces → Add Navigation Case.
Select /greeting.jsp from the From View menu.
Enter success in the From Outcome field.
Select /response.jsp from the To View menu.
Click Add.
Repeat steps 8 through 12, except select /response.jsp from the From View menu and select /greeting.jsp from the To View menu.
You should now see two navigation rules, one that defines how to navigate from greeting.jsp to response.jsp, and another one that defines how to navigate from response.jsp to greeting.jsp. The from-view-id tag indicates what the current page is. The to-view-id tag indicates what page to go to next.
Recall from the section on adding a button that the commandButton tag has an action attribute that indicates a logical outcome string. When the button is clicked, the navigation system matches the current page ID and the logical outcome to a navigation rule. When it finds a match, it will navigate to the page that the rule specifies with its to-view-id tag.
Save the file by selecting File → Save from the menu bar.

Creating the `response.jsp` Page

To create the response.jsp page, do the following:

Right-click the firstcup-war module.
Select New → JSP from the popup menu.
Enter response in the JSP File Name field.
Click Finish.
In the response.jsp file, after the html tag, replace any head tag in the file with the following head tag, which defines the content type:
```
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <title>Response Page</title>
</head>
```
Remove the beginning and ending body tags.
Remove <h1>JSP Page</h2> from the file.

Add the following taglib declarations right after the ending head tag.

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>

After the taglib declarations, add the beginning and ending f:view tags.
In between the beginning and ending f:view tags, add the beginning and ending h:form tags.
In between the beginning and ending h:form tags, add the following outputText tags:
```
<h2><h:outputText value="#{bundle.YouAre} "/>
<h:outputText value="#{bundle.SameAge}" rendered="#{dukesBDay.ageDiff == 0}"/>

<h:outputText value="#{dukesBDay.absAgeDiff}" rendered="#{dukesBDay.ageDiff < 0}"/>
<h:outputText value=" #{bundle.Year} " rendered="#{dukesBDay.ageDiff == -1}"/>
<h:outputText value=" #{bundle.Years} " rendered="#{dukesBDay.ageDiff < -1}"/>
<h:outputText value="#{bundle.Younger}" rendered="#{dukesBDay.ageDiff < 0}"/>

<h:outputText value="#{dukesBDay.absAgeDiff}" rendered="#{dukesBDay.ageDiff > 0}"/>
<h:outputText value=" #{bundle.Year} " rendered="#{dukesBDay.ageDiff == 1}"/>
<h:outputText value=" #{bundle.Years} " rendered="#{dukesBDay.ageDiff > 1}"/>
<h:outputText value="#{bundle.Older}" rendered="#{dukesBDay.ageDiff > 0}"/>
```
The outputText tags on the response.jsp page use the rendered attribute to control which one of the tags will actually have their content rendered. Let's take a look at the set of outputText tags:

The first tag will yield the text “You are”.

The rendered attribute of the second outputText tag references an expression that tests if the ageDiff property of DukesBDay is equal to zero. If this expression returns true then the message referenced by the tag's value attribute will be rendered. This message is “the same age as Duke”.

The value attribute of the third tag references the absAgeDiff property of DukesBDay. This property holds the absolute value of the age difference. The expressions referenced by the rendered attributes of the fourth and fifth tags test whether or not the age difference is equal to -1 or less than –1 to determine whether the age difference is only one year or more than one year so that “year” or “years” is rendered appropriately. The sixth tag tests if ageDiff is less than zero. If this is true then the absolute value of the age difference is rendered along with the message “younger than Duke!”. So an example message that can be rendered by this group of tags is:
```
You are 10 years younger than Duke!
```
The last group of tags work similarly to the previous set of tags, except that their rendered attributes test for age differences greater than zero, indicating that the user is older than Duke.
Before the ending </h:form> tag, add the following paragraph tag and commandButton tag to render a button used for returning to the greeting.jsp page.
```
<p><h:commandButton id="back" value="#{bundle.Back}" action="success"/>
```
Save the file by selecting File → Save.

Building, Packaging, Deploying, and Running the `firstcup` Enterprise Application

In this section, you will build the DukesBirthdayBean and the firstcup web client, package them into an EAR file, deploy the EAR file to the server, and run the application.

Preparing the Deployment Descriptor

In this task, you will remove some extra parameters from the deployment descriptor of the firstcup-war module. NetBeans IDE generates these parameters, but you don't need them in this example.

Expand the firstcup-war module in the Projects pane.
Expand the Configuration Files directory.
Double-click web.xml.
Click General at the top of the editor window.
Select the plus sign next to Context Parameters.
From the table of context parameters, select the first context parameter in the table and click Remove.
Repeat step 6 until all context parameters are removed.
Click XML at the top of the editor window.
Remove the entire welcome-file-list element and all its contents.
Save the file by selecting File→Save from the menu bar.

Building and Packaging the `firstcup` Enterprise Application

While performing this task, you'll build and package the DukesBirthdayBean enterprise bean and the firstcup web client into an EAR file, firstcup.ear, in the dist directory.

Select firstcup in the Projects tab.
Right-click firstcup and select Build Project.

Deploying the `firstcup` Enterprise Application

While performing the previous task, you packaged the DukesBirthdayBean enterprise bean and firstcup web client into the firstcup.ear file. Now you'll deploy them to the Application Server.

Select firstcup in the Projects tab.
Right-click firstcup and select Deploy Project.

Running the `firstcup` Application

This section describes how to run the firstcup application.

Launch an internet browser.
Enter the following URL in the address field of the browser:
```
http://localhost:8080/firstcup
```
Enter your birth date in the Your birthday text field. Make sure you use the date pattern specified on the page: MM/dd/yyyy.
Click Submit.
After the response.jsp page is launched, click Back to return to the greeting.jsp page.

Your First Cup