Post on 18-Jul-2015
Autor: Samuel Santos Programao Orientada Objetos Interfaces e conexo com Bancos de Dados Parte I A interface e o Ambiente Netbeans
Interfaces Grficas em JavaNetbeans e Access Projeto AgendaDescobrindo o Netbeans
Interfaces Grficas em JavaObjetivo: Vamos desenvolver um Aplicativo simples, uma Agenda de Contatos usando JAVA, em seguida, vamos desenvolver uma interface Grfica e por Fim um Banco de Dados Para conectar atravs de uma classe Conexo com o Aplicativo.
Aprender a usar a IDE Netbeans Basicamente as principal funes
Construir conexo com Banco de Dados Access e conectar a aplicao.
1
A IDE NetbeansTela Principal arquivos abertos
projetos recentes
sada (prompt)2
A IDE NetbeansNovo Projeto Arquivo -> Novo Projeto ... Atalho = ( Ctrl + Shift + N )
3
A IDE NetbeansNovo Projeto Java -> Aplicativo Java -> Prximo 12
3
4
A IDE NetbeansNovo Projeto 1 - Coloque o nome do projeto; 2 Desmarque os 2 campos marcados; 3 Clique em Finalizar. 1
2
3
5
A IDE NetbeansVisualizando o Projeto 1 clique no + em cada diretrio do projeto; 2 Veja que esto vazios;
6
A IDE NetbeansCriando um JFrame (Formulrio) Clique com boto direito sobre o Projeto :Novo -> Formulrio JFrame
7
A IDE NetbeansCriando uma Classe e um Pacote1 - Nome da Classe: crie uma nova classe, coloque o nome da classe.2 Pacote: crie um pacote, colocando um nome no campo pacote. 3 Clique em finalizar ! 1
2
3
8
A IDE NetbeansResultado:* Temos agora um novo pacote Gui e uma nova Classe Agenda.java.
9
A IDE NetbeansAba Projeto* Na Aba projeto teremos um visualizao do Componentes da nossa Interface. Aba Projeto
JFrame
10
A IDE NetbeansAba Cdigo Fonte* Na Aba projeto teremos um visualizao do Componentes da nossa Interface. Aba cdigo fonte
Cdigo da Interface e comandos de Actions eventos
11
A IDE NetbeansConhecendo a Paleta de Componentes Swing* Na Paleta esto todos os componentes que usaremos na Interface, Labels, TextFilds JPanel, Buttons e outros .Selecione : Aba Projeto para podermos visualizar paleta
12
A IDE NetbeansMenus Swing* Vamos inserir uma barra de Menu, primeiro componente de nossa aplicao.Selecione : Menus Swing
Selecione : [ + ] para ver componentes 13
A IDE NetbeansMenus Swing* Vamos inserir uma barra de Menu, primeiro componente de nossa aplicao.Selecione : Menus Swing
Selecione : [ file] Barra de menu 14
A IDE NetbeansMenus Swing* Arraste e solte dentro do Jframe....
Essa a forma de inserir componentes... Escolha o componente arraste at o local e solte.
15
A IDE NetbeansEditando a Barra de Menu* Formas para editar a barra de Menu: 1Clique com o Boto direito sobre o campo File e em Seguida Editar Texto
2
3
16
A IDE NetbeansEditando a Barra de Menu* Visualizando a Guia Inspetor:
Ser importante renomear todas as variveis dos componentes em nosso projeto!
17
A IDE NetbeansEditando a Barra de Menu* Visualizando a Guia Inspetor:
jMenuBar = Barra de menus jMenu1 = Agenda jMenu2 = EditEla tratar os componentes com sendo variveis, a opo alterar nome das variveis .
18
A IDE NetbeansEditando a Barra de Menu* Alterando o nome das Variveis:
Clique com o boto direito sobre a barra de menus e em seguida selecione Alterar o nome da varivel .
Renomeie para menuPrincipal e observe novamente a Guia INSPETOR.
19
A IDE NetbeansEditando a Barra de Menu* Visualizando a Guia Inspetor:
AntesEla tratar os componentes com sendo variveis, a opo alterar nome das variveis .
Depois
20
A IDE NetbeansEditando a Barra de Menu* Outra forma de altera nome da varivel diretamente pela guia Inspetor.
Antes
Depois
Selecionar Componente, apertar F2 remonear e apertar Enter.
21
A IDE NetbeansEditando a Barra de MenuFaa o mesmo com o segundo item de Menu 1Clique com o Boto direito sobre o campo File e em Seguida Editar Texto
2
3
22
A IDE NetbeansEditando a Barra de MenuFaa o mesmo com o segundo item de Menu 1Clique com o Boto direito sobre o campo File e em Seguida Editar Texto
2
3
23
A IDE NetbeansContineres SwingContineres Swing, vamos usar o JPanel.Todos os Componentes de Nossa Aplicao devem Ficar dentro de um Painel.
24
A IDE NetbeansContineres SwingContineres Swing, vamos usar o JPanel.Clique, Segure e Arraste para Dentro do Jframe e depois solte.
25
A IDE NetbeansContineres SwingContineres Swing, vamos usar o JPanel.
Redimensione e ajuste ao centro
26
A IDE NetbeansContineres SwingContineres Swing, vamos usar o JPanel.
Clique com o Boto direito e v em Propriedades
27
A IDE NetbeansContineres SwingContineres Swing, vamos usar o JPanel.Clique com o Boto direito e v em Propriedades
Vamos colocar uma borda de ttulo.
28
A IDE NetbeansContineres SwingContineres Swing, vamos usar o JPanel.Selecione Border e clique no boto com [ ... ]
29
A IDE NetbeansContineres SwingContineres Swing, vamos usar o JPanel.
Selecione Borda de Ttulo...
30
A IDE NetbeansContineres SwingConfigurando o JPanel (propriedades).V em Ttulo e Coloque um Ttulo : Agenda de contatos e Clique em OK.
31
A IDE NetbeansContineres SwingConfigurando o JPanelPronto, temos o painel: Agenda de Contatos
Renomeie o Componente JPanel1 para painelPrincipal 32
A IDE NetbeansContineres SwingConfigurando o JPanelPronto, temos o painel: Agenda de Contatos
ATENCO: Todos os componentes que usaremos daqui em diante ficaro dentro desse Painel. 33
A IDE NetbeansControles SwingComponentes principais de nosso aplicativo, Labels, TextFields e outros.
34
A IDE NetbeansControles SwingComponentes principais de nosso aplicativo, Labels, TextFilds e outros.
35
A IDE NetbeansControles Swing : RtuloOs Rtulos servem para identificar os campos em nossa interface.
36
A IDE NetbeansControles Swing : RtuloOs Rtulos servem para identificar os campos em nossa interface.
Altere o texto para Nome Altere a varivel para lb_nome37
A IDE NetbeansControles Swing : RtuloOs Rtulos servem para identificar os campos em nossa interface.
Altere o texto para Nome Altere a varivel para lb_nome38
A IDE NetbeansControles Swing : Campo de TextoOs campos de Textos so a entrada e a sada de dados .
39
A IDE NetbeansControles Swing : Campo de TextoOs campos de Textos so a entrada e a sada de dados .
Altere o texto: Apague o jTextField1 Altere a varivel para tf_nome 40
A IDE NetbeansControles Swing : Campo de TextoOs campos de Textos so a entrada e a sada de dados .
Altere o texto: Apague o jTextField1 Altere a varivel para tf_nome 41
A IDE NetbeansControles Swing : Completando a Interface...Vamos criar os seguintes campos na nossa interface:
Veja o Inspetor para renomear os Componentes! 42
A IDE NetbeansVisualizando o aplicativoVamos dar uma olhada na interface sem compilar o cdigo ou executar o aplicativo.
43
A IDE NetbeansVisualizando o aplicativoTemos um GUI, que ainda temos ajustar dois detalhes importantes ! Ttulo da barra de ttulo e redimensionamento.: Vamos impedir que essa Janela seja redimensionada Pelo usurio e tenha um ttulo Chamado agenda de contatos!
44
A IDE NetbeansVisualizando o aplicativo e configurando
Selecione JFrame
Ache Ttulo em Propriedades
45
A IDE NetbeansVisualizando o aplicativo e configurando
Selecione JFrame
Ache Ttulo em Propriedades
46
A IDE NetbeansVisualizando o aplicativoVeja a barra de ttulo...Pronto temos um ttulo!
47
A IDE NetbeansVisualizando o aplicativo e configurandoAche resizable em Propriedades e desmarque
Selecione JFrame
48
A IDE NetbeansVisualizando o aplicativoVeja a barra de ttulo e desativada a opo de redimensionamento da janela ...
49
Autor: Samuel Santos Programao Orientada Objetos Interfaces e conexo com Bancos de Dados Parte II O Access e o Banco de Dados
Banco de Dados em AccessNetbeans e Access Projeto Agenda Criando um Banco de dados para a Aplicao
Access Banco de DadosCriando um Banco de Dados
50
Access Banco de DadosCriando um Banco de Dados
* Salve o Banco de dados dentro da pasta do projeto Em NetbeansProjects -> AgendaContatos, crie um Diretrio chamado BandodeDados e salve dentro no Formato 2002-2003 com o nome Agenda.
51
Access Banco de DadosCriando uma tabela no banco de dados
* Clique em Modo de Exibio para Criarmos e editarmos os Campos da Tabela. salve como contatos e clique em OK.
52
Access Banco de DadosCriando uma tabela no banco de dados
* Edite os seguintes campos inclusive o campo cdigo, retirando o acentos e o C maisculo. E seguida salve e um clique duplo ao lado em contatos: Tabela para podermos inserir um registro
53
Access Banco de DadosInserindo um registro no Banco de dados
* Pronto, temos um banco de dados, uma tabela com campos agora s falta criarmos uma fonte de dados de usurios no sistema para que o aplicativo possa encontrar e ter acesso ao banco de dados. Salve e Feche o Access. 54
Autor: Samuel Santos Programao Orientada Objetos Interfaces e conexo com Bancos de Dados Parte III Criando uma fonte de dados
Criando uma fonte de dadosNetbeans e Access Projeto Agenda Criando um Banco de dados para a Aplicao
Fonte de DadosAbra o Painel de Controle / Sistema e Segurana
* Abra Sistema e Segurana 55
Fonte de DadosAbra Ferramentas AdministrativasAVISO: Certifique se que o Access foi fechado e que O banco de dados foi realmente salvo na pasta NetBeansProjects .. Dentro da pasta BancodeDados ---------------------------------Caso contrario volte e corrija Pois o Netbeans no achar Seu arquivo caso esteja em Outro local.
56
Fonte de DadosAbra Fonte de Dados (ODBC)
57
Fonte de DadosFonte de Dados de usurio
* Clique em Adicionar 58
Fonte de DadosFonte de Dados de usurio
* Selecione Microsoft Access Driver (*.mdb) e clique em concluir
59
Fonte de DadosFonte de Dados de usurio
* Nome da fonte: Agenda * fornea um descrio qualquer E clique em selecionar !
60
Fonte de DadosFonte de Dados de usurio
* Encontre o Banco de Dados que criamos! > Clique em C:\ procure NetBeansProject > Depois AgendaContatos > Depois BancodeDados ache o arquivo Agenda.mdb
* Selecione o arquivo e clique Em OK.
61
Fonte de DadosFonte de Dados de usurio
* Agora o sistema sabe Informar ao nosso aplicativo Onde est o banco de dados
62
Fonte de DadosFonte de Dados de usurio
* Pronto finalmente est ai nossa fonte de dados.Clique e OK e finalizamos!
63
Autor: Samuel Santos Programao Orientada Objetos Interfaces e conexo com Bancos de Dados Parte IV Criando uma conexo
Conexo com o Banco de DadosNetbeans e Access Projeto Agenda Criando um Banco de dados para a Aplicao
Conexo com o Banco de DadosCriando uma Classe Conexo* Retornando ao Netbeans, vamos para a parte mais rdua, trabalhosa e importante da nossa aplicao a Classe de conexo com o banco de dados.
* Clique em Novo Arquivo
44
Conexo com o Banco de DadosCriando uma Classe Conexo* Selecione Java -> Arquivo Java Vazio (Empyt File caso esteja em Ingls o IDE)
64
Conexo com o Banco de DadosCriando uma Classe Conexo* Crie um nova Classe conexao e em seguida um novo pacote conect.
65
Conexo com o Banco de DadosCriando uma Classe Conexo* Vamos aos cdigos para Conexo:
66
Conexo com o Banco de DadosCriando uma Classe Conexo* Copie os cdigos linha por linha da mesma forma com est aqui:
67
Conexo com o Banco de DadosCriando uma Classe Conexo* Copie os cdigos linha por linha da mesma forma com est aqui:
68
Conexo com o Banco de DadosCriando uma Classe Conexo* Copie os cdigos linha por linha da mesma forma com est aqui:
69
Conexo com o Banco de DadosCriando uma Classe Conexo* Copie os cdigos linha por linha da mesma forma com est aqui:
70
Conexo com o Banco de DadosConectando nossa Agenda com o Bando de Dados* Vamos agora muda da Aba projeto para aba Cdigo e instanciar uma conexo .
71
Conexo com o Banco de DadosConectando nossa Agenda com o Bando de Dados* Aqui vamos Trabalhar para fazer uso da conexo e do banco de dados e os testes .
72
Conexo com o Banco de DadosConectando nossa Agenda com o Bando de Dados* Importando o que vamos precisar ...
73
Conexo com o Banco de DadosConectando nossa Agenda com o Bando de Dados* Importando o que vamos precisar ...
74
Conexo com o Banco de DadosConectando nossa Agenda com o Bando de Dados* Instanciando uma conexo, lendo o banco de dados e exibindo na GUI os dados ...
75
Conexo com o Banco de DadosTestando nosso Cdigo SHIFT + F6* No precisamos compilar todo o cdigo vamos apenas testar esse trecho... Clique com o Boto direito e Executar Arquivo.
76
Conexo com o Banco de DadosTestando nosso Cdigo SHIFT + F6* Sucesso : Leu o Banco de dados e Mostrou o registro Salvo!
Vamos acrescentar botes de navegao e Eventos para salvar e Deletar arquivos
77
Conexo com o Banco de DadosBoto Salvar*
Clique com o Boto direito em cima de salvar, em seguida: Eventos -> Action -> ActionPerformed
78
Conexo com o Banco de DadosBoto Salvar*
Veja que h uma sinal de Erro no encontrou a funo mostrar_Dados(); 79
Conexo com o Banco de DadosCriando um Mtodo para mostrar Dados* V no final do cdigo antes da chave de fechamento e crie o seguinte mtodo :
80
Conexo com o Banco de DadosBotes de Navegao* Nossa aplicao j capaz de adicionar um cadastro vamos agora Botes para navegar pelos cadastros.
81
Conexo com o Banco de DadosBotes de Navegao* Insira 4 botes, altere o nome da variveis e texto dos botes:
82
Conexo com o Banco de DadosColocando figuras nos botes* Selecione o primeiro boto, v em propriedade e ache icon :
83
Crie dentro da pasta do projeto uma pasta chamada imagens, e Coloque apenas imagens PNG ou GIF para os con.
Conexo com o Banco de DadosColocando figuras nos botes* Clique agora em Importar para ter as imagens adicionas da pasta principal do projeto :
84
Conexo com o Banco de DadosColocando figuras nos botes* Na pasta do projeto AgendaContatos deve ser criada a pasta contendo as imagens :
85
Conexo com o Banco de DadosColocando figuras nos botes* Na pasta do projeto AgendaContatos deve ser criada a pasta contendo as imagens :
86
* Clique em finalizar...
Conexo com o Banco de DadosColocando figuras nos botes* Ser exibida a imagem que voc selecionou:
* Aviso: Use imagens Pequenas pois No poder redimension-las No Netbeans. Sugiro: 32x32 24x24 16x16
87
* Clique em OK, e faa isso com todo os botes.
Conexo com o Banco de DadosColocando figuras nos botes* Faa com todos os botes, e veja o resultado:
88
Vamos agora adicionar mtodos para que funcionem.
Conexo com o Banco de DadosBoto Primeiro registro* Boto que mostra o primeiro registro no banco de dados da nossa agenda:
89
Clique com o Boto direito em cima de Primeiro, em seguida: Eventos -> Action -> ActionPerformed
Conexo com o Banco de DadosBoto Primeiro registro* Insira o seguinte mtodos:
90
Conexo com o Banco de DadosBoto Anterior* Boto anterior mostra o registro anterior !
91
Clique com o Boto direito em cima de Anterior, em seguida: Eventos -> Action -> ActionPerformed
Conexo com o Banco de DadosBoto Anterior* Insira o seguinte mtodos:
91
Conexo com o Banco de DadosBoto Ultimo registro* Boto ultimo mostra o ultimo registro da agenda!
93
Clique com o Boto direito em cima de Prximo, em seguida: Eventos -> Action -> ActionPerformed
Conexo com o Banco de DadosBoto Prximo* Insira o seguinte mtodos:
94
Conexo com o Banco de DadosBoto Ultimo registro* Boto prximo mostra o registro seguinte !
95
Clique com o Boto direito em cima de Ultimo, em seguida: Eventos -> Action -> ActionPerformed
Conexo com o Banco de DadosBoto Ultimo* Insira o seguinte mtodos:
96
Conexo com o Banco de DadosTestando Novamente !* Clique sob o cdigo com o boto direito, escolha Executar Arquivo.
97
Conexo com o Banco de DadosTestando Novamente !* Clique sob o cdigo com o boto direito, escolha Executar Arquivo.
98
Conexo com o Banco de DadosTestando Novamente !* Veja as mensagens de Erro clicando em Anterior e Prximo.
99
Conexo com o Banco de DadosAh, vamos agora inserir !* Apague os campo e digite os novos dados, depois clique em Salvar.
100
Conexo com o Banco de DadosContinue testando !* Clique nos botes para verificar que esto funcionando e insira novos registros .
* Bom, agora vamos fazer aparecer a foto do nosso contato.
101
Conexo com o Banco de DadosInserindo a foto do nosso contato* Vamos adicionar um mtodo para colocar a foto na Label foto, pois j estamos guardado o nome do arquivo foto no banco de dados:
* Vamos adicionar um funo para abrir o arquivo com a foto.
102
Conexo com o Banco de DadosInserindo a foto do nosso contato* Clique com o Boto direito em cima do boto [...], em seguida: Eventos -> Action -> ActionPerformed
103
Conexo com o Banco de DadosInserindo a foto do nosso contatoInsira o seguinte cdigo, ajuste os endereos para o local no seu computador:
104
Para corrigir os erros sinalizados, temos que importar bibliotecas:
Conexo com o Banco de DadosInserindo a foto do nosso contatoInsira no inicio do cdigo as bibliotecas:
105
Para corrigir os erros sinalizados, temos que importar bibliotecas:
Conexo com o Banco de DadosTestando a AgendaEu criei uma nova pasta chamada Contatos e dentro da pasta imagens :
106
Ao selecionar temos o foto na nossa Aplicao
Conexo com o Banco de DadosTestando a AgendaEu criei uma nova pasta chamada Contatos e dentro da pasta imagens :
107
Ao selecionar temos o foto na nossa Aplicao
Conexo com o Banco de DadosAjustando nossa nova funoPrecisamos que ao passar os registros , seja mostrada o nova imagem do registro.
108
Sabemos que mostrar_Dados responsvel por exibir, ento vamos alterar ela.
Conexo com o Banco de DadosAjustando nossa nova funoVolte para o cdigo encontre o mtodo mostra_Dados() e acrescente:
109
Conexo com o Banco de DadosTestando a aplicaoAgora ao usar os botes de navegao as fotos dos contatos so mostradas:
110
Conexo com o Banco de DadosBoto deletarVamos adicionar agora um cdigo para excluir um cadastro.
111
Vamos adicionar um cdigo para controlar os registro deletados e atualizar o BD.
Conexo com o Banco de DadosColocando a posio do contatos na aplicaoVamos adicionar agora um cdigo para excluir um cadastro.
112
Vamos adicionar um cdigo para controlar os registro deletados e atualizar o BD.
Conexo com o Banco de DadosAlteraes no cdigoAcrescente no cdigo os trechos destacados:
1
113
Conexo com o Banco de DadosAlteraes no cdigoAcrescente no cdigo os trechos destacados:
2
114
Conexo com o Banco de DadosTestando a aplicaoVeja que agora temos as posio dos contatos em nosso banco de dados
115
Conexo com o Banco de DadosEvento DeletarAcrescente no cdigo os trechos destacados:
116
Conexo com o Banco de DadosMtodo Deletar
117
Conexo com o Banco de DadosMtodo Deletar
Agora podemos deletar registro em nossa agenda!
118
Conexo com o Banco de DadosTestando o Boto deletarAo clicarmos no boto deletar exibida um mensagem de confirmao:
Clicando em YES, teremos a confirmao.
119
Conexo com o Banco de DadosCompilando e Criando um ExecutvelNo menu executar, clique na opo Construir Projeto (AgendaContatos) F11
120
Conexo com o Banco de DadosCompilando e Criando um ExecutvelClique na opo Limpar e Construir !
121
Conexo com o Banco de DadosCompilando e Criando um ExecutvelVeja em que locar foi construdo o seu arquivo executvel AgendaContatos.jar
Aqui
122
Conexo com o Banco de DadosCompilando e Criando um ExecutvelPronto finalmente temos nosso programinha Compilado, s usar !
Obrigado a todos e quaisquer dvida podem entrar em contato. Email: samuel.santos.2009@hotmail.com 123
Programando em JavaFinal da AplicaoEm breve nosso aplicativo Estoque.
124