Interfaces Gráficas em Java

Autor: Samuel Santos Programao Orientada Objetos Interfaces e conexo com Bancos de Dados Parte I A interface e o Ambiente Netbeans
Interfaces Grficas em Java

Netbeans e Access Projeto Agenda
Descobrindo o Netbeans
Interfaces Grficas em Java

Objetivo:
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.
A IDE Netbeans
Tela Principal
arquivos abertos
projetos recentes
sada (prompt)
2
A IDE Netbeans
Novo Projeto
Arquivo -> Novo Projeto ... Atalho = ( Ctrl + Shift + N )
A IDE Netbeans
Novo Projeto
Java -> Aplicativo Java -> Prximo 1
2
A IDE Netbeans
Novo Projeto
1 - Coloque o nome do projeto;
2 Desmarque os 2 campos marcados; 3 Clique em Finalizar. 1
A IDE Netbeans
Visualizando o Projeto
1 clique no + em cada diretrio do projeto;
2 Veja que esto vazios;
A IDE Netbeans
Criando um JFrame (Formulrio)
Clique com boto direito sobre o Projeto :
Novo -> Formulrio JFrame
A IDE Netbeans
Criando uma Classe e um Pacote
1 - 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
A IDE Netbeans
Resultado:
* Temos agora um novo pacote Gui e uma nova Classe Agenda.java.
A IDE Netbeans
Aba Projeto
* Na Aba projeto teremos um visualizao do Componentes da nossa Interface. Aba Projeto
JFrame
10
A IDE Netbeans
Aba 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 Netbeans
Conhecendo 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 Netbeans
Menus Swing
* Vamos inserir uma barra de Menu, primeiro componente de nossa aplicao.
Selecione : Menus Swing
Selecione : [ + ] para ver componentes 13
A IDE Netbeans
Menus Swing
* Vamos inserir uma barra de Menu, primeiro componente de nossa aplicao.
Selecione : Menus Swing
Selecione : [ file] Barra de menu 14
A IDE Netbeans
Menus 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 Netbeans
Editando a Barra de Menu
* Formas para editar a barra de Menu: 1
Clique com o Boto direito sobre o campo File e em Seguida Editar Texto
16
A IDE Netbeans
* Visualizando a Guia Inspetor:
Ser importante renomear todas as variveis dos componentes em nosso projeto!
17
A IDE Netbeans
jMenuBar = Barra de menus jMenu1 = Agenda jMenu2 = Edit

Ela tratar os componentes com sendo variveis, a opo alterar nome das variveis .
18
A IDE Netbeans
* 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 Netbeans
Antes
Ela tratar os componentes com sendo variveis, a opo alterar nome das variveis .
Depois
20
A IDE Netbeans
* Outra forma de altera nome da varivel diretamente pela guia Inspetor.
Antes
Depois
Selecionar Componente, apertar F2 remonear e apertar Enter.
21
A IDE Netbeans
Faa o mesmo com o segundo item de Menu 1
22
A IDE Netbeans
Faa o mesmo com o segundo item de Menu 1
23
A IDE Netbeans
Contineres Swing
Contineres Swing, vamos usar o JPanel.
Todos os Componentes de Nossa Aplicao devem Ficar dentro de um Painel.
24
A IDE Netbeans
Contineres Swing
Clique, Segure e Arraste para Dentro do Jframe e depois solte.
25
A IDE Netbeans
Contineres Swing
Redimensione e ajuste ao centro
26
A IDE Netbeans
Contineres Swing
Clique com o Boto direito e v em Propriedades
27
A IDE Netbeans
Contineres Swing
Clique com o Boto direito e v em Propriedades
Vamos colocar uma borda de ttulo.
28
A IDE Netbeans
Contineres Swing
Selecione Border e clique no boto com [ ... ]
29
A IDE Netbeans
Contineres Swing
Selecione Borda de Ttulo...
30
A IDE Netbeans
Contineres Swing
Configurando o JPanel (propriedades).
V em Ttulo e Coloque um Ttulo : Agenda de contatos e Clique em OK.
31
A IDE Netbeans
Contineres Swing
Configurando o JPanel
Pronto, temos o painel: Agenda de Contatos
Renomeie o Componente JPanel1 para painelPrincipal 32
A IDE Netbeans
Contineres Swing
Configurando o JPanel
Pronto, temos o painel: Agenda de Contatos
ATENCO: Todos os componentes que usaremos daqui em diante ficaro dentro desse Painel. 33
A IDE Netbeans
Controles Swing
Componentes principais de nosso aplicativo, Labels, TextFields e outros.
34
A IDE Netbeans
Controles Swing
Componentes principais de nosso aplicativo, Labels, TextFilds e outros.
35
A IDE Netbeans
Controles Swing : Rtulo
Os Rtulos servem para identificar os campos em nossa interface.
36
A IDE Netbeans
Altere o texto para Nome Altere a varivel para lb_nome

