Criando um WebBrowser Avançado

[~~Surfistinha~~ 13]

O TÓPICO É PESADO, ENTÃO ANTES DE POSTAR, DESABILITEM AS ASSINATURAS

 

1. Introdução

 

Este Artigo tem por intuito ensinar a desenvolver um Navegador de Internet Avançado, passo a passo, visando um melhor conhecimento do componente WebBrowser da paleta Internet, e adquirindo conhecimentos do poderoso Delphi.

 

 

O Artigo explica detalhadamente passo a passo, não basta que você seja um programador avançado, porquê o artigo se adere a todos os níveis de programadores.

 

Esta é a 1º Parte do Artigo, mais para frente será detalhado outras funções, eventos e ferramentas que deixarão seu WebBrowser com uma estrutura Robusta como a do Microsoft Internet Explorer, a abordagem deste artigo ainda é o básico do que há de vir pela frente.

 

Espero que o curso possa ser útil para todos, apesar de ensinar a trabalhar com o componente WebBrowser você exercitará seus conhecimentos com outros componentes que Delphi tem a oferecer.

 

2. Início

 

Pré requisitos:

• Lógica de Programação
  
• Delphi (Básico)
  

 

Antes de começarmos a desenvolver o nosso navegador, teremos que baixar simplesmente uma Unit com algumas funções necessárias para o funcionamento de nosso WebBrowser. O nome da mesma é WBFuncs.

 

Baixar Unit:

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

Agora vamos à construção do aplicativo, primeiramente Inicie um Novo Projeto em Branco.

 

Depois de criar um novo projeto em branco, uma nova aplicação, vamos salvar o mesmo.

 

Clique sobre o botão:

 

Abrirá uma Caixa de Diálogo para salvar primeiramente a Unit, ou seja, onde nós digitamos os códigos em Object Pascal para dar funcionalidade a aplicação, nós iremos salvá-la com o seguinte nome: Principal.pas

Depois de ter salvado nossa Unit, abrirá uma nova caixa de Diálogo para salvarmos o nosso projeto, que neste caso se chamará WEBBROWSER.

 

 

Pronto, agora vamos trocar algumas propriedades de nossa Aplicação.

 

 

Vamos Trocar o nome do nosso Form, dê um clique em uma área livre do Form e depois vá até o Objetc Inspector e troque a propriedade Name do Form para: Mainform, ou seja, passou de Form1 para MainForm, você poderá colocar um outro nome, mas este nome é aconselhável porquê será usado em todo o curso.

 

3. Declarando a Unit WBFuncs.pas

 

Logo acima você tinha baixado esta Unit, agora nós teremos que colocar ela no local onde se encontra o nosso aplicativo, ou seja, no local onde nosso aplicativo está salvo. Se você salvou o projeto criado acima na pasta: Ex: C:\Browser então você terá que pegar a Unit onde ela estiver e colar dentro desta pasta onde salvou o projeto.

 

 

Agora nós teremos que declarar a mesma em nosso aplicativo:

 

 

Em Uses, declaramos aí como nos mostra a figura, para que as funções contidas nela seja usadas em nosso WebBrowser mais pra frente.

4. Menu

 

Insira o Componente MainMenu da paleta Standard. E Adicione os seguintes menus:

 

 

Agora nós iremos trocar o nome de cada comando do Menu Arquivo e do Menu Editar, iremos fazer isso para que o nosso programa fique bem Estruturado e bem organizado.

 

Exemplo:

 

Sendo assim, faça o mesmo com os comandos do Menu Arquivo e do Menu Editar como é mostrado no quadro Abaixo:

 

 

5. Barra de Ferramentas (Toolbar)

 

• Insira um Toolbar contido na paleta Win32.
  

É apartir do Toolbar que iremos criar as botões de navegação do nosso WebBrowser (Avançar, Voltar, Parar, Atualizar). Para isso faça o seguinte:

 

Vamos Trocar modificar algumas propriedades do mesmo como nos mostra o quadro abaixo:

 

 

 

Nosso Toolbar ficará com a seguinte aparência:

 

 

