Criando um navegador advanced

[ANDREPINTOZINHO 1]

Prefácio

 

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.

 

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.

 

Introdução

 

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: WbFuncs.pas

 

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.

 

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.

 

 

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

 

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:

 

 

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

 

Menu Arquivo:

 

Nome do Comando Propriedade Name

 

Nova Janela MNovaJanela

Abrir Mabrir

Salvar Como Msalvar

Imprimir Mimprimir

Visualizar Impressão MVisualizar

Configurar Página Mconfigurar

Propriedades Mpropriedades

Sair Msair

 

Menu Editar:

 

Nome do Comando Propriedade Name

 

Recortar Mrecortar

Copiar Mcopiar

Colar Mcolar

Localizar [ Nesta Página] Mlocalizar

 

Barra de Ferramentas (Toolbar)

 

Insira um Toolbar É 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:

 

Propriedade Valor da Propriedade

 

Flat True

 

#

 

1.Clique com o botão direito do mouse em cima do Toolbar, abrirá um menu suspenso onde iremos clicar no comando New Button.

 

 

2.Insira 4 botões, da mesma forma que você acima.

 

 

3.Troque a propriedade Name de cada um Respectivamente:

 

Botão Propriedade Name

1º Botão btnVoltar

2º Botão btnAvancar

3º Botão btnParar

4º Botão btnAtualizar

 

COLOR="Red"]Agora nós vamos inserir um Separador depois do botão Atualizar (O último botão do nosso Toolbar), para isso faça o seguinte:

(Clique com o botão direito em cima do ToolBar e depois clique no comando New Separator).

 

Depois do separador iremos inserir mais 2 botões:

 

Botão

 

Propriedade Name

 

5º Botão btnHome

6º botão btnPesquisa

Agora insira um outro Separador (New Separator) depois do botão (btnPesquisa) Depois do separador insira o último botão:

 

Botão Propriedade Name

7º Botão btnImprimir

 

Nosso Toolbar ficará com a seguinte aparência:

 

 

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:

 

* Imagens do WebBrowser

 

Inserindo Imagens nos Botões

 

Para inserirmos imagens em nosso botões, teremos que usar o componente ImageList# contido na paleta Win32.

# Troque as seguintes propriedades do ImageList:

 

Propriedade Valor da Propriedade

 

 

Descrição

Heigth 30 Heigth = Padroniza a Altura em PX( Pixel) as imagens que serão inseridas nele.

Width 30 Width = Padroniza a largura em PX(Pixel) as imagens que serão inseridas nele.

 

Escolhemos o valor 30 para as imagens ficarem em uma boa altura e largura mais pra frente você verá como ficará.

 

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.

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:

 

 

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.

 

 

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

 

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

 

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

[/color]

 

 

Inserindo o Combobox das URL's

 

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

 

O Componente que iremos inserir é o COLOR="Black"]Combobox que se encontra na guia COLOR="Black"]Standard[/color], da paleta de componentes.

 

Nós iremos inserir o nosso COLOR="Black"]Combobox[/color] na segunda barra do COLOR="Black"]Coolbar[/color], 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 COLOR="Black"]Coolbar ou onde nos mostra a figura abaixo:[/color]

 

 

Abrirá uma janelinha para a manipulação do COLOR="Black"]Coolbar, ou seja, dos Controles (Objetos) que serão ou que estão inseridos nele:[/color]

 

 

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

 

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

[/color]

 

 

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

[/color]

 

 

Vá até o COLOR="Black"]Object Inspector e troque a seguinte propriedade:[/color]

 

Propriedade Valor

Text Endereço :

 

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

 

 

Bom pessoal, o Nosso COLOR="Black"]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 COLOR="Black"]Coolbar[/color]. Para isso faça como nos mostra a figura abaixo:[/color]

 

 

Inserindo uma Barra de Status (StatusBar)

 

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

[/color]

 

 

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

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

 

Nosso Toolbar ficará com a seguinte aparência:

 

 

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:

 

* Imagens do WebBrowser

 

Inserindo Imagens nos Botões

 

Para inserirmos imagens em nosso botões, teremos que usar o componente [imageList# contido na paleta Win32.

# Troque as seguintes propriedades do ImageList:[/color][/color]

 

Propriedade Valor da Propriedade

 

 

Descrição

Heigth 30 Heigth = Padroniza a Altura em PX( Pixel) as imagens que serão inseridas nele.

Width 30 Width = Padroniza a largura em PX(Pixel) as imagens que serão inseridas nele.

 

Escolhemos o valor 30 para as imagens ficarem em uma boa altura e largura mais pra frente você verá como ficará.

 

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

 

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.[/color]

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[/color] que acabamos de criar na etapa anterior.

 

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

 

 

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[/color]. Para isso nós iremos fazer o seguinte:

 

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

 

 

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

 

 

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:

 

 

Questão de Aparência - Inserindo um Coolbar

 

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

 

 

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

 

 

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[/color], terá uma semelhança com o Microsoft Internet Explorer.[/color]

 

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

 

 

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[/color] que serve para colar, ou seja, nós tiramos o Toolbar[/color] do Form e colocamos o mesmo dentro do Coolbar[/color]. O Coolbar[/color] criou automaticamente para nós uma Barra[/color] e nesta barra[/color] de ele armazenou o Toolbar[/color].

[/color]

 

 

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[/color], da paleta de componentes.

 

Nós iremos inserir o nosso Combobox[/color] na segunda barra do Coolbar[/color], 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:[/color]

 

 

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

 

 

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

 

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

[/color]

 

 

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

[/color]

 

 

Vá até o Object Inspector e troque a seguinte propriedade:[/color]

 

Propriedade Valor

Text Endereço :

 

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

 

 

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[/color]. Para isso faça como nos mostra a figura abaixo:[/color]

 

 

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 StatusBa[/color] (Barra de Status) exibe a quantidade de Objetos (Arquivos, Programas, Pastas) dentro da pasta que você estiver, exemplo:

[/color]

 

 

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

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

[ANDREPINTOZINHO 1]

Foi mal gente nao consegui postar o tuto aqui pq ele é muito grande e nao coube então eu botei ele num documento do word pad pra dawnload é só baixar e criar seu navegador avançado

 

Download:http://rapidshare.com/files/305454781/Apostil_encinando_a_criar_um_navegador_avan__ado.rar.html

Scan:

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

• Entre
• ou
• Cadastre-se

[bassetos47 0]

VLWWW EXCELENTE TUTORIAL:D:D:D:D:D:D:D:D:D:D:D:D:D:eek:

[Kaique The Hunter Hacker 0]

Deu Essa Mensagem Posta no 4Shared ou MegaUploud

You want to download the following file:

[ANDREPINTOZINHO 1]

VLWWW EXCELENTE TUTORIAL:D:D:D:D:D:D:D:D:D:D:D:D:D:eek:

 

Vlw :D

 

Deu Essa Mensagem Posta no 4Shared ou MegaUploud

You want to download the following file:

 

ai o link consertado

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

• Entre
• ou
• Cadastre-se

[darks4444 0]

qual os creditos - sei que é de um site ingles - > Me passa

[ricardolg36 0]

Gostei muito cara , parabens , uma boa dica para quem qer criar um navegador é usar o esquema do firefox , cria uma comunidade , dae vc coloca seu navegador free , e todos que passarem no site podem criar uma DLL usada como um PLUGIN e cada veiz melhorando e contribuindo para o site !!!:p