Using Standard Converter & Custom Converter

Convertors are used to make sure the component value is of right type. When the user inputs value to the component, it is simple string value. Now you may be in the need of using this value as a different object like Boolean, Date etc. Converters can help in this conversion.

JSF framework has provided many converters like Boolean Converter, Byte Converter, Number Converter etc. These converters convert values into appropriate type of object and returns it also to the page in the appropriate format.

Using the Standard Converters:

JSF provides standard converters for all basic types like Byte, Short, Integer, Long, Float, Double, BigDecimal, BigInteger, Boolean and Character. If you don't specify the converter for the component then JSF itself will apply the appropriate converter for the component. For example, if the component is associated with a property of type double, JSF will choose the Double converter.

For example:

<h:inputText id="num" value="#{MyBean.number}"/>

Using DateTimeConverter

If you want to convert a component value to a Date type then <f:convertDateTime/> tag can be used inside the component tag. It has many attribute like dateStyle, locale, pattern, timeStyle, timeZone etc which can be used to to specify the format and type of the data.

For example:

<h:inputText id="date" value="#{ManagedBean.date}">
<f:convertDateTime pattern="dd/MM/yyyy"/>
</h:inputText>

<h:message for="date" style="color:RED"/>

<f:convertDateTime/> ensures the date is convertible into a date object of the format dd/MM/yyyy (day/month/year).

Using NumberConverter

If you want to convert a component value to a Number type then <f:convertNumber/> tag can be used inside the component tag. It has many attribute like integerOnly, maxIntegerDigits, currencyCode, currencySymbol, pattern etc.

For example:

<h:outputText value="#{ManagedBean.number}">
<f:convertNumber type="number" integerOnly="true" maxIntegerDigits="2"/>
</h:outputText>

displays only the integer part and only 2 digits of the value.

<h:inputText id="salary" value="#{ManagedBean.salary}">
<f:convertNumber currencySymbol="$" type="currency"/>
</h:inputText><br>
<h:message for="salary" style="color:RED"/>

<h:outputText value="#{ManagedBean.salary}">
<f:convertNumber currencySymbol="$" type="currency"/>
</h:outputText>

takes the input value with $ symbol and displays again the value with $ symbol.

Custom Converter

JSF flexible architecture provides you freedom to create your own converters. These can be used to check the value in the correct format. For example, In our application user is provided an input box to fill time in "hours:minutes:seconds" format. This String is converted as Object by the converter and also converted back in String when it needs to display in the web-page. Now if the user doesn't fill time in correct format then it displays error message showing the conversion could not be successful.

Steps to create a Custom Converter:

1. Create a class that implements javax.faces.converter.Converter interface.

2. Import necessary packages and classes.

3. Implement two abstract classes "getAsObject()", "getAsString()" provided by Converter interface.
getAsObject() method converts the String (User Input) to Object and getAsString() method converts the Object to String to send back to the page.

package roseindia;

import javax.faces.component.UIComponent;
import javax.faces.context.FacesContext;
import javax.faces.convert.*;
import javax.faces.application.*;

public class hr_mi_se_Converter implements Converter {
public hr_mi_se_Converter() {
}

public Object getAsObject(FacesContext facesContext, UIComponent uiComponent, String param){
try {
   String hr_mi_se[] = param.split(":");
   int seconds =
   Integer.parseInt(hr_mi_se[0])*60*60 +
   Integer.parseInt(hr_mi_se[1])*60+
   Integer.parseInt(hr_mi_se[2]);
   Integer sObject= new Integer(seconds);
   return sObject;
}
catch (Exception exception) {
throw new ConverterException(exception);
}
}

public String getAsString(FacesContext facesContext, UIComponent uiComponent, Object obj) {
   try {
   int total_seconds = (int)((Integer)obj).intValue();
   int hours=(total_seconds)/(60*60);
   int rem=(total_seconds)%(60*60);
   int minutes=rem/60;
   int seconds=rem%60;
   String str_hours=""+hours;
   String str_minutes=""+minutes;
   String str_seconds=""+seconds;

   if(hours<10){
   str_hours="0"+hours;
   }
   if(minutes<10){
   str_minutes="0"+minutes;
   }
   if(seconds<10){
   str_seconds="0"+seconds;
   }
   return str_hours + ":" + str_minutes + ":" + str_seconds;
   }
   catch (Exception exception) {
   throw new ConverterException(exception);
}
   }
}

4. Configure the configuration file (faces-config.xml) adding <converter> element.
This element has child elements <converter-id> (name of the converter to be used while programming )and <converter-class> ( name of the converter class which we have created).

<converter>
<converter-id>hr_mi_se_Converter</converter-id>
<converter-class>roseindia.hr_mi_se_Converter</converter-class>
</converter>

5. Create view page where <f:converter> tag is used with attribute "converterId" which specifies the name of the converter which we have specified in <converter-id> element of <converter> element in "faces-config.xml" file.
6. Use <h:message> tag to display the error message.

<h:inputText id="input_text" value="#{ManagedBean.time}">
<f:converter converterId="hr_mi_se_Converter" />
</h:inputText>

<h:message for="input_text" style="color:RED"/>

Download code for all examples

Using Standard Converter & Custom Converter

Using Standard Converter & Custom Converter

Using Standard Converter & Custom Converter

Tutorials