37
A IDE Netbeans
Altere o texto para Nome Altere a varivel para lb_nome

38
A IDE Netbeans
Controles Swing : Campo de Texto
Os campos de Textos so a entrada e a sada de dados .
39
A IDE Netbeans
Altere o texto: Apague o jTextField1 Altere a varivel para tf_nome 40
A IDE Netbeans
Altere o texto: Apague o jTextField1 Altere a varivel para tf_nome 41
A IDE Netbeans
Controles Swing : Completando a Interface...
Vamos criar os seguintes campos na nossa interface:
Veja o Inspetor para renomear os Componentes! 42
A IDE Netbeans
Visualizando o aplicativo
Vamos dar uma olhada na interface sem compilar o cdigo ou executar o aplicativo.
43
A IDE Netbeans
Temos 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 Netbeans
Visualizando o aplicativo e configurando
Selecione JFrame
Ache Ttulo em Propriedades
45
A IDE Netbeans
Selecione JFrame
Ache Ttulo em Propriedades
46
A IDE Netbeans
Veja a barra de ttulo...
Pronto temos um ttulo!
47
A IDE Netbeans
Ache resizable em Propriedades e desmarque
Selecione JFrame
48
A IDE Netbeans
Veja 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 Access

Netbeans e Access Projeto Agenda Criando um Banco de dados para a Aplicao
Access Banco de Dados

Criando um Banco de Dados
50

Criando 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

Criando 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

Criando 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

Inserindo 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 dados

Fonte de Dados
Abra o Painel de Controle / Sistema e Segurana
* Abra Sistema e Segurana 55
Fonte de Dados
Abra Ferramentas Administrativas
AVISO: 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 Dados
Abra Fonte de Dados (ODBC)
57
Fonte de Dados
Fonte de Dados de usurio
* Clique em Adicionar 58
Fonte de Dados
* Selecione Microsoft Access Driver (*.mdb) e clique em concluir
59
Fonte de Dados
* Nome da fonte: Agenda * fornea um descrio qualquer E clique em selecionar !
60
Fonte de Dados
* 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 Dados
* Agora o sistema sabe Informar ao nosso aplicativo Onde est o banco de dados
62
Fonte de Dados
* 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 Dados


Criando 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

* Selecione Java -> Arquivo Java Vazio (Empyt File caso esteja em Ingls o IDE)
64

* Crie um nova Classe conexao e em seguida um novo pacote conect.
65

* Vamos aos cdigos para Conexo:
66

* Copie os cdigos linha por linha da mesma forma com est aqui:
67

68

69

70

Conectando nossa Agenda com o Bando de Dados
* Vamos agora muda da Aba projeto para aba Cdigo e instanciar uma conexo .
71

* Aqui vamos Trabalhar para fazer uso da conexo e do banco de dados e os testes .
72

* Importando o que vamos precisar ...
73

* Importando o que vamos precisar ...
74

* Instanciando uma conexo, lendo o banco de dados e exibindo na GUI os dados ...
75

