[Com Imagens] Criando o navegador básico

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.

Nota para usuários do Visual Basic:
se você colar, ele poderá perguntar na primeira vez se você quer que ele
crie um "array". Diga que não, ele simplesmente colará. Se você
confirmar o "array", todos os botões colados a partir do mesmo receberão
o mesmo nome, e os eventos serão diferenciados por meio de um índice.
Isso é diferente no Delphi, mas é semelhante: para compartilhar eventos,
cada objeto tem um nome diferente e compartilham apenas o evento; por
meio do identificador ("Sender") pode-se saber qual botão originou o
evento, o que no Visual Basic seria identificado por um índice (um
número).


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:<blockquote>se
Tecla = Enter então
navegador.Abre(site digitado no campo de endereço);
</blockquote>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:
<blockquote>if (condição verdadeira) then
faça alguma coisa;
</blockquote>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".