Ajax
Beans
Callbacks
Components
Events
Exceptions
Faces
Facelets
JSON
Hacks
State 
JNDI
Platform
Utils
Messages
MapWrapper
Reflection
Renderers
ResourcePaths
XML
Servlets
Arrays
Converters
Dates
Numbers
Objects
Strings
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 ConverterException
with 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 integerOnly
attribute 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.
<h:inputText/> 
ZEEF JSF Beginner's Guide 
JSF 2 Tutorials at www.mkyong.com 
JavaServer Faces (JSF) Tutorial 
Postări
Niciun comentariu :
Trimiteți un comentariu