[Delphi] Navegador basico tuto completo

Inicie um novo projeto no Delphi (quando ele é aberto, ele já faz isso, é iniciado com um projeto vazio). Vamos inserir no formulário dois quadros: um painel, onde ficarão os botões e a barra de endereços, e o quadro de visualização HTML.

Para inserir um painel, clique no componente "painel" da paleta de componentes, e clique uma vez dentro da tela da janela do programa (o formulário). Veja:




Vamos ajustar algumas propriedades desse componente, para que ele fique no topo, e sem o texto "Panel1" dentro. Clique uma vez nele para selecioná-lo, e no
inspetor de objetos (a janela de propriedades do objeto, se você não
sabe, leia o texto do link que indiquei mais acima), localize a
propriedade "Caption". Remova o texto dela, deixando assim:



Para que esse painel fique alinhado na parte superior da tela, localize
nessa mesma janela a propriedade "Align", e deixe com o valor "AlTop":


Com o painel selecionado, clique na borda inferior dele e arraste para baixo, até ficar num tamanho ideal para você.

Agora insira o componente "TWebBrowser". Ele fica na guia "Internet" da paleta de componentes do Delphi,
normalmente é o último dessa guia. Não o insira dentro do painel, mas
sim fora, ou seja, clique nele uma vez, depois clique na área livre do
formulário. Veja como ficará:





Ajuste a propriedade "Align" dele assim como você fez com o painel, mas
agora escolha "AlClient". Isso faz com que ele ocupe toda a área
restante da tela, mesmo que o usuário maximize ou redimensione a janela.

Vamos inserir uma barra de endereços simples (não uma lista, por ser um
tutorial para iniciantes nessa área) e os botões "Voltar", "Avançar",
"Parar" e "Atualizar". Selecione o componente "Button", "botão", da aba
"Standard" dos componentes do Delphi,
e insira-o dentro do painel. Agora sim, clique dentro do painel, para
que ele fique "dentro" do painel. Se você colocá-lo fora, ele não
acompanhará o local fixo no painel, por exemplo, podendo ficar fora do lugar dependendo do tamanho da janela.



Agora você já deve estar pegando mais intimidade com a inserção de
componentes. Insira mais três botões, ao lado desse. Você pode copiá-lo
e colá-lo! Clique uma vez nele, ele ficará selecionado (o botão). Tecle
CTRL+C e depois CTRL+V, e ele será inserido dentro do painel, depois
tecle CTRL+V duas vezes para colar mais dois, e arraste cada um para os
seus lugares, de modo a deixar o visual organizado.

Agora altere os textos dos botões. Selecione um por um, localize a propriedade "Caption" no inspetor de objetos, e digite o texto desejado. Para nosso exemplo, coloque "Voltar" no primeiro botão, "Avançar" no segundo, "Parar" no terceiro e "Atualizar" no quarto.

Para inserir uma barra de endereços, clique no
componente "Edit", da aba "Standard" da paleta de componentes, e
insira-o também dentro do painel, logo abaixo dos botões (redimensione
o painel, se necessário, clicando nele e arrastando a linha inferior
para baixo). Redimensione o campo de texto ("Edit") até ficar com um
tamanho razoável, para digitar um endereço da Internet. Com o "Edit"
selecionado, remova o texto dele. Basta limpar o texto da propriedade
"Text", pelo inspetor de objetos.






Para não perder, salve o projeto. Clique no botão "Salvar tudo" do Delphi, ou no
menu "File > Save all", como é a primeira vez. Primeiro salve o
arquivo de projeto, de extensão ".dpr". Coloque o nome principal do seu
programa, de preferência sem espaço, será o mesmo nome do executável.
Por exemplo, "Navegador". Ao clicar em Salvar na janela "Salvar",
aparecerá uma outra, agora para salvar a unidade de código do
formulário, um arquivo ".pas". Pode deixar o padrão, "Unit1.pas", se
você quiser.

O componente WebBrowser usa toda a estrutura do IE, como comentei no
começo do arquivo. Para fazê-lo "funcionar", o que seu programa tem que
fazer é chamar as funções corretas dele. Algumas são documentadas,
outras creio que não... Mas para as mais comuns não há segredo.

Dica: para facilitar as referências, vamos renomear o WebBrowser para
um nome mais curto. Selecione o quadro branco do IE, e altere a
propriedade "Name" dele, pelo inspetor de objetos. Usarei aqui "web",
um nome fácil de identificar e curtinho.

