Formatando campos monetários no JSF com jQuery

Em nossas aplicações é comum a necessidade de trabalhar com valores monetários(dinheiro). O Java não possui um tipo específico para trabalhar com tipos monetários, ficando a cargo do programador decidir se irá utilizar classes do tipo Float ou Integer ou qualquer outra.

Mas uma coisa é certa: não interessa se nas suas classes Java é utilizado Double, Integer, Float ou BigDecimal. Para o usuário, que vai ver a tela final do sistema, é necessário apresentá-la de forma intuitiva e que o mesmo não precise pensar muito para descobrir o que cada componente faz na tela.

Nesse post iremos demonstrar como utilizar um plugin do jQuery(jQuery Price Format) para formatar os campos que terão valores monetários em uma página JSF.

Partimos do princípio de que o(a) leitor(a) esteja um pouco familiarizado com JSF. Neste exemplo vamos utilizar o tipo Float para armazenar nosso valor monetário, mas poderia ser qualquer outra. Este valor será armazenado diretamente no Managed Bean.

package br.com.exemplo.ManagedBean;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean
@SessionScoped
public class ExemploMonetarioMB {

	private Float valorMonetario = 0f;

	public String mostraValor() {
		return "mostraValor.xhtml";
	}

	public Float getValorMonetario() {
		return valorMonetario;
	}

	public void setValorMonetario(Float valorMonetario) {
		this.valorMonetario = valorMonetario;
	}

}

Vamos precisar do jQuery e do plugin jQuery Price Format. Após o download dos mesmos, criamos uma pasta chamada “js” dentro de WebContent/resources para colocarmos nossos arquivos JavaScript. Precisamos agora chamar os arquivos “.js” para a nossa página.

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

Na tela temos somente um campo que irá conter o valor digitado pelo usuário.

<h:form>
    <h:outputLabel value="Digite o valor:" />
    <h:inputText value="#{exemploMonetarioMB.valorMonetario}" converter="dinheiroConverter" styleClass="monetario" />
    <h:commandButton value="Ok" action="#{exemploMonetarioMB.mostraValor}" />
</h:form>

Graças  ao jQuery, com um comando conseguimos formatar mais de um componente, caso houvesse, utilizando o seletor de classe. Colocamos uma classe(neste caso “monetario”, mas poderia ser qualquer outra) nos componentes que queremos formatar com o jQuery Price Format, e chamamos a função assim que a página estiver carregada, utilizando “(document).ready”.

<script type="text/javascript">

	 jQuery(document).ready(function(){
		jQuery('.monetario').priceFormat({
			prefix:'R$ '
		});
	});
</script>

Agora, está faltando somente implementar o nosso Converter, que será responsável por fazer a conversão dos valores da tela para o Java e vice-versa.

package br.com.exemplo.converter;

import javax.faces.component.UIComponent;
import javax.faces.context.FacesContext;
import javax.faces.convert.Converter;
import javax.faces.convert.FacesConverter;

@FacesConverter(forClass = Float.class, value = "dinheiroConverter")
public class DinheiroConverter implements Converter {

	@Override
	public Object getAsObject(FacesContext context, UIComponent component,
			String value) {
		if (value != null && !value.equals("")) {
			String str = value.trim();

			StringBuilder sb = new StringBuilder();
			for (int i = 0; i < str.length(); i++) {
				char ch = str.charAt(i);
				if (Character.isDigit(ch) || ch == '.') {
					sb.append(ch);
				}
			}

			return new Float(sb.toString());
		}
		return null;
	}

	@Override
	public String getAsString(FacesContext context, UIComponent component,
			Object value) {
		if (value != null) {
			String prefixoMoeda = "R$ ";
			StringBuilder s = new StringBuilder(value.toString());
			if (s.substring(s.indexOf(String.valueOf('.'))).length() == 2) {
				s.append("0");
			}

			for (int i = s.indexOf(String.valueOf('.')) - 3; i > 0; i -= 3) {
				s.insert(i, ',');
			}
			return prefixoMoeda + " " + s.toString();
		}
		return "";
	}
}

Dessa forma, tem-se como resultado a tela de inserção do valor:

E após clicar em “Ok” mostramos os valores da forma nativa, em nosso caso Float, e utilizando o Converter:

 

Você pode baixar o projeto(para Eclipse) neste link.

3 comentários sobre “Formatando campos monetários no JSF com jQuery

  1. Parabéns Vitor, o texto ficou muito claro, a leitura agradavél e de fácil entendimento.
    Parabéns a galera pelo blog, já vou colocar nos meus favoritos.

  2. Parabens…como nao uso eclipse, tive um pouco de dificuldade no começo, mas deu certo no Netbeans. Eu usei deste jeito

    jQuery(document).ready(function(){

    jQuery(‘.monetario’).priceFormat({
    prefix:’R$ ‘
    });
    });

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *