Busca de CEP por Webservice

Olá pessoal, nesse post iremos utilizar dos nossos conhecimentos sobre web service, jquery e genexus é claro, para criarmos uma função em javascript (sem refresh de página) para buscar um endereço completo a partir de um CEP.

Esse assunto é muito interessante pois na grande maioria das vezes quando desejamos criar um cadastro de usuários para a nossa aplicação, obrigamos os usuários a informar um endereço completo. A partir de uma tabela de CEP vendida pelo próprio correio podemos importa-la para o nosso projeto e realizar uma busca através de um for each. Porém neste caso, a aplicação iria demorar um certo tempo para retornar os dados, e é claro, realizar um Refresh na nossa página.

Iremos utilizar como base, um post sobre o assunto desenvolvido com Javascript, que faz referência a um webservice grátis disponível na web, o republicavirtual.

OK vamos lá, primeiramente recomendo uma rápida leitura do nosso post sobre Jquery e como utilizá-lo no Genexus, disponível através deste link. Após...precisarei dos seguintes arquivos:

1. biblioteca jquery, disponível aqui;
2. plugin Masked Input, disponível aqui;
3. uma imagem de busca;
4. uma imagem de loading.

Primeiro, iremos criar 7 variáveis com as definições abaixo (você poderá colocar o nome que desejar mas lembre-se que este nome será necessário para definirmos o Id do objeto input):

Segundo,  no evento Start da nossa Web Panel iremos adicionar os seguintes códigos:

//=====Adiciona referências da biblioteca e plugin Mask=====
&Header = '<script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>'
&Header += '<script src="http://www.eliezer.com.br/demo/cep-javascript/jquery.maskedinput-1.3.min.js" type="text/javascript"></script>'

//=====Cria Função de busca de CEP=====
&Header += '<script type="text/javascript">'
&Header += 'function findCEP() {'

//=====Se valor da variável CEP for diferente de vazio=====
&Header += 'if($.trim($("#vCEP").val()) != ""){'

//=====Mostra a nossa imagem "loading" enquanto procura CEP=====
&Header += '$("#ajax-loading").css("display","inline");'

//=====Busca através de web service=====
&Header += '$.getScript("http://cep.republicavirtual.com.br/web_cep.php?formato=javascript&cep="+$("#vCEP").val().replace("-", ""), function(){'

//=====Captura resultados se houver=====
&Header += 'if(resultadoCEP["resultado"] == 1){'
&Header += '$("#vENDERECO").val(unescape(resultadoCEP["tipo_logradouro"])+" "+unescape(resultadoCEP["logradouro"]));'
&Header += '$("#vBAIRRO").val(unescape(resultadoCEP["bairro"]));'
&Header += '$("#vCIDADE").val(unescape(resultadoCEP["cidade"]));'
&Header += '$("#vUF").val(unescape(resultadoCEP["uf"]));'
&Header += '$("#vNUMERO").focus();'

//=====Caso não houver resultado mostra mensagem=====
&Header += '}else{'
&Header += 'alert("Endereço não encontrado para o cep ");'
&Header += '}'

//=====Esconde a nossa imagem loading=====
&Header += '$("#ajax-loading").hide();'
&Header += '});}}'
&Header += '$(document).ready(function(){'

//=====Adiciona mascara à variável CEP=====
&Header += '$("#vCEP").mask("99999-999")'
&Header += '});'
&Header += '</script>'

Form.HeaderRawHTML = &Header

Note que os nomes das variáveis definidas constam no nosso código javascript, por exemplo quando é mencionado #vENDERECO. Este é o id da variável Endereco que irá aparecer em nossa tela. Um detalhe importante, o código javascript é case sensitive, ou seja, existem diferenças entre letras maiúsculas e minúsculas, logo #vEndereco <> #vENDERECO.

Terceiro, em nossa WebForm iremos adicionar um TextBlock e configurá-lo como ReadOnly = True e Format = HTML, conforme a figura abaixo:

Este TextBlock irá ser as nossas imagens de Busca e Loading, e ao clicar irá chamar a nossa função Javascript anteriormente escrita (findCEP()).

Portanto ainda no evento Start é necessário adicionar o seguinte código:

//=====Adiciona imagens através de HTML ao nosso TextBlock=====
TBJavaScript.Caption = '<div style="display:inline;"><a href="javascript:findCEP()">'
TBJavaScript.Caption += '<img src="CEP/search-icon.gif" alt="Pesquisar" border="0">'
TBJavaScript.Caption += '</a></div><div id="ajax-loading" style="display: none;">'
TBJavaScript.Caption += '<img src="CEP/loading.gif"></div>'

O resultado será uma rápida busca de CEP, sem a necessidade de dar um Load em nossa página.