Testando nosso Cdigo SHIFT + F6
* No precisamos compilar todo o cdigo vamos apenas testar esse trecho... Clique com o Boto direito e Executar Arquivo.
76

Testando 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

Boto Salvar
*
Clique com o Boto direito em cima de salvar, em seguida: Eventos -> Action -> ActionPerformed
78

Boto Salvar
*
Veja que h uma sinal de Erro no encontrou a funo mostrar_Dados(); 79

Criando um Mtodo para mostrar Dados
* V no final do cdigo antes da chave de fechamento e crie o seguinte mtodo :
80

Botes de Navegao
* Nossa aplicao j capaz de adicionar um cadastro vamos agora Botes para navegar pelos cadastros.
81

Botes de Navegao
* Insira 4 botes, altere o nome da variveis e texto dos botes:
82

Colocando 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.

* Clique agora em Importar para ter as imagens adicionas da pasta principal do projeto :
84

* Na pasta do projeto AgendaContatos deve ser criada a pasta contendo as imagens :
85

* Na pasta do projeto AgendaContatos deve ser criada a pasta contendo as imagens :
86
* Clique em finalizar...

* 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.

* Faa com todos os botes, e veja o resultado:
88
Vamos agora adicionar mtodos para que funcionem.

Boto 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

Boto Primeiro registro
* Insira o seguinte mtodos:
90

Boto Anterior
* Boto anterior mostra o registro anterior !
91
Clique com o Boto direito em cima de Anterior, em seguida: Eventos -> Action -> ActionPerformed

Boto Anterior
91

Boto 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

Boto Prximo
94

Boto Ultimo registro
* Boto prximo mostra o registro seguinte !
95
Clique com o Boto direito em cima de Ultimo, em seguida: Eventos -> Action -> ActionPerformed

Boto Ultimo
96

Testando Novamente !
* Clique sob o cdigo com o boto direito, escolha Executar Arquivo.
97

* Clique sob o cdigo com o boto direito, escolha Executar Arquivo.
98

* Veja as mensagens de Erro clicando em Anterior e Prximo.
99

Ah, vamos agora inserir !
* Apague os campo e digite os novos dados, depois clique em Salvar.
100

Continue testando !
* Clique nos botes para verificar que esto funcionando e insira novos registros .
* Bom, agora vamos fazer aparecer a foto do nosso contato.
101

Inserindo 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

* Clique com o Boto direito em cima do boto [...], em seguida: Eventos -> Action -> ActionPerformed
103

Insira o seguinte cdigo, ajuste os endereos para o local no seu computador:
104
Para corrigir os erros sinalizados, temos que importar bibliotecas:

Insira no inicio do cdigo as bibliotecas:
105
Para corrigir os erros sinalizados, temos que importar bibliotecas:

Testando a Agenda
Eu criei uma nova pasta chamada Contatos e dentro da pasta imagens :
106
Ao selecionar temos o foto na nossa Aplicao

Testando a Agenda
Eu criei uma nova pasta chamada Contatos e dentro da pasta imagens :
107
Ao selecionar temos o foto na nossa Aplicao

Ajustando nossa nova funo
Precisamos que ao passar os registros , seja mostrada o nova imagem do registro.
108
Sabemos que mostrar_Dados responsvel por exibir, ento vamos alterar ela.

Ajustando nossa nova funo
Volte para o cdigo encontre o mtodo mostra_Dados() e acrescente:
109

Testando a aplicao
Agora ao usar os botes de navegao as fotos dos contatos so mostradas:
110

Boto deletar
Vamos adicionar agora um cdigo para excluir um cadastro.
111
Vamos adicionar um cdigo para controlar os registro deletados e atualizar o BD.

Colocando a posio do contatos na aplicao
Vamos adicionar agora um cdigo para excluir um cadastro.
112
Vamos adicionar um cdigo para controlar os registro deletados e atualizar o BD.

Alteraes no cdigo
Acrescente no cdigo os trechos destacados:
113

Alteraes no cdigo
114

