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:
- Crie uma aplicação normal no Delphi;
- Coloque um componente TWebBrowser da paleta internet. Adicionaremos a uses MSHTML para termos acesso às interfaces de manipulação do HTML e seus objetos.
- 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 - Crie um arquivo de HTML com as APIs e chamadas de função de JavaScript para que o Delphi possa chamar.
- 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.
