JSF 2 convertNumber example

In JSF, “f:convertNumber” is a standard converter, which converts String into a specified “Number” format. In addition, it’s also used as a validator to make sure the input value is a valid number. See following common used examples :

Note : Assuming #{receipt.amount} contains a “0.1” value.

1. minFractionDigits attribute


<h:outputText value="#{receipt.amount}" >
	<f:convertNumber minFractionDigits="2" />
</h:outputText>

Display the value as “0.10”.

2. pattern attribute


<h:outputText value="#{receipt.amount}" >
	<f:convertNumber pattern="#0.000" />
</h:outputText>

Display the value as “0.100”.

Note
The pattern format is defined in java.text.DecimalFormat.

3. currencyCode attribute


<h:outputText value="#{receipt.amount}" >
	<f:convertNumber currencyCode="GBP" type="currency" />
</h:outputText>

Display the value as “GBP0.10”.

Note
The currencyCode is defined in ISO 4217. To use currencyCode attribute, the type attribute have to change to “currency“.

4. type=”percent” attribute


<h:outputText value="#{receipt.amount}" >
	<f:convertNumber type="percent" />
</h:outputText>

Display the value as “10%”.

P.S For other “f:convertNumber” attributes, you can visit this JSF “f:convertNumber” JavaDoc.

JSF f:convertNumber Example

The following JSF 2.0 complete example shows you how to use the “f:convertNumber” tag.

1. Managed Bean

A simple managed bean, with an “amount” property.


package com.mkyong;

import java.io.Serializable;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
 
@ManagedBean(name="receipt")
@SessionScoped
public class ReceiptBean implements Serializable{
	
	double amount;

	public double getAmount() {
		return amount;
	}

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

}

2. f:convertNumber examples

JSF XHTML page to use “f:convertNumber” tag to do the validation and also the String formater.

default.xhtml


<?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:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      >
    <h:body>
    	
    	<h1>JSF 2 convertNumber example</h1>
		
	   <h:form>
		
		<h:panelGrid columns="3">
			
			Amount : 
			<h:inputText id="amount" value="#{receipt.amount}" 
				size="20" required="true"
				label="Amount" >
				<!-- display in at least 2 decimal points -->
				<f:convertNumber minFractionDigits="2" />
			</h:inputText>
					
			<h:message for="amount" style="color:red" />
			
		</h:panelGrid>
			
		<h:commandButton value="Submit" action="receipt" />
			
	   </h:form>
		
    </h:body>
</html>

receipt.xhtml


<?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:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      >
    <h:body>
    	
    	<h1>JSF 2 convertNumber example</h1>
			
	  <ol>
		<li>
			Amount [minFractionDigits="2"] : 
			<h:outputText value="#{receipt.amount}" >
				<f:convertNumber minFractionDigits="2" />
			</h:outputText>
		</li>
		<li>
			Amount [pattern="#0.000"] : 
			<h:outputText value="#{receipt.amount}" >
				<f:convertNumber pattern="#0.000" />
			</h:outputText>
		</li>
		<li>
			Amount [currencySymbol="$"] : 
			<h:outputText value="#{receipt.amount}">
				<f:convertNumber currencySymbol="$" type="currency" />
			</h:outputText>
		</li>
		<li>
			Amount [currencyCode="GBP"] : 
			<h:outputText value="#{receipt.amount}" >
				<f:convertNumber currencyCode="GBP" type="currency" />
			</h:outputText>
		</li>
		<li>
			Amount [type="percent"] : 
			<h:outputText value="#{receipt.amount}" >
				<f:convertNumber type="percent" />
			</h:outputText>
		</li>
	   </ol>
			
    </h:body>
</html>

3. Demo

If user fill in an invalid number format, display the error message.

jsf2-ConvertNumber-Example-1

User key in a “0.01” value and click on the “submit” button.

jsf2-ConvertNumber-Example-2

Display the submitted value into different display format.

jsf2-ConvertNumber-Example-3

Download Source Code

Download It – JSF-2-ConvertNumber-Example.zip (10KB)

Reference

  1. JSF 2 convertNumber JavaDoc
  2. Wiki ISO 4217 current code
  3. DecimalFormat JavaDoc

About the Author

author image
mkyong
Founder of Mkyong.com, love Java and open source stuff. Follow him on Twitter, or befriend him on Facebook or Google Plus. If you like my tutorials, consider make a donation to these charities.

Comments

avatar
13 Comment threads
1 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
14 Comment authors
Krzysztof NowakmaheshJohnnie SkywalkerRaid AlmouedKlaus Krieger Recent comment authors
newest oldest most voted
Krzysztof Nowak
Guest
Krzysztof Nowak

Link to JavaDoc is broken.

mahesh
Guest
mahesh

i want to SHOW as K , for eg 4000 need to show as 4K, is any way?

Johnnie Skywalker
Guest
Johnnie Skywalker

In this example, how is it done that number is correctly converted to double when passed with “,” as separator?

Raid Almoued
Guest
Raid Almoued

amazing tutorial…

Leonardo Cardozo Cadavid
Guest
Leonardo Cardozo Cadavid

As always you give me the answer I was looking for. Thanks again. btw, you should add the Custom error messages to this specific blog

gammy32r.com
Guest
gammy32r.com

Great web site you have here.. It’s difficult to find high quality writing like yours nowadays. I really appreciate individuals like you! Take care!!

Kamal
Guest
Kamal

You, sir, are a legend.

Jorge
Guest
Jorge

Hi nice job, but i have a problem when i’m using , here is an example of how i’m using it. Hope you can tell me something about.

MyCurrencyBean

MyDataBean{
private double number;
private String type; //currency,number,percent


public double getNumber(){
return number;
}

public void setNumber(Double data){
this.number = data;

}

public String getType(){
 return type;
}
/* Here i set one of this three posible values: currency, number or percent
*/
public void setType(String dataType){
this.type = dataType;
}

}

myCurrency.xhtml

...
<h:outputText value=#{myDataBean.number}>
<f:formatNumber type="#{myDataBean.type}"/>
</h:outputText>
...

This throws me an exception, javax.faces.convert.ConverterException: ….: No se ha podido convertir ‘1.505.080’ en una cadena.

This translates as Could not convert ‘1.505.080’ into a String.

Himanshu
Guest
Himanshu

Strange but it passes for the following input, leaving the trailing alphabets.

Sample Input: 444rfg

Josie
Guest
Josie

What if user enters 0.105?

The answer will be 0.10 or 0.11?

Klaus Krieger
Guest
Klaus Krieger

0.10

ClintJCL@gmail.com
Guest
ClintJCL@gmail.com

I can never get your examples to work in Eclipse… Even though I understand your examples and think they are good. :)

hi
Guest
hi

just to test !

Siva
Guest
Siva

Nice Application.