Formatação de campos de valor Monetário

        Trabalhar com valores monetários em páginas WEB é meio chato, porém vou mostrar duas maneiras de facilitar esse trabalho, uma é do próprio primefaces, e outra é com JQuery, que funciona em qualquer aplicação web, bastando configurar corretamente.

         Primeiro vamos a solução com primefaces, que é uma biblioteca de extensão que deve ser adicionada ao projeto. Vamos então configurar no arquivo pom.xml o seguinte:

<dependencies>

    ...   

    <dependency>

        <groupId>org.primefaces.extensions</groupId>

        <artifactId>primefaces-extensions</artifactId>

        <version>4.0.0</version>

    </dependency>

    ...

</dependencies>

         Depois, temos que adicionar na página xhtml o namespace da extensão do primefaces no topo da página:

xmlns:pe="http://primefaces.org/ui/extensions"

         E então podemos usar a biblioteca de extensão para formatarmos os componentes que guardarão valores monetários.

<pe:inputNumber id="valor" value="#{meuManagedBean.valor}" symbol=" R$" 

symbolPosition="s" decimalSeparator="," thousandSeparator="." decimalPlaces="2” />

Caso dê algum erro de conversão, você pode adicionar o seguinte componente:

<pe:inputNumber id="valor" value="#{meuManagedBean.valor}" symbol=" R$"

symbolPosition="s" decimalSeparator="," thousandSeparator="." decimalPlaces="2”>

<f:convertNumber maxFractionDigits="2" minFractionDigits="2"/>

</pe:inputNumber>

Agora vamos fazer a biblioteca JQuery-MaskMoney. Basta fazer o download da biblioteca no link http://plentz.github.io/jquery-maskmoney, lá tem o arquivo zip para baixar. Então crie o diretório “js” dentro da pasta resources em webapp como mostra a imagem a seguir:

Se você trabalha com templates do facelets basta adicionar isso no cabeçalho do template, se não, terá que adicionar nas paginas que irá precisar. Dentro do header coloque:

<h:outputScript library="js" name="jquery.maskMoney.js"/>

      Dentro do body, no final crie a função:

<script>

function configurarMoeda(objeto){

$(objeto).maskMoney({decimal: ",", thousands: ".", allowZero: true, symbolStay: "R$"});

       }

      

</script>

         Então basta chamar no componente que deseja usar da seguinte forma:

<p:inputText id="valorUnitario" value="#{meuManagedBean.valorUnitario }" 

onfocus="configurarMoeda(this);">

        <f:convertNumber maxFractionDigits="2" minFractionDigits="2"/>

<p:inputText>

     Se você não trabalha com primefaces, no link do download do JQuery-MaskMoney você vai encontrar ajuda para usar a biblioteca. Abraços!

            
ATENÇÃO! <pe:inputnumber> foi removido das extensões do PF e agora faz parte do pacote principal, então nas versões mais recentes, simplesmente substitua <pe:inputNumber> por <p:inputNumber>.

Links úteis:

http://plentz.github.io/jquery-maskmoney/

http://www.primefaces.org/showcase-ext/sections/inputNumber/basicUsage.jsf

https://github.com/primefaces-extensions/primefaces-extensions.github.com/wiki/Getting-Started