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

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

    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

      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

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

    Valeu cara, ajudou bastante🙂

    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.

      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

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s