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.