Pronto pessoal, já inserimos todos os botões, agora colocaremos imagens em cada um dos botões para que a aplicação tenha um visual agradável, para isso eu estou disponibilizando as imagens que usaremos em nossa aplicação, abaixo vai o link para baixá-las:

 

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

6. Inserindo Imagens nos Botões

 

Para inserirmos imagens em nosso botões, teremos que usar o componente ImageList , onde selecionaremos uma lista de imagens a serem usadas.

 

Façam o seguinte:

1. Insira o componente ImageList contido na paleta Win32.
   
2. Troque as seguintes propriedades do ImageList:
   

 

Agora chegou a hora de nós adicionarmos as imagens no ImageList, dê duplo click sobre o ImageList, abrirá a seguinte caixa de diálogo:

 

Para começarmos a inserir as imagens teremos que clicar sobre o botão ADD ..

Abrirá uma caixa de dialogo para a inserção de imagens, você irá até a pasta onde se encontra as imagens e selecione uma e clique no botão abrir, depois clique novamente no botão ADD ... e selecione a outra imagem e assim por diante, o nosso imagelist deverá ter as seguintes imagens Inseridas nele: Home.bmp + Avançar.bmp + Avançar_Disable.bmp + Imprimir.bmp + Parar.bmp + Procurar.bmp + Voltar.bmp + Voltar_Disable.

 

7. Configurando o Toolbar para receber as imagens

 

Bom, agora nós iremos trocar uma propriedade do Toolbar para que ele receba as imagens que estão armazenadas no nosso ImageList que acabamos de criar na etapa anterior.

 

 

Clique sobre uma área livre do Toolbar, vá até a barra do Object Inspector na propriedade Images que é nela que nós selecionamos o ImageList que contém nossas imagens, neste caso é o ImageList1, como nos mostra a figura abaixo:

 

 

 

Agora sim, nosso ToolBar já tem uma referencia de onde ele irá pegar as imagens para colocar em seus botões, então basta agora nós colocarmos as imagens nos botões do Toolbar. Para isso nós iremos fazer o seguinte:

 

Selecionar o botão, iremos começar pelo 1º botão que é o botão voltar.

 

 

Agora teremos que ir até o Object Inspector, e ir até a propriedade ImageIndex, apartir daí nos iremos selecionar a imagem do botão.

 

 

Pronto pessoal, agora você irão fazer o mesmo com os outros botões, para ficar melhor eu mostrei abaixo como deverá ficar os outros botões:

 

 

8. Questão de Aparência - Inserindo um Coolbar

 

Vamos incrementar em nossa aplicação um Coolbar, componente que se encontra na Planeta Win32, isira-o no form.

 

 

A Principal característica de um Coolbar é a possibilidade de criarmos BARRAS e movimentarmos as mesmas, trocando-as de posição:

 

 

Essa figura é um bom exemplo, como vocês podem observar eu troquei de lugar a Barra de Endereço pela Barra de Ferramentas. Nós iremos fazer isso com o nosso WebBrowser, terá uma semelhança com o Microsoft Internet Explorer.

 

Agora nós iremos colocar o nosso Toolbar (Barra de Ferramentas), dentro do Coolbar. Para que ele crie uma barra pra gente, onde irá ficar o nosso Toolbar.

 

Teremos que fazer o seguinte, Selecione o Toolbar:

 

 

Com o Toolbar selecionado, aperte as Teclas CTRL+X – Essas teclas servem para RECORTAR, ou seja, iremos tirar o ToolBar desse local e iremos inseri-lo dentro do Coolbar.

 

Depois que você tiver Recortado (CTRL+X) o Toolbar, nós iremos selecionar o Coolbar (Clicar sobre ele).

 

Depois de selecionado o Coolbar vocês irão apertar a Tecla CTRL + V que serve para colar, ou seja, nós tiramos o Toolbar do Form e colocamos o mesmo dentro do Coolbar. O Coolbar criou automaticamente para nós uma Barra e nesta barra de ele armazenou o Toolbar.

 

 

9. Inserindo o Combobox das URL's

 

Apartir deste nos digitaremos o endereço do site para ser acessado.

 

 

