Criando uma Agenda Telefônica - Interface Gráfica - Parte 4

 

Objetivo: O Objetivo deste tutorial é aprender a criar a interface gráfica da agenda de uma forma simples.

 

Pré-requisito: Para você poder acompanhar este tutorial e o desenvolvimento do aplicativo, será necessário ter conhecimento no mínimo do “Curso Básico de Excel e dos Tutoriais Parte1 e Parte2 e Parte3”.

 

Nota: Na parte 3 do tutorial já havíamos definidos os nomes dos objetos que iríamos utilizar nesta parte 4, iremos incluir mais alguns objetos no nosso aplicativo, isso ocorre porque quando estamos desenvolvendo um aplicativo é normal incluir o retirar algum objeto. Por isso que é importante a análise, toda vez que queremos alterar o aplicativo voltamos a refazer a análise, neste caso não será necessário, iremos apenas inserir objetos.

 

Vou mostrar como deve ficar as duas interface gráfica da agenda e depois vou ensinar por quais objetos você deve começar a inserir primeiro no aplicativo. Utilizaremos a plan2 da planilha do Banco de dados para criar esta interface gráfica, ou seja, quando ensinei a criar o banco de dados (Detalhes de como criar banco de dados , consulte Parte 2) me refiro a esta plan2 do banco de dados.

 

Tela 001 ( Esta é interface principal do aplicativo)

 

Tela 002 ( Esta é a interface de ajuda )

 

Iremos começar a interface gráfica pensando da seguinte maneira, temos que criar a interface amigável, ou seja, de fácil compreensão e utilização por parte do usuário. Para fazer isso não e muito difícil, basta utilizarmos todos os objetos que já definidos (Detalhes dos objetos definidos, consulte Parte3) de uma forma simples e bem distribuída nos formulários da Agenda.

 

Começaremos pelo formulário principal, na Parte3 onde fizemos a análise do tutorial definimos os objetos que iríamos utilizar. Agora vamos criar o formulário e inserir todos objetos, depois modificaremos suas propriedades (Detalhes de como inserir e editar as propriedade dos objetos, consulte Parte2).

 

Vou mostrar o procedimento de como você deve iniciar a criar esta tela e também com quais os nomes os objetos devem ficar após você ter inserido o formulário (Detalhes como inserir um formulário, consulte Parte1), modifique suas propriedades CAPTION para Agenda , NAME para Principal, HEIGHT para 370,5 e WIDTH para 415,5.

 

Depois desta parte vamos inserir 05 objetos Moldura (Detalhes como inserir objetos , consulte Parte3) e para modificar suas propriedades CAPTION para Menu, Contato, Telefones, Anotações e Data, FORECOLOR para Azul e FONT Tahoma, Estilo de fonte Negrito. Veja abaixo nas telas estes procedimentos:

 

Tela 003 (Este é o primeiro procedimento que você dever fazer, inserir o formulário e modificar suas propriedades)

 

Tela 004 (Assim que deve ficar o formulário principal com a inserção das Molduras e com as alterações nas suas propriedades )

 

Vamos inserir 15 objetos Label (Detalhes de como inserir objetos label, consulte parte 2) , iremos colocá-las dentro dos objetos Moldura e mudar suas propriedades CAPTION Nome, Endereço, Cidade, Bairro, Estado, Cep, Residencial, Celular, Comercial e Outro e a décima primeira label deixaremos ela sem nome, FORECOLOR para Azul. Entenda como você deve proceder nas telas abaixo:

 

Tela 005 (Você deve distribuir as label conforme mostrado na tela acima)

 

Tela 006 (Depois modificar suas propriedades com os nomes relacionados )

 

Vamos inserir 12 Textbox, uma observação, para cada TextBox que inserimos sua propriedade NAME esta com o nome de TextBox1, se vamos inserir 06, logo teremos Texbox1, Texbox2 e assim sucessivamente. Vamos mudar a propriedade NAME de cada um destes TextBox (Detalhes de como inserir e modificar as propriedades do textbox, consulte Parte2), da seguinte forma:

 

Texbox1 para Text_Nome, Textbox2 para Text_Endereco, TextBox3 para Text_Bairro, TextBox4 para Text_Cidade, TextBox5 para Text_Estado, TextBox6 para Text_Cep, TextBox7 para Text_Registro, TextBox8 para Text_Residencial, TextBox9 para Text_Celular, TextBox10 para Text_Comercial, TextBox11 para Text_Outro e TextBox12 para Anotação.

 

Tela 007 ( Os TextBox devem estar alinhados no formulário com suas propriedades modificadas conforme a tela acima)

 

Por último vamos inserir 06 botões comando (Detalhes de como inserir os botões de comando, consulte Parte2) e alterar sua propriedades (Detalhes de como alterar propriedades, consulte Parte2) CAPTION para Cadastrar, Editar, Apagar, Ajuda,Pesquisar e Fechar FORECOLOR para Azul,ESTILO DE FONTE para Negrito e sua propriedade NAME iremos alterar da seguinte maneira:

 

Para cada um vamos colocar o mesmo nome que demos para a propriedade CAPTION, ou seja, para o botão cadastrar, a sua propriedade NAME vai ser Cadastrar assim deve ser feitos para os outros botões.Veja na tela abaixo:

 

Tela 008 (Os botões de comandos com suas propriedades modificadas, devem ficar posicionados na agenda desta maneira acima)

 

Concluído a primeira parte da interface gráfica , que é o formulário principal, partiremos para construir o segundo formulário da agenda.

 

Você deve começar inserindo o formulário (Detalhes de como inserir formulários, consulte Parte2) e modificar sua propriedades (Detalhes de como modificar suas propriedades, consulte Parte2) WIDTH para 364,5 e HEIGHT para 371,25, NAME Ajuda e CAPTION para Ajuda.

 

Depois você de inserir 04 Molduras e modificar suas propriedades (Detalhes de como inserir e modificar as propriedades da Moldura, consulte Parte3). Iniciaremos a modificar as propriedades da Moldura1 CAPTION para Cadastrar e FORECOLOR para Azul.

 

Moldura2, CAPTION para Pesquisar, FORECOLOR para Azul.

Moldura3 CAPTION para Editar e FORECOLOR para Azul.

Moldura4 CAPTION para Apagar e FORECOLOR para Azul.

 

Agora dentro destas 05 Molduras vamos inserir 05 Label (Detalhes de como inserir label, consulte Parte2) e iremos apagar a sua propriedade CAPTION de cada uma e na quinta label iremos colocar o nome MENU AJUDA.

 

Por último iremos inserir um Botão de Comando e modificar sua propriedade CAPTION para Voltar e NAME para Comando_Voltar.

 

---

---

Vamos acompanhar nas telas a seguir todos procedimentos:

 

Tela 009 ( Inserimos o objeto formulário e alteramos suas propriedades)

 

Tela 010 ( Este são as molduras inseridas no formulário ajuda)

 

Tela 011 (Estas são as molduras contendo as alterações feita em suas propriedades)

 

Tela 012 (Estas são as label inseridas dentro das molduras)

 

Tela 013 ( Esta é a aparência das label após termos modificado sua propriedade Caption)

 

Tela 014 ( Inserimos o botão de comando)

 

Tela 015 ( Modificamos as propriedades do botão de comando)

 

Agora você deve colocar os textos de ajuda para cadastrar, pesquisar, editar e apagar de ajuda dentro de cada label correspondente, da seguinte maneira:

 

DENTRO DA LABEL CADASTRAR: Para cadastrar os dados da agenda, é bem simples, apenas preencha todos os campos da agenda com os dados disponível da pessoa que você quer cadastrar, sempre é necessário digitar o número do novo registro e clique no botão cadastrar.

 

DENTRO DA LABEL PESQUISAR: Para efetuar a pesquisa, existe apenas um campo disponível que é o campo nome, então você deve digitar o nome da pessoa que deseja localizar e clique no botão pesquisar, caso o nome da pessoa não seja localizado vai aparecer uma mensagem “Nome não cadastrado”.

 

DENTRO DA LABEL EDITAR: Para editar os campos da agenda, primeiro efetuamos uma pesquisa para localizar os dados da pessoa, assim que for localizado modifique os dados necessários e clique no botão editar.

 

DENTRO DA LABEL APAGAR: Para apagar os dados de uma pessoa, caso eles estejam selecionados clique direto no botão apagar, caso contrário faça uma pesquisa para localizar o nome da pessoa e clique no botão apagar.

 

Veja como deve ficar a tela abaixo com a inserção dos textos de ajuda no formulário.

 

Tela 016 ( Textos inseridos)

 

Concluída esta parte do tutorial, agora falta pouco para terminar a criação da agenda. Na próxima parte, que será a última, iremos fazer a codifição da agenda.

 

Conclusão:

 

Nesta parte do tutorial, mostrei como criar a interface gráfica do aplicativo, por quais objetos você deveria começar a inserir primeiro no formulário, dar nome as propriedades a cada objeto. Bom estudo e até a próxima parte.

---

• CRIANDO UMA AGENDA TELEFÔNICA
• Criando uma Agenda Telefônica com VBA no Excel - Ferramentas Necessárias - Parte 1
• Criando uma Agenda Telefônica com VBA no Excel - Criando Funções - Parte 2
• Criando uma Agenda Telefônica com VBA no Excel - Análise e Banco de Dados - Parte 3
• Criando uma Agenda Telefônica com VBA no Excel - Interface Gráfica - Parte 4
• Criando uma Agenda Telefônica com VBA no Excel - Codificando o Aplicativo - Conclusão