Selecione a barra de endereços, o "Edit1". Quando a pessoa digitar alguma coisa e teclar [enter], o navegador
será chamado. Para isso, deveremos configurar o evento da barra de
endereços responsável por reconhecer o [enter], e por chamar o navegador.

Selecione a barra de endereços, e vá para a aba "Events" do Object
Inspector (na mesma janela onde você altera os títulos, textos,
propriedades dos componentes...).



Nessa aba podemos personalizar os eventos dos objetos. Os eventos são
ações que podem ser realizadas pelo usuário ou pelo programa. Por
exemplo, quando o usuário clica num componente visual, o evento onClick
é chamado, e o código contido nele será executado. Se o usuário nunca
clicar nesse botão, esse código nunca seria executado. Para definir um
código, uma ação, quando o usuário teclar [enter] no campo de texto, devemos inserir os comandos no
evento "onKeyDown", que pode ser entendido como "aoApertarUmaTecla".
Ele é chamado para todas as teclas enquanto o componente de texto
estiver com o foco, então deveremos também incluir um verificador, para
verificar se a tecla pressionada foi [enter]. Se for, faremos uma
chamada ao componente do navegador para abrir o endereço digitado. Se não for, não faremos nada e deixaremos o usuário terminar de digitar

Localize o evento "onKeyDown" (não se esqueça de selecionar o "Edit1" antes!), e dê um duplo clique no quadrinho em branco à sua esquerda, onde você percebe que pode digitar algo:



A janela de código será aberta no ponto correspondente, o Dephi já preparará toda a estrutura para você digitar os comandos. Digite isso, entre o begin e o end:


if Key = VK_RETURN then
web.Navigate(Edit1.Text);

Veja na tela, como ficaria:


Vamos entender esse código... Traduzindo-o para o português:

se Tecla = Enter então
navegador.Abre(site digitado no campo de endereço);

A estrutura dependerá da linguagem de programação em uso, não se esqueça que este tutorial é de Delphi, portanto, não bastará "copiar e colar" esse mesmo código no Visual Basic ou C++. Mas as idéias são as mesmas.

O if é um comando verificador, e tem esta sintaxe:

if (condição verdadeira) then
faça alguma coisa;

O ponto e vírgula é o caractere terminador de linha em Pascal (a linguagem usada pelo Delphi).
As instruções que não estiverem separadas por um ponto-e-vírgula, podem
ser digitadas na mesma linha, se você quiser. Pula-se linhas e é
costume teclar TAB para dar tabulações e espaços apenas para facilitar
a edição do código, visto que quem o editará é uma pessoa – como você!

Nesse código, o verificador verifica se a tecla pressionada ("Key") foi a tecla [enter] ("VK_RETURN" é um identificador no Delphi,
para a tecla [enter]; cada tecla tem um código próprio). Se foi, ele
chama o método "Navigate" do objeto "web", passando como parâmetro o
texto que estiver dentro do campo. Esse texto é obtido pela propriedade
"Text", e ela é separada por um ponto do nome do objeto (assim como os
métodos, eventos, funções... que aliás são, "num primeiro momento", a
mesma coisa, evento, função e método).

Compile o programa e execute-o, digitando qualquer site na barra de
endereços, e tecle [enter]. Se der erro na compilação e o programa não
rodar, verifique todos os passos descritos, observando a mensagem de
erro na tela do Delphi, que normalmente reporta o que ocorreu ou pelo menos a linha.

Dica: para executar o programa de dentro do Delphi, apenas tecle F9, ou clique no
botão com o ícone de um "play", na barra de ferramentas. O arquivo
gerado terá o mesmo nome do projeto que você salvou, mas a extensão
".exe". Você poderá distribui-lo e inclusive rodá-lo em outros
computadores, sem precisar do Delphi

Agora vamos definir as ações dos botões. O evento onClick deles é o
evento padrão, por ser o mais intuitivo para um botão: fazer alguma
coisa quando o usuário clicar nele. Como é o evento padrão, basta dar
um duplo clique sobre cada botão, para digitar o evento para ele. Mas
nada impede que você o faça selecionando o botão, e dando um duplo
clique no evento "onClick", da aba "Events" do Object Inspector.