O Componente que iremos inserir é o Combobox que se encontra na guia Standard, da paleta de componentes.

 

Nós iremos inserir o nosso Combobox na segunda barra do Coolbar, onde o mouse está apontando, como nos mostra a figura abaixo:

 

 

Muito bem, a cada etapa concluída o nosso Aplicativo vai tomando uma aparência muito agradável, como nos mostra a figura abaixo:

 

 

Dê dois clique em uma parte livre do Coolbar ou onde nos mostra a figura abaixo:

 

 

Abrirá uma janelinha para a manipulação do Coolbar, ou seja, dos Controles (Objetos) que serão ou que estão inseridos nele:

 

 

Vocês podem observar que existe dois Itens, o item 0 e o 1, e na frente escrito TCoolBand esse TCoolBand são as Barras existentes em um Coolbar, neste caso o nosso tem duas Barras, uma está armazenando o ToolBar (Barra de Ferramentas), e na outra Barra está armazenado o Combobox (IEAddres).

Selecionem o item 0, a primeira Barra do nosso Coolbar, agora vá até a Barra do Inspetor de Objetos (Object Inspector). E observe a propriedade Control, ou seja, o controle que está ativo nesta bandeja de índice 0 do Coolbar, é o Toolbar (Barra de Ferramentas.).

 

 

Agora nós iremos trocar a propriedade TEXT do item 1 do nosso Coolbar, que neste caso é a 2º bandeja , onde está armazenado o Combobox (IEAddres). Para isso selecione o item 1.

 

 

Vá até o Object Inspector e troque a propriedade Text para: "Endereço:" sem aspas

 

Fazendo isso será adicionado o texto "Endereço :" antes do 2º controle do Coolbar que é o Combobox, abaixo a figura mostrará melhor como ficará:

 

Bom pessoal, o Nosso Coolbar está quase pronto, só falta nós diminuirmos o tamanho dele um pouco, porque ele está um pouco grande, e sobrou uma parte do Coolbar. Para isso faça como nos mostra a figura abaixo:

 

CONTINUA...

 

 

10. Inserindo uma Barra de Status (StatusBar)

 

Todos nós já conhecemos e estamos bem familiarizados com a StatusBar (Barra de Status). Sua função é mostrar informações dependendo de cada programa, um Exemplo é o Windows Explorer, sua StatusBar (Barra de Status) exibe a quantidade de Objetos (Arquivos, Programas, Pastas) dentro da pasta que você estiver, exemplo:

 

 

Como você pode observar uma StatusBar é repartida em partes que geralmente nós chamamos de painéis, essa StatusBar do Windows Explorer tem 3 painéis, como nos mostra a figura acima.

No nosso programa WebBrowser, a StatusBar vai conter 4 Painéis, então vamos inseri - lá ao nosso Form. Vá até a paleta de componentes Win32 e insira o componente StatusBar.

 

Por padrão ela se localizará na parte Inferior de seu Form. Agora nós iremos começar a inserir os painéis e trocar algumas propriedades da mesma.

 

Para isso, dê duplo clique sobre sua StatusBAR, abrirá a janelinha para a Manipulação dos Painéis.

 

 

Aparecerá está janela, então para nós começarmos a inserir os Painéis da nossa StatusBar, teremos que clicar sobre o Botão "Add New" como nos mostra a figura em cima.

 

Repita este procedimento, clicando sobre o botão "Add New" até adicionarmos 4 painéis.

 

Como você pode observar na figura acima, nós inserimos 4 painéis, cada um tem um Número antes, esse número é o que chamamos de Índice ou seja o Índice é a numeração dos painéis, que parte do 0 e assim por diante. Então o nosso Último Painel que é o 4º Painel, é de índice 3.

 

Agora nós iremos alterar as dimensões do tamanho de cada Painel, para isso a janela acima citada de manipulação dos painéis deverá estar aberta.

 

Neste Caso nós iremos trocar o tamanho do Painel da StatusBAR de Índice 0. Basta você selecionar o item 0 e ir atéo Object Inspector e trocar as propriedades desejadas, no quadro abaixo esta pedindo o que se deve trocar:

 

 

