The <f:convertNumber/> convert a String to a number
of required format (it also acts as a validator
to ensure the input value is a valid number)
Common/basic usage in JSF (I) - use <f:convertNumber/>to convert the value of the closest parent UIComponent to a number. For example, the <f:convertNumber/> converter is commonly attached to inputs like below (here it is attached to an <h:inputText/>):
<?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://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:head>
<title>JSF convertNumber examples</title>
</h:head>
<h:body>
<h:form>
<h:panelGrid columns="3">
<h:outputLabel value="Enter a number:" for="nr1Id"/>
<h:inputText id="nr1Id" value="#{numberBean.nr1}" label="Enter a number">
<f:convertNumber />
</h:inputText>
<h:message for="nr1Id" style="color:red;"/>
</h:panelGrid>
<h:commandButton value="Send" action="#{numberBean.send1()}"/>
</h:form>
</h:body>
</html>
The managed bean is listed below:
@Named
@RequestScoped
public class NumberBean {
private Double nr1;
public NumberBean() {
}
// Getters and setters
public void send1() {
System.out.println("nr1 = " + nr1);
}
}
If case that the <f:convertNumber/>cannot successfully convert the provided value to a number it will throw a ConverterExceptionwith an error message like Enter a number: 'foo' is not a number. Example: 99.
Common/basic usage in JSF (II) - Use <f:convertNumber/>converter to "preserve" only the integer part of a number. The integerOnlyattribute is a flag specifying whether only the integer part of the value will be formatted and parsed. Expressions must evaluate to a boolean. Default value is false.
<h:form>
<h:panelGrid columns="2">
<h:outputLabel value="Enter a number:" for="nr2Id"/>
<h:inputText id="nr2Id" value="#{numberBean.nr2}" label="Enter a number">
<f:convertNumber integerOnly="true"/>
</h:inputText>
</h:panelGrid>
<h:commandButton value="Send" action="#{numberBean.send2()}"/>
</h:form>
The managed bean is listed below:
@Named
@RequestScoped
public class NumberBean {
private Integer nr2;
public NumberBean() {
}
// Getters and setters
public void send2() {
System.out.println("nr2 = " + nr2);
}
}
Now, if the user enters a number with decimals then only the integer part of the number part will "pass through" the converter (e.g. for 234.12 it will remain 234).
Data flow in image (converter success):
More examples:
Format a number as currency depending on locale
<f:view locale="en_US">
Price (default locale):
<h:outputText value="#{numberBean.price}">
<f:convertNumber type="currency" /><!-- uses the en_US locale -->
</h:outputText>
Price (locale: ro_RO):
<h:outputText value="#{numberBean.price}">
<f:convertNumber type="currency" locale="ro_RO" />
</h:outputText>
Price (locale: de_DE):
<h:outputText value="#{numberBean.price}">
<f:convertNumber type="currency" locale="de_DE" />
</h:outputText>
</f:view>
The managed bean is listed below:
@Named
@RequestScoped
public class NumberBean {
private BigDecimal price = new BigDecimal(2645.5);
// Getters and setters
}
The result will be rendered in HTML as in figure below:
Set a currency symbol when formatting a number as currency
Price (£):
<h:outputText value="#{numberBean.price}">
<f:convertNumber type="currency" currencySymbol="£" />
</h:outputText>
Price ($):
<h:outputText value="#{numberBean.price}">
<f:convertNumber type="currency" currencySymbol="$" />
</h:outputText>
Price (€):
<h:outputText value="#{numberBean.price}">
<f:convertNumber type="currency" currencySymbol="€" />
</h:outputText>
Will be rendered in HTML as in figure below:
The managed bean is listed below:
@Named
@RequestScoped
public class NumberBean {
private BigDecimal price = new BigDecimal(2645.5);
// Getters and setters
}
Format a number using a custom pattern
Price:
<h:outputText value="#{numberBean.price}">
<f:convertNumber pattern="###,###.### €" />
</h:outputText>
Will be rendered in HTML as in figure below:
The managed bean is listed below:
@Named
@RequestScoped
public class NumberBean {
private BigDecimal price = new BigDecimal(2645.5);
// Getters and setters
}
Format a number as percentage
Discount:
<h:outputText value="#{numberBean.discount}">
<f:convertNumber type="percent" />
</h:outputText>
Will be rendered in HTML as in figure below:
The managed bean is listed below:
@Named
@RequestScoped
public class NumberBean {
private Number discount = 0.05;
// Getters and setters
}
Set the minimum number of digits that will be formatted in the fractional portion
Price:
<h:outputText value="#{numberBean.price}">
<f:convertNumber type="currency" minFractionDigits="1" />
</h:outputText>
Will be rendered in HTML as in figure below:
The managed bean is listed below:
@Named
@RequestScoped
public class NumberBean {
private BigDecimal price = new BigDecimal(2645.5);
// Getters and setters
}
Remove grouping separators when formatting a number into currency
Price:
<h:outputText value="#{numberBean.price}">
<f:convertNumber type="currency" groupingUsed="false" />
</h:outputText>
Will be rendered in HTML as in figure below:
The managed bean is listed below:
@Named
@RequestScoped
public class NumberBean {
private BigDecimal price = new BigDecimal(2645.5);
// Getters and setters
}
Using the OmniFaces formatBytes() function to format a value as B, KiB, MiB
Format 742 into byte: <h:outputText value="#{of:formatBytes(742)}" />
Format 4735 into kibibyte: <h:outputText value="#{of:formatBytes(4735)}" />
Format 6863463 into mebibyte: <h:outputText value="#{of:formatBytes(6863463)}" />
Will be rendered in HTML as in figure below:
Using the OmniFaces formatPercent() function to format a given number as percentage
<h:graphicImage name="default/images/AeroPro_drive.jpg"
title="Discount: #{of:formatPercent(numberBean.discount)}"/>
Will be rendered in HTML as in figure below:
The managed bean is listed below:
@Named
@RequestScoped
public class NumberBean {
private Number discount = 0.05;
// Getters and setters
}
Using the OmniFaces formatNumberDefault() function to format a given number in the locale-default pattern
<h:graphicImage name="default/images/AeroPro_drive.jpg"
title="Price: #{of:formatNumberDefault(numberBean.price)}"/>
Will be rendered in HTML as in figure below:
The managed bean is listed below:
@Named
@RequestScoped
public class NumberBean {
private BigDecimal price = new BigDecimal(2645.5);
// Getters and setters
}
Using the OmniFaces formatCurrency() function to format a given number as currency with the given symbol
<h:graphicImage name="default/images/AeroPro_drive.jpg"
title="Price: #{of:formatCurrency(169, '$')}"/>
Will be rendered in HTML as in figure below:
Using the OmniFaces formatNumber() function to format a given number in the given pattern
<h:graphicImage name="default/images/AeroPro_drive.jpg"
title="Price: #{of:formatNumber(169, '#.0 €')}"/>
Will be rendered in HTML as in figure below:
Complete source code on GitHub.
See also Mkyong.com.
More resources on Constantin Alin, ZEEF page.
Converters in JSF Extensions on JSF ShowCase ZEEF page.
More resources on Constantin Alin, ZEEF page.
Converters in JSF Extensions on JSF ShowCase ZEEF page.