Campos com máscaras em IntraWeb com jQuery

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é.