11. Inserindo o Principal Componente (TWebBrowser)

 

Agora que nós já temos meio caminho andado, nós iremos inserir o principal componente de nossa aplicação que o WebBrowser, é apartir dele que nós navegamos em uma página da web, é ele que da vida e nome a nossa aplicação.

 

Para isso, devemos ir até a Paleta de Componentes na Guia Internet, e adicionarmos ao nosso Form o componente WebBrowser, como nos mostra a figura abaixo.

 

Nosso Form terá a seguinte semelhança:

 

 

Agora, troque a propriedade Align do WebBrowser para alClient

 

12. Componente OpenDialog

 

O Componente OpenDialog será muito útil para nós mais frente, porque através dele abriremos nossas páginas locais, ou seja que estão em nosso computador.

 

Vá até a paleta Dialogs e insira o componente OpenDialog

 

Vamos trocar uma propriedade de Filtro, para que ele filtre os arquivos de acordo com sua necessidade, para isso vá até o Object Inspector e clique sobre filter terá três ... pontinhos para se clicar e abrirá a caixa de diálogo para a edição do filtro. Coloquem dessa forma como nos mostra a figura:

 

 

13. Adicionando o Evento OnClick aos Botões

 

Agora nós iremos adicionar o Evento OnClick em cada um dos botões do nosso Browser, para que quando pressionado, executar uma função tal que corresponda o mesmo, Ex: O Botão Voltar, terá que ter uma função para que quando pressionado ele voltar para a página anterior.

 

Faça o seguinte:

Selecione o botão, neste caso nós selecionaremos o 1º botão que é o Voltar.

 

 

Dê duplo-clique para irmos ao evento Onclick do botão voltar.

 

Iremos inserir uma função para que quando pressionado, ele volte para a página anterior, para isso faça o seguinte:

 

 

Inicie com o nome do WebBrowser, e procure pela função GoBack.

 

Ficará desta forma o código do Evento Onclick do Botão Voltar:

 

 

 

 

 

 

 

 

14. Funções e Eventos

 

Vamos inserir um procedimento que pega as URL's visitadas do IE e joga na Combobox do nosso aplicativo:

 

 

• Agora vá até o Evento: OnCreate do Form e digite a seguinte função:
  

 

Esta função é para que quando o Aplicativo for iniciado ele navegar na página padrão inicial do IE.

 

Insira também:

 

 

 

Para que ele pegue todas as URL's visitadas através daquele procedimento e jogue em nosso Combobox.

 

15. Inserindo um ProgressBar (Barra de Progresso)

 

Vamos inserir agora uma Barra de Programa que indicará o carregamento das páginas visitadas para isso faça o seguinte:

• Insira uma ProgressBar em qualquer parte livre do Form.
  

Agora vamos até o evento OnResize do Form e digite a seguinte linha de código:

 

 

Esse código que colocamos irá inserir a barra de Progresso dentro do painel 1 de nosso StatusBar.

 

Agora vamos ao evento OnProgressChange do WebBrowser, neste evento iremos colocar um código para que ele indique o carregamento das paginas através da Barra de Progresso:

 

16. Outros Eventos

 

• Evento: OnCommandStateChange do WebBrowser.
  

Agora iremos implementar um comando "CommandStateChange" do WebBrowser, o webbrowser por padrão ele automatiza automaticamente os botões voltar e avançar, quando não tiver mais nenhum página para voltar o botão tem que desativar, então esse comando faz isso para nós, para isso devemos ir até o evento OnCommandStateChange do webbrowser, abaixo vai o código:

 

 

• Evento: OnBeforeNavigate2 do WebBrowser.
  

Este evento serve para que o WebBrowser obedeça algum comando na hora de navegar, toda que hora que você estiver navegando ou ir para outro site ele executará este evento, neste caso vamos implementar um código para que quando ele estiver navegando apareça o endereço do site no Combobox, como nos mostra a figura abaixo:

 

 

Para isso vamos até o evento OnBeforeNavigate2 e digitar a seguinte linha de código:

 

 

• Evento: OnKeyPress do Combobox.
  

