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