Integrando Aplicações Delphi com JavaScript

Neste artigo mostraremos alguns dos fantásticos recursos do Dephi para interagir com suas aplicação web. Nos dias de hoje é importante que as aplicações web e aplicações win32 feitas em Delphi entendam como interagir e usar todo o poder do JavaScript e beneficiarem desta tecnologia.

Um exemplo prático

Nossas aplicações podem necessitar de recursos de websites e até mesmo interagir com eles. Um exemplo prático disso seria uma aplicação utilizando os recursos do Google Maps.

Então neste artigo vamos trabalhar diretamente com a API do Google Maps. Para isso vamos seguir esses passos:

1. Crie uma aplicação normal no Delphi;
2. Coloque um componente TWebBrowser da paleta internet. Adicionaremos a uses MSHTML para termos acesso às interfaces de manipulação do HTML e seus objetos.
3. No evento OnShow do formulário coloque o código da Listagem 1.

   procedure TfrmPrincipal.FormShow(Sender: TObject);
    begin
      WebBrowser1.Navigate(ExtractFilePath(Application.ExeName) + 'google.html');
    end;

   Listagem 1. Código do OnShow do TWebBrowser
4. Crie um arquivo de HTML com as APIs e chamadas de função de JavaScript para que o Delphi possa chamar.
5. Adicione um TEdit e um TButton e no evento OnClick do Button1 adicione o código da Listagem 2.

   procedure TfrmPrincipal.Button1Click(Sender: TObject);
    Begin
     with WebBrowser1.Document as IHTMLDocument2 do
        parentWindow.execScript('showAddress("' + edBuscar.Text + '")', 'javascript')
    end;

   Listagem 2. Código do OnClick do Button1

Isto fará com que o nosso WebBrowser1 chame e execute esta função JavaScript que está dentro do nosso HTML e que tem o código da Listagem 3.

function showAddress(address) {
       if (geoCoder) {
         geoCoder.getLatLng(
           address,
           function(point) {
             if (!point) {
               alert(address + " não encontrado");  
           } else {
               map.setCenter(point, 13);
             }
           }
         );
       }
     }

Esta função chama a API do Google Maps para localizar um endereço e centralizar na nossa tela.

Podemos traçar rotas tão facilmente como localizar uma rua. Vamos à prática: coloque dois TEdit na tela e mais um TButton. No OnClick coloque as linhas da Listagem 4.

procedure TfrmPrincipal.Button2Click(Sender: TObject);
 begin 
  with WebBrowser1.Document as IHTMLDocument2 do
     parentWindow.execScript('setDirections("' + Edit1.text + '","' + edit2.Text + '")', 'javascript');
 end;

Podemos ver que não mudou muita coisa e sim a função JavaScript que foi chamada, conforme a Listagem 5.

function setDirections(fromAddress, toAddress) {
   gdir.load("from: " + fromAddress + " to: " + toAddress, { "locale":+"en_US" , "getSteps":true});
 }

Com isso traçaremos uma rota no mapa. Você deve estar dizendo: “e agora, eu consigo pegar o trajeto igual tem no Google Maps?”. Sim, conseguimos pegar esta rota também.

Adicione um Tmemo e mais um TButton na tela e no OnClick adicione a Listagem 6.

procedure TfrmPrincipal.Button3Click(Sender: TObject);
 begin
   with TWebNav.Document as IHTMLDocument2 do
     with body.all as IHTMLElementCollection do
       with item('directions', 0) as HTMLDivElement do
         Memo1.Text := innerText;
 end;

Através das interfaces do MSHTML temos acesso também aos elementos do HTML, neste caso, temos no nosso HTML um desses elementos no qual a API do Google Maps retornou as informações da rota. Através deste HTMLDivElement conseguimos ler estas informações e trazer para a nossa aplicação. Aqui trouxemos a informação para dentro do Memo1.

Outras possibilidades de uso

Agora que temos uma ideia de como funciona este recurso podemos imaginar várias outras possibilidades de uso:

• Podemos ter uma aplicação na web que precisa emitir cupons fiscais. Como? Trazendo o resultado em um Ajax de uma API para o aplicativo ler e emitir um cupom.
• Podemos integrar sua aplicação web com outros recursos da máquina.
• Integração de seu sistema com websites que contém informações ou até mesmo exportar informações para estes websites acessando suas funções JavaScript.

Conclusão

Com as ideias apresentadas e usando um pouco de criatividade você poderá expandir bastante o poder de sua aplicação web e continuar utilizando a linguagem Delphi que você já domina.