Tutorial: Creating JavaServer Faces JSF application in Eclipse

      

Let us see how to create a simple application using JavaServer Faces or JSF framework in Eclipse IDE. First let us see what are the tools required to create our hello world JSF application.

  1. JDK 1.5 above (download)
  2. Tomcat 5.x above or any other container (Glassfish, JBoss, Websphere, Weblogic etc) (download)
  3. Eclipse 3.2.x above (download)
  4. Sun Reference Implementation of JSF: (download). Following are the list of JAR files required for this application.
    • jsf-impl.jar
    • jsf-api.jar
    • jstl.jar
    • common-logging.jar
    • common-beanutils.jar
    • common-collections.jar
    • common-chain.jar
    • common-digester.jar

We will implement a JSF application with an Add User screen with two fields, ID and User Name. Once user enter these values and press submit, she will be redirected to a welcome page displaying the user name.

Let us start with our first JSF based web application.

Step 1: Create Dynamic Web project

Open Eclipse and goto File -> New -> Project and select Dynamic Web Project in the New Project wizard screen.
dynamic web project eclipse

Select Dynamic Web application and click Next.
create dynamic web project jsf

Write the name of the project HelloWorldJSF. Once this is done, select the target runtime environment (e.g. Apache Tomcat v6.0). This is to run the project inside Eclipse environment. In configuration select JavaServer Faces v1.2 Project and press Next.

jsf-new-project

On Project Facets window, select Java 5 and JSF 1.2 and press Next.

Skip Web module window and press Next.

jsf-capabilities-face-servlet

