My JSF Books/Videos My JSF Tutorials OmniFaces/JSF PPTs
JSF 2.3 Tutorial
JSF Caching Tutorial
JSF Navigation Tutorial
JSF Scopes Tutorial
JSF Page Author Beginner's Guide
OmniFaces 2.3 Tutorial Examples
OmniFaces 2.2 Tutorial Examples
JSF Events Tutorial
OmniFaces Callbacks Usages
JSF State Tutorial
JSF and Design Patterns
JSF 2.3 New Features (2.3-m04)
Introduction to OmniFaces
25+ Reasons to use OmniFaces in JSF
OmniFaces Validators
OmniFaces Converters
JSF Design Patterns
Mastering OmniFaces
Reusable and less-verbose JSF code

My JSF Resources ...

Java EE Guardian
Member of JCG Program
Member MVB DZone
Blog curated on ZEEF
OmniFaces is an utility library for JSF, including PrimeFaces, RichFaces, ICEfaces ...

[OmniFaces Utilities] - Find the right JSF OmniFaces 2 utilities methods/functions

Search on blog

Petition by Java EE Guardians

Twitter

luni, 15 februarie 2016

[JSF Page Author Beginner's Guide] JSF <f:convertNumber/>

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):
Data flow in image (converter failure):
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.

Niciun comentariu :

Trimiteți un comentariu

JSF BOOKS COLLECTION

Postări populare

Follow by Email

Visitors Starting 4 September 2015

Locations of Site Visitors