Create Maven Project
On the Eclipse, create a Maven project
Click Next button and select maven-archetype-webapp
Click Next button and enter Project Information:
- GroupId: LearnJSFFrameworkWithRealApps
- Artifact Id: LearnJSFFrameworkWithRealApps
- Package: com.demo
Click Finish button to finish create Maven project. Add Libraries and Dynamic Web Module as below:
- Select project and right click, select Properties menu
- Select Project Facets on left side
- Select Dynamic Web Module
- Select JavaServer Faces
Configure web.xml
Open web.xml file in src\main\webapp\WEB-INF folder and add configurations for JSF Framework as below:
<?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" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
id="WebApp_ID" version="2.5">
<display-name>LearnJSFFrameworkWithRealApps</display-name>
<context-param>
<param-name>javax.faces.PROJECT_STAGE</param-name>
<param-value>Development</param-value>
</context-param>
<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>
</web-app>
Configure pom.xml
Open pom.xml file and add configurations for JSF Framework as below:
<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.demo</groupId>
<artifactId>LearnJSFFrameworkWithRealApps</artifactId>
<packaging>war</packaging>
<version>1.0-SNAPSHOT</version>
<name>LearnJSFFrameworkWithRealApps Maven Webapp</name>
<url>http://maven.apache.org</url>
<dependencies>
<dependency>
<groupId>com.sun.faces</groupId>
<artifactId>jsf-api</artifactId>
<version>2.2.8</version>
</dependency>
<dependency>
<groupId>com.sun.faces</groupId>
<artifactId>jsf-impl</artifactId>
<version>2.2.17</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>
<dependency>
<groupId>com.sun.el</groupId>
<artifactId>el-ri</artifactId>
<version>1.0</version>
</dependency>
</dependencies>
<build>
<finalName>LearnJSFFrameworkWithRealApps</finalName>
<plugins>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-compiler-plugin</artifactId>
<version>2.3.1</version>
<configuration>
<source>1.6</source>
<target>1.6</target>
</configuration>
</plugin>
</plugins>
</build>
</project>
Create Resources
Images
Create new folder named resources in src\main\webapp folder. In this folder, create new folder named images. Copy images need show to this folder
Entity Class
Create new package, named com.entities. In this package, create a entity class: Product.java
Product.java
package com.entities;
public class Product {
private String id;
private String name;
private String photo;
private double price;
private int quantity;
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getPhoto() {
return photo;
}
public void setPhoto(String photo) {
this.photo = photo;
}
public double getPrice() {
return price;
}
public void setPrice(double price) {
this.price = price;
}
public int getQuantity() {
return quantity;
}
public void setQuantity(int quantity) {
this.quantity = quantity;
}
public Product() {
}
public Product(String id, String name, String photo, double price, int quantity) {
this.id = id;
this.name = name;
this.photo = photo;
this.price = price;
this.quantity = quantity;
}
}
Create Managed Bean
Create new package named com.demo in src/main/java folder. In this package, create new java class named DemoManagedBean.java as below:
package com.demo;
import java.util.ArrayList;
import java.util.List;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import com.entities.Product;
@SessionScoped
@ManagedBean(name = "demoManagedBean")
public class DemoManagedBean {
private List<Product> products;
public List<Product> getProducts() {
return products;
}
public void setProducts(List<Product> products) {
this.products = products;
}
public DemoManagedBean() {
this.products = new ArrayList<Product>();
this.products.add(new Product("p01", "name 1", "thumb1.gif", 2, 3));
this.products.add(new Product("p02", "name 2", "thumb1.gif", 8, 6));
this.products.add(new Product("p02", "name 2", "thumb2.gif", 6, 3));
}
}
Create View
Create new xhtml file named index.xhtml in src\main\webapp as below:
<?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"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
<title>Demo Page</title>
</h:head>
<h:body>
<h3>Product List</h3>
<h:dataTable var="product" value="#{demoManagedBean.products}"
border="1" cellpadding="2" cellspacing="2">
<h:column>
<f:facet name="header">Id</f:facet>
#{product.id}
</h:column>
<h:column>
<f:facet name="header">Name</f:facet>
#{product.name}
</h:column>
<h:column>
<f:facet name="header">Photo</f:facet>
<h:graphicImage library="images" name="#{product.photo}"></h:graphicImage>
</h:column>
<h:column>
<f:facet name="header">Price</f:facet>
#{product.price}
</h:column>
<h:column>
<f:facet name="header">Quantity</f:facet>
#{product.quantity}
</h:column>
<h:column>
<f:facet name="header">Total</f:facet>
#{product.price * product.quantity}
</h:column>
</h:dataTable>
</h:body>
</html>
Structure of Project
Run Application
Select project, right click and select Run on Server menu
Access index.xhtml page with following url:
http://localhost:8080/LearnJSFFrameworkWithRealApps/faces/index.xhtml
Output