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>