Select JSF component library. Click New in Component Libraries and add jstl.jar, jsf-api.jar and jsf-impl.jar. In URL Mapping Patterns add /faces/* and then click Finish.

Once the project is created, you can see its structure in Project Explorer.
jsf-project-explorer-view

Step 2: Create Package and Managed bean

Create a package net.viralpatel.jsf.helloworld in the source folder and create a Java file UserBean.java. Copy following content into UserBean.java.

package net.viralpatel.jsf.helloworld;

public class UserBean {
	private int id;
	private String name;

	//Action method to add user
	public String addUser() {

		return "success";
	}
	public int getId() {
		return id;
	}
	public void setId(int id) {
		this.id = id;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
}

Above Java class is a User bean that we will use to store our user’s information. This class acts like a form bean and action class. The addUser() method will get called when we click Add button on our Add User page.

Step 3: Create JSP files

Create two JSP files: AddUser.jsp and ListUser.jsp in WebContent folder. Copy following content in each of these files.

AddUser.jsp

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

<html>
<head>
	<title>Add New User Form</title>
</head>
<body>
<f:view>
		<p>
			<h:message id="errors" for="User_ID" style="color:red"/>
		</p>
	<h:form>
		<h:panelGrid border="1" columns="2">
			<h:outputText value="ID"></h:outputText>
			<h:inputText id="User_ID" value="#{userBean.id}" required="true">
				<f:validateLongRange minimum="1" maximum="500"/>
			</h:inputText>
			<h:outputText value="Name"></h:outputText>
			<h:inputText value="#{userBean.name}"></h:inputText>
			<h:commandButton action="#{userBean.addUser}"
				value="Add Customer"></h:commandButton>
		</h:panelGrid>
	</h:form>
</f:view>
</body>
</html>

We have added a validation rule for ID using f:validateLongRange tag and required=”true” attribute. The ID must be in between 1 and 500.

ListUser.jsp

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

<html>
<head>
	<title>List of Users</title>
</head>
<body>
<f:view>
	<h:form>
		<h:outputText value="User #{userBean.name} is added successfully.">
		</h:outputText>
	</h:form>
</f:view>
</body>
</html>

Step 4: Modify faces-config.xml file

Open faces-config.xml from WebContent -> WEB-INF folder and copy following content into it.

<?xml version="1.0" encoding="UTF-8"?>

<faces-config 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-facesconfig_1_2.xsd"
	version="1.2">
	<managed-bean>
		<managed-bean-name>userBean</managed-bean-name>
		<managed-bean-class>
			net.viralpatel.jsf.helloworld.UserBean
		</managed-bean-class>
		<managed-bean-scope>session</managed-bean-scope>
	</managed-bean>
	<navigation-rule>
		<display-name>AddUser</display-name>
		<from-view-id>/AddUser.jsp</from-view-id>
		<navigation-case>
			<from-outcome>success</from-outcome>
			<to-view-id>/ListUser.jsp</to-view-id>
		</navigation-case>
	</navigation-rule>
</faces-config>

In faces config we have defined a managed bean UserBean with scope session and mapping from AddUser.jsp to ListUser.jsp.

Step 5: Execute and run the project

Final step is to execute the project and view it in browser.
For this, right click on Project Name in Project Explorer -> Run As -> Run on Server (Shortcut Alt+Shift+X, R).

add-new-user-jsf-project-eclipse

Once you enter ID and Username and press Add User, following success screen will appear.

add-user-success-jsf-project-eclipse

Download complete WAR file with source

Download WAR with Source (1.48 MB)

Next >> JavaServer Faces JSF Validation Tutorial: Error Handling in JSF.


Facebook  Twitter      Stumbleupon  Delicious
  

Tags: , , , ,
«
»

30 Comments on “Tutorial: Creating JavaServer Faces JSF application in Eclipse”

  • Jide B wrote on 19 February, 2009, 15:04

    Very simple and ease to follow.

    Many thanks
  • Viral Patel wrote on 19 February, 2009, 15:58

    Thanks for the comment Jide. :)
  • Navier wrote on 20 February, 2009, 5:07

    The last screen shot of the browser still has AddUser.jsp as the URL instead of ListUser.jsp. This creates confusion.
  • Viral Patel wrote on 20 February, 2009, 12:01

    Hi Navier,
    JSF uses internal FORWARD instead of REDIRECT to navigate to the success page. Hence the URL will not get changed.
  • Eduard Korenschi wrote on 20 February, 2009, 15:07

    Well, it uses forward “by default”. Just add a “redirect” tag to your navigation handler in faces-config.xml and there you are …. No more confusion (but you loose requestMap parameters, in case you use them or FacesMessages).

    Eduard
  • nishant wrote on 29 June, 2009, 16:36

    Very good example Viral.. helped me to understand jsf..
  • Viral Patel wrote on 29 June, 2009, 16:47

    Thanks for the comment Nishant. You may want to subscribe your email for the Articles.
  • Raghavendra wrote on 9 July, 2009, 18:19

    This helped me for executing my first JSF program. Thanks for your work.
  • Dipendra wrote on 26 July, 2009, 18:27

    hiiii viral great example .. i understood well bt wanna know more abt jsf..
    could u jst forward me one simple application using jsf ..
    Thanks
  • Rajan wrote on 6 August, 2009, 3:56

    Hi Viral.. Great example for the beginners.

    Thanks,

    Rajan
  • Brajesh wrote on 22 August, 2009, 22:07

    hi dude, its nice example….. really impressive…..
  • Me wrote on 3 September, 2009, 2:56

    Thanks, this article is very useful.
  • Sharon Moniz wrote on 15 October, 2009, 11:36

    Hi Viral,

    What is better, jsf RI or Apache’s myfaces?
    You have used jsf api nad impl jars
    Is it better than myfaces api and impl jars?
    what are the advantages and disadvantages?
    :)
  • Viral Patel wrote on 15 October, 2009, 12:29

    Hi Sharon,
    JSF is a specification provided by SUN and you will find a number of implementations of JSF and one of such implementation is from Apache called MyFaces. Although in above example I have used JSF just to show a basic example, it may be useful to use MyFaces in your early stage of development. MyFaces provides lots of components that can be easily integrated with application.

    If you are learning JSF for first time and just wants to know the life cycle of JSF application, then the reference implementation is quite useful. But if you are developing a full fledged application then you must use MyFaces.

    Hope this answers you queries. :)
  • Sharon Moniz wrote on 15 October, 2009, 14:32

    thank you so much :)
  • Viv wrote on 11 November, 2009, 5:28

    Hi,

    I keep getting this warning on the JSP code, “userBean can not be resolved”. Can someone please tell me what I am doing wrong. The error log says

    rg.apache.catalina.loader.StandardClassLoader@601bb1
    javax.faces.webapp.FacesServlet
    java.lang.ClassNotFoundException: javax.faces.webapp.FacesServlet
    at org.apache.catalina.loader.WebappClassLoader.loadClass(WebappClassLoader.java:1387)
    at org.apache.catalina.loader.WebappClassLoader.loadClass(WebappClassLoader.java:1233)
    at org.apache.catalina.core.StandardWrapper.loadServlet(StandardWrapper.java:1095)
    at org.apache.catalina.core.StandardWrapper.load(StandardWrapper.java:993)
    at org.apache.catalina.core.StandardContext.loadOnStartup(StandardContext.java:4149)
    at org.apache.catalina.core.StandardContext.start(StandardContext.java:4458)
    at org.apache.catalina.core.ContainerBase.start(ContainerBase.java:1045)
    at org.apache.catalina.core.StandardHost.start(StandardHost.java:722)
    at org.apache.catalina.core.ContainerBase.start(ContainerBase.java:1045)
    at org.apache.catalina.core.StandardEngine.start(StandardEngine.java:443)
    at org.apache.catalina.core.StandardService.start(StandardService.java:516)
    at org.apache.catalina.core.StandardServer.start(StandardServer.java:710)
    at org.apache.catalina.startup.Catalina.start(Catalina.java:583)
    at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
    at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:39)
    at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:25)
    at java.lang.reflect.Method.invoke(Method.java:585)
    at org.apache.catalina.startup.Bootstrap.start(Bootstrap.java:288)
    at org.apache.catalina.startup.Bootstrap.main(Bootstrap.java:413)
    Nov 10, 2009 4:26:40 PM org.apache.catalina.core.StandardContext loadOnStartup
    SEVERE: Servlet /LibraryWebTest threw load() exception
    java.lang.ClassNotFoundException: javax.faces.webapp.FacesServlet
    at org.apache.catalina.loader.WebappClassLoader.loadClass(WebappClassLoader.java:1387)
    at org.apache.catalina.loader.WebappClassLoader.loadClass(WebappClassLoader.java:1233)
    at org.apache.catalina.core.StandardWrapper.loadServlet(StandardWrapper.java:1095)
    at org.apache.catalina.core.StandardWrapper.load(StandardWrapper.java:993)
    at org.apache.catalina.core.StandardContext.loadOnStartup(StandardContext.java:4149)
    at org.apache.catalina.core.StandardContext.start(StandardContext.java:4458)
    at org.apache.catalina.core.ContainerBase.start(ContainerBase.java:1045)
    at org.apache.catalina.core.StandardHost.start(StandardHost.java:722)
    at org.apache.catalina.core.ContainerBase.start(ContainerBase.java:1045)
    at org.apache.catalina.core.StandardEngine.start(StandardEngine.java:443)
    at org.apache.catalina.core.StandardService.start(StandardService.java:516)
    at org.apache.catalina.core.StandardServer.start(StandardServer.java:710)
    at org.apache.catalina.startup.Catalina.start(Catalina.java:583)
    at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
    at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:39)
    at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:25)
    at java.lang.reflect.Method.invoke(Method.java:585)
    at org.apache.catalina.startup.Bootstrap.start(Bootstrap.java:288)
    at org.apache.catalina.startup.Bootstrap.main(Bootstrap.java:413)
    Nov 10, 2009 4:26:40 PM org.apache.catalina.core.ApplicationContext log
    INFO: Marking servlet Faces Servlet as unavailable
    Nov 10, 2009 4:26:40 PM org.apache.catalina.core.ApplicationContext log
    SEVERE: Error loading WebappClassLoader
    delegate: false
    repositories:
    /WEB-INF/classes/
    ———-> Parent Classloader:
    org.apache.catalina.loader.StandardClassLoader@601bb1
    javax.faces.webapp.FacesServlet
    java.lang.ClassNotFoundException: javax.faces.webapp.FacesServlet
    at org.apache.catalina.loader.WebappClassLoader.loadClass(WebappClassLoader.java:1387)
    at org.apache.catalina.loader.WebappClassLoader.loadClass(WebappClassLoader.java:1233)
    at org.apache.catalina.core.StandardWrapper.loadServlet(StandardWrapper.java:1095)
    at org.apache.catalina.core.StandardWrapper.load(StandardWrapper.java:993)
    at org.apache.catalina.core.StandardContext.loadOnStartup(StandardContext.java:4149)
    at org.apache.catalina.core.StandardContext.start(StandardContext.java:4458)
    at org.apache.catalina.core.ContainerBase.start(ContainerBase.java:1045)
    at org.apache.catalina.core.StandardHost.start(StandardHost.java:722)
    at org.apache.catalina.core.ContainerBase.start(ContainerBase.java:1045)
    at org.apache.catalina.core.StandardEngine.start(StandardEngine.java:443)
    at org.apache.catalina.core.StandardService.start(StandardService.java:516)
    at org.apache.catalina.core.StandardServer.start(StandardServer.java:710)
    at org.apache.catalina.startup.Catalina.start(Catalina.java:583)
    at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
    at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:39)
    at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:25)
    at java.lang.reflect.Method.invoke(Method.java:585)
    at org.apache.catalina.startup.Bootstrap.start(Bootstrap.java:288)
    at org.apache.catalina.startup.Bootstrap.main(Bootstrap.java:413)
    Nov 10, 2009 4:26:40 PM org.apache.catalina.core.StandardContext loadOnStartup
    SEVERE: Servlet /JSFTest threw load() exception
    java.lang.ClassNotFoundException: javax.faces.webapp.FacesServlet
    at org.apache.catalina.loader.WebappClassLoader.loadClass(WebappClassLoader.java:1387)
    at org.apache.catalina.loader.WebappClassLoader.loadClass(WebappClassLoader.java:1233)
    at org.apache.catalina.core.StandardWrapper.loadServlet(StandardWrapper.java:1095)
    at org.apache.catalina.core.StandardWrapper.load(StandardWrapper.java:993)
    at org.apache.catalina.core.StandardContext.loadOnStartup(StandardContext.java:4149)
    at org.apache.catalina.core.StandardContext.start(StandardContext.java:4458)
    at org.apache.catalina.core.ContainerBase.start(ContainerBase.java:1045)
    at org.apache.catalina.core.StandardHost.start(StandardHost.java:722)
    at org.apache.catalina.core.ContainerBase.start(ContainerBase.java:1045)
    at org.apache.catalina.core.StandardEngine.start(StandardEngine.java:443)
    at org.apache.catalina.core.StandardService.start(StandardService.java:516)
    at org.apache.catalina.core.StandardServer.start(StandardServer.java:710)
    at org.apache.catalina.startup.Catalina.start(Catalina.java:583)
    at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
    at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:39)
    at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:25)
    at java.lang.reflect.Method.invoke(Method.java:585)
    at org.apache.catalina.startup.Bootstrap.start(Bootstrap.java:288)
    at org.apache.catalina.startup.Bootstrap.main(Bootstrap.java:413)
    Nov 10, 2009 4:26:40 PM org.apache.catalina.core.ApplicationContext log
    INFO: Marking servlet Faces Servlet as unavailable
    Nov 10, 2009 4:26:40 PM org.apache.catalina.core.ApplicationContext log
    SEVERE: Error loading WebappClassLoader
    delegate: false
    repositories:
    /WEB-INF/classes/
    ———-> Parent Classloader:
    org.apache.catalina.loader.StandardClassLoader@601bb1
    javax.faces.webapp.FacesServlet
    java.lang.ClassNotFoundException: javax.faces.webapp.FacesServlet
    at org.apache.catalina.loader.WebappClassLoader.loadClass(WebappClassLoader.java:1387)
    at org.apache.catalina.loader.WebappClassLoader.loadClass(WebappClassLoader.java:1233)
    at org.apache.catalina.core.StandardWrapper.loadServlet(StandardWrapper.java:1095)
    at org.apache.catalina.core.StandardWrapper.load(StandardWrapper.java:993)
    at org.apache.catalina.core.StandardContext.loadOnStartup(StandardContext.java:4149)
    at org.apache.catalina.core.StandardContext.start(StandardContext.java:4458)
    at org.apache.catalina.core.ContainerBase.start(ContainerBase.java:1045)
    at org.apache.catalina.core.StandardHost.start(StandardHost.java:722)
    at org.apache.catalina.core.ContainerBase.start(ContainerBase.java:1045)
    at org.apache.catalina.core.StandardEngine.start(StandardEngine.java:443)
    at org.apache.catalina.core.StandardService.start(StandardService.java:516)
    at org.apache.catalina.core.StandardServer.start(StandardServer.java:710)
    at org.apache.catalina.startup.Catalina.start(Catalina.java:583)
    at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
    at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:39)
    at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:25)
    at java.lang.reflect.Method.invoke(Method.java:585)
    at org.apache.catalina.startup.Bootstrap.start(Bootstrap.java:288)
    at org.apache.catalina.startup.Bootstrap.main(Bootstrap.java:413)
    Nov 10, 2009 4:26:40 PM org.apache.catalina.core.StandardContext loadOnStartup
    SEVERE: Servlet /HelloWorldJSF threw load() exception
    java.lang.ClassNotFoundException: javax.faces.webapp.FacesServlet
    at org.apache.catalina.loader.WebappClassLoader.loadClass(WebappClassLoader.java:1387)
    at org.apache.catalina.loader.WebappClassLoader.loadClass(WebappClassLoader.java:1233)
    at org.apache.catalina.core.StandardWrapper.loadServlet(StandardWrapper.java:1095)
    at org.apache.catalina.core.StandardWrapper.load(StandardWrapper.java:993)
    at org.apache.catalina.core.StandardContext.loadOnStartup(StandardContext.java:4149)
    at org.apache.catalina.core.StandardContext.start(StandardContext.java:4458)
    at org.apache.catalina.core.ContainerBase.start(ContainerBase.java:1045)
    at org.apache.catalina.core.StandardHost.start(StandardHost.java:722)
    at org.apache.catalina.core.ContainerBase.start(ContainerBase.java:1045)
    at org.apache.catalina.core.StandardEngine.start(StandardEngine.java:443)
    at org.apache.catalina.core.StandardService.start(StandardService.java:516)
    at org.apache.catalina.core.StandardServer.start(StandardServer.java:710)
    at org.apache.catalina.startup.Catalina.start(Catalina.java:583)
    at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
    at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:39)
    at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:25)
    at java.lang.reflect.Method.invoke(Method.java:585)
    at org.apache.catalina.startup.Bootstrap.start(Bootstrap.java:288)
    at org.apache.catalina.startup.Bootstrap.main(Bootstrap.java:413)
    Nov 10, 2009 4:26:40 PM org.apache.coyote.http11.Http11Protocol start

    Thanks
  • karuna wrote on 24 December, 2009, 5:47

    Hi Viral.

    This is karuna from ULM..Hope you remember me!.i have to build a small application in JSF. I just went through your tutorial.I did not know that you have good knowledege in JSF too.Good job..probably you can help me out in building the small application in JSF. Will discuss with u my requirements soon!!!

    thanks
  • Viral Patel wrote on 26 December, 2009, 0:40

    Hi karuna, Nice to hear from you. Let me know if you need my help in JSF.
  • Neo wrote on 1 January, 2010, 23:05

    Hi Viral,

    While running your example, I am also getting the same error as Viv… You have any clue what the issue could be?

    Thanks in advance. :)
  • Patrick wrote on 19 January, 2010, 18:55

    Hi Neo

    The reason you keep getting the error as Viv is that the app cant find the class ‘ javax.faces.webapp.FacesServlet’. In another word it cant find the class javax.faces.webapp.FacesServlet within the jar file jsf-api.jar. What you can try is to go into the JSF Capacities window to make sure you setup the Libraries to include the jsf-api.jar.
    Hope it helps.
  • Amit Saxena wrote on 29 January, 2010, 13:23

    Hey Viral,
    Great job man.
    Can you help me with a tutorial that combines JPA and JSF capabilities, or rather if you can help me with JPA tutorial , it will be great..
  • Paul wrote on 22 February, 2010, 20:24

    great for tutorial, I am from Peru, and read this, for me excellent the kind of explanation
  • satish wrote on 1 April, 2010, 11:37

    When i run your application from eclipse ganemade version i am getting following error.

    INFO: JSF1027: [HelloWorldJSF] The ELResolvers for JSF were not registered with the JSP container.
    2010-04-01 12:01:03.606 NOTIFICATION J2EE JSP-0008 Unable to dispatch JSP Page : Exception:oracle.jsp.parse.JspParseException: /AddUser.jsp: Line # 9,
    Error: Unable to instantiate tag: f:view (class: null) Make sure that the tag class is available and that the tag library containing the class is not excluded from this application.
    2010-04-01 12:04:45.529 NOTIFICATION J2EE JSP-0008 Unable to dispatch JSP Page : Exception:oracle.jsp.parse.JspParseException: /AddUser.jsp: Line # 9,
    Error: Unable to instantiate tag: f:view (class: null) Make sure that the tag class is available and that the tag library containing the class is not excluded from this application.

    please help me
  • vinay wrote on 8 April, 2010, 8:51

    nice contents.
    thank you.
  • Tulio Domingos wrote on 16 April, 2010, 18:40

    Nice quick start guide…I’ve always used Spring MVC and new to JSF now..Do you have an example on how to integrate Facelets with this?
  • Abhijeet wrote on 22 April, 2010, 9:57

    it is so simple and very easy for me to understand the jsf now
    Thanks
  • Maneesh wrote on 29 May, 2010, 9:45

    hiiiiii,
    dear thanks for a marvelous guidelines,,,,,,,,,,
  • Maneesh wrote on 29 May, 2010, 9:46

    You have any clue what the issue could be?

    Thanks in advance. :)
  • rajesh wrote on 9 June, 2010, 11:31

    hiiiiiiiii
    dear thanks …its very simple and easy to understand …am new to jsf i have one doubt
    in some examples i saw some jsp file and jspx files …why they are used jspx file ? when we have to use jspx?
    thanks in advance…..
  • rajesh wrote on 9 June, 2010, 11:53

    and one more doubt viral. is it possible to combine tiles with jsf

Write a Comment

Gravatars are small images that can show your personality. You can get your gravatar for free today!

Copyright © 2010 ViralPatel.net. All rights reserved.