2. Creating First JSF Application (without using any IDE)

Before getting into the details of JSF Framework, lets first create a simple JSF application without using any IDE (like jDeveloper, netBeans….) as I think its good to start without all these things.

This is a simple application having three pages (main.xhtml, register.xhtml and confirm.xhtml). main.xhtml is the first page which user will access. There is a link on main page to register.xhtml where user will enter personal information and click on confirm button to finally go to confirm page. Also, on confirm page, user has option to edit the information (i.e. coming back to register.xhtml) and confirm that again. This is how the 3 pages work:

Every java EE based web application has a standard folder structure. So firstly, we create all the folders manually say on C: drive. Later after developing the application, we will move it to a server such as apache tomcat.

Step 1
Create a folder on C drive, ‘registrationapp’. This is our root application folder.

Step 2
To create any java EE application, we need two important folders (WEB-INF & lib).

• Create a folder ‘WEB-INF’ inside ‘registrationapp’ directory.
• Further, Under ‘WEB-INF’, create a folder, ‘lib’. This folder contains all the libraries used in the particular application.
• Similarly create another folder, ‘classes’ under WEB-INF. This folder contains all the complied classes used in the application.

Step 3

• To create any JSF application, we need two JSF libraries (jsf-api.jar and jsf-impl.jar). These are just bytecode implementation of jsf 2.0. You can download _mojarra 2.0 binary version from here. Extract this and you will get the two required libraries under its lib folder. Alternatively, you can use this direct download link.
• Copy jsf-api.jar and jsf-impl.jar libraries and move them in the lib directory of our own application (i.e. under C:\registrationapp\WEB-INF\lib).
• Also JSF use some jstl tags and some files from standard.jar files. If you have apache tomcat installed, you can find these in lib directory of ‘examples’ under ‘webapps’ folder. Also you can download these from apache project. Paste these two libraries as well under lib of our application.

So now, we have all the required stuff with us to create a JSF app and this is how the folder structure would look like:

Step 4 web.xml (deployment descriptor)
For a JSF application, this file contains a key servlet (javax.faces.webapp.FacesServlet), which make the whole JSF framework working. In JSF, every single request that comes in, goes to this particular servlet which then figures out further proceedings. So web.xml has to have a entry for faces servlet and also need a mapping for that. Here we do mapping of *.faces. Which means that any request that comes in that end with .faces will get sent to that faces servlet.
This web.xml goes in WEB-INF folder. (C:\registrationapp\WEB-INF\web.xml)

<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:schemalocation="http://java.sun.com/xml/ns/javaee

http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">

<servlet>

<servlet-name>Faces Servlet</servlet-name>

<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>

</servlet>

<servlet-mapping>

<servlet-name>Faces Servlet</servlet-name>

<url-pattern>*.faces</url-pattern>

</servlet-mapping>

</web-app>

Step 5 main.xhtml
Create this file inside root directory of our app (C:\registrationapp\main.xhtml). This page contains a link which will take user to registeration form i.e. register.xhtml.

< html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html" 
xmlns:f="http://java.sun.com/jsf/core">
    < h:head>
        < title>Registration Demo Application< /title>
    < /h:head>
    < body>
        < h1>Welcome to Registration Application< /h1>
        < p>
        
        < /p>
    < /body>
< /html>

Step 6 RegisterBean.java
This is a managed bean which actually stores values entered by user from web page for a session. Attributes of this class will be mapped to input fields on registration form. Create this class file under a package (such as C:\registrationapp\WEB-INF\classes\regapp\sush\beans).

package regapp.sush.beans;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean
@SessionScoped
public class RegisterBean {
    protected String firstName;
    protected String lastName;
    protected String sex;

    public void setFirstName(String firstName) {
        this.firstName = firstName;
    }

    public String getFirstName() {
        return firstName;
    }

    public void setLastName(String lastName) {
        this.lastName = lastName;
    }

    public String getLastName() {
        return lastName;
    }

    public void setSex(String sex) {
        this.sex = sex;
    }

    public String getSex() {
        return sex;
    }
}

Compile this file from myclasses folder from command prompt:
C:\registrationapp\WEB-INF\classes>javac regapp\sush\beans\*.java

Step 7 register.xhtml
This is registration form where user will enter personal information. Each input field is mapped to our managed bean attribute using EL such as #{registerBean.firstName}. Also, a command button is given (using JSF h:commandButton tag) to take user to confirmation page.

< html xmlns="http://www.w3.org/1999/xhtml" 
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
    
        < title>Registration Demo Application< /title>
    
    < body>
        < h1>Registration Form< /h1>         
        
            < table>
                < tbody>< tr>
                    < td>First Name:< /td>
                    < td>
                  
                    
                < /tr>                 
                < tr>
                    < td>Last Name:< /td>
                    < td>
                 
                    < /td>
                < /tr>                 
                < tr>
                    < td>Sex:< /td>
                    < td>
                        
                    
                < /tr>
            < /tbody>< /table>
            < p>
                
            < /p>
        
    < /body>
< /html>

Step 8 confirm.xhtml
Finally, after filling the information, user will submit the form and will be navigated to confirmation page. This page shows the information in read-only mode (using h:outputText tag). However, using edit button user can again change the details.

< html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html" 
xmlns:f="http://java.sun.com/jsf/core">
    
        < title>Registration Demo Application< /title>
    
    < body>
        < h1>Confirmation Form< /h1>         
        
            < table>
                < tbody>< tr>
                    < td>First Name:< /td>
                    < td>
                        
                    < /td>
                < /tr>                 
                < tr>
                    < td>Last Name:< /td>
                    < td>
                        
                    < /td>
                                 
                < tr>
                    < td>Sex:< /td>
                    < td>
                        
                    < /td>
                < /tr>
            < /tbody>< /table>
            < p>
                
            < /p>
        
    < /body>
< /html>

Step 9
Now we need to deploy this small application to apache tomcat server (apache-tomcat-6.0.18 in my case). Below command will do the same. Run this command from our application root directory (C:\registrationapp) :
jar -cvf C:\apache-tomcat-6.0.18\webapps\registrationapp.war *.*
This command goes to jar utility and take all files and folders from current directory and create a war file and place that in tomcat webapps folder.

Step 10
So our application is deployed. Now go to bin folder of tomcat and start startup.bat. This will automatically extract files from the war file we deployed in step 9.
Now run the application using below URL from web browser: http://localhost:8080/registrationapp/main.faces

Here, user will click on the link and will be navigated as shown below:

However, we could have put lots of validation in this app, but just to get an overview, I kept this application as simple as possible…