Criando aplicativos visuais em menos de 10 minutos

Como isso é possível?

Com a IDE do Visual Studio não precisamos gastar horas escrevendo códigos obscuros para fazer um botão funcionar, um formulário gravar os dados no banco de dados, etc. O Visual Studio faz todo este trabalho para você!   

Primeiro aplicativo: Agenda

Para que possamos começar a estudar a linguagem C# e a IDE do Visual Studio, vamos criar nosso primeiro aplicativo 100% funcional: uma agenda básica, para armazenarmos Nome e Telefone de nossos contatos. 

Criando o Projeto

Abra o Visual Studio, que já deve estar instalado previamente conforme informado no tópico anterior, clique na opção “File” -> “New” -> “Project“.   

Selecione a opção “Windows Forms Application” e no campo “Name“, que refere-se ao nome do projeto, coloque “Agenda“, conforme imagem a seguir:   

Feito isso, o Visual Studio abrirá um Form1 vazio e criará toda a estrutura básica que precisamos para começar nosso projeto.   

Ao criarmos o novo projeto, automaticamente são criados 3 arquivos:   

Form1.cs – contém o código C# que define o comportamento do formulário.
Form1.Designer.cs – contém o código que define o formulário e seus objetos.
Program.cs – contém o código que inicia o programa e exibe o formulário.   

Certifique-se de salvar o seu projeto assim que criá-lo, através da opção “File” -> “Save All“.   

Adicionando uma imagem ao formulário

Adicionar controles e arrumar a interface de usuário é tão fácil quanto arrastar e soltar no IDE do Visual Studio. Vamos adicionar ao nosso formulário uma imagem.  

Para isto, vamos abrir a janela Toolbox que fica no campo superior esquerdo, ou na opção “View” -> “Toolbox“, e procure na lista da Caixa de Ferramentas (Toolbox) que foi aberta o controle “PictureBox“, arrastando-o para o seu formulário. Note que foi criado uma caixa para adicionar a imagem no formulário.  

Vamos agora adicionar a imagem e colocá-la em modo Zoom para que a caixa de imagem mude de acordo com o tamanho da imagem que adicionarmos. Clique na flechinha preta e altere a propriedade “Size Mode“ para ”Zoom“.  

Para adicionarmos a imagem, clique na opção “Choose Image“, “Local Resources” e clique no botão “Import…“. Escolha a imagem em sua máquina e confirme. Você pode alterar o tamanho da imagem clicando nos quadradinhos em volta da caixa da imagem e arrastando-os.  

Note que ao adicionar a imagem em nosso formulário, um novo arquivo foi criado (Form1.resx) em nosso projeto, como pode ser visto na janela “Solution Explorer“. Se clicarmos neste arquivo veremos que este recurso está associado à caixa de imagem que criamos.  

Um recurso é qualquer arquivo gráfico, de áudio, ícone ou outro tipo de arquivo de dados embutido no aplicativo.  

Associando um caixa de mensagem a imagem do formulário

Vamos agora criar uma caixa de mensagem que será exibida ao clicarmos na imagem.  

No formulário, clique duas vezes na imagem que adicionamos anteriormente. Ao fazermos isto, o criou um método “pictureBox1_Click“. Este método será executado sempre que alguém clicar na imagem dentro do formulário.  

Vamos agora digitar o seguinte código neste método:  

MessageBox.Show(“Agenda de Contatos.\nPor: Memória Virtual – Blog do Flavio”, “Sobre”);  

Após isto clique na opção “File” -> “Save All“. Adquira o hábito de fazer isto regularmente.  

Criando a base de dados para armazenar as informações

Para adicionarmos uma base de dados SQL ao nosso projeto, dentro da janela “Solution Explorer” clique com o botão direito no projeto “Agenda” e escolha “Add” -> “New Item…“. Escolha a opção “Service-based Database” e no campo Name, preencha com o nome “Agenda.mdf“. Clique então no botão ”Add“.  

Será exibido uma janela do assistente de configuração de fonte de dados. Clique no botão “Cancel” pois faremos isto depois que criarmos a estrutura de nossa base de dados.  

Criando a tabela para armazenar os dados da Agenda

Agora que criamos a base de dados SQL, precisamos criar a tabela que armazenará os dados inseridos. Abra a janela “Server Explorer“, localize a base de dados que criamos e expanda-a. Clique com o botão direito em “Tables” e depois em “Add New Table“.   

Cria a tabela conforme a imagem abaixo:  

Note que definimos a coluna “Id“ como chave primária. Para isto, basta selecionar o campo e clicar no ícone de uma chave logo acima desta janela, chamado “Set Primary Key“.  

Na janela “Column Properties” devemos setar o campo “Id” para gerar a identificação do registro automaticamente. Para isto, desça a barra até “Identity Specification“, clique no “+” e perto da propriedade “Is Identity“ selecione “Yes“.  

Agora, para salvarmos a tabela, clique na opção “Save All” e dê o nome de “Contatos” para a tabela que estamos criando.  

Criando um diagrama da base de dados

Para que seu aplicativo possa acessar os dados na base de dados que acabamos de criar, precisamos criar um diagrama da mesma.  

Para isto, clique com o botão direito em “Database Diagrams” e depois em “Add New Diagram“.  

Clique em “Yes” na janela que aparecerá. Isto fará com que o IDE crie uma série de procedimentos para interagir com a base de dados.  

Após isto será exibida uma janela “Add Table” para que você escolha com quais tabelas vamos trabalhar. Selecione a tabela “Contatos”, clique no botão “Add” e depois no botão “Close“.  

O diagrama foi criado e agora devemos salvá-lo. Clique no menu “File” e depois em “Save Diagram1“. Dê o nome de “Contatos” para este diagrama.  

Criando uma fonte de dados para conectar o formulário à base de dados

Precisamos de uma fonte de dados para que nosso formulário possa se comunicar com a base de dados que criamos. Uma fonte de dados é apenas um grupo de comandos SQL que o programa usará para se conectar à base de dados.  

Feche as abas da tabela “Contatos” e do diagrama “Contatos” para que tenhamos a aba “Form1.cs [Design]“, referente ao formulário, visível neste momento.  

• Clique no menu “Data” e então na opção “Add New Data Source…“.
• Selecione “Database” e clique no botão “Next >“;
• Na tela “Choose Your Data Connection” clique no botão ”Next >“;
• Na tela “Save the Connection String” certifique-se de que a opção “Yes, save the connection as:” esteja marcada e clique no botão “Next >“;
• Na tela “Choose Your Database Objects“ marque a opção ”Tables” e clique no botão “Finish“.

Adicionando controles vinculados a dados no formulário

Clique na janela “Data Sources“, no canto inferior esquerdo, para exibir as fontes de dados disponíveis.  

Clique em “AgendaDataSet” expandindo-o. Você verá a tabela “Contatos” e suas devidas colunas (Id, Nome, Telefone e Celular).  

Agora criaremos controles em nosso formulário vinculados a tabela “Contatos“. Para isto, basta clicar na coluna que desejamos inserir no formulário e arrastá-la para dentro do mesmo.  

Neste exemplo vamos adicionar as quatro colunas disponíveis: Id, Nome, Telefone e Celular.  

Seu formulário deve ficar semelhante a imagem abaixo:  

Note que o IDE criou uma barra de ferramentas para que possamos navegar entre os registros da tabela em nossa base de dados.  

 Lembre-se sempre! Clique na opção “File” -> “Save All“.   

Detalhes Finais

Para finalizarmos, vamos alterar o nome que aparece na barra de título da janela, que atualmente está como “Form1“, para um nome que dê uma aparência mais profissional ao aplicativo que estamos criando. Vamos chamá-la de “Agenda de Contatos“.  

Para isto, na janela “Properties“, que fica logo abaixo da janela “Solution Explorer“, localize a propriedade “Text” e altere seu valor para “Agenda de Contatos“.  

Nesta mesma janela podemos desabilitar a opção de Maximizar e Minimizar a janela do aplicativo. Basta localizar as propriedades “MaximizeBox” e “MinimizeBox“, colocando ambas como “False“.  

Executando o Programa

Tudo pronto! Agora precisamos testar tudo que fizemos. No menu “Debug” clique em “Start Debugging” ou aperte a tecla “F5“.  

Caso tudo tenha corrido bem e todos os passos deste artigo tenham sido seguidos corretamente, uma nova janela será aberta com o aplicativo em execução. Clique no ícone “+” do aplicativo, preenche os campos e clique para salvar no ícone correspondente (Disquete). Teste também a exibição da caixa de mensagem que configuramos para ser exibida ao clicarmos na imagem. 

Em nosso próximo post ensinaremos como criar um instalador para que você possa distribuir seu aplicativo recém criado e instalá-lo em qualquer máquina. 

É isso aí. Caso tenham dúvidas podem me enviar através dos comentários que tentarei ajudá-los. 

Espero que tenham gostado e até o próximo post!