Formatar moeda utilizando CurrencyFormatter

Este artigo é uma sugestão dos leitores Diego Feijó e Maicon Pinto, que precisavam formatar moeda no Flex.

Existem dois modos para formatar moedas no Flex. O primeiro deles é formatar enquanto o usuário digita. Na verdade isso não é um formato, é chamado de Mask Input, e não será visto neste artigo.

O segundo meio é formatar o valor após a sua digitação, ou quando o valor retorna do banco de dados, que é feito com precisão através das classes do mx:formatters.

Vamos criar um formatador básico e ir melhorando-o, conforme situações peculiares possam ir surgindo.

Primeiramente temos que criar um objeto que representa o formatador. Veja:

 <mx:CurrencyFormatter id="MoedaFormatter" precision="2" <br />currencySymbol="R$" decimalSeparatorTo="," decimalSeparatorFrom=","  <br />thousandsSeparatorFrom="." thousandsSeparatorTo="."/>

Utilizando o CurrencyFormatter, definimos diversas propriedades:

Propriedades

Formatando valores após a digitação

Baseado nesta configuração, podemos formatar um número para moeda. Para isso, o objeto Formatter possui um método chamado “format”, que possui um atributo de entrada e retorna o dado formatado. No exemplo a seguir, criamos um TextInput que possui os dados formatados quando o componente  perde o foco.

<br /> <mx:CurrencyFormatter id="MoedaFormatter" precision="2" <br />    currencySymbol="R$" decimalSeparatorTo="," decimalSeparatorFrom=","  thousandsSeparatorFrom="." thousandsSeparatorTo="."/><br /><br /> <mx:TextInput id="valor" text="" width="100"><br /> 	<mx:focusOut><br /> 		<![CDATA[<br /> 			this.valor.text = MoedaFormatter.format(this.valor.text);<br /> 		]]><br /> 	</mx:focusOut><br /> </mx:TextInput> 

Neste código atribuímos o formatador à saída do cursor (focus out). O primeiro problema deste modo é a inserção do símbolo de moeda R$, pois quando retornamos ao código, o símbolo continua lá, o que pode gerar erros. Conseguimos resolver esse problema utilizando um outro formatador, atribuído ao evento focus in:

<br /> <mx:CurrencyFormatter id="MoedaFormatter" precision="2" <br />    currencySymbol="R$" decimalSeparatorTo="," decimalSeparatorFrom=","  thousandsSeparatorFrom="." thousandsSeparatorTo="."/><br /><br /> <mx:CurrencyFormatter id="MoedaFormatterWithoutCurrency" precision="2" <br />    currencySymbol="" decimalSeparatorTo="," decimalSeparatorFrom=","  thousandsSeparatorFrom="." thousandsSeparatorTo="."/><br /><br /> <mx:TextInput id="valor" text="" width="100"><br /> 	<mx:focusOut><br /> 		<![CDATA[<br /> 			this.valor.text = MoedaFormatter.format(this.valor.text);<br /> 		]]><br /> 	</mx:focusOut><br /> 	<mx:focusIn><br /> 		<![CDATA[<br /> 			this.valor.text = MoedaFormatterWithoutCurrency.format(this.valor.text);<br /> 		]]><br /> 	</mx:focusIn><br /> </mx:TextInput>

Assim, quando o campo recebe o foco, o valor é formatado e o símbolo R$ é retirado.

Formatando valores do banco de dados – Decimal(10,2)

Outro tipo de formatação de moeda é realizada através de valores que são retornados do banco de dados. Geralmente, os valores monetários que ficam armazenados em banco de dados possuem “ponto” como separador de decimal, e não possuem separador de milhar. Ou seja, o valor R$ 5.123,44 é representado no banco de dados como 5123.44

No código a seguir criamos um formatter que poderá ser utilizado para formatar moedas vindos do banco de dados.

        <br /> <mx:CurrencyFormatter id="MoedaFormatterDB" precision="2" <br />    currencySymbol="R$" decimalSeparatorTo="," decimalSeparatorFrom="."  thousandsSeparatorFrom="" thousandsSeparatorTo="."/><br /><br /><mx:TextInput id="valorDB" text="" width="100"/><br /><br /><mx:Button id="btnSetMoedaFromDB" width="300" label="Setar Moeda from DB"><br />	<mx:click><br />		<![CDATA[<br />			this.valorDB.text = MoedaFormatterDB.format(5123.44);<br />		]]><br />	</mx:click><br /></mx:Button>       

Quando clicamos no botão, usamos o método format do Formatter para que o valor “5123.44” seja formatado corretamente.

Dicas

• Sempre que o formatador limpar a caixa de texto, significa que algum erro aconteceu, você deve revisar o Formatter ou os caracteres digitados a procura de erros.
• Não coloque valores iguais para os separadores de decimal e separadores de milhar. Vai dar problema!! 
• Você pode restringir a caixa de texto para que somente números possam ser digitados. Basta incluir a propriedade restrict=”0-9″ no mx:textinput. Isso evita muitos erros de digitação.
• Caso deseje aprender mais sobre este artigo, você pode
  acessar a documentação do Flex que está neste endereço:http://livedocs.adobe.com/flex/3/langref/mx/formatters/package-detail.html