JSF <f:convertNumber> Tag

It is used to convert component (user input) data into a Java Number type. You can convert a component's data to a java.lang.Number by nesting the convertNumber tag inside the component tag. The convertNumber tag has several attributes that allow you to specify the format and type of the data.

The following tables contains the NumberConverter attributes:

Attribute Type Description
binding NumberConverter It is used to bind a converter to a managed bean property.
currencyCode String It represents ISO 4217 currency code which is used only when formatting currencies.
currencySymbol String It represents currency symbol and applied only when formatting currencies.
for String It is used with composite components. It refers to one of the objects within the composite component inside which this tag is nested.
groupingUsed Boolean It specifies whether formatted output contains grouping separators or not.
integerOnly Boolean It specifies whether only the integer part of the value will be parsed or not.
locale String or Locale Its number styles are used to format or parse data.
maxFractionDigits int It is used to set maximum number of digits formatted in the fractional part of the output.
maxIntegerDigits int It is used to set maximum number of digits formatted in the integer part of the output.
minFractionDigits int It is used to set minimum number of digits formatted in the fractional part of the output.
minIntegerDigits int It is used to set minimum number of digits formatted in the integer part of the output.
pattern String It is used for custom formatting pattern that determines how the number string is formatted and parsed.
type String It is used to specify whether the string value is parsed and formatted as a number, currency, or percentage. If not specified, number is used.

# JSF NumberConverter Example:

// index.xhtml


<h:form>
<h:outputLabel for="username">User Name</h:outputLabel>
<h:inputText id="user-id" value="#{user.name}"/><br/>
<h:outputLabel for="shirtPrice">Shirt Price</h:outputLabel>
<h:inputText id="shirtPrice-id" value="#{user.shirtCost}" autocomplete="off">
<f:convertNumber currencySymbol="$" type="currency"/>
</h:inputText>
<br/>
<h:commandButton action="response.xhtml" value="Submit"/>
</h:form>

// User.java


import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
@ManagedBean
@RequestScoped
public class User {
String name;
int shirtPrice;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getShirtCost() {
return shirtPrice;
}
public void setShirtCost(int shirtPrice) {
this.shirtPrice = shirtPrice;
}
}

Output:

// index page

JSF F convertnumber tag 1

// response page

JSF F convertnumber tag 2

# JSF <f:converterNumber> Example 2

In the following example, we are applying pattern for currency. This pattern can be customized. The following table contains some currency patter example.

Value Pattern Output Explanation
526894.989 ###,###.### 526,894.989 The pound sign (#) denotes a digit, the comma is a placeholder for the grouping separator and the period is a placeholder for the decimal separator.
526894.989 ###.## 526894.99 This value has three digits to the right of the decimal point, but the pattern has only two. The format method handles this by rounding up.
852.89 000000.000 000852.890 This pattern specifies leading and trailing zeros, because the 0 character is used instead of the pound sign (#).
52689.98 $###,###.### $52,689.98$200 The first character in the pattern is the dollar sign ($). Note that it immediately precedes the leftmost digit in the formatted output.
52689.98 \u00A5###,###.### ¥52,689.98 The pattern specifies the currency sign for Japanese yen (¥) with the Unicode value 00A5.

// index.xhtml


<h:form>
<h:outputLabel for="username">User Name</h:outputLabel>
<h:inputText id="user-id" value="#{user.name}"/><br/>
<h:outputLabel for="shirtPrice">Shirt Price</h:outputLabel>
<h:inputText id="shirtPrice-id" value="#{user.shirtCost}" autocomplete="off">
</h:inputText>
<br/>
<h:commandButton action="response.xhtml" value="Submit"/>
</h:form>

// User.java


import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
@ManagedBean
@RequestScoped
public class User {
String name;
int shirtPrice;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getShirtCost() {
return shirtPrice;
}
public void setShirtCost(int shirtPrice) {
this.shirtPrice = shirtPrice;
}
}

// response.xhtml


<h:body>
<h1> Hello, 
<h:outputText value="#{user.name}"/>
</h1>
<h:outputLabel value="Shirt's Price is: "></h:outputLabel>
<h:outputText value="#{user.shirtCost}">
<f:convertNumber pattern="$###" />
</h:outputText>
</h:body>

Output:

// index Page

JSF F convertnumber tag 3

// response page

JSF F convertnumber tag 4