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


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


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


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


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


Altere o texto para Nome Altere a varivel para lb_nome37


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


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

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


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

59


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

60


* 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


* Agora o sistema sabe Informar ao nosso aplicativo Onde est o banco de dados

62


* 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


68


69


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: [email protected] 123

Programando em JavaFinal da AplicaoEm breve nosso aplicativo Estoque.

124

interfaces gráficas em java

Documents