Develop a JavaServer Faces application with Eclipse, FacesIDE and Tomcat

May 8, 2010 Post Under Uncategorized

Develop a JavaServer Faces application with Eclipse, FacesIDE and Tomcat

In a previous blog I showed how you may configure eclipse with FacesIDE and Tomcat plugins. This configuration gives you an IDE for JSF development.

In this blog we will use this configuration to build a first JSF application.

The application is simple. It asks you for your age, and then calculates it in dog years, based on the ever-true formula of manYears / 7.

However, this has enough JSF in it to show how eclipse, FacesIDE and SysDeo’s Tomcat plugin join make for an adequate development platform.

In a previous blog you set the environment up, but you didn’t code anything. Roll up your sleeves, then, and lets start.

The first thing you’ll do is create an index.jsp page for the application. You use index.jsp to forward all requests to the Faces Servlet.
The Faces Servlet is the controller of the JSF framework and it dispatches all requests to the correct JSF enabled jsps.
1. Right-click the webcontent directory in your project tree, and select New->File.
2. In the wizard, name your file index.jsp and click Finish.
3. index.jsp is added under webcontent directory, and the eclipse editor opens to enable you to edit it.
  Enter the following and save the file:
```
<html>
    <body>
        <jsp:forward page="faces/pages/enterAge.jsp" />
    </body>

</html>
```
  An application starts with index.jsp by default. The code you just entered there instructs the application to move to the faces servlet, and open a jsp named /pages/enterAge.jsp. You will soon develop this one as well.
JSF Applications use backing beans to hold information and perform tasks. I will not go into details about backing beans here, but the next thing you’re going to do is create one for your application.
1. When you created the project, you specified it as a Tomcat project. The Tomcat plugin created some files and directories inside your project tree. One of those is webcontent/WEB-INF/src. Right click it and select New->pacakge.
  Name your package ‘beans’ and click Finish.
  The beans package is created in your project.
2. Right click the beans package and select New->Class. In the wizard name your class DogBean and click Finish.
3. The editor opens with your DogBean class. Enter two private attributes to it like so:
```
    private String age = null;
    private double dogYears = 0;
```
4. Right click on a white space in the editor and select Source->Generate getters and setters. You should see the following:
  
  Check the checkboxes next to the two attributes and click ‘OK’.
  Eclipse will automatically generate getters and setters for you.
  The getters and setters are an important part of how JSF uses beans. It allows you to use the beans’ attributes later on.
5. Add the following method to DogBean to calculate a person’s age in dogs years.
```
   public String calcYears() {
      try {
         dogYears = Double.parseDouble(age) / 7;
      }
      catch (Throwable t) {
         return "failure";
      }
      return "success";
   }
```
  This method sets dogYears to a new value based on the age attribute, but it doesn’t return this value. Instead, it just returns “success” or “failure” based on its ability to make the calculation.
  This behavior will be explained soon.
6. In order for the JSF application to use this bean, it must be configured in the faces-config.xml file.
  This is a JSF descriptor that holds information about every bean the JSF application uses (and some more information as we’ll see later on).
  Double click the faces-config.xml file in your project tree under webcontent/WEB-INF.
  The FacesIDE plugin has a special editor for faces-config. The editor has three tabs : Navigation, Managed Bean and Source. Click on the Managed Bean Tab to open the managed beans editor:
  
  Click on ‘Add’. This will display some property input boxes on the right. Fill them with the following values:
  - name: dog
  - class: beans.DogBean
  - scope: session
  Save the file (ctrl+s).
  If you want, go to the source tab and see how what you just did looks like in XML.
