Muitas páginas Web precisarão em algum momento empregar máscaras em campos numéricos, impedindo assim que usuários informem nos mesmos caracteres inválidos (letras, por exemplo). Do lado cliente existem diversas soluções nesse sentido, todas passando pela utilização de código Javascript; exemplos disto são componentes de terceiros que permitem a especificação de máscaras válidas, funções de script incorporadas a uma página Web etc.
Também do lado do servidor outras alternativas devem ser estudadas, evitando com isso que valores inválidos possam comprometer a integridade de informações que são armazenadas em uma base de dados qualquer; em tais situações, as soluções correspondentes dependerão de características próprias linguagem de programação que está sendo usada.
Considerando o desenvolvimento de aplicações em ASP.NET, uma prática bastante comum para se controlar a entrada de caracteres em campos numéricos consiste na utilização do componente MaskedEditExtender. Este controle faz parte do AJAX Control Toolkit, o qual representa uma coleção de scripts baseados na tecnologia AJAX (Asynchronous JavaScript and XML) e voltados ao desenvolvimento de interfaces em ASP.NET.
Uma outra opção para implementar campos numéricos com máscaras de entrada consiste no uso de algum plugin JQuery. A biblioteca JQuery (http://jquery.com/) é open source e de livre utilização, sendo mantida e passando por uma evolução contínua graças a desenvolvedores dispersos ao redor do globo. JQuery tem como objetivo principal simplificar a utilização de scripts executados do lado cliente (browser), disponibilizando para isto um rico conjunto de funções para a construção de aplicações com comportamentos dinâmicos.
Além disso, a comunidade que mantém JQuery enfatiza em suas ações a necessidade de garantir a compatibilidade com os principais browsers utilizados atualmente (Internet Explorer, Firefox, Google Chrome, Safari, Opera, etc.), oferecendo com isto uma maior confiabilidade a desenvolvedores que resolveram adotar esta tecnologia em seus projetos. Dentre as funcionalidades disponibilizadas por esta biblioteca estão mecanismos para a manipulação de controles HTML, efeitos de animação, tratamento de eventos e chamadas assíncronas a Web Services e outros dispositivos remotos.
No caso específico de máscaras para o preenchimento de campos numéricos, o plugin autoNumeric (http://www.decorplanit.com/plugin/) representa uma forma bastante prática e flexível para o tratamento de valores monetários ou referentes a outros tipos de medidas/notações.
O autoNumeric é uma biblioteca de scripts também baseada em JQuery, contando com um suporte bastante abrangente no que diz respeito à capacidade de se adequar aos mais variados formatos numéricos. Outra característica bastante útil desta biblioteca é impedir os usuários de “colarem” valores inválidos e que estão na área de transferência de seus computadores (um tipo de falha bastante comum em muitos scripts deste gênero encontrados pela Internet); apenas valores compatíveis com a máscara usada são permitidos.
Buscando demonstrar a utilização do plugin autoNumeric em uma aplicação ASP.NET, será apresenta a seguir a implementação de uma página para a simulação do valor total a ser pago por um empréstimo dentro de um período de meses: tal cálculo emprega o conceito de juros compostos. O exemplo em questão faz uso da versão 1.8.0 da biblioteca JQuery, em conjunto com a versão 1.7.5 do plugin autoNumeric.
Na Figura 1 é exibida a interface a partir da qual ocorrerá o cálculo do valor a se pagar por um empréstimo. Basicamente, um usuário precisará informar a quantia desejada, o número de meses e, por fim, o percentual de juros por mês. Ao se executar a funcionalidade que calcula o total a ser pago, uma mensagem exibirá a importância correspondente.
Já Listagem 1 apresenta o código relativo à funcionalidade do valor total que será pago por um empréstimo. É possível notar na implementação do evento btnCalcular_Click, entre outras coisas, instruções que fazem uso da classe Convert (operações ToDouble e ToInt32) a fim de transformar valores texto e associá-los a variáveis numéricas, bem como uma chamada ao método Pow da classe Math (esta última serve base para a realização de operações de exponenciação).
Figura 1: Tela para simulação de valores de empréstimos
Listagem 1: Funcionalidade que calcula o valor de um empréstimo
protected void btnCalcular_Click(object sender, EventArgs e)
{
try
{
double valorEmprestimo =
Convert.ToDouble(txtValorEmprestimo.Text);
int numeroMeses =
Convert.ToInt32(txtNumeroMeses.Text);
double percMensalJuros =
Convert.ToDouble(txtPercMensalJuros.Text);
double valorTotalASerPago = Math.Round(valorEmprestimo *
Math.Pow(1 + (percMensalJuros / 100), numeroMeses), 2);
lblResultado.ForeColor = System.Drawing.Color.Black;
lblResultado.Text =
"Valor Total a ser pago pelo Empréstimo: R$ " +
valorTotalASerPago.ToString("#,##0.00");
}
catch (Exception ex)
{
lblResultado.ForeColor = System.Drawing.Color.Red;
lblResultado.Text = "Ocorreu um erro durante o " +
"cálculo do Valor Total do Empréstimo: " +
ex.Message;
}
}
Na Listagem 2 encontram-se o código da página .aspx em que um usuário irá inserir os valores referentes a um empréstimo. É justamente neste ponto em que ocorrerá a utilização do plugin autoNumeric.
Listagem 2: Código da página .aspx já prevendo o uso do plugin autoNumeric
<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
CodeBehind="Default.aspx.cs" Inherits="TesteJQuery._Default" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<script type="text/javascript"
src="Scripts/jquery-1.8.0.js"></script>
<script type="text/javascript"
src="Scripts/autoNumeric-1.7.5.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#<%= txtValorEmprestimo.ClientID %>").autoNumeric(
{ aSep: ''.'', aDec: '','', aSign: '''', mDec: ''2'',
vMax: ''99999.99'' }
);
$("#<%= txtNumeroMeses.ClientID %>").autoNumeric(
{ aSep: '''', aDec: '','', aSign: '''', mDec: ''0'',
vMax: ''60'' }
);
$("#<%= txtPercMensalJuros.ClientID %>").autoNumeric(
{ aSep: '''', aDec: '','', aSign: '''', mDec: ''2'',
vMax: ''999.99'' }
);
});
</script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<h2>
Simulação de Empréstimos
</h2>
<p>
Valor do Empréstimo:<br />
<asp:TextBox ID="txtValorEmprestimo"
runat="server"></asp:TextBox>
</p>
<p>
Número de Meses:<br />
<asp:TextBox ID="txtNumeroMeses" runat="server" Width="70px"></asp:TextBox>
</p>
<p>
% Mensal de Juros:<br />
<asp:TextBox ID="txtPercMensalJuros" runat="server" Width="70px"></asp:TextBox>
</p>
<asp:Button ID="btnCalcular" runat="server" Text="Calcular Valor Total"
onclick="btnCalcular_Click" />
<p>
<asp:Label ID="lblResultado" runat="server" Font-Bold="true"></asp:Label>
</p>
</asp:Content>
Inicialmente, foram declaradas referências aos arquivos que contém os scripts da biblioteca JQuery e do plugin autoNumeric via tag .
Na sequência, está o bloco de script que acionará os recursos do autoNumeric, a fim de que as mascaras necessárias sejam aplicadas sobre os campos presentes em tela. Tal procedimento está sendo realizado dentro da função ready, a qual é invocada pela biblioteca JQuery automaticamente tão logo os diferentes controles HTML tenham sido carregados.
Os três componentes TextBox presentes em tela são referenciados dentro da operação ready, através dos valores de suas propriedades ClientID. Em seguida, é feita uma chamada ao método autoNumeric, de forma que uma máscara seja aplicada sobre o controle correspondente. A operação autoNumeric recebe como parâmetro de entrada um objeto no padrão JSON, sendo que neste valor constarão as configurações que definirão o formato numérico previsto para um campo.
JSON (sigla do inglês "Javascript Object Notation") é um formato aberto que torna possível a serialização de objetos como texto, representando uma opção ao padrão XML na transferência de informações através de uma rede. Este formato é empregado costumeiramente em aplicações Web que utilizam recursos em AJAX e outros mecanismos de Javascript/JQuery.
Um objeto em JSON é composto por pares de informações, com cada um destes possuindo um identificador (string que identifica o nome de propriedade) e seu respectivo valor. Os seguintes tipos de dados podem ser empregados para a representação de valores em JSON: Numeric, String, Boolean, Array (os diversos elementos devem estar separados por vírgula e constando dentro de colchetes), e null.
As definições de máscaras utilizadas nesta tela de exemplo estão fazendo uso das seguintes configurações:
- aSep: separador de milhar;
- aDec: separador decimal, servindo para distinguir a parte fracionária de um número de seu correspondente inteiro;
- aSign: símbolo que representa uma moeda (não informado caso esta opção seja desnecessária);
- mDec: número máximo de casas decimais possíveis;
- vMax: valor máximo permitido para um campo (se contendo também uma parte fracionária, deve ser representado em padrão norte-americano, ou seja, com um ponto funcionando como separador decimal).
Existem além destas propriedades citadas outras configurações, sendo possível obter uma lista de exemplos com as mesmas no próprio site do plugin autoNumeric (também já mencionado anteriormente).
Com isso chegamos ao fim de mais um artigo. Espero que o conteúdo aqui apresentado possa ser um útil no seu dia-a-dia. Até uma próxima oportunidade!
