Introdução ao Java Swing (Interface)

5.404 visualizações

Publicada em

Introdução ao Java Swing (Interface)

  1. 1. Introdução ao Java Swing Prof: Sérgio Souza Costa
  2. 2. Sobre mim Sérgio Souza Costa Professor - UFMA Doutor em Computação Aplicada (INPE) prof.sergio.costa@gmail.com https://sites.google.com/site/profsergiocosta/home https://twitter.com/profsergiocosta http://gplus.to/sergiosouzacosta http://www.slideshare.net/skosta/presentations?order=popular
  3. 3. Introdução - interfaces gráficas Elas são compostas por elementos como: janelas
  4. 4. Introdução - interfaces gráficas Elas são compostas por elementos como: janelas, botões
  5. 5. Introdução - interfaces gráficas Elas são compostas por elementos como: janelas, botões, caixa de combinação
  6. 6. Introdução - interfaces gráficas Elas são compostas por elementos como: janelas, botões, caixa de combinação, botão de opção
  7. 7. Introdução - interfaces gráficas Elas são compostas por elementos como: janelas, botões, caixa de combinação, botão de opção, caixa de texto
  8. 8. Introdução - interfaces gráficas Elas são compostas por elementos como: janelas, botões, caixa de combinação, botão de opção, caixa de texto, caixa de listagem
  9. 9. Introdução - interfaces gráficas Elas são compostas por elementos como: janelas, botões, caixa de combinação, botão de opção, caixa de texto, caixa de listagem, menus
  10. 10. Introdução - interfaces gráficas Elas são compostas por elementos como: janelas, botões, caixa de combinação, botão de opção, caixa de texto, caixa de listagem, menus, menus de contexto
  11. 11. Português Inglês Janela Window (pode ser referenciado como form or frame) Botões Button Caixa de combinação Combo box Botão de opção Option button Caixa de texto Text box, text field or text enty box Caixa de listagem List box Menu Menu Menu de contexto Context menu Principais Controles
  12. 12. Introdução Interface gráfica é composta de: ● Componentes ● Recipientes ● Layout ● Eventos
  13. 13. Componentes e containers • Componentes são os aspectos visíveis de uma GUI, como botões, menus, caixas de textos • São colocados dentro de recipientes (containers). • Os containers pode conter: • Um ou mais componentes, assim como outros recipientes • Importante para construção de layouts de complexidade realística
  14. 14. AWT vs Swing • A Abstract Window Toolkit (AWT) é o antigo conjunto de ferramentas para interfaces gráficas do Java • Oferece uma infra-estrutura mínima de interface gráfica • Componentes têm aparência dependente de plataforma • Limitado em recursos devido a depender de suporte de cada plataforma para os componentes oferecidos • Bugs e incompatibilidades entre plataformas
  15. 15. AWT vs Swing • O Swing utilizou a base do AWT, mantendo a compatibilidade com aplicações feitas neste framework, • fornece um conjunto muito mais rico e conveniente de componentes para interface com usuário • eliminou o problema da portabilidade e introduzindo o conceito de Look and Feel (algo como “visual e essência”)
  16. 16. Principais Controles - Java
  17. 17. Tutorial
  18. 18. Mas o importante agora é conhecer os componentes Swing.
  19. 19. Qual é o componente mais importante entre citados ?
  20. 20. A Janela, cada aplicativo tem a sua própria, e é nela que temos botões como fechar, maximizar e minimizar.
  21. 21. Isso, em Swing, uma Janela é suportada pelo componente Jframe (todos componentes swing começa com “J”)
  22. 22. Entendi, basta instancia um objeto do tipo Jframe. Certo ? public class SwingOla { public static void main(String[] args) { JFrame frame = new JFrame (); } }
  23. 23. Nada apareceu public class SwingOla { public static void main(String[] args) { JFrame frame = new JFrame (); } }
  24. 24. Ah … a janela não é mostrada até que eu mande mostrar, ou seja, setVisible (true) public class SwingOla { public static void main(String[] args) { JFrame frame = new JFrame (); frame.setVisible(true); } }
  25. 25. O Tamanho da Janela é o mínimo possível para mostrar os botoes de fechar e maximizar. public class SwingOla { public static void main(String[] args) { JFrame frame = new JFrame (); frame.setVisible(true); } }
  26. 26. Mas eu posso definir o tamanho (em pixels) que eu queira. public class SwingOla { public static void main(String[] args) { JFrame frame = new JFrame (); frame.setVisible(true); frame.setSize (200,200); } }
  27. 27. Porém minha aplicação nao fecha, quando clico no botão de fechar ☹ public class SwingOla { public static void main(String[] args) { JFrame frame = new JFrame (); frame.setVisible(true); frame.setSize (200,200); } }
  28. 28. Para o Java, o comportamento padrão para este botão é minimizar. Se quiser que ele feche é preciso “dizer” isso explicitamente.
  29. 29. Agora sim, minha Janela que não faz nada já está funcionando ☺ public class SwingOla { public static void main(String[] args) { JFrame frame = new JFrame (); frame.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE); frame.setSize (200,200); frame.setVisible(true); } }
  30. 30. Agora, vou adicionar algum componente a minha Janela, por exemplo, um botão.
  31. 31. public class SwingOla { public static void main(String[] args) { JFrame frame = new JFrame (); JButton bt = new JButton ("Diga Ola"); frame.add(bt); frame.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE); frame.setSize (200,200); frame.setVisible(true); } }
  32. 32. Este botão é realmente grande, além disso, como faço para adicionar alguma ação a ele ?
  33. 33. O Java, precisa saber como ele vai organizar todos os componente que você adiciona.
  34. 34. Ele possui politicas de layout, o padrão é o “border layout”, centralizado.
  35. 35. Ele divide a Janela, como abaixo. Quando adiciona um novo objeto, ele vai ser adicionado ao centro.
  36. 36. Estas linhas são então equivalentes. frame.add(bt, BorderLayout.CENTER); frame.add(bt);
  37. 37. frame.add(bt, BorderLayout.NORTH); frame.add(bt, BorderLayout.SOUTH); frame.add(bt, BorderLayout.EAST); frame.add(bt, BorderLayout.WEST);
  38. 38. Um outro layout ,mais simples, é o flowlayout, neste os objetos vão ocupando o espaço da esquerda para direita. Caso necessário, ocupam a linha seguinte
  39. 39. JFrame frame = new JFrame (); frame.setLayout(new FlowLayout()); frame.setSize (200,200); JButton bt = new JButton ("Diga Ola"); frame.add(bt); frame.add(new JButton ("Diga Adeus")); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.setVisible(true); Entendi, é como digitar texto no Word. Os componentes “fluem” de acordo com o tamanho da janela.
  40. 40. aContainer.setLayout(new GridLayout(2, 3)); O GridLayout divide o container em celulas invisiveis, que serão preenchidas com os componentes.
  41. 41. Com este layout, os componente preenchem o container da esquerda para direita. JFrame frame = new JFrame (); frame.setLayout(new GridLayout(2, 3)); frame.setSize (200,200); for (int i =1; i < 7; i ++) { frame.add(new JButton ("Botão:"+i)); } frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.setVisible(true);
  42. 42. Usando o componente Jpanel (nao visível), podemos gerar layouts mais complexos, agrupando controles. JFrame frame = new JFrame (); JPanel panNome = new JPanel (); panNome.setLayout(new FlowLayout()); panNome.add(new JLabel ("Nome:")); JTextField txtNome = new JTextField (15); panNome.add (txtNome); JPanel panEmail = new JPanel (); panEmail.add(new JLabel ("Email:")); JTextField txtEmail = new JTextField (15); panEmail.add (txtEmail); frame.setLayout(new FlowLayout()); frame.setSize (250,150); frame.add(panNome); frame.add(panEmail);
  43. 43. Ok. Estou começando entender os layout, mas agora quero colocar “ações” aquele meu aplicativo.
  44. 44. O Java suporta o coneito de eventos, onde os objetos são divididos fontes (sources) e receptores (listenners).
  45. 45. Um evento é produzido por ações do usuário, ou seja, resultado da interação do usuário com a interface, como movimento ou click de mouse, pressionar de uma tecla …
  46. 46. Existem diversos eventos, onde cada componente pode disparar determinados eventos. Veremos melhor sobre eles numa aula futura.
  47. 47. No teu caso, você precisa capturar o evento “action” do botão. Para isso precisamos de um objeto receptor para este tipo de evento.
  48. 48. Existe uma “interface java” para este receptor, identificada como ActionListener que possui a assinatura do método actionPerformed
  49. 49. Este receptor captura o evento e finaliza a aplicação. public class Finaliza implements ActionListener { @Override public void actionPerformed( ActionEvent arg0) { System.exit(1); } }
  50. 50. JFrame frame = new JFrame (); JButton bt = new JButton ("Diga Ola"); frame.setLayout(new FlowLayout()); frame.setSize (250,60); frame.add(bt); JButton btFechar = new JButton ("Diga Adeus"); btFechar.addActionListener(new Finaliza()); frame.add(btFechar); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.setVisible(true); Então, basta adicionar o receptor ao objeto que irá disparar o evento, neste caso o botão fechar.
  51. 51. btFechar.addActionListener(new ActionListener () { public void actionPerformed (ActionEvent ev){ System.exit(1); } }); Ao invés de declarar uma nova classe, podemos passar um “objeto anonimo” diretamente ao método addActionListener
  52. 52. ATIVIDADE: Faça o botão “Diga Ola” mostrar a seguinte mensagem “Ola”: JOptionPane.showMessageDialog( null, "Ola !!");
  53. 53. Entendido os conceitos basico, vou apresentar agora uma versão melhora para o mesmo aplicativo.
  54. 54. Usualmente, delegamos a um objeto do tipo Frame toda a tarefa de montar sua interface.
  55. 55. public class PrimeiroSwing extends JFrame { public PrimeiroSwing () { super(); setTitle("Primeiro Swing"); JButton bt = new JButton ("Diga Ola"); bt.addActionListener(new ActionListener () { public void actionPerformed (ActionEvent ev){ JOptionPane.showMessageDialog(null, "Ola !!"); } }); setLayout(new FlowLayout()); setSize (250,60); add(bt); JButton btFechar = new JButton ("Diga Adeus"); btFechar.addActionListener(new ActionListener () { public void actionPerformed (ActionEvent ev){ System.exit(1); } }); add(btFechar); setDefaultCloseOperation(EXIT_ON_CLOSE); } } Classe é responsável por montar toda a interface
  56. 56. public class SwingOla { public static void main(String[] args) { // TODO Auto-generated method stub PrimeiroSwing j = new PrimeiroSwing(); j.setVisible(true); } } Classe teste
  57. 57. Esta aula foi apenas uma apresentação ampla sobre como o Swing funciona.
  58. 58. Entendido como ele funciona, temos que ler e consultar referencias sobre os controles e eventos.
  59. 59. Atividade: Construa a mesma aplicação, só que usando os recursos do Netbeans. Iremos usá-lo para construir nossas interfaces daqui para frente.
  60. 60. Desenvolva sua própria calculadora de IMC
  61. 61. Atividade: Desenvolva sua própria calculadora de IMC (indice de massa corpórea) Para fazer o cálculo do IMC basta dividir seu peso em quilogramas pela altura ao quadrado (em metros). O número que será gerado deve ser comparado aos valores da tabela IMC para se saber se você está abaixo, em seu peso ideal ou acima do peso. Por exemplo, se você pesa 60Kg e mede 1,67m, você deve utilizar a seguinte fórmula para calcular o IMC: IMC = 60 ÷ 1,67² IMC = 60 ÷ 2,78 IMC = 21,5
  62. 62. Atividade: A interface pode ser baseada no seguinte aplicativo:

×