After you created the backing bean, we can use it in our JSF application. Recall that the index.jsp page directed the application to a page called enterAge.jsp. Now is the time to create it.
1. Right click the webcontent/pages directory of your project and select New->Other.
2. In the wizard, expand the Amateras node and select ‘Faces JSP file’ under it. Click Next.
3. In the File Name field enter ‘enterAge.jsp’ and click Finish. The eclipse editor opens up for editing your new file. Notice that the FacesIDE plugin already put some lines there for you. This is the basic skeleton of a JSF page.
4. Give the page a title. This title will be shown on your browser’s window top when you navigate to this page. Between the title tags write A dog’s life.
5. Enter thd following to make the file appear so:
```
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" >
<html>

  <head>
    <title>A dog's life</title>
  </head>
  <body>
    <f:view>

      <h:form>
        <h:outputText value="Enter your age please"/>
        <h:inputText value="#{dog.age}" />
         <h:commandButton value="Calculate Dog Years"
          action="#{dog.calcYears}" />
      </h:form>
    </f:view>

  </body>
</html>
```
6. The first two lines were added for you by FacesIDE plugins. They set up this page as a JSF-enabled one by adding two tag library definitions to it. Those libraries enable you to use JSF for tags in this page.
7. The <f:view> part states where the view part of the page begins. All that’s inside there belongs to the JSF display as the user sees it.
8. The <h:form> tag is similar to HTML’s form tag. Some JSF tags are very similar to native HTML, but more on that in a different blog.
9. The <h:outputText> tag is quite self-explained. It is used for putting a text on the browser.
10. The <h:inputText> tag displays a text-box on the page. This text box’s value attribute looks strange, but it isn’t really. The #{..} denotes that the value is tied to a backing bean. In our application this is the bean that you previously coded. Remember, that while editing faces-config.xml you named the bean ‘dog’. Inside the code for a page, you may use the bean in a value or action attribute by referencing it as “#{dog}”.
  (In eclipse, you can see that – enter #{dog at the required place and press ctrl+space. You can see that eclipse lets you use dog bean’s attributes for auto-complete).By coding “#{dog.age}” for value, you tell JSF that this text box is bound to the age attribute of the dog bean. Subsequently, JSF uses the appropriate getters and setters to handle this field.
11. The <commandButton> tag creates a button on the page. The button’s value attribute holds the text that the button will display. The button’s action attribute refers a method, inside our dog bean, that will be called when the button is pressed. So, by coding action=”#{dog.calcYears{“ you define that when the user clicks this button, the calcYears() method of the dog bean will be called.
12. Pressing the button also submits the form coded on the page. This means that JSF will use the setters of all attributes tied to the page. Before the method is called, then, the setter setAge() will be called, with the value entered in the text box.Only then, will calcYears() be called.
Lets take another look at the calcYears() method:
```
public String calcYears() {
      try {
         dogYears = Double.parseDouble(age) / 7;
      }
      catch (Throwable t) {
         return "failure";
      }
      return "success";
   }
```
This method tries to calculate the user’s age in dog years. It uses the age attribute that was set when the user pressed the button on enterAge.jsp form.
If the input is invalid (e.g. the user entered sixteen instead of 16), an exception is thrown. We will discuss error-handling on a different blog. For now, all the method does when an error occurs is return a string value of “failure”.
If the calculation is successful – the method returns a string value of “success”.
Page navigation in our JSF application is controlled by those strings. When the user presses the button on enterAge, this method is called, and the next page the application displays is controlled by the outcome of this method.
A return value of “success” takes the user to the result page.
A return value of “failure” takes the user to the error page.

Create the error and result pages for the application:

Right click the pages directory of your project and add two Faces JSP files (like you did for enterAge.jsp) Name them error.jsp and result.jsp.

Enter the following code in error.jsp:


<%@ page contentType="text/html; charset=Cp1252" %>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<html>
   <head>

      <title>An error occured</title>
   </head>
   <body>
      <f:view>
         <h:form>

            <h:outputText value="Failed to calculate your age. Sorry."/>
         </h:form>
      </f:view>
   </body>
</html>

Enter the following code in result.jsp:


<%@ page contentType="text/html; charset=Cp1252" %>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<html>
   <head>
      <title>How old are you in dog years</title>
   </head>

   <body>
      <f:view>
         <h:form>
            <h:outputText value="You are "/>
            <h:outputText value="#{dog.dogYears}"/>
            <h:outputText value=" dog years old..."/>

         </h:form>
      </f:view>
   </body>
</html>

Error.jsp is quite simple. When the user gets there, he knows that an error occured.
Result.jsp is also simple, it uses JSF elements that you are already familiar with – the h:outputText and the use of a bean – dog bean. Notice that on this page you display the value of the dogYears attribute.
You still need to add navigation rules.
Navigation rules are coded inside faces-config.xml. As was the case with the bean, FacesIDE helps us with entering navigation rules as well, using a graphic editor.
1. Double click on faces-config.xml inside your project, if it doesn’t open in the Navigation tab – click there to show the Navigation editor.
2. In the Navigation editor you add pages and navigation rules between them. On the left you see a pallette. Click on the Page line in the pallette and click anywhere on the editor screen. A new page icon appears. Do that twice more.
3. Rename the pages to the real pages of your application. You do that by clicking on the page icon, and then entering the required value in the property sheet at the bottom (you may also click on the icon once more to write the value directly on the diagram).
4. Now you have the three pages defined. You still need to add navigation rules between them. On the pallette, click ‘Navigation Case’. In the graphical editor click on enterAge.jsp and then on result.jsp. An arrow is drawn between them:
  
  In the pallette, click on ‘Select’, so you won’t create more navigation cases by mistake.
5. The arrow you just created tells the JSF application that a navigation rule exists between enterAge.jsp and result.jsp. Click on the arrow, and in the property sheet at the bottom change the ‘from-outcome’ property from “case1″ to “success”. This means that when the enterAge.jsp’s form is submitted, and the outcome of the action (the calcYears() method) is success – the application is to navigate to the result.jsp.
6. Likewise, add a navigation rule from enterAge.jsp to error.jsp to indicate an outcome of failure.
7. Your screen should look like so:
  
  Notice that the arrows have the names of the navigation cases (the return values from the calcYears method).
  Save faces-config.xml (using ctrl-s).
  You can see how the navigation rules you added look in XML by clicking on the source tab for faces-config.xml.
You are now ready to deploy and test your application.
1. Start Tomcat by clicking on the start Tomcat button in eclipse’s toolbar. It should take a few seconds to start.
2. Open a browser (you can do it from within eclipse by clicking on the browser button in the toolbar) and, assuming your Tomcat port is 8080 (the default) point it to http://localhost:8080/16BytesJSF
  (If you gave your project a different context – point it to the one you gave it instead of 16BytesJSF).
3. The browser should show enterAge.jsp:
  
  Enter your age and click the “Calculate Dog Years” button. I entered 73 and got this:
  Try entering an invalid input (e.g. hello) and see what happens.