Creating JavaServer Faces Application In Eclipse
This article describes how to develop JavaServer Faces web applications with Eclipse. It demonstrates managed beans, validators, external resource bundles files and the JSF navigation concept.
Tools Used
- JDK 1.6
- Eclipse Indigo
- Tomcat 6
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
Click here to download the jar files.
This article describes how to develop JavaServer Faces web applications with Eclipse. It demonstrates managed beans, validators, external resource bundles files and the JSF navigation concept.
Tools Used
- JDK 1.6
- Eclipse Indigo
- Tomcat 6
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
Click here to download the jar files.
Let us start with our first JSF based web application.
Directory Structure Of Project
Step 1: Create Dynamic Web project
Open Eclipse and goto File -> New -> Project and select Dynamic Web Project in the New Project wizard screen.Select Dynamic Web Project and click Next.
Provide the name of the project as UserLoginJSF. 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 -> Next -> Next.
In next screen select Disable Library Configuration from drop down and click Finish.
Step 2: Add jar files to build path of the project
Copy all the required jar files to the lib folder of the project directory and add all jar files to the build path of the project.
Step 3: Create JSP files
Create two JSP files: login.jsp and welcome.jsp in WebContent folder.
In this application we are going to develop two pages login.jsp and welcome.jsp. The login.jsp prompts the user to enter his/her name. Code of login.jsp is given below.
login.jsp
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%> <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%> <html> <head> <title>Login Page</title> </head> <body> <f:view> <h1> <h:outputText value="Login Page" /> </h1> <h:form id="LoginForm"> <h:outputText value="Enter Your Name:" /> <h:inputText value="#{loginBean.userName}" /> <h:commandButton action="welcome" value="OK" /> </h:form> </f:view> </body> </html>
welcome.jsp
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %> <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %> <html> <head> <title>Welcome</title> </head> <body> <f:view> <h3> <h:outputText value="Welcome" />, <h:outputText value="#{loginBean.userName}" /> to javawebtutor.com! </h3> </f:view> </body> </html>
Step 4: Create Managed bean
Create a package com.jwt.jsf.bean in the source folder and create a Java file LoginBean.java. Copy following code into this file.
LoginBean.java
package com.jwt.jsf.bean; public class LoginBean { private String userName; public String getUserName() { return userName; } public void setUserName(String userName) { this.userName = userName; } }
Step 5: Update Configuration File(faces-config.xml)
Jsf looks for faces-config.xml in classpath and loads the configuration defined from here. Here we have defined managed bean (the backing bean), and navigation rule.
Open faces-config.xml from WebContent -> WEB-INF folder.Double click on the file. This will open the Faces Configuration Editor.
Select the ManagedBean tab in the editor. Select the request Managed Bean Element and select Add.
Choose the Using an existing Java class option, select Browse. Give the search element as LoginBean and select OK.
After that Next -> Next -> Finish
Now Bean is configured after that we need to configure navigation rule.Follow the steps mentioned below for configuration of navigation rule.
Launch the Faces Configuration Editor by double clicking on faces-config.xml
Select the Navigation Rule tab in the Configuration Editor. Under the Palette window select Page. This will select a PageFlow Page GUI object.
Drag the mouse over the Navigation Rule Window and click on the window. This will give a Select JSP File window. Select the login.jsp as shown in the figure and select OK.
Similarly add the welcome.jsp page on the Navigation Rule window. See the figure below:
Select Link from the Palette window and join the two pages as shown in the figure:
Select the link between the two pages and go to properties view and set the value for From Outcome field as validated. This is because of the tag <h:commandButton action="welcome" value="OK" />. Once all the inputs are valid the action taken is validated. See the figure.
Once done have a look the Source tab in the Faces Navigation Editor.Generated src code of faces-config.xml is given below.
faces-config.xml
<?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>loginBean</managed-bean-name> <managed-bean-class>com.jwt.jsf.bean.LoginBean</managed-bean-class> <managed-bean-scope>request</managed-bean-scope> </managed-bean> <navigation-rule> <display-name>login</display-name> <from-view-id>/login.jsp</from-view-id> <navigation-case> <from-outcome>welcome</from-outcome> <to-view-id>/welcome.jsp</to-view-id> </navigation-case> </navigation-rule> </faces-config>
Step 5: Create web.xml
Add following entry in web.xml file.
web.xml
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" "http://java.sun.com/dtd/web-app_2_3.dtd"> <web-app id="WebApp_ID"> <display-name>HelloWorldJSF</display-name> <servlet> <servlet-name>Faces Servlet</servlet-name> <servlet-class> javax.faces.webapp.FacesServlet</servlet-class> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>Faces Servlet</servlet-name> <url-pattern>/faces/*</url-pattern> </servlet-mapping> <welcome-file-list> <welcome-file>login.jsp</welcome-file> </welcome-file-list> </web-app>
Step 6: Deploy and Test the application
Right click on the login.jsp file and select Run As -> Run On Server. This will deploy the application on the Apache Tomcat Server and a Login page will be launched.
Lets give some sample inputs and click on OK button then welcome page will open:
You can download the source code of the example by clicking on the Download link below.
Source : Download |
Source + Lib : Download |