Testando a aplicao
Veja que agora temos as posio dos contatos em nosso banco de dados
115

Evento Deletar
116

Mtodo Deletar
117

Mtodo Deletar
Agora podemos deletar registro em nossa agenda!
118

Testando o Boto deletar
Ao clicarmos no boto deletar exibida um mensagem de confirmao:
Clicando em YES, teremos a confirmao.
119

Compilando e Criando um Executvel
No menu executar, clique na opo Construir Projeto (AgendaContatos) F11
120

Clique na opo Limpar e Construir !
121

Veja em que locar foi construdo o seu arquivo executvel AgendaContatos.jar
Aqui
122

Pronto 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 Java
Final da Aplicao
Em breve nosso aplicativo Estoque.
124

Interfaces Gráficas em Java

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Interfaces Gráficas em Java

Hochgeladen von

Copyright:

Verfügbare Formate

Autor: Samuel Santos Programao Orientada Objetos Interfaces e conexo com Bancos de Dados Parte I A interface e o Ambiente Netbeans

Interfaces Grficas em Java

Interfaces Grficas em Java

Aprender a usar a IDE Netbeans Basicamente as principal funes

Construir conexo com Banco de Dados Access e conectar a aplicao.

Cdigo da Interface e comandos de Actions eventos

Selecione : [ + ] para ver componentes 13

Selecione : [ file] Barra de menu 14

Essa a forma de inserir componentes... Escolha o componente arraste at o local e solte.

Ser importante renomear todas as variveis dos componentes em nosso projeto!

jMenuBar = Barra de menus jMenu1 = Agenda jMenu2 = Edit

Renomeie para menuPrincipal e observe novamente a Guia INSPETOR.

Selecionar Componente, apertar F2 remonear e apertar Enter.

Redimensione e ajuste ao centro

Clique com o Boto direito e v em Propriedades

Vamos colocar uma borda de ttulo.

Selecione Borda de Ttulo...

Renomeie o Componente JPanel1 para painelPrincipal 32

Altere o texto para Nome Altere a varivel para lb_nome

Altere o texto para Nome Altere a varivel para lb_nome

Altere o texto: Apague o jTextField1 Altere a varivel para tf_nome 40

Altere o texto: Apague o jTextField1 Altere a varivel para tf_nome 41

Veja o Inspetor para renomear os Componentes! 42

Ache Ttulo em Propriedades

Ache Ttulo em Propriedades

Banco de Dados em Access

Access Banco de Dados

Access Banco de Dados

Access Banco de Dados

Access Banco de Dados

Access Banco de Dados

Criando uma fonte de dados

* Abra Sistema e Segurana 55

* Selecione Microsoft Access Driver (*.mdb) e clique em concluir

* Nome da fonte: Agenda * fornea um descrio qualquer E clique em selecionar !

* Selecione o arquivo e clique Em OK.

* Pronto finalmente est ai nossa fonte de dados.

Conexo com o Banco de Dados

Conexo com o Banco de Dados

* Clique em Novo Arquivo

Conexo com o Banco de Dados

Conexo com o Banco de Dados

Conexo com o Banco de Dados

Conexo com o Banco de Dados

Conexo com o Banco de Dados

Conexo com o Banco de Dados

Conexo com o Banco de Dados

Conexo com o Banco de Dados

Conexo com o Banco de Dados

Conexo com o Banco de Dados

Conexo com o Banco de Dados

Conexo com o Banco de Dados

Conexo com o Banco de Dados

Conexo com o Banco de Dados

Vamos acrescentar botes de navegao e Eventos para salvar e Deletar arquivos

Conexo com o Banco de Dados

Conexo com o Banco de Dados

Veja que h uma sinal de Erro no encontrou a funo mostrar_Dados(); 79

Conexo com o Banco de Dados

Conexo com o Banco de Dados

Conexo com o Banco de Dados

Conexo com o Banco de Dados

Conexo com o Banco de Dados

Conexo com o Banco de Dados