Criação de sites, softwares e sistemas inteligentes.

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

Última modificação emQuarta, 24 Setembro 2014 14:36
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
Mais nesta categoria: « INTRAWEB - RAD para Web

Comentários  

0 # Ederson Selvati 12-03-2011 01:29
Boa,

para alavancar com o intraweb, precisamos de iniciativas como a sua...Parabéns
Responder | Responder com citação | Citar
0 # Alonso Jr 11-04-2011 19:49
Obrigado pelo comment, Ederson. Realmente não há nada mais RAD que o Intraweb...
Responder | Responder com citação | Citar
0 # Sergio 30-03-2011 01:12
Alonso, show, funciona que é uma beleza, porém tentei copiar o http://code.jquery.com/jquery-latest.js para minha maquina local para que a aplicacao nao fique constantemente utilizando a internet e entao as mascaras nao funcionam. Copiei o arquivo e coloquei ele junto com o /files/jquery_mask.js, na mesma pasta e nao funcionou... qual o detalhe por favor.
Responder | Responder com citação | Citar
0 # Alonso Jr 11-04-2011 19:43
Perdão pela demora, Sérgio.

Altere a constante sJQUERY em CONSTANTES_WEB.pas
para que fique igual à sJMASK, mas apontando para a biblioteca do jQuery (no caso, jquery_mask.js).