Essa parte será bem fácil, pois cada botão apenas chamará um método do componente do navegador, que no caso, é gerenciado pelo motor do Internet Explorer, ou seja, já está tud programado.

Dê um duplo clique sobre o botão "Voltar", e digite:

web.GoBack;
GoBack é um método definido pelos criadores do IE, que fará ele voltar à página anteriormente acessada.

Faça a mesma coisa para o botão "Avançar", digitando:
web.GoForward;

Para o botão "Parar":
web.Stop;
E finalmente, o botão "Atualizar":

web.Refresh;

Salve, compile e rode seu programa. Navegue por algumas páginas, para
testar. Para que os botões "Voltar" e "Avançar" realmente funcionem,
você deverá navegar clicando em alguma coisa (ou acessando outro
endereço), e depois clicar no "Voltar".

Agora vamos nos aprofundar mais um pouco... Para começar, o título da
janela. Como todo o trabalho pesado é feito pelo componente do IE, você
não terá muita dificuldade nem precisará de muitas linhas de código
para identificar o título da página atual: o IE pode informar ao
programa, e então o programa usa o texto do título onde quiser.
Selecione o componente web, e acesse o evento "onTitleChange". A essa
altura isso é moleza para você.

Esse evento, como o nome sugere, será chamado toda vez que o título da página for alterado. Veja a sintaxe dele:
procedure TForm1.webTitleChange(Sender: TObject; const Text: WideString);

Em se tratando de eventos, os valores entre parênteses funcionam de
forma parecida com os "parâmetros" passados às funções. Mas aqui, é ao
contrário. Em vez de você passar um valor para uma função [como o feito
em web.Navigate(pagina...)], é a função que retorna valores para você,
e você faz o que quiser com eles. Aqui o "Sender" não interessa, mas
sim o "Text". Ele contém justamente o título da página. Digite, então,
nesse evento onTitleChange:

Caption := Text;

Pronto

Rode o programa e veja, o título da janela será o título da página. Se
você quiser incluir o nome do programa também, pode fazer isso:


Caption := Text + ' - Meu Navegador';


Assim o título da janela será o título da página, separado por um traço e o nome do seu programa.

Quando o programa é aberto, nenhuma página está carregada ainda, e o título ficaria o "Form1", aplicado pelo Delphi ao criar
o formulário. Para trocá-lo, basta editar a propriedade "Caption" do
formulário. Eis aqui uma outra dica para iniciantes... O formulário tem
o painel, alinhado no topo, e o componente do navegador, alinhado no restante da janela. Não há lugar vazio para clicar e selecionar o formulário Não se desespere. No
Inspetor de Objetos, todos os componentes são listados pelo nome.
Clique na listinha dele, localize o formulário (terá o nome "Form1", se
você não alterou), e então altere a propriedade "Caption".



De forma similar ao título, o IE fornece também o texto desejado para a
barra de status, quando ele for alterado. Isso deixa o programa melhor,
vamos então colocar uma barra de status

Selecione o componente "StatusBar" na aba "Win32", e coloque-o no formulário. Não dá para clicar no
formulário porque os outros componentes estão por cima. Não tem
problema, pode colocar em cima do componente do IE (o quadro branco).
Ele não comporta objetos dentro dele (como faz o painel), então o
objeto será inserido no formulário mesmo. A barra de status já se ajusta sozinha na tela, na parte inferior.

[img]
http://201.76.37.243/imagens/img-2d7b80e6.gif[/img]

Particularmente, a barra de status padrão é dividida em partes, em
painéis (quadrinhos). Uma propriedade dela ajusta para que seja
dividida em uma parte só, para coisas mais simples, e é o ideal para
esse programa. É a propriedade "SimplePanel". Ela é um valor booleano,
que pode ser "sim" ou "não". Na linguagem do programa, "True" (para
sim, verdadeiro) ou "False" (para não, ou falso). Selecione a barra de
status que você acabou de inserir, e na aba de propriedades do inspetor
de objetos, localize essa propriedade "SimplePanel". Deixe-a com o
valor "True". Agora vamos definir o texto que deverá aparecer...

Esse texto, como dito, é provido pelo próprio IE, e será atualizado
automaticamente (seria o mesmo texto que aparece na barra de status do
IE). Selecione o componente do navegador
e procure o evento "onStatusTextChange". Você não terá dificuldades, é
basicamente a mesma coisa aplicada para o título, porém, jogando o
texto retornado por ele na barra de status:

StatusBar1.SimpleText := Text;


O texto da barra de status é definido pela propriedade "SimpleText". Se
a propriedade "SimplePanel" não estivesse definida para "True", o texto
não apareceria, e o meio de colocá-lo seria outro (usando o índice do
quadrinho desejado dela, fica de fora do objetivo desse texto explicar
isso).

Falta ajustar uma coisa... Você que navega na Internet já deve ter
reparado que os navegadores trocam o texto da barra de endereços
conforme mudam de página. No
seu programa, você deve ter percebido que o texto não foi alterado, nem
depois de dar [enter], nem ao navegar por outras páginas "clicando" nos
links. O programa não tem como saber que você quer que ele atualize o
endereço, aliás, nem tem como saber qual é o campo de endereço, se você
não informá-lo. Isso pode ser obtido com uma propriedade do controle do
IE, que retorna o endereço (URL) da página que ele contém. No evento da barra de endereços você fez o navegador abrir o site digitado na mesma. Agora você vai fazer o contrário: forçar o navegador a jogar o endereço da página para a barra de endereços.

Para isso, selecione o controle do IE, e edite o evento "onDownloadComplete". No código para ele, digite:

Edit1.Text := web.LocationURL;


Você basicamente troca o texto do campo Edit1 (que é o campo da barra
de endereço) pelo endereço da página nova, quando ela for carregada.
Esse endereço é obtido pela propriedade "LocationURL" do controle do IE.

Veja o programinha como ficou, com um site aberto:



------------------------
O componente do IE já vem configurado no Delphi
quando ele é instalado, e alguns outros ambientes (como o Visual Basic)
também vêm preparados com ele. Caso não venha, você deverá importar o
controle Active-X do IE. E para quem vai usar o controle do Mozilla,
também: deverá instalá-lo na interface do Delphi, para que possa ser usado pelos seus programas...

O controle Active-X do Gecko foi disponibilizado para facilitar o uso
do "núcleo" do Mozilla em aplicações de terceiros (como as suas), sem
ser preciso desenvolver um navegador
do zero, e sem "depender" do IE. Com a vantagem que é open source, você
tem mais liberdade para personalizá-lo ou modificá-lo (não que isso
seja fácil, rs). Visando facilitar a compatibilidade com os programas
que usam o controle Active-X do IE, o pessoal que trabalha no
controle Active-X do Gecko trabalhou para o desenvolvimento de uma API
não parecida, mas idêntica! O que isso significa? Significa que basta
"colocar" o controle do Mozilla no seu
programa, substituindo o do IE (ou já iniciando os novos projetos com
ele). Os nomes de métodos, chamadas e parâmetros são os mesmos. No
caso desse programinha, por exemplo, basta trocar o controle, excluir
as referências ao componente do IE e dar ao controle do Mozilla o mesmo
nome (no nosso exemplo, "web"), para que você não precise alterar as referências ao nome.

É bom saber que o controle a ser usado não é o Mozilla em si, nem o
Firefox ou Netscape. É o "coração" deles, "portado" para que pudesse
ser usado por outras aplicações, na forma então de um controle
Active-X. Como disse no começo desse tutorial, um controle Active-X é como se fosse um programa, que roda dentro de outro programa.

Como todo controle Active-X, o do Mozilla deverá estar instalado no
sistema dos usuários onde seu projeto for rodar. O instalador dele tem
cerca de 5 MB, mas você pode também redistribuir os arquivos isolados,
na mesma pasta da sua aplicação, registrando com o regsvr32 o arquivo
"mozctlx.dll". Calma, vamos por partes.

---->Instalando o controle Active-X do Mozilla


Baixe-o em:

http://www.iol.ie/~locka/mozilla/mozilla.htm

E rode o instalador no seu
sistema, onde você vai desenvolver o programa. Nessa página há diversas
informações sobre o controle do Mozilla, suas idéias, funcionamento e é
possível fazer o download de um programinha de exemplo, também.

Rode o instalador como administrador, pois para que o arquivo
"mozctlx.dll" seja registrado, é necessário privilégios de
administrador (assim como será necessário aos usuários do seu programa).

Você precisará, antes de usá-lo pela primeira vez, importar o controle no seu ambiente de programação. Isso irá variar de ambiente para ambiente. No Delphi, clique no menu "Component > Import Active-X Control...", e localize o item "MozillaControl ...". Veja:




