Criando um navegador avançado usando Gecko - Parte 3

Gunnar CorreaGunnar Correa15/03/2015 às 10:06:48 - 8.487 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.

Criando um navegador avançado usando Gecko - Parte 3

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.

Criando um navegador avançado usando Gecko - Parte 3

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.


Criando um navegador avançado usando Gecko - Parte 3

 

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;


Criando um navegador avançado usando Gecko - Parte 3

 

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.

Criando um navegador avançado usando Gecko - Parte 3

 

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.

Criando um navegador avançado usando Gecko - Parte 3

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.

Criando um navegador avançado usando Gecko - Parte 3


browser gecko visual studio csharp programação c# navegador avançado componentes visual studio botões panel image

Compartilhe nas redes sociais



Gunnar Correa

Gunnar Correa

Autodidata, Graduado em Desenvolvimento Web, Especialista em Tecnologias na Educação e Pós-graduando em Segurança da Informação. 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.


Fórum

Ficou com alguma dúvida? utilize nosso fórum de perguntas e respostas, lá nossa comunidade poderá te ajudar.

https://forum.satellasoft.com