JSF Standard Converter Example in Eclipse

December 14, 2014 by Mukesh Kumar at 3:47 pm

In this example we will discuss how to use jsf supplied Standard converters to convert the user input from String to different java data types.

Directory Structure Of Project

Directory Structure of project is shown below:

JSF Standard Converter Example

Tools used :

JSF 1.2
Eclipse
JDK 1.6
Tomcat 6.0

In this example we will discuss how to use jsf supplied Standard converters to convert the user input from String to different java data types.

Directory Structure Of Project

Directory Structure of project is shown below:

JSF Standard Converter Example

Tools used :

JSF 1.2
Eclipse
JDK 1.6
Tomcat 6.0

Note:-If you have no idea about how to create JSF Application in eclipse then it is strongly recommended to complete Creating JavaServer Faces Application In Eclipse Tutorial before starting of this Project.

Step 1: Create Dynamic Web project

Open Eclipse and go to File -> New -> Project and select Dynamic Web Project in the New Project wizard screen.

JSF Example

Provide the name of the project as StandardConverter. Once this is done, select the target runtime environment as 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.

JSF Standard Converter Example

In next screen select Disable Library Configuration from drop down and click Finish.

JSF validation Example

Step 2: Add jar files to build path of the project

Copy all the required jar files shown bellow to the lib folder of the project directory and add all jar files to the build path of the project.

JSF Standard Converter Example

Step 3: Create JSP files

Create two JSP files: index.jsp and result.jsp in WebContent folder.

index.jsp

In this page user is entering his/her account details. We are using number converter for converting amount and date converter for converting date.

<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<f:view>
	<html>
<head>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<title><h:outputText value="#{msg.title}" /></title>
</head>
<body bgcolor="silver">
	<h:form>
		<h1>
			<h:outputText value="#{msg.enter_amount}" />
		</h1>
		<h:panelGrid columns="3">
			<h:outputText value="#{msg.amount}" />
			<h:inputText id="amount" label="#{msg.amount}"
				value="#{employee.amount}">
				<f:convertNumber minFractionDigits="2" />
			</h:inputText>
			<h:message for="amount" styleClass="errormsg" />

			<h:outputText value="#{msg.account_no}" />
			<h:inputText id="card" label="#{msg.account_no}"
				value="#{employee.accountNo}" />
			<h:panelGroup />

			<h:outputText value="#{msg.expiry_date}" />
			<h:inputText id="date" label="#{msg.expiry_date}"
				value="#{employee.date}">
				<f:convertDateTime pattern="MM/yy" />
			</h:inputText>
			<h:message for="date" styleClass="errorMessage" />
		</h:panelGrid>
		<h:commandButton value="#{msg.submit}" action="submit" />
	</h:form>
</body>
	</html>
</f:view>

result.jsp

<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<f:view>
	<html>
<head>
<link href="styles.css" rel="stylesheet" type="text/css" />
<title><h:outputText value="#{msg.title}" /></title>
</head>
<body bgcolor="silver">
	<h:form>
		<h1>
			<h:outputText value="#{msg.employee_payment_info}" />
		</h1>
		<h:panelGrid columns="2">
			<h:outputText value="#{msg.amount}" />
			<h:outputText value="#{employee.amount}">
				<f:convertNumber type="currency" />
			</h:outputText>

			<h:outputText value="#{msg.account_no}" />
			<h:outputText value="#{employee.accountNo}" />

			<h:outputText value="#{msg.expiry_date}" />
			<h:outputText value="#{employee.date}">
				<f:convertDateTime pattern="MM/yy" />
			</h:outputText>
		</h:panelGrid>
		<h:commandButton value="Back" action="back" />
	</h:form>
</body>
	</html>
</f:view>

Step 4 : 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.

messages.properties

title= Sample Application to Test Converter
enter_amount=Please Enter the payment information
amount=Amount
account_no=Account No
expiry_date=Expiration date (MM/YY)
submit=Submit
employee_payment_info=Employee Payment Information

Step 5 : Create CSS File :

Our requirement is in case of any validation error we need to display the error message in Red color. For this we need to create one css file. We created style.css in which one css class errormsg is created for this purpose.

In index.jsp we added below code to display the error message.

<h:message for="card" styleClass="errormsg" />

In the above code "errormsg" is css class name.

Create a folder inside WebContent and provide the name of the folder as css.In this folder create a css file and name it to style.css and add below line of code into this file.

.errormsg {
   color:red; 
}

We need to provide the path of css in our jsp pages. We need to add below line of code to import css in the jsp pages.

<link href="css/style.css" rel="stylesheet" type="text/css" />

Step 6 : 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 java class EmployeeBean inside "com.javawebtutor.jsf.bean" package and add bellow line of code into this class.

EmployeeBean.java

package com.javawebtutor.jsf.bean;

import java.util.Date;

public class EmployeeBean {
	private double amount;
	private String accountNo;
	private Date date;

	public double getAmount() {
		return amount;
	}

	public void setAmount(double amount) {
		this.amount = amount;
	}

	public String getAccountNo() {
		return accountNo;
	}

	public void setAccountNo(String accountNo) {
		this.accountNo = accountNo;
	}

	public Date getDate() {
		return date;
	}

	public void setDate(Date date) {
		this.date = date;
	}

}

Step 7 : 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 and following code into this file.

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">
	<navigation-rule>
		<from-view-id>/index.jsp</from-view-id>
		<navigation-case>
			<from-outcome>submit</from-outcome>
			<to-view-id>/result.jsp</to-view-id>
		</navigation-case>
	</navigation-rule>

	<navigation-rule>
		<from-view-id>/result.jsp</from-view-id>
		<navigation-case>
			<from-outcome>back</from-outcome>
			<to-view-id>/index.jsp</to-view-id>
		</navigation-case>
	</navigation-rule>

	<managed-bean>
		<managed-bean-name>employee</managed-bean-name>
		<managed-bean-class>com.javawebtutor.jsf.bean.EmployeeBean</managed-bean-class>
		<managed-bean-scope>session</managed-bean-scope>
	</managed-bean>

	<application>
		<resource-bundle>
			<base-name>com.javawebtutor.jsf.properties.messages</base-name>
			<var>msg</var>
		</resource-bundle>
	</application>
</faces-config>

Step 8 : Update web.xml

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" 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">
	<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>faces/index.jsp</welcome-file>
	</welcome-file-list>
</web-app>