Utilizando PrimeFaces 3.4 com JQuery MaskMoney no JBoss AS 7.1.1

Postado em Atualizado em

E ai galera blz?

Esses dias precisei configurar um input text no meu projeto JSF 2 + Primeface para utilizar máscara com valores monetários. Pesquisando na web encontrei o MaskMoney. Trata-se de um plugin baseado em JQuery que ajuda a formatar uma máscara para campos monetários. Foi um verdadeiro inferno fazer isso funcionar. Na verdade nao consegui fazer funcionar de uma forma elegante. Vejas as quantidades de tópicos no GUJ em relacionado com isso:

Só de ver isso me dá até arrepios rsrs. Como pode um negócio tão simples gerar tanto problema?!  Acredito que isso se deve e muito aos conflitos com o PrimeFaces pois o mesmo já traz o JQuery embarcado. Eu testei uma quantidade absurda de tópicos todos utlizando html e funcionaram numa boa. Já com a página .xhtml num ia nem com reza brava 😦

A solução foi colocar o form com a propriedade prependId igual a false e colocar a configuração da  máscara no body da página.

<!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://java.sun.com/jsf/html"
 xmlns:f="http://java.sun.com/jsf/core"
 xmlns:ui="http://java.sun.com/jsf/facelets"
 xmlns:p="http://primefaces.org/ui"
 xmlns:fn="http://java.sun.com/jsp/jstl/functions">

<h:head>
 <title>Test</title>
 <script type="text/javascript" src="jquery.maskMoney.js"></script>
</h:head>

<h:body>
  <h:form prependId="false">

  <h:inputText value="#{moneyMBean.contractPrice}" required="true" id="valor" styleClass="valor"  converter="com.magnani.test.converter.MoneyConverter"/>
  <script>$("#valor").maskMoney({showSymbol:true,symbol:"R$", decimal:",", thousands:".", allowZero:true});</script>

  <h:commandButton action="#{moneyMBean.getPriceValue}" value="OK"/>

  <h:outputText value="#{moneyMBean.price}" />
</h:form>
</h:body>
</html>

Vou deixar aqui também o converter utilizado 🙂

@FacesConverter("com.magnani.test.converter.MoneyConverter")
public class MoneyConverter implements Converter {

 final private Locale locale = new Locale("pt", "BR");
 final private DecimalFormat decimalFormat = new DecimalFormat("##0,00", new DecimalFormatSymbols(locale));

 public BigDecimal getAsObject(FacesContext fc, UIComponent component, String value) {

 try {

   decimalFormat.setParseBigDecimal(true);

   return (BigDecimal) decimalFormat.parse(value);
 } catch (ParseException e) {
  throw new ConverterException("Error", e);
 }

}

public String getAsString(FacesContext fc, UIComponent component, Object value) {
  DecimalFormat df = new DecimalFormat("###,###,##0.00");
  return df.format(value);
 }
}

Se alguém souber de uma solução mais interessante por favor me avise 🙂

Abraços

Fontes:

http://www.rafaelwendel.com/2012/07/mascara-para-campos-monetarios-com-jquery-maskmoney/

http://blog.caixadesolucoes.com.br/post/mascara-para-campos-monetarios-com-jquery-e-maskmoney

Esta publicação foi postada em Java, JBoss AS 7 e marcada .

8 comentários em “Utilizando PrimeFaces 3.4 com JQuery MaskMoney no JBoss AS 7.1.1”

    Felipe Borella disse:
    1 de fevereiro de 2013 às 15:21

    Muito bom

    Valeu

    Responder
    Maicon Moser (@MoserMaicon) disse:
    13 de junho de 2013 às 10:25

    Para funcionar com o script fora do body, ou seja no head, acrescente:
    $(document).ready(function(){ antes e depois do script: });
    vai ficar assim:

    $(document).ready(function(){ $(“#valor”).maskMoney({showSymbol:true,symbol:”R$”, decimal:”,”, thousands:”.”, allowZero:true});
    });
    coloca la no head que vai funcionar =D

    Responder
      Mauricio Magnani Jr respondido:
      13 de junho de 2013 às 10:28

      Oi Maicon,

      Vlw Boa dica 😀

      Nessa época ainda estava aprendendo JQuery acho que é por isso que não fiz isso hehehe.

      Muito Obrigado pela dica 🙂

      Abs

      Responder
    Bruno Delgado disse:
    28 de dezembro de 2013 às 15:34

    Valeu cara, ajudou bastante 🙂

    Responder
    Bruno Delgado disse:
    28 de dezembro de 2013 às 15:36

    Uma sugestão: ao invés de utilizar o id, sugiro utilizar uma classe, pois assim você consegue com uma linha de código aplicar a mesma mascara para todos os inputs monetários.

    Responder
      Mauricio Magnani Jr respondido:
      2 de janeiro de 2014 às 11:25

      Opa Vlw pela dica assim que tiver um tempo vou atualizar!
      Feliz ano novo.

      Abraços

      Responder

Deixe um comentário