JSF is a one of standard Java framework for building Web applications. It helps and simplifies the development of web pages. It is a component based approach like VB in Windows.  Following tutorial explains how you can create and deploy a sample JSF application. It also explains you how you can add various components to a jsp page.

Requirements:

• MyEclipse 6 IDE or Eclipse 3
• Tomcat 6 or above
• Java 1.5

Create JSF Project in MyEclipse / myeclipse: Steps are explained below

Step 1: Open project Wizard create project

New –> Web Project-
Enter Project Name: name of your application
Source folder:src
Webroot folder: WebRoot
context url path: some path

Click Finish, a new web project will be created.

Step 2:
Download JSF sample application from url:
http://www.skill-guru.com/blog/wp-content/uploads/2009/08/JsfTest.zip

Import it to your workspace as below:

click File System:

Select all JsfTest and click Finish.

Add Tomcat Server to eclipse:

Click Window –> preferences

Click Myeclipse –> servers

Click on tomcat 5.x.x. label and specify tomcat home directory.

In servers tab You can see the Tomcat 6 server

Run Application:  Righclic on Project –> run as –> tomcat 6

Once server has started you can access http://localhost:port_number/JsfTest.  You can see something like below:

An Overview of the project:

The Main Jsf Jars:

commons-beanutils.jar

commons-collections.jar

commons-digester.jar

commons-logging.jar

jsf-api.jar

jsf-impl.jar

jstl.jar

standard.jar

Web.xml changes:

In Jsf framework all the request to jsf files should be  redirected to FacesServlet. (Like Action servlet in struts). FacesServlet recognizes request and loads the right one. We should define both Faces Servlet and servelt Mapping Rule in Web.xml:

<!– Faces Servlet –>

<servlet>

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

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

<load-on-startup> 1 </load-on-startup>

</servlet>

<!– Faces Servlet Mapping –>

<servlet-mapping>

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

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

</servlet-mapping>

Above defnition defines the Bean called PersonBean in Request scope.

Person Name is a simple POJO with getter and setter Methods.

In Jsf file  inputname.jsp we use PersonBean’s personName property as input.

<h:inputText value=”#{personBean.personName}” />

Also CommandButton defines

<h:commandButton action=”greeting” value=”Say Hello” />

Acton as ‘greeting’. In Faces-config file we have following line

<navigation-rule>

<from-view-id>/pages/inputname.jsp</from-view-id>

<navigation-case>

<from-outcome>greeting</from-outcome>

<to-view-id>/pages/greeting.jsp</to-view-id>

</navigation-case>

</navigation-rule>

The <navigation-rule> defines all the navigation rules from view /pages/inputname.jsp.

In above defines that  from outcome greetings from view inputname.jsp greetings.jsp should be loaded.

In greeting.jsp we have:

<h:outputText value=”#{personBean.personName}” />

Which displays personName property of personBean. (As PersonBean is in request scope it retains the personName property entered by inputname.jsp)

Configuration file:

faces-config.xml:  It defines the Beans and Navigation rules.

<managed-bean>

<managed-bean-name>personBean</managed-bean-name>

<managed-bean-class>jsfks.PersonBean</managed-bean-class>

<managed-bean-scope>request</managed-bean-scope>

</managed-bean>

In My next post I’ll explain using other simple components.