Obrigado pelo comentário.
Responder | Responder com citação | Citar
0 # Sergio 12-04-2011 01:03
Alonso, funcionou :), agora seguinte, mascara com datas funcionando e tens algum exemplo de mascara com valor? tipo, 1.521,12 ? com a pontuação desta forma?
Desculpe é que nao sei nada de js.
Responder | Responder com citação | Citar
0 # Alonso Jr 12-04-2011 18:00
Infelizmente a biblioteca usada (Masked Input http://digitalbush.com/projects/masked-input-plugin/) não permite a formatação de valores monetários. Em breve faremos um novo tutorial extendendo este mas com uma biblioteca específica para este tipo de máscara.
Responder | Responder com citação | Citar
0 # Alonso Jr 15-04-2011 20:00
Criei uma demonstração de Intraweb com máscaras jQuery e implementei máscaras para tipos monetários. Veja em http://www.cgmautomacao.com.br/cms/artigos/37-intraweb/81-campos-com-mascaras-em-intraweb-com-jquery-parte2.html
Responder | Responder com citação | Citar
0 # Wagner Freitas 14-04-2011 03:29
:lol:
Procurei isso igual um louco na Internet , pouquissimos exemplos e não consegui fazer funcionar.
Agora vai ..
Valeu , continue assim
Responder | Responder com citação | Citar
0 # Alonso Jr 14-04-2011 16:21
Intraweb não tem limites. Não há o que não possa ser feito com ele. A pouca documentação é o problema...
Responder | Responder com citação | Citar
0 # Wagner Freitas 14-04-2011 03:36
Você ja teve necessidade de fazer upload de multiplo arquivos ?
A aplicação já esta rodando porem o IWFile só permite um arquivo por vez.
Estou procurando uma solução para não deixar de usar o Intraweb.
Já olhei na TMS , Arcana e ainda não consegui , você pode me ajudar ?
Se já teve esta necessidade você pode compartilhar sua solução ?
Até mais
Responder | Responder com citação | Citar
0 # Alonso Jr 14-04-2011 16:18
Infelizmente é uma limitação do próprio HTML. O IWFile faz uso da tag "input file", que permite a seleção de um único arquivo. A melhor solução é fazer uso de um script jQuery que permita múltiplos uploads e tratar o POST dele na aplicação. Faremos um artigo sobre isso.
Responder | Responder com citação | Citar
0 # Wagner Freitas 14-04-2011 13:32
Totalmente funcional no Delphi 2010 e Intraweb 10.0.23
Responder | Responder com citação | Citar
0 # Alonso Jr 14-04-2011 16:19
Obrigado pela informação!
Responder | Responder com citação | Citar
0 # Guest 07-03-2013 18:37
Voce pode me dizer como foi que voce fez para rodar no D2010? Estou tentando implementar aqui do jeito como mostra o tutorial mas nao esta funcionando de forma alguma.

Obrigado.
Responder | Responder com citação | Citar
0 # Administrator 08-03-2013 12:13
Olá! Está dando erro de compilação? Qual erro?
Responder | Responder com citação | Citar
0 # Guest 08-03-2013 14:03
Ele nao esta mostrando os campos com as mascaras. Fiz do jeito conforme mostra o tutorial e ainda baixei o exemplo que foi disponibilizado, mas nao funciona mesmo assim. Uso o Delphi 2010 com Intraweb(10.0.0) que já vem com ele, pode ser algo a ver com a versao do intraweb?
Responder | Responder com citação | Citar
0 # Administrator 08-03-2013 14:35
Pode ser que a atualização do jquery tenha invalidado o script do plugin de máscara. Verificarei mais tarde e lhe respondo. Obrigado pelo comentário.
Responder | Responder com citação | Citar
0 # Guest 20-03-2013 11:36
Ola, ja tem alguma resposta sobre esse meu problema? Estou precisando muito dessa solução.

Atenciosamente.
Responder | Responder com citação | Citar
0 # Administrator 25-03-2013 12:27
Bom dia, amigo. Perdão pela demora em responder. Teste esse código e veja se funciona com você: http://www.cgmautomacao.com.br/cms/downloads/artigo_intraweb_jmask/intraweb_jquery_mask_parte2_update.zip
Responder | Responder com citação | Citar
0 # Charles Holmes 24-08-2011 19:01
Valeu !!
So estava faltando isso na minha aplicação !!
Responder | Responder com citação | Citar
0 # Antônio Carlos 06-11-2011 02:59
Boa noite a todos.
Estou com problema muito sério, não estou conseguindo usar esse codigo na minha aplicação intraweb, talves porque estou meu Delphi XE.
Não esta funcionando.
Por favor se alguem testou no Delphi Xe me envie e-mail.
Tambem se eu poder ajudar em alguma coisa e so falar.
Desejo a todos um otimo domingo
t+
Responder | Responder com citação | Citar
0 # Administrator 07-11-2011 11:44
Olá. Dá algum erro de compilação? Para compilar para ISAPI você deve fazer uma alteração na constante "sJMASK" em "CONSTANTES_WEB.PAS". Baixe o arquivo zip com a alteração e diga se funciona.
Responder | Responder com citação | Citar
0 # Guest 27-06-2014 13:52
meu é XE e não funciona. Compila legal sem erros, mas não funciona.
Responder | Responder com citação | Citar
0 # charles 03-06-2012 01:31
Gênio......
Responder | Responder com citação | Citar
0 # Guest 03-02-2013 14:07
Citando charles:
Gênio......

Opa, as units não deu erro, mas na compilação do form deu o seguinte erros

[DCC Error] uncontrole.pas(129): E2003 Undeclared identifier: 'sJQUERY'
[DCC Error] uncontrole.pas(131): E2003 Undeclared identifier: 'sJMASK'

Esté decalrada! O que faltou?
Responder | Responder com citação | Citar
0 # Administrator 04-02-2013 11:55
Bom dia! Provavelmente faltou declarar a unit CONSTANTES.PAS
Responder | Responder com citação | Citar
0 # Guest 04-02-2013 21:14
Sim está tudo declarado... Não faltou nada!!!
Responder | Responder com citação | Citar
0 # Administrator 05-02-2013 11:37
Bom dia. Desculpe, o nome correto da unit é "CONSTANTES_WEB.pas". Nela estão declaradas as constantes "sJQUERY" e "sJMASK". Por algum motivo, sua unit "uncontrole.pas" não está localizando-a. Verifique novamente se a unit "CONSTANTES_WEB.pas" está declarada na seção Interface, ou se existe alguma diretiva de compilação que esteja removendo a declaração.
Responder | Responder com citação | Citar
0 # Administrator 25-03-2013 12:25
Bom dia, amigo. Perdão pela demora na resposta. Baixe a parte 2 do artigo e veja se funciona com você:
http://www.cgmautomacao.com.br/cms/downloads/artigo_intraweb_jmask/intraweb_jquery_mask_parte2_update.zip
Responder | Responder com citação | Citar
0 # Guest 30-05-2013 18:51
Como faço para que meu IWEdit possa aceitar somente números? Show de bola seus artigos.
Responder | Responder com citação | Citar
0 # Guest 31-10-2013 12:28
Gostaria de saber se quando utilizo as mascaras com o jQuery, se posso utilizar normalmente templates HTML e CSS ?
Responder | Responder com citação | Citar
0 # Administrator 04-11-2013 11:15
Normalmente, amigo.
Responder | Responder com citação | Citar
0 # younique 3d lashes 10-12-2014 15:12
Hello there, You've done a great job. I'll definitely digg
it and personally suggest to my friends. I am sure they
will be benefited from this site.
Responder | Responder com citação | Citar
0 # Jerry 06-05-2015 00:54
Boa noite. Tentei utilizar esse código no Delphi XE5 e não funcionou. Compila sem erros, inclusive debuguei e faz as chamadas das funções direitinho mas não põe a máscara nos campos. Inclusive utilizei o exemplo. tentei os 2 artigos e nenhum funciona com o XE5. Utilizo o IntraWeb 14.0.33
Responder | Responder com citação | Citar
0 # rlmuz 02-09-2015 20:38
Estou com o mesmo problema do Jerry,
Coloquei no oncreate do form. Faz a chamada das funções mas não coloca as máscaras.
Uso XE5 com Intraweb 14.0.22.
O exemplo não roda na minha versão do IW, mas por modificações em alguns componentes da versão mesmo. Gostaria muito de fazer essas units funcionar aqui, alguma dica?
Responder | Responder com citação | Citar

Adicionar comentário


Código de segurança
Atualizar