JSF Example Using JSF 2.0, eclipse, and maven
In this article I will show you how to create a simple JavaServer Faces (JSF) Web application starting from zero with Eclipse and Maven.
In this tutorial, JSF is used to create a simple greeting web application to run on the Tomcat server. It also demonstrates how Maven brings in the relevant dependent JAR files.
Tools used :
- JSF 2
- Maven 3
- Eclipse
- JDK 1.6
- Tomcat 6.0
Step 1 : Create Web Application Project using Maven Template
Create a Java web application project from “maven-archetype-webapp” template.
In this article I will show you how to create a simple JavaServer Faces (JSF) Web application starting from zero with Eclipse and Maven.
In this tutorial, JSF is used to create a simple greeting web application to run on the Tomcat server. It also demonstrates how Maven brings in the relevant dependent JAR files.
Tools used :
- JSF 2
- Maven 3
- Eclipse
- JDK 1.6
- Tomcat 6.0
Step 1 : Create Web Application Project using Maven Template
Create a Java web application project from “maven-archetype-webapp” template.
mvn archetype:generate -DgroupId=com.javawebtutor -DartifactId=JSFWebAppEx -DarchetypeArtifactId=maven-archetype-webapp -DinteractiveMode=false
Step 2 : Eclipse IDE integration
Convert this project to Eclipse web project with Maven command “mvn eclipse:eclipse -Dwtpversion=1.5".Open command prompt and navigate to generated "JSFWebAppEx" project and issue following command.
mvn eclipse:eclipse -Dwtpversion=1.5
Step 3 : Import the Project into eclipse
Import the project into eclipse IDE. Directory structure of projects is given bellow.
Step 4 : Add JSF 2.0 Dependencies in pom.xml
Add JSF dependency like jsf-api-2.1.3.jar, jsf-impl-2.1.3.jar, el-ri-1.0.jar, jsf-facelets-1.1.14.jar , jsp-api-2.1.jar, and so on in the pom.xml.
For Java EE Application Server like GlassfishIn most Java EE application servers, it has build-in support for JSF 2.0, so you need to download the single JSF API for development purpose.
... <dependencies> <dependency> <groupId>javax.faces</groupId> <artifactId>jsf-api</artifactId> <version>2.0</version> <scope>provided</scope> </dependency> </dependencies> <repositories> <repository> <id>java.net.m2</id> <name>java.net m2 repo</name> <url>http://download.java.net/maven/2</url> </repository> </repositories> ...
For tomcat server you need to download following dependencies.
pom.xml<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd"> <modelVersion>4.0.0</modelVersion> <groupId>com.javawebtutor</groupId> <artifactId>JSFWebAppEx</artifactId> <packaging>war</packaging> <version>1.0-SNAPSHOT</version> <name>JSFWebAppEx</name> <url>http://maven.apache.org</url> <dependencies> <dependency> <groupId>junit</groupId> <artifactId>junit</artifactId> <version>3.8.1</version> <scope>test</scope> </dependency> <dependency> <groupId>com.sun.faces</groupId> <artifactId>jsf-api</artifactId> <version>2.1.7</version> </dependency> <dependency> <groupId>com.sun.faces</groupId> <artifactId>jsf-impl</artifactId> <version>2.1.7</version> </dependency> <dependency> <groupId>javax.servlet</groupId> <artifactId>jstl</artifactId> <version>1.2</version> </dependency> <dependency> <groupId>javax.servlet</groupId> <artifactId>servlet-api</artifactId> <version>2.5</version> </dependency> <dependency> <groupId>javax.servlet.jsp</groupId> <artifactId>jsp-api</artifactId> <version>2.1</version> </dependency> <!-- Tomcat 6 need this --> <dependency> <groupId>com.sun.el</groupId> <artifactId>el-ri</artifactId> <version>1.0</version> </dependency> </dependencies> <build> <finalName>JSFWebAppEx</finalName> </build> </project>
After updating the pom.xml again execute "mvn eclipse:eclipse -Dwtpversion=1.5". After executing this command Maven will download required libraries.
Step 5 : Create java directory :
Create a directory named java under main."/src/main".
Note:-If created java directory is not in class path of project,we need to add this directory to class path of your project.
Step 6 : Add java directory to classpath of the Project :
- Right click on Project -> Build Path -> Configure build path.a new screen will open in that screen click on Source tab and then click on Add folder as shown bellow.
- Again one new screen will open and in that screen select the java checkbox and click on ok again OK as shown bellow.
Step 7 : Create JSF Managed Bean
A Managed Bean is a regular Java Bean class, registered with JSF. In other words, Managed Bean is a java bean, managed by the JSF framework.From JSF 2.0 and onwards, we can declare a managed bean, just by using the annotation @ManagedBean.
Create a package com.jwt.jsf.bean in java folder and create a class PersonBean in that package.Add bellow lines of code in this class.PersonBean is Managed bean class.
package com.jwt.jsf.bean; import javax.faces.bean.ManagedBean; import javax.faces.bean.SessionScoped; @ManagedBean @SessionScoped public class PersonBean { private String name; public String getName() { return name; } public void setName(String name) { this.name = name; } }
Note:- In JSF 1.x, you had to declare this beans in the faces-config.xml, but this is no longer required in JSF 2.0. We declare this beans using annotation.
Step 7 : Create properties file
Create a package com.jwt.jsf.properties inside src/main/resources folder and create a properties file messages.properties inside this package and add following code into this.
header=Welcome to javawebtutor.com greeting_text=Welcome to javawebtutor.com button_text=Hello sign=! welcome_msg=This is Welcome Page
Step 8 : Create JSF Pages
In JSF 2.0, it’s recommended to create a JSF page in XHTML file format, a file with a .xhtml extension.Create .xhtml file inside webapp directory of Project.
- Right click on the webapp folder
- Select New => HTML File (if you can’t find it, just select Other and the wizard will guide you through it).
- In the File Name, type index.xhtml and hit Next.
- Select the xhtml 1.0 strict template.
- Hit Finish.
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html"> <f:loadBundle basename="com.jwt.jsf.properties.messages" var="msg" /> <h:head> <title>JSF 2.0 Greeting</title> </h:head> <h:body> <h3><h:outputText value="#{msg.header}" /></h3> <h:form> <h:inputText id="name" value="#{personBean.name}"></h:inputText> <h:commandButton value="greeting" action="welcome"></h:commandButton> </h:form> </h:body> </html>
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html"> <f:loadBundle basename="com.jwt.jsf.properties.messages" var="msg" /> <h:head> <title>JSF 2.0 Hello World</title> </h:head> <h:body bgcolor="white"> <h3><h:outputText value="#{msg.welcome_msg}" /></h3> <h4><h:outputText value="#{msg.greeting_text}" /> #{personBean.name} <h:outputText value="#{msg.sign}" /></h4> </h:body> </html>
Step 9 : JSF 2.0 Serlvet Configuration
In this step we will configure JSF via the web.xml file which is found under src/main/webapp/WEB-INF.
web.xml<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0"> <display-name>JSF</display-name> <welcome-file-list> <welcome-file>faces/index.xhtml</welcome-file> </welcome-file-list> <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> <servlet-mapping> <servlet-name>Faces Servlet</servlet-name> <url-pattern>*.jsf</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>Faces Servlet</servlet-name> <url-pattern>*.faces</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>Faces Servlet</servlet-name> <url-pattern>*.xhtml</url-pattern> </servlet-mapping> <context-param> <param-name>javax.faces.PROJECT_STAGE</param-name> <param-value>Development</param-value> </context-param> <listener> <listener-class>com.sun.faces.config.ConfigureListener</listener-class> </listener> </web-app>
In the web.xml file we have defined our index.xhtml page, as the welcome page that will be displayed, when the project’s URL, will be accessed.
After that we defined a javax.faces.webapp.FacesServlet mapping and mapped the application to the most used JSF file extensions (/faces/*, *.jsf, *.xhtml, *.faces).
In this case, the below 4 URLs are pointing to the same index.xhtml.
- http://localhost:8080/JSFWebAppEx/index.jsf
- http://localhost:8080/JSFWebAppEx/index.faces
- http://localhost:8080/JSFWebAppEx/index.xhtml
- http://localhost:8080/JSFWebAppEx/faces/index.jsf
In JSF 2.0 development, it’s recommended to set the “javax.faces.PROJECT_STAGE” to “Development“, it will provide many useful debugging information to let you track the bugs easily. For deployment, just change it to “Production“, you just do not want your customer to look at this annoying debugging information :).
Final Structure Of Project
Final structure of project is given bellow:
Step 10 : Build the project
Open command prompt and navigate to "StrutsWebApp" project and issue mvn:package command.
mvn package
After executing above command "JSFWebAppEx.war" file will generate in target folder of the project.
Step 11 : Run it
Copy the generated "JSFWebAppEx.war" file from target folder to your tomcat webapp folder and start the server. After successful start of server open web browser and enter http://localhost:8080/JSFWebAppEx/ in URL bar we will see following output.
Source (Developed in Eclipse) : Download |
Related Articles