Tutorial: Usando o componente TWebBrowser

Autor: João Pinto Neto
E-mail: joaopintoneto (arroba) gmail (ponto) com

Introdução

O componente TWebBrowser possibilita embutir funcionalidades do Internet Explorer nas aplicações desenvolvidas para executar em plataformas Windows. Com esse componente, é possível interagir com o browser e criar aplicações baseadas em web. Existem várias formas de utilizar-lo:

Para criar um browser customizado;
Criar sistema de troca de skin;
Criar sistema baseado em HTML dinâmico;
Usar javascript e vbscript;

Como utilizar

Neste tutorial, explicarei passo a passo como criar uma aplicação que atravéz de um documento HTML, pega o evento do link para fechar o Form principal. Criaremos um documento HTML com formatações padrões, de forma que execute em qualquer browser, independente de ser o Microsoft Internet Explorer ou não. Só que, em vez do link referenciar para um URL válido, ele apontará para um flag (esse flag será o código para ativar o evento Close) que fecha o Form principal.

Mãos à massa!

Requisitos mínimos para o desenvolvimento do tutorial

Conhecimento básico em HTML;
Windows 98;
Microsoft Internet Explorer 6;
Delphi 5;

Observação: Este tutorial foi desenvolvido com Delphi 7, verifique na paleta de componentes Internet se existe o componente TWebBrowser.

Criando o documento HTM

Abra o seu editor HTML, digite as linhas de código abaixo e mande salvar como index.html:

<html>
<h1>Web Browser</h1>
<br />
<br />
<br />
<a href="teste:fechar">Fechar</a>
</html>

Criando o Form Principal

Primeiramente abra o Delphi, se estiver com algum projeto aberto, feche tudo no menu File / Close All. Crie uma nova aplicaçãono no menu File / New / Application. Agora altere as propriedades do Form1 no Object Inspector:

Heigth: 392
Width: 410

Altere o evento onCreate do Form1:

procedure TForm1.FormCreate(Sender: TObject);
begin
WebBrowser1.Navigate('file://'+ExtractFilePath(Application.ExeName)+'main.html');
end;

Insira um componente TWebBrowser da paleta de componentes Internet em Form1 e altere as suas propriedades:

Heigth: 320
Width: 370
Left: 16
Top: 16
Heigth: 392
Width: 410

Altere o evento onBeforeNavegate2 do WebBrowser1:

procedure TForm1.WebBrowser1BeforeNavigate2(Sender: TObject;
const pDisp: IDispatch; var URL, Flags, TargetFrameName, PostData,
Headers: OleVariant; var Cancel: WordBool);
begin
//Lembra do link Fechar ???
if URL = 'teste:fechar' then Close;
end;

Resultado final

Depois de configurar todas essas propriedades e eventos, o seu Form1 deve estar semelhante à figura abaixo, agora salve tudo no menu File / Save All..., no dialogo de Save Unit1 As, salve como main.pas e no dialogo Save Project1 As, salve como webbrowser.dpr
Antes de compilar, verifique se o index.html está no mesmo diretório do projeto e se estiver, aperte F9 para compilar e executar.
Quando o programa estiver em execução, clique no link fechar, para sair do aplicativo.
Form1 Resultado final

João Neto

sexta-feira, 16 de janeiro de 2009

TWebBrowser