Selecionado ele, clique em "Install" e siga as instruções do ambiente
de programação, normalmente pedirão um local para salvar a unidade de
código gerada para o controle em questão. É bom deixar o caminho
padrão, normalmente, junto com os outros arquivos do ambiente.

Não se assuste se existirem muitos controles disponíveis, pois o Delphi (no caso) lista todos os controles disponíveis no
seu sistema. Alguns você reconhecerá facilmente, como o do Windows
Media Planger, o do próprio IE, etc. Muitos programas usam controles
Active-X para compartilhar componentes e funções comuns, alguns são
fechados, outros não...

Nota: se o controle Active-X não foi registrado, ele não será listado
aí. Então, execute novamente o instalador, logado como administrador.
Se você souber o arquivo certo a ser registrado, pode chamar o
RegSvr32, assim:

regsvr32 "C:\Arquivos de programas\Mozilla... \mozctlx.dll"


Depois de instalado no sistema de desenvolvimento, bastará usá-lo! O controle do Mozilla, no Delphi,
ficará por padrão na paleta de componentes "ActiveX" (note na imagem de
tela anterior que você pode escolher outra antes da instalação, no campo "Palette page").

11-10-2008 por
RodrigoKSA

Ele ficou sem ícone, pois foi um controle instalado depois, o Delphi simplesmente não tem como saber do que se trata, apenas que é um controle Active-X Você verá o nome dele ("MozillaBrowser") ao passar o mouse sobre o mesmo.

Para iniciar novos programas usando ele, basta clicar nele e inserir no
formulário, normal, assim como você fez com o do IE. Para trocar o do
IE por ele, exclua primeiro o do IE (selecione o quadro branco, o
componente "web" do nosso exemplo) e tecle Delete, no teclado. Insira o do Mozilla no
espaço livre do formulário e ajuste a propriedade "Align" dele para
"AlClient", assim como você fez com o do IE anteriormente, para que ele
seja ajustado automaticamente na janela. Selecione-o e altere a
propriedade "Name", deixando a mesma anterior, "web", para que você não
precise trocar as referências do nome no código, visto que o controle do Mozilla acabado de inserir teria o nome padrão "MozillaBrowser1".

Nota: ao excluir um objeto, normalmente as referências aos códigos do
objeto não são removidas, são "arquivos de inclusão". Se você remover o
controle do IE, após removê-lo, remova as referências à unidade de
código "SHDocVw", da cláusula Uses:




Normalmente não ocorrerá problema se você não remover. O que ocorrerá é
que seu programa terá um pouco de código a mais, aumentando o tamanho
dele, par um código inútil que não será usado, visto que você removeu o
controle do IE.

Faltam poucos ajustes. Ao inserir controles Active-X, pode dar um erro
na execução do programa, parando num certo endereço de memória. Para
evitar isso deve-se inicializar o objeto OLE e fechá-lo na finalização.

Na unidade de código do formulário atual, insira a unidade ActiveX na cláusula "Uses", logo no começo do código, caso não tenha:



Checado isso, role a tela do código até o final, e adicione antes do último "End" (em se tratando do Delphi), estas linhas:

Initialization
OleInitialize(nil);

Finalization
OleUninitialize;

Se seu programa já possuir os blocos "Initialization" e "Finalization",
atente-se para inserir as linhas certas entre eles, sem duplicar os
blocos em si. Isso vale tanto para o controle do IE, como do Mozilla ou
qualquer outro controle Active-X que você venha a importar. Veja como
deverá ficar na tela:



Aí é só fazer a festa

Você pode criar navegadores
específicos para a ajuda do seu programa, ou até mesmo inserir um
quadro que abra uma página HTML (seja local ou on line) dentro do seu
programa.

Se usar o controle do Mozilla, não se esqueça de redistribuir os
arquivos dele, e registrar o "mozctlx.dll" com o "regsvr32". Para o IE
você não precisa se preocupar com isso, pois todo Windows a partir do
98 já vem com ele instalado (esse controle funciona para o IE 4, 5, 6 e
7). Se seu programa precisar rodar no
Windows 95 ou NT4, exija a presença do IE, caso contrário, ele não irá
funcionar. Lembre-se que você não pode, em teoria, copiar os arquivos
do IE e mandar junto com seu programa.

Muito bom esse tuto, eu ja tentei fzer mais não consegui :/.