- Escrito por CGM
- Publicado em Intraweb
- Lido 19177 vezes
- tamanho da fonte diminuir o tamanho da fonte aumentar o tamanho da fonte
- Comments (35)
Campos com máscaras em IntraWeb com jQuery
Máscaras
Uma das limitações (não é bem uma limitação, e sim falta de implementação) do IntraWeb é que não há campos que permitam máscaras, como na VCL nativa do Delphi.
Máscara é algo fundamental numa aplicação, pois além de facilitar a entrada de dados pelo usuário, evita que tratamentos via código sejam feitos pós entrada para formatação/validação do campo, ainda mais em uma aplicação Web, onde devem ser evitadas requisições desnecessárias ao servidor.
Com um pouquinho de JavaScript - fazendo uso da biblioteca jQuery - podemos inserir na aplicação Web máscaras complexas que são executadas no lado cliente (no browser) de forma muito prática.
Antes de começarmos, você precisa baixar o plugin jMask e salvá-lo numa subpasta chamada Files dentro da pasta onde está a aplicação IntraWeb, seja ela em isapi ou stand-alone.
Todos os arquivos utilizados nesse artigo podem ser baixados aqui. Esse artigo foi criado utilizando Delphi 2005 e IntraWeb 7.2.41 mas também se aplica às demais versões.
Técnicas de Desenvolvimento
À medida que desenvolvo, vou extendendo o framework da nossa empresa. Códigos não devem ser repetidos, e sim reutilizados pelas aplicações. Por isso, nos artigos de IntraWeb sempre faremos uso de units com funções que iremos acrescentando em cada artigo. Além de facilitar o desenvolvimento, mantém o código o mais limpo possível.
Começaremos criando algumas units básicas: constantes_web.pas e funcoes_javascript.pas:
unit CONSTANTES_WEB; interface uses Messages, SysUtils; CONST //BIBLIOTECA JQUERY sJQUERY = '<script src="http://code.jquery.com/jquery-latest.js"></script>'; sJMASK = '<script src="/files/jquery_mask.js"></script>'; //PARA STANDALONE //sJMASK = '<script src="' + WebApplication.AppURLBase + '/files/jquery_mask.js"></script>'; //PARA ISAPI implementation end.
unit FUNCOES_JAVASCRIPT; interface uses Classes, SysUtils, IWControl, IWAppForm, IWApplication, IWTypes, IWHTMLControls; type //CRIE NOVAS MÁSCARAS, CONFORME NECESSIDADE TMascara = (maskDATA, maskHORA); procedure InsereJavaScript(Script: string; aIWForm: TIWAppForm); function JavaScriptTAG(Script: string): string; function jQuerySelect(Components: array of TIWCustomControl): string; function jQueryMask(Components: array of TIWCustomControl; Mascara: TMascara): string; overload; function jQueryMask(Components: array of TIWCustomControl; Mascara: string; DefinicaoMascara: string = ''): string; overload; implementation uses IWBaseForm; procedure InsereJavaScript(Script: string; aIWForm: TIWAppForm); begin aIWForm.ExtraHeader.Add(Script); end; function JavaScriptTAG(Script: string): string; begin Result := '<script type="text/javascript">' + Script + '</script>' end; function jQuerySelect(Components: array of TIWCustomControl): string; var i: Integer; sel: string; comp: string; begin sel := '$("'; for i := Low(Components) to High(Components) do begin comp := '#'+UpperCase(Components[i].Name); sel := sel + comp; if i < High(Components) then sel := sel + ','; end; sel := sel + '")'; Result := sel; end; function jQueryMask(Components: array of TIWCustomControl; Mascara: TMascara): string; function RetornaDefinicaoMascara: string; begin //VOCÊ PODE CRIAR NOVAS DEFINIÇÕES DE MÁSCARAS //DEFININDO QUAIS VALORES PODEM SER DIGITADOS //ONDE ["SIMBOLO"]="[VALOR DE ENTRADA PERMITIDO]" case Mascara of maskDATA: Result := '$.mask.definitions["#"]="[0-3]";'+ '$.mask.definitions["!"]="[0-1]";'+ '$.mask.definitions["@"]="[0-2]";'; maskHORA: Result := '$.mask.definitions["@"]="[0-2]";'+ '$.mask.definitions["#"]="[0-3]";'+ '$.mask.definitions["%"]="[0-5]";'; else Result := ''; end; end; function RetornaMascara: string; begin //VOCÊ PODE CRIAR NOVAS MÁSCARAS, //USANDO NOVAS DEFINIÇÕES OU AS ORIGINAIS: //a - carácter alfa (A-Z,a-z) //9 - carácter numérico (0-9) //* - carácter alfanumérico (A-Z,a-z,0-9) case Mascara of maskDATA: Result := '#9/!9/@999'; maskHORA: Result := '@#:%9'; end; end; begin Result := jQueryMask(Components, RetornaMascara, RetornaDefinicaoMascara); end; function jQueryMask(Components: array of TIWCustomControl; Mascara: string; DefinicaoMascara: string): string; begin Result := JavaScriptTAG( 'jQuery(function(){' + DefinicaoMascara + jQuerySelect(Components) + '.mask("' + Mascara + '");})'); end; end.
Salve as duas units numa pasta qualquer e a adicione na biblioteca do Delphi. Adicione as units FUNCOES_JAVASCRIPT e CONSTANTES_WEB ao uses do form onde estão os campos a serem formatados e no evento OnCreate dele faça as chamadas da função:
//adiciona a biblioteca jQuery, definida em CONSTANTES_WEB.pas ExtraHeader.Add(sJQUERY); //adiciona o plugin jMask, definido em CONSTANTES_WEB.pas ExtraHeader.Add(sJMASK); InsereJavaScript(jQueryMask([IWEdit1, IWEdit3, IWEdit4], maskDATA), Self); InsereJavaScript(jQueryMask([IWEdit2], maskHORA), Self);
Com a unit FUNCOES_JAVASCRIPT fica muito fácil utilizar qualquer plugin jQuery e faremos uso dela nos próximos artigos de IntraWeb. Até.
CGM
A CGM é uma empresa especializada em desenvolvimento de projetos de informática e sistemas personalizados.
A sólida parceria desenvolvida com seus clientes na última década atestam a vocação da CGM Automação no desenvolvimento de programas específicos com o que é de mais moderno em informática. Nossos profissionais comprovam uma longa experiência profissional, que é compartilhada com cada um de nossos clientes.
Website.: www.cgmautomacao.com.br