Iremos colocar uma rotina nesse evento do combobox, para que quando você digitar um endereço de um site e apertar a tecla Enter ele navega até esse site:

 

Para isso vamos até o Evento OnKeyPress do combobox e digitarmos o seguinte código:

 

 

• Evento: OnStatusTextChange do WebBrowser.
  

Neste evento iremos colocar um comando para que onde o cursor do mouse passe, apareça o link na StatusBar, quando a página está sendo carregada também aparecer na StatusBar, para vocês entenderem melhor observem a figura abaixo:

 

 

Vocês podem observar que apareceu na StatusBar o link do menu Artigos, onde o mouse está posicionado, e assim por diante. Para implementarmos esse comando basta irem até o evento OnStatusTextChange do WebBrowser e digitar a seguinte linha de código:

 

 

• Evento: OnTitleChange do WebBrowser.
  

Esse evento é responsável por dar o nome da página digitada , como no IE, na barra de título aparece o nome da página visitada, para isso basta você ir até o evento OnTitleChange do WebBrowser e digitar o seguinte código:

 

CONTINUA....

[~~Surfistinha~~ 13]

17. Adicionado Evento aos comandos do MENU ARQUIVO

 

Agora basta nós implementarmos funções aos Menus do Nosso aplicativo, nos temos o Menu Arquivo e o Menu Editar, vamos começar pelo menu Arquivo:

 

Menu Arquivo

• Comando: Nova Página
  

Evento: Onclick

 

Comentário: Executa sua aplicação novamente, abrindo uma nova janela.

 

 

 

• Comando: Abrir
  

Evento: Onclick

 

Comentário: O comando abrir servirá para abrirmos páginas da web salvas em nosso computador e imagens, etc... Todo tipo de arquivo.

 

 

 

• Comando: Salvar Como
  

Evento: Onclick

 

 

Comentário: Salva uma página da Web, utilizando uma função da Unit WBFuncs, que vocês baixaram no inicio do curso.

 

 

 

• Comando: Imprimir
  

Evento: Onclick

 

 

Comentário: Imprime a página aberta na aplicação, utilizando uma função da Unit WBFuncs, que vocês baixaram no inicio do curso.

 

 

 

• Comando: Visualizar Impressão
  

Evento: Onclick

 

 

Comentário: Visualização a Impressão antes de imprimir a página, utilizando uma função da Unit WBFuncs, que vocês baixaram no inicio do curso.

 

 

 

• Comando: Configurar Impressão
  

Evento: Onclick

 

 

Comentário: Configura a página antes de imprimir, utilizando uma função da Unit WBFuncs, que vocês baixaram no inicio do curso

 

 

 

• Comando: Propriedades
  

Evento: Onclick

 

 

Comentário: Exibe a propriedade da página como no IE, utilizando uma função da Unit WBFuncs, que vocês baixaram no inicio do curso.

 

 

 

• Comando: Sair
  

Evento: Onclick

 

 

Comentário: Sai da aplicação, fecha a aplicação.

 

 

 

18. Adicionado Evento aos comandos do MENU EDITAR

 

Agora iremos implementarmos funções aos Menus do Nosso aplicativo.

 

Menu Editar

• Comando: Recortar

  
  

  
  

Evento: Onclick

 

 

Comentário: Recorta um texto de um "campo de texto" em uma página da web.

 

 

 

• Comando: Copiar

  
  

  
  

Evento: Onclick

 

 

Comentário: Copia um texto de um "campo de texto" em uma página da web.

 

 

 

• Comando: Colar

  
  

  
  

Evento: Onclick

 

 

Comentário: Cola em um campo de texto algo copiado anteriormente.

 

 

 

• Comando: Localizar [ Nesta Página ]

  
  

  
  

Evento: Onclick

 

 

Comentário: Abre a caixa de diálogo localizar para localizar palavras e textos de uma página da web.

 

 

 

19. Print do Programa e Código Fonte para Download

 

 

 

• É necessário se cadastrar para acessar o conteúdo.

  • Entre
  • ou
  • Cadastre-se
  
  

 

Créditos: Kenedy Tedesco meio lógico

 

F.I.M