Criando um navegador avançado usando Gecko - Parte 3

Gunnar CorreaGunnar Correa15/03/2015 às 10:06:48 - 6.986 acessos

Nesta matéria vamos inserir todos componentes que terão interação com o usuário.


Nas matérias anteriores preparamos nosso formulário, instalamos e inserimos o motor Gecko em nosso formulário, agora o que nos resta, é apenas inserir os demais componentes e toda a programação.

Antes de mais nada, redimensione o formulário, para que possamos inserir corretamente novos componentes, basta clicar no quadrado branco da borda e arrastar para fora, com isto já será redimensionado.

 

Insira quatro Button (four button), um Panel (one panel) e um ComboBox (and one Combobox), os botões e Combo devem ser inseridos dentro do Panel.

Devemos fazer várias configurações em nossos componentes, então para facilitar, será necessário que você preste bastante atenção.

Clique no Panel, e altere as propriedades (alter properties):

Name: pnTop;
Dock: Defina como Top, basta clicar na setinha que aparecerá um menu de opções pequeno, clique na barra que representa o topo, com isto nosso painel ficará ajustado no Topo.


 

Clique no componente geckoBrowser1, altere as propriedades:

Name: Deixe o mesmo, geckoBrowser1.
Dock: Fill, Representado por um quadro centralizado, o maior das opções, isto fará com que o geckoBrowser1sempre ocupe todo tamanho do formulário.

ComboBox.

Altere a propriedade Name do ComboBox para txtUrl (name to ComboBox, txtUrl).


Em Font, defina como Segoe UI, Regular tamanho 11 por último clique em Ok.

Por último, vamos alterar nossos botões, para isto vamos seguir em sequência de como deverá ser ajustado.

Para o botão 1 faça as alterações:

Text: Deixe sem nada, vazio;
Name: btnBack;
Size: 32X32;


 

Image: Clique nos três pontinhos, em seguida clique em Import, carregue todas as imagens que está na Pasta Imagens, esta pasta está junto ao arquivo compactado que você fez o Download, selecione a imagem correspondente ao botão voltar e clique em OK.

 

FlatStyle: Flat.

Agora para o segundo botão, que será Atualizar (Refresh).
Text = Vázio;
Name = btnRefresh;
Size: 50X50;
FlatStyle: Flast;
Image: Selecione a imagem correspondente ao botão de atualizar.

 

Botão Avançar.

Text = Vázio;
Name = btnFoward;
Size: 31X32;
FlatStyle: Flat;
Image: Selecione a imagem correspondente ao botão de avançar.

Botão Home.

Text = Vázio;
Name = btnSetHome;
Size: 31X32;
FlatStyle: Flat;
Image: Selecione a imagem correspondente ao botão de home.

 

Feito todos os procedimentos acima, organize o formulário como mostrado abaixo.

 

Como você deve ter notado, até agora não foi exigido nenhum conhecimento especial com a ferramenta, e sim que você conheça a IDE, saiba onde estão cada paleta entre outros.

Em nossa próxima matéria vamos começar a codificar nosso Navegador, mas antes disto dentro da pasta do nosso projeto, crie um arquivo de texto chamado home.txt e outro url.txt.


Browser Gecko Visual Studio Csharp Programação Navegador Avançado Componentes Botões Panel Image

Compartilhe


Gunnar Correa

Gunnar Correa

Autodidata, Graduado em Desenvolvimento Web (FIPP), Especialista em Tecnologias na Educação (Unoeste) e Pós-graduando em Segurança da Informação (Universidade Cruzeiro do Sul). Começou seus estudos na área de programação quando era criança, e atualmente está estudando desenvolvimento de jogos. É CEO do portal SatellaSoft, criado em 2009 com o intuito de compartilhar conhecimento de forma gratuita e inédita.



Site atualizado

Olá, nosso site recebeu uma nova atualização e por conta disso, alguns artigos ainda estão sendo atualizados. Dependendo do conteúdo que você procura, poderá encontrar imagens e trechos de códigos mal formatados.

Estamos trabalhando para normalizar todos os conteúdos, muito em breve, esse problema não mais existirá.


Comentários