Programação de Interfaces
Gráficas
Aula 1
Mini Curso
INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA
TRIÂNGULO MINEIRO...
Prof Carlos Eduardo Dantas – carloseduardodantas@iftm.edu.br
Abrangência do Curso
• Criação de Interfaces Gráficas com Swi...
Prof Carlos Eduardo Dantas – carloseduardodantas@iftm.edu.br
Objetivos Aula 1
• Obter uma visão geral de componentes
Swing...
Prof Carlos Eduardo Dantas – carloseduardodantas@iftm.edu.br
Introdução
• Uma interface gráfica com o usuário
apresenta um...
Prof Carlos Eduardo Dantas – carloseduardodantas@iftm.edu.br
AWT
• API padrão entre 1995-1998;
• Perdeu popularidade por t...
Prof Carlos Eduardo Dantas – carloseduardodantas@iftm.edu.br
Swing
• API escrita puramente em Java;
• Padrão desde 1998;
•...
Prof Carlos Eduardo Dantas – carloseduardodantas@iftm.edu.br
Mapa de Componentes
Swing/AWT
• Swing em azul;
• AWT em
amare...
Prof Carlos Eduardo Dantas – carloseduardodantas@iftm.edu.br
Principais componentes
Swing
• Jframe – janela (ou quadro) de...
Prof Carlos Eduardo Dantas – carloseduardodantas@iftm.edu.br
NetBeans
• Ambiente de Desenvolvimento open-
source escrito e...
Prof Carlos Eduardo Dantas – carloseduardodantas@iftm.edu.br
Iniciando um projeto -
criação
Prof Carlos Eduardo Dantas – carloseduardodantas@iftm.edu.br
Iniciando um projeto –
criação de pacotes
Prof Carlos Eduardo Dantas – carloseduardodantas@iftm.edu.br
Iniciando um projeto –
Adicionando um JFrame
Prof Carlos Eduardo Dantas – carloseduardodantas@iftm.edu.br
Iniciando um projeto –
Editando propriedades
JFrame
•
Prof Carlos Eduardo Dantas – carloseduardodantas@iftm.edu.br
Iniciando um projeto –
Adicionando um Panel
•
Prof Carlos Eduardo Dantas – carloseduardodantas@iftm.edu.br
Iniciando um projeto –
Editando borda
•
Prof Carlos Eduardo Dantas – carloseduardodantas@iftm.edu.br
Iniciando um projeto –
Adicionando Componentes
• Adicione doi...
Prof Carlos Eduardo Dantas – carloseduardodantas@iftm.edu.br
Iniciando um projeto –
Adicionando Componentes
• Edite o nome...
Prof Carlos Eduardo Dantas – carloseduardodantas@iftm.edu.br
Iniciando um projeto –
Adicionando Componentes
• Adicione um ...
Prof Carlos Eduardo Dantas – carloseduardodantas@iftm.edu.br
Iniciando um projeto –
Adicionando Imagem
• Adicione um Jlabe...
Prof Carlos Eduardo Dantas – carloseduardodantas@iftm.edu.br
Iniciando um projeto –
adicionando evento do botão
• Adiciona...
Prof Carlos Eduardo Dantas – carloseduardodantas@iftm.edu.br
Iniciando um projeto –
camada view completa
Prof Carlos Eduardo Dantas – carloseduardodantas@iftm.edu.br
Iniciando um projeto –
camada model.domain
• Em model.domain,...
Prof Carlos Eduardo Dantas – carloseduardodantas@iftm.edu.br
Iniciando um projeto –
camada model.domain
• Botão direito do...
Prof Carlos Eduardo Dantas – carloseduardodantas@iftm.edu.br
Iniciando um projeto –
camada model.dao
• Em model.dao, crie ...
Prof Carlos Eduardo Dantas – carloseduardodantas@iftm.edu.br
Iniciando um projeto –
camada control
• Em control, crie uma ...
Prof Carlos Eduardo Dantas – carloseduardodantas@iftm.edu.br
Iniciando um projeto –
camada control
• Em AutenticacaoView, ...
Prof Carlos Eduardo Dantas – carloseduardodantas@iftm.edu.br
Iniciando um projeto –
camada control
• Clique duplo no botão...
Prof Carlos Eduardo Dantas – carloseduardodantas@iftm.edu.br
Iniciando um projeto –
resultado
• O que falta?
Prof Carlos Eduardo Dantas – carloseduardodantas@iftm.edu.br
Iniciando um projeto –
resultado
• Falta associar o que foi d...
Prof Carlos Eduardo Dantas – carloseduardodantas@iftm.edu.br
Beans Binding
• Implementação da JSR-295;
• Permite vincular ...
Prof Carlos Eduardo Dantas – carloseduardodantas@iftm.edu.br
Beans Binding –
implementação view
• Deve-se amarrar os campo...
Prof Carlos Eduardo Dantas – carloseduardodantas@iftm.edu.br
Beans Binding –
implementação view
• Com a vinculação dos com...
Prof Carlos Eduardo Dantas – carloseduardodantas@iftm.edu.br
Beans Binding – resultado
Prof Carlos Eduardo Dantas – carloseduardodantas@iftm.edu.br
Adicionando menu
Prof Carlos Eduardo Dantas – carloseduardodantas@iftm.edu.br
Adicionando menu
• Edite os textos dos menus e adicione
atalh...
Prof Carlos Eduardo Dantas – carloseduardodantas@iftm.edu.br
Criando um link entre a tela
de login e o menu
• Deve-se fech...
Prof Carlos Eduardo Dantas – carloseduardodantas@iftm.edu.br
Executando o arquivo binário
• Clicar em Clean and Build;
• D...
Prof Carlos Eduardo Dantas – carloseduardodantas@iftm.edu.br
Próxima aula
• Criação de telas CRUD
(inserção,atualização,ex...
Prof Carlos Eduardo Dantas – carloseduardodantas@iftm.edu.br
Referências
• [1] – “Dominando NetBeans”; Edson
Gonçalves; Ed...
Upcoming SlideShare
Loading in...5
×

Mini Curso - Programação de Interfaces Gráficas - aula 1

271

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
271
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
44
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Mini Curso - Programação de Interfaces Gráficas - aula 1

  1. 1. Programação de Interfaces Gráficas Aula 1 Mini Curso INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA TRIÂNGULO MINEIRO – Campus Avançado Uberlândia Prof Carlos Eduardo Dantas – carloseduardodantas@iftm.edu.br
  2. 2. Prof Carlos Eduardo Dantas – carloseduardodantas@iftm.edu.br Abrangência do Curso • Criação de Interfaces Gráficas com Swing; • Uso do framework Beans Binding para efetuar o link dos componentes com os objetos; • Uso do padrão MVC; • Uso de regionalização; • Introdução à Persistência de Objetos.
  3. 3. Prof Carlos Eduardo Dantas – carloseduardodantas@iftm.edu.br Objetivos Aula 1 • Obter uma visão geral de componentes Swing; • Organizar um projeto no padrão MVC.
  4. 4. Prof Carlos Eduardo Dantas – carloseduardodantas@iftm.edu.br Introdução • Uma interface gráfica com o usuário apresenta uma interface visual para um Software; • Em Java existem basicamente as APIs: Swing, SWT e AWT. Componentes AWT: Label, Button, TextField, List, etc. Componentes Swing: JLabel, JButton, JTextField, JList, etc. Componentes SWT: Label, Button, Text, List, etc
  5. 5. Prof Carlos Eduardo Dantas – carloseduardodantas@iftm.edu.br AWT • API padrão entre 1995-1998; • Perdeu popularidade por ter dependência com a plataforma local; • Os componentes awt se situam no pacote java.awt.
  6. 6. Prof Carlos Eduardo Dantas – carloseduardodantas@iftm.edu.br Swing • API escrita puramente em Java; • Padrão desde 1998; • Componentes podem ser estendidos ou modificados; • Os componentes swing se situam no pacote javax.swing.
  7. 7. Prof Carlos Eduardo Dantas – carloseduardodantas@iftm.edu.br Mapa de Componentes Swing/AWT • Swing em azul; • AWT em amarelo.
  8. 8. Prof Carlos Eduardo Dantas – carloseduardodantas@iftm.edu.br Principais componentes Swing • Jframe – janela (ou quadro) de nível mais alto; Alguns métodos interessantes para um quadro (JFrame): dispose( ): fecha a janela e libera seus recursos para o sistema, setIconImage( ): especifica um ícone (objeto Image), setTitle( ): muda o texto da barra de título, setResizeable( ): que especifica um boolean para determinar se o quadro será redimensionável ou não, setVisible( ): exibir o quadro, setSize( ): que especifica o tamanho do quadro, setLocation( ): que especifica a localização do quadro na tela.
  9. 9. Prof Carlos Eduardo Dantas – carloseduardodantas@iftm.edu.br NetBeans • Ambiente de Desenvolvimento open- source escrito em Java; • Alta produtividade em aplicações Desktop, Java ME, etc..; • Integração perfeita com os principais frameworks da plataforma Java http://www.netbeans.org
  10. 10. Prof Carlos Eduardo Dantas – carloseduardodantas@iftm.edu.br Iniciando um projeto - criação
  11. 11. Prof Carlos Eduardo Dantas – carloseduardodantas@iftm.edu.br Iniciando um projeto – criação de pacotes
  12. 12. Prof Carlos Eduardo Dantas – carloseduardodantas@iftm.edu.br Iniciando um projeto – Adicionando um JFrame
  13. 13. Prof Carlos Eduardo Dantas – carloseduardodantas@iftm.edu.br Iniciando um projeto – Editando propriedades JFrame •
  14. 14. Prof Carlos Eduardo Dantas – carloseduardodantas@iftm.edu.br Iniciando um projeto – Adicionando um Panel •
  15. 15. Prof Carlos Eduardo Dantas – carloseduardodantas@iftm.edu.br Iniciando um projeto – Editando borda •
  16. 16. Prof Carlos Eduardo Dantas – carloseduardodantas@iftm.edu.br Iniciando um projeto – Adicionando Componentes • Adicione dois Label, um TextField, um Password Field, um Separator, um Button, e deixe a aplicação semelhante à imagem abaixo:
  17. 17. Prof Carlos Eduardo Dantas – carloseduardodantas@iftm.edu.br Iniciando um projeto – Adicionando Componentes • Edite o nome dos componentes abaixo (apertando F2 em cada componente):
  18. 18. Prof Carlos Eduardo Dantas – carloseduardodantas@iftm.edu.br Iniciando um projeto – Adicionando Componentes • Adicione um novo pacote chamado view.img, e dentro deste, coloque uma imagem para a tela de login
  19. 19. Prof Carlos Eduardo Dantas – carloseduardodantas@iftm.edu.br Iniciando um projeto – Adicionando Imagem • Adicione um Jlabel, e pela propriedade icon, adicione a imagem
  20. 20. Prof Carlos Eduardo Dantas – carloseduardodantas@iftm.edu.br Iniciando um projeto – adicionando evento do botão • Adicionando evento para executar o botão ao pressionar “enter”
  21. 21. Prof Carlos Eduardo Dantas – carloseduardodantas@iftm.edu.br Iniciando um projeto – camada view completa
  22. 22. Prof Carlos Eduardo Dantas – carloseduardodantas@iftm.edu.br Iniciando um projeto – camada model.domain • Em model.domain, crie uma classe chamada Autenticacao, com os atributos usuario e senha
  23. 23. Prof Carlos Eduardo Dantas – carloseduardodantas@iftm.edu.br Iniciando um projeto – camada model.domain • Botão direito do mouse e clique em insert code, adicionando construtores, get/set para todos os campos, toString para todos os campos e equals HashCode, comparando pelo campo usuario
  24. 24. Prof Carlos Eduardo Dantas – carloseduardodantas@iftm.edu.br Iniciando um projeto – camada model.dao • Em model.dao, crie uma classe chamada AutenticacaoDao, simulando o funcionamento de um banco de dados
  25. 25. Prof Carlos Eduardo Dantas – carloseduardodantas@iftm.edu.br Iniciando um projeto – camada control • Em control, crie uma classe chamada AutenticacaoControl, e coloque get/set para o campo autenticacaoDigitada.
  26. 26. Prof Carlos Eduardo Dantas – carloseduardodantas@iftm.edu.br Iniciando um projeto – camada control • Em AutenticacaoView, coloque uma referência para AutenticacaoControl, e crie um get
  27. 27. Prof Carlos Eduardo Dantas – carloseduardodantas@iftm.edu.br Iniciando um projeto – camada control • Clique duplo no botão login para adicionar um evento, e adicione o código abaixo:
  28. 28. Prof Carlos Eduardo Dantas – carloseduardodantas@iftm.edu.br Iniciando um projeto – resultado • O que falta?
  29. 29. Prof Carlos Eduardo Dantas – carloseduardodantas@iftm.edu.br Iniciando um projeto – resultado • Falta associar o que foi digitado nos campos com o atributo autenticacaoDigitada da classe AutenticacaoControl.
  30. 30. Prof Carlos Eduardo Dantas – carloseduardodantas@iftm.edu.br Beans Binding • Implementação da JSR-295; • Permite vincular propriedades de objetos a propriedades de componentes gráficos no Swing ou qualquer outro objeto/componente; • O NetBeans possui total suporte para tal finalidade.
  31. 31. Prof Carlos Eduardo Dantas – carloseduardodantas@iftm.edu.br Beans Binding – implementação view • Deve-se amarrar os campos de texto com os atributos de autenticacaoDigitada
  32. 32. Prof Carlos Eduardo Dantas – carloseduardodantas@iftm.edu.br Beans Binding – implementação view • Com a vinculação dos componentes, automaticamente foram adicionados as bibliotecas do framework
  33. 33. Prof Carlos Eduardo Dantas – carloseduardodantas@iftm.edu.br Beans Binding – resultado
  34. 34. Prof Carlos Eduardo Dantas – carloseduardodantas@iftm.edu.br Adicionando menu
  35. 35. Prof Carlos Eduardo Dantas – carloseduardodantas@iftm.edu.br Adicionando menu • Edite os textos dos menus e adicione atalhos, clicando duplo ao lado do texto; • Edite as propriedades do Jframe, como title e location by platform
  36. 36. Prof Carlos Eduardo Dantas – carloseduardodantas@iftm.edu.br Criando um link entre a tela de login e o menu • Deve-se fechar o frame atual (Autenticação) e abrir o frame novo (menu).
  37. 37. Prof Carlos Eduardo Dantas – carloseduardodantas@iftm.edu.br Executando o arquivo binário • Clicar em Clean and Build; • Dentro do diretório do projeto foi gerado um diretório chamado dist com os arquivos binários.
  38. 38. Prof Carlos Eduardo Dantas – carloseduardodantas@iftm.edu.br Próxima aula • Criação de telas CRUD (inserção,atualização,exclusão e pesquisa) completo, com tabelas, pesquisas, etc..
  39. 39. Prof Carlos Eduardo Dantas – carloseduardodantas@iftm.edu.br Referências • [1] – “Dominando NetBeans”; Edson Gonçalves; Editora Ciência Moderna, 2006; • [2] –“Swing + Beans Binding” – revista Java Magazine, ed. 70; • [3] – “Criando aplicações com MVC” – revista Java Magazine, ed. 83.
  1. ¿Le ha llamado la atención una diapositiva en particular?

    Recortar diapositivas es una manera útil de recopilar información importante para consultarla más tarde.

×