Programação de Computadores II

(1)

Powerpoint Templates Page 1 Powerpoint Templates

Programação de

Computadores

II

Pedro Ramires

(2)

Powerpoint Templates

Page 2

Desafio:

A empresa de papel Vila Objeto contratou um novo diretor geral. Ele adora faze caminhadas, café e a natureza... E ele decidiu ajudar a salvar as florestas; que ser um executivo “sem papel”, começando com seus contatos. Ele está a caminho de Aspen para esquiar no fim de semana e quer ter um novo programa de agenda pronto quando voltar. Caso contrario...bem...não será apenas o antigo diretor geral que estará em busca de emprego.

(3)

Page 3

Conheça as necessidades dos usuários

Antes de começar a fazer o programa:

Antes que possamos começar a escrever o aplicativo de agenda – ou qualquer outro programa – precisamos de um minuto para pensar em quem irá usá-lo e o que eles precisam que seja feito.

O diretor geral precisa conseguir executar seu programa de agenda no trabalho e também em seu notebook. Ele precisará de um instalador para ter certeza de que todos os arquivos corretos estejam em cada máquina.

(4)

Page 4

Conheça as necessidades dos usuários

Antes de começar a fazer o programa:

A equipe de vendas da Empresa de Papel Vila Objeto que acessar sua agenda também. Eles podem usar seus dados para fazer listas de e-mail para obter mais ordens de compra de papel de seus clientes.

O diretor geral acha que uma base de dados seria a melhor forma para que todos na empresa pudessem ter acesso aos dados dele. Assim, ele pode manter apenas uma cópia de todos os seus contatos.

(5)

Page 5

Abra o VS.NET 2008:

(6)

Page 6

Abra o VS.NET 2008:

(7)

Page 7

Abra o VS.NET 2008:

(8)

Page 8

Abra o VS.NET 2008:

(9)

Page 9

O que o VS faz por você:

Quando você inicia um novo projeto, assim que você o salva, o IDE cria os arquivos Form1.cs, Form1.Designer.cs, e Program.cs. Ele acrescenta-os à janela Solution Explorer (canto direito).

Form1.cs = este arquivo contém o código C# que define o comportamento do formulário.

Program.cs = este possui o código que inicia o programa e exibe o formulário.

Form1.Designer.cs = o código que define o formulário e seus objetos está aqui.

(10)

Page 10

Desenvolva a interface de usuário:

Adicionar controles e arrumar a interface de usuário é tão fácil quanto arrastar e soltar no IDE do VS. Vamos acrescentar um logo ao formulário:

Utilize o controle PictureBox para acrescentar uma figura.

Clique no controle PictureBox (caixa de imagem) na Caixa de Ferramentas e arraste-o para o seu formulário. Nos bastidores, o IDE adicionou código em Form1.Designer.cs para um novo controle de imagens.

(11)

Page 11

Desenvolva a interface de usuário:

OBS: toda vez que você alterar uma propriedade de controle no formulário, o código em Form1.Designer.cs também será mudado pelo IDE.

Relaxe, tudo bem se você não for um profissional em design de interface de usuário.

Falaremos muito mais sobre criar boas interfaces de usuário mais tarde. Por enquanto, vamos apenas colocar o logo e outros controles em seu formulário e preocupar-nos com o comportamento. Adicionaremos um pouco de estilo mais tarde.

(12)

Page 12

Desenvolva a interface de usuário:

Coloque a caixa de imagem em modo zoom.

Todos os controles em seu formulário possuem propriedades ajustáveis. Clique na flechinha preta para um controle para acessá-las. Altere a propriedade Size Mode (tamanho) na PictureBox para “zoom” para ver como isto funciona:

(13)

Page 13

Desenvolva a interface de usuário:

Use o logo da empresa de papel vila objeto que passei pra vocês no começo da aula indo no atributo image na propriedade da PictureBox e escolhendo caminho salvo do nosso logo.

Se quiser faça o teste com as outras opções para ver como fica a nossa imagem.

(14)

Page 14

Nos bastidores:

Toda vez que você faz algo no IDE do VS, ele está escrevendo código para você. Quando você criou o logo e mandou o SV usar a imagem baixada, ele criou um recurso e associou-o com seu aplicativo. Um recurso é qualquer arquivo gráfico, de áudio, ícone ou outro tipo de arquivo de dados embutido no seu aplicativo. O arquivo gráfico fica integrado ao programa, para que, então, quando ele for instalado em outro computador, o gráfico seja instalado junto com ele e a PictureBox possa usá-lo.

(15)

Page 15

Nos bastidores:

Quando você arrastou o controle PictureBox para o seu formulário, o IDE automaticamente criou um arquivo de recurso chamado Form1.resx para armazená-lo e mantê-lo em seu projeto. Dê um duplo clique neste arquivo e você verá a imagem recém-importada.

(16)

Page 16

Completando o código:

O IDE cria muito código para você, mas você ainda quer ter acesso a ele e acrescentar-lhe coisas. Vamos usar o logo para mostrar uma caixa de mensagem sobre o programa quando os usuários executarem o programa e clicar sobre o logotipo.

Certifique-se de que seu formulário aparece no IDE e clique duas vezes no PictureBox. Você deve ver algum código semelhante ao seguinte aparecer:

Quando você clicou duas vezes no controle de caixa de imagem, o IDE criou este método. Ele será executado sempre que um usuário

clicar no logo com o aplicativo em execução.

Este nome de método dá uma boa idéia sobre quando ele executa: quando alguém clicar no controle PictureBox.

Quando você clicar duas vezes na caixa de imagem, o código sem está linha, então agora digitem ela.

Uma vez que tenha digitado a linha de código, salve usando o SAVE ALL, caso contrário só salvará a página atual e as demais não serão

(17)

Page 17

Não existe perguntas Idiotas:

O que é um MÉTODO?

Um método é apenas um bloco de código com um nome. Falaremos mais sobre métodos nas próximas aulas.

(18)

Page 18

Não existe perguntas Idiotas:

O que aquele \n faz?

Esta é uma quebra de linha. Ela fala para o C# para colocar “Lista de contatos 1.0.” em uma linha e, em baixo, “Escrito por: Pedro Ramires”.

(19)

Page 19

Você já pode Executar seu aplicativo:

Pressione F5 no seu teclado ou clique no botão com a seta verde ( ) na barra de ferramentas para checar o que você fez até agora. (Isto se chama “Depurar”, o que significa apenas executar seu programa usando o IDE). Você pode parar de depurar selecionando o “Stop Debugging” (parar a depuração) no menu Debug(Depurar) ou clicando neste botão na barra de ferramentas:

(20)

Page 20

Onde estão meus arquivos?

Quando você executa seu programa, o VS copia todos os seus arquivos para o Meus Documentos\Visual Studio 2008\Projects\Contatos\Contatos\bin\Debug Você pode acessar rapidamente este diretório e executar seu programa clicando duas vezes sobre o arquivo .exe que o IDE criou.

(21)

Page 21

O que já fizemos até agora?

Criamos um formulário e um objeto PictureBox que abre uma caixa de mensagem quando clicamos nela. A seguir, precisamos adicionar todos os outros campos do cartão, como o nome para contato e o telefone.

Vamos armazenar essas informações em uma base de dados. O VS pode conectar campos diretamente a ela, ou seja, não precisamos fazer uma bagunça com um monte de código de acesso a dados ( o que é bom). Mas para isto funcionar, precisamos criar nossa base para que os controles no formulário possam usar seus dados. Então vamos pular dos objetos visuais .NET direto para a seção de

(22)

Page 22

Criando nossa base de dados:

Antes de adicionarmos o restante dos campos no formulário, precisamos criar uma base de dados para associar-lhe. O IDE pode criar muito código para conectar nosso formulário com nossos dados, mas precisamos definir a própria base de dados primeiro. Adicione uma nova base de dados SQL ao seu projeto. No Solution Explorer, clique com o botão direito em Contatos e escolha ADD NEW ITEM. Escolha o icone Service Based Database (base de dados SQL) e nomeie-o ContatoDB.mdf

(23)

Page 23

Criando nossa base de dados:

Cancele o assistente de configuração de Fonte de Dados.

Por enquanto, queremos pular a configuração de uma fonte de dados, então clique no botão Cancelar. Voltaremos a isto quando tivermos criado a estrutura de nossa base de dados.

(24)

Page 24

Criando nossa base de dados:

Examine sua base de dados no Navegador de Soluções.

Vá para o Navegador de Soluções e você verá que ContatoDB foi adicionado à lista de arquivos. Clique duas vezes em ContatoBD.mdf e olhe no lado esquerdo de sua tela. A Toolbox mudou para navegador de barra de dados.

(25)

Page 25

Criando nossa base de dados:

Quando você mandou o IDE adicionar uma nova base de dados SQL ao seu projeto, ele criou uma nova pra você. Uma Base de dados SQL é um sistema que armazena dados para você de uma forma organizada e inter-relacionada. O IDE tem todas as ferramentas de que você precisa para manter seus dados e bases. Os dados na base de dados SQL ficam em tabelas. Por enquanto, pense em uma tabela como uma planilha. Ela organiza sua informação em colunas e linhas. As colunas são categorias dos dados, como nome e telefone de contato e cada linha são os dados em si para uma ficha individual.

(26)

Page 26

O SQL é uma linguagem em si mesmo:

SQL significa Linguagem Estruturada de Consulta (Structured Query Language). É uma linguagem de programação para acessar dados em bases de dados. Possui sua própria sintaxe, palavras-chaves e estrutura. O código SQL tem a forma de comandos e consultas, que acessam e recuperam os dados. Uma base de dados SQL pode possuir procedimentos armazenados que são vários comandos e consultas SQL armazenados na base de dados e podem ser executados a qualquer momento. O IDE gerou comandos SQL e procedimentos armazenados automaticamente para você para permitir ao seu programa acessar os dados na base de

(27)

Page 27

Criando a tabela Lista de Clientes:

Temos uma base de dados e agora precisamos armazenar informações nela. Mas, na verdade, nossas informações tem de ir para uma tabela, estruturas usadas para guardar porções individuais dos dados. Para nosso aplicativo, vamos criar uma tabela chamada Pessoa para armazenar todas as informações para contatos.

(28)

Page 28

Criando a tabela Lista de Clientes:

Adicione uma tabela à base de dados ContatoDB, clique com o botão direito em Tables no Server Explorer (canto esquerdo) e selecione ADD NEW TABLE. Será aberta uma janela onde você pode definir as colunas na tabela que acabou de criar.

(29)

Page 29

Criando a tabela Lista de Clientes:

Agora precisamos adicionar colunas a nossa tabela. Primeiro vamos adicionar uma coluna chamada ContatoID na tabela Pessoa, para que cada registro de Contato tenha sua própria identidade única.

Em Column Name coloque ContatoID, em Data Type coloque Int e em Allow Nulls (permitir nulos) desmarque a caixa, e por ultimo, coloque ela como chave primaria.

(30)

Page 30

Criando a tabela Lista de Clientes:

Mande a base de dados gerar identidades automaticamente.

Já que ContatoID é um numero que serve para a base de dados e não para nossos usuários, podemos mandar nossa base lidar com a criação e atribuição de identidades automaticamente. Desta forma, não temos que nos preocupar em escrever código para fazer isso.

Nas propriedades abaixo de sua tabela, desça a barra até Identity Specification, clique no botão + e selecione yes perto da propriedade “Is identity”.

(31)

Page 31

Termine de construir a tabela:

Vamos inserir os outros campos: Nome –nvarchar(50) – allow Empresa - nvarchar(50) – allow Telefone - nvarchar(50) – allow Email - nvarchar(50) – allow Cliente - bit - allow Ultima Ligação – Datetime – allow

Clique no botão Save da barra de ferramentas e salve com o nome de “Pessoa”.

(32)

Page 32

Faça um diagrama com seus dados:

Uma vez que você tenha criado sua base de dados e tabelas, tem de fazer com que seu aplicativo saiba sobre eles. É aqui que usamos um diagrama de base de dados: uma descrição simples de sua tabela que o IDE do VS pode usar para trabalhar com os dados. Ele também permite que o IDE gere automaticamente comandos SQL para adicionar, editar e deletar linhas na tabela.

(33)

Page 33

Faça um diagrama com seus dados:

Crie um novo diagrama de base de dados.

Vá na janela Server Explorer, clique com o botão direito em cima de Databases Diagrams e escolha um ADD NEW DIAGRAM

(34)

Page 34

Faça um diagrama com seus dados:

Deixe o IDE gerar o código de acesso.

Antes que você informe ao IDE sobre sua tabela específica, ele precisa criar alguns procedimentos de armazenamentos básicos para interagir com sua base de dados. Apenas clique em SIM aqui e deixe o IDE fazer o trabalho.

(35)

Page 35

Faça um diagrama com seus dados:

Selecione a tabela pessoa na janela que aparece e clique em add. Agora o IDE está pronto para gerar código especifico para sua tabela.

(36)

Page 36

Faça um diagrama com seus dados:

Selecione a tabela pessoa na janela que aparece e clique em add. Agora o IDE está pronto para gerar código especifico para sua tabela.

O diagrama de base de dados descreve suas tabelas para o IDE do VS. O IDE então usa este diagrama para gerar código automaticamente

(37)

Page 37

Insira seus dados no banco de dados:

Agora vamos começar a alimentar nosso dados.

Expanda Tables, botão direito em Pessoa e escolha a opção SHOW TABLE DATA.

No próximo slide temos os cartões com as informações a serem adicionados.

(38)

Page 38

Insira seus dados no banco de dados:

(39)

Page 39

Não existe perguntas idiotas:

Então o que aconteceu com os dados

depois que eu os acrescentei? Para

onde eles foram?

O IDE armazenou automaticamente os dados que você acrescentou na tabela Pessoas em sua base de dados. A tabela, suas colunas, os tipos de dados e todos os dados dentro dela estão todos guardados num arquivo do SQL Server Express, ContatosDB.mdf. Esse arquivo é mantido como parte de seu projeto e o IDE o atualiza apenas como o faz com seus arquivos

(40)

Page 40

Conecte seu formulário à sua base de

Dados usando uma fonte de dados:

Estamos finalmente prontos para desenvolver os objetos da base de dados .NET que nosso formulário usará para se comunicar com sua base de dados. Precisamos de uma fonte de dados, que é realmente apenas um grupo de comandos SQL que seu programa usará para se comunicar com a base de dados ContatoDB.

Volte para o formulário do se aplicativo (Forms1.cs[Designer]).

(41)

Page 41

Conecte seu formulário à sua base de

Dados usando uma fonte de dados:

Clique no menu Data e então selecione ADD NEW DATA SOURCE na caixa de seleção.

A fonte de dados que você está criando lidará com todas as interações entre seu formulário e sua base de dados.

(42)

Page 42

Conecte seu formulário à sua base de

Dados usando uma fonte de dados:

Selecione Database e clique em NEXT;

Clique em NEXT na tela “Choose your Data Connection”

Na tela “Save the Connection” que segue certifique-se de que a caixa de checagem SAVE esteja marcada e clique em NEXT

Na tela “Choose Your Objects” clique na caixa de checagem Table

No campo “Dataset Name” certifique-se de que esteja escrito “ContactBDDataSet” e clique em FINISH.

(43)

Page 43

Adicione controles vinculados a dados

Em seu formulário:

Agora podemos voltar ao nosso formulário e adicionar mais alguns controles. Mas estes não são controles quaisquer, são controles vinculados à nossa base de dados e às colunas na tabela Pessoa. Isso significa que uma alteração nos dados em um dos controles no formulário automaticamente altera os dados na respectiva coluna na base de dados.

(44)

Page 44

Adicione controles vinculados a dados

Em seu formulário:

Na aba DATA, selecione a opção “SHOW DATA SOURCE”

(45)

Page 45

Adicione controles vinculados a dados

Em seu formulário:

Estes não aparecerão no seu formulário, mas representam o conjunto de dados que o IDE criou para interagir com a tabela Pessoa e a base de dados

ContatoDB

Este objeto conecta o formulário à sua tabela Pessoa

Este adaptador permite que seus controles interajam com os comandos SQL que o IDE e a fonte de dados geraram para você

O navegador de vinculo conecta os controles da barra de ferramentas à sua tabela

(46)

Page 46

Bons programas são intuitivos:

Neste momento, o formulário funciona. Mas ele não está assim tão bonito. Seu aplicativo tem que ser mais do que funcional. Ele deve ser fácil de usar. Apenas com alguns passos simples você pode fazer com que o formulário pareça mais com os cartões de papel que seu chefe está acostumado a lidar.

(47)

Page 47

Bons programas são intuitivos:

Primeiro vamos alinhas nossos campos.

No campo Cliente, clique no CheckBox, vá na Propriedade em Text e apague o “checkbox1”

Clique no formulário, vá em TEXT nas PROPRIES e coloque o nome de “Empresa de Papel Vila Objeto – Lista de Contatos”, troque para FALSE as propriedades MaximizeBox e MinimizeBox.

(48)

Page 48

Bons programas são intuitivos:

OBS: um bom aplicativo não apenas funciona, mas é fácil de usar. É sempre uma boa idéia certificar-se de que ele se comporta como um usuário comum esperaria.

(49)

Page 49

O IDE primeiro compila depois executa:

Quando você executar seu programa no IDE, na verdade, ele faz duas coisas.

Primeiro ele compila seu programa, depois ele executa. Isso envolve algumas partes distintas. O código é compilado, ou seja, transformado num arquivo executável. Então ele coloca o código compilado, junto com quaisquer recursos e outros arquivos, num subdiretório dentro da pasta bin.

(50)

Page 50

O IDE primeiro compila depois executa:

Nesse caso, você encontrará o executável e o arquivo de base de dados SQL em bin/debug. Já que ele copia a base de dados todas as vezes, qualquer mudança feita será perdida na próxima vez que executar dentro do IDE. Mas se você ativar o executável do Windows, ele salvará seus dados – até que você compile de novo, ponto no qual o IDE sobrescreverá a base de dados SQL com uma nova cópia com os dados incluídos dentro do Navegador de Base de Dados.

(51)

Page 51

Como transformar seu aplicativo

Num aplicativo para TODOS:

Neste ponto você já tem um ótimo programa. Mas ele só funciona na sua máquina. Ou seja, ninguém mais pode usar seu aplicativo, comprá-lo de você, ver o quão genial você é e contratar você... E seu chefe e clientes não podem ver os relatórios que você está gerando a partir da base de dados.

O C# facilita escolher um aplicativo que você criou e distribuí-lo. Distribuição é pegar um aplicativo e instalá-lo em outras máquinas. E com o IDE do VS, você pode fazer isso com apenas dois passos.

(52)

Page 52

Como transformar seu aplicativo

Num aplicativo para TODOS:

Selecione no menu BUILD a opção PUBLISH CONTATOS.

Vai no NEXT, NEXT, FINISH

Depois disso é só pegar o caminho onde foi salvo e encontrará o seguinte conteúdo (próximo slide)

(53)

Page 53

Como transformar seu aplicativo

Num aplicativo para TODOS:

É aqui onde todos os arquivos de suporte para o instalador estão armazenados Este arquivo informa ao instalador tudo que precisa ser incluído

quando o programa é instalado

É dessa forma que seus usuários instalarão o programa em seus

(54)

Page 54

Antes de festejar:

Teste tudo!

Vá em frente... Faça algumas alterações. Se tudo der certo, festeje kkkkkkkkkk

O IDE do VS facilita muito desenvolver aplicativos para windows, criar e projetar bases de dados e ligar os dois. Você até mesmo foi capaz de fazer um instalador com alguns cliques extras.

O poder do C# está na forma como você pode rapidamente aprender e produzir com ele e, então, focar-se no que seu programa deve fazer... Não em um monte de janelas, botões e código de

acesso SQL.