Home  >  JSF 2

Create Custom Converter in JSF 2 with @FacesConverter Annotation

By Arvind Rai, January 19, 2015
In this page we will learn how to create custom converter in JSF 2 using @FacesConverter Annotation. The custom converter if annotated with @FacesConverter, is automatically registered with runtime. To create a custom converter, the converter class must implement interface javax.faces.convert.FacesConverter. While using converter on UI, the input filed has to use converter id attribute defined by @FacesConverter Annotation.
In our example we have a student converter. We enter student data as string and (-) separated. Managed bean gets this data as a student object converted by student converter.

Project Structure in Eclipse

Find the project structure in eclipse for custom converter.
Create Custom Converter in JSF 2 with @FacesConverter Annotation

Use @FacesConverter and javax.faces.convert.FacesConverter to Create Converter

To create a converter, we have to annotate our class with @FacesConverter and implement javax.faces.convert.FacesConverter interface.

@FacesConverter: This is an annotation approach to register a converter with runtime. The value assigned to @FacesConverter is converter id which will be used at view level.
javax.faces.convert.FacesConverter: This is an interface which has two methods to be overridden. The methods are getAsObject and getAsString. getAsObject converts string as an object and getAsString converts object as an string.

In our example, we are implementing a student converter. The input field will accept student data as (-) separated and managed bean will get it as Student class. Where we will change it to upper case. And while showing on UI, It will again be changed in string.
package com.concretepage;
import javax.faces.component.UIComponent;
import javax.faces.context.FacesContext;
import javax.faces.convert.Converter;
import javax.faces.convert.FacesConverter;
public class StudentConverter implements Converter {
	public Object getAsObject(FacesContext context, UIComponent component,
			String value) {
		String[] strArr = value.split("-");
		if (strArr.length >= 3) {
			Student student = new Student();
			return student;
		return null;
	public String getAsString(FacesContext context, UIComponent component,
			Object value) {
		if (value != null ){
			Student student = (Student)value;
			StringBuffer strBuff = new StringBuffer(student.getName()).append("-");
			String studentStr = strBuff.toString();
			return studentStr;
		return null;
The student class is given as below.
package com.concretepage;
public class Student {
	private String name;
	private Integer age;
	private String college;
	public String getName() {
		return name;
	public void setName(String name) {
		this.name = name;
	public Integer getAge() {
		return age;
	public void setAge(Integer age) {
		this.age = age;
	public String getCollege() {
		return college;
	public void setCollege(String college) {
		this.college = college;

"converter" attribute in h:inputText

To refer the custom converter in view, we have to use our converter id. In our example , we have converter id as stdcon.
<html lang="en"
        <title>Custom Converter in JSF 2</title>
       <h3>Custom Converter in JSF 2</h3>
		<h:form id="studentForm">
			<h:outputLabel value="Student Data:" />
			<h:inputText value="#{studentForm.student}" converter="stdcon"/> <br />
			<h:commandButton value="Submit" action="#{studentForm.changeStudentData}"></h:commandButton>

Create Managed Bean for the Demo

In the managed bean, we are implementing a method which will simply do some changes in data. Just making name and college as capital.
package com.concretepage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
@ManagedBean(name = "studentForm", eager = true)
public class StudentForm {
    private Student student;
    public String changeStudentData(){
    	return "studentform";
    public Student getStudent() {
	return student;
    public void setStudent(Student student) {
	this.student = student;


Find the web.xml for JSF 2 demo.
<?xml version="1.0" encoding="ISO-8859-1" ?>
<web-app xmlns="http://java.sun.com/xml/ns/j2ee"
    xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"
	<display-name>Custom Converter in JSF 2</display-name>


Find the gradle to resolve JSF 2 jar dependencies.
apply plugin: 'java'
apply plugin: 'eclipse'
apply plugin: 'war'
archivesBaseName = 'JSF2Demo'
version = '1' 
repositories {
dependencies {
    compile 'com.sun.faces:jsf-api:2.2.9'
    compile 'com.sun.faces:jsf-impl:2.2.9'
    compile 'jstl:jstl:1.2'


In the output, we have an input field in which we are entering data with (-) separated and after submit, values are being capital. Access the URL as http://localhost:8080/JSF2Demo-1/studentform.xhtml and enter data as below.
Create Custom Converter in JSF 2 with @FacesConverter Annotation
After submit, we will get same page with data in capital letter.
Create Custom Converter in JSF 2 with @FacesConverter Annotation

Download Source Code


©2018 concretepage.com | Privacy Policy | Contact Us