Linguagem de Programação Interface Gráfica · 2017. 12. 8. · LayoutManager •Posicionamento e...
Transcript of Linguagem de Programação Interface Gráfica · 2017. 12. 8. · LayoutManager •Posicionamento e...
![Page 1: Linguagem de Programação Interface Gráfica · 2017. 12. 8. · LayoutManager •Posicionamento e tamanho dos componentes Java Swing são controlados por LayoutManager’s. •Um](https://reader034.fdocuments.net/reader034/viewer/2022052006/6019efa9e3038a39c56e36e4/html5/thumbnails/1.jpg)
Joyce França Professora de Ciência da Computação - IFNMG
Linguagem de Programação
Interface Gráfica
![Page 2: Linguagem de Programação Interface Gráfica · 2017. 12. 8. · LayoutManager •Posicionamento e tamanho dos componentes Java Swing são controlados por LayoutManager’s. •Um](https://reader034.fdocuments.net/reader034/viewer/2022052006/6019efa9e3038a39c56e36e4/html5/thumbnails/2.jpg)
Exemplo
• Fazer a tela
![Page 3: Linguagem de Programação Interface Gráfica · 2017. 12. 8. · LayoutManager •Posicionamento e tamanho dos componentes Java Swing são controlados por LayoutManager’s. •Um](https://reader034.fdocuments.net/reader034/viewer/2022052006/6019efa9e3038a39c56e36e4/html5/thumbnails/3.jpg)
Exemplo
• Como ficou?
• Precisamos organizar os espaços dos componentes da interface gráfica! Layout Manager
![Page 4: Linguagem de Programação Interface Gráfica · 2017. 12. 8. · LayoutManager •Posicionamento e tamanho dos componentes Java Swing são controlados por LayoutManager’s. •Um](https://reader034.fdocuments.net/reader034/viewer/2022052006/6019efa9e3038a39c56e36e4/html5/thumbnails/4.jpg)
LayoutManager
• Posicionamento e tamanho dos componentes Java Swing são controlados por LayoutManager’s.
• Um Layout Manager é um objeto Java associado a um componente Java Swing que na maioria dos casos é um componente de background como uma janela ou um painel. Um Layout Manager controla os componentes que estão dentro do componente ao qual ele está associado.
4
![Page 5: Linguagem de Programação Interface Gráfica · 2017. 12. 8. · LayoutManager •Posicionamento e tamanho dos componentes Java Swing são controlados por LayoutManager’s. •Um](https://reader034.fdocuments.net/reader034/viewer/2022052006/6019efa9e3038a39c56e36e4/html5/thumbnails/5.jpg)
LayoutManager
• Os quatro principais LayoutManager’s do Java Swing são:
▫ BorderLayout
▫ FlowLayout
▫ BoxLayout
▫ GridLayout
5
![Page 6: Linguagem de Programação Interface Gráfica · 2017. 12. 8. · LayoutManager •Posicionamento e tamanho dos componentes Java Swing são controlados por LayoutManager’s. •Um](https://reader034.fdocuments.net/reader034/viewer/2022052006/6019efa9e3038a39c56e36e4/html5/thumbnails/6.jpg)
BorderLayout
• Esse Layout Manager divide a área de um componente de background em cinco regiões (norte, sul, leste, oeste e centro). Somente um componente pode ser adicionado em cada região.
• Eventualmente, o BorderLayout altera o tamanho preferencial dos componentes para torná-los compatíveis com o tamanho das regiões.
• O BorderLayout é o Layout Manager padrão de umJFrame.
6
![Page 7: Linguagem de Programação Interface Gráfica · 2017. 12. 8. · LayoutManager •Posicionamento e tamanho dos componentes Java Swing são controlados por LayoutManager’s. •Um](https://reader034.fdocuments.net/reader034/viewer/2022052006/6019efa9e3038a39c56e36e4/html5/thumbnails/7.jpg)
BorderLayout
7
![Page 8: Linguagem de Programação Interface Gráfica · 2017. 12. 8. · LayoutManager •Posicionamento e tamanho dos componentes Java Swing são controlados por LayoutManager’s. •Um](https://reader034.fdocuments.net/reader034/viewer/2022052006/6019efa9e3038a39c56e36e4/html5/thumbnails/8.jpg)
Exemplo
JFrame janela=new JFrame("Janela"); janela.setSize(500,500);
janela.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); Panel p = new Panel(); p.setLayout(new BorderLayout()); //Norte //rotulo JLabel rotulo=new JLabel(); rotulo.setText("Bem vindo! Sistema Financeiro"); p.add(rotulo, BorderLayout.NORTH); //Oeste //rotulo JLabel rotulo3=new JLabel(); rotulo3.setText("Comentarios:"); p.add(rotulo3, BorderLayout.WEST); //centro //CAMPO DE TEXTo JTextArea texto=new JTextArea(5, 5); p.add(texto, BorderLayout.CENTER); p.add(new Button("SALVAR"), BorderLayout.SOUTH); janela.setContentPane(p); janela.setVisible(true);
![Page 9: Linguagem de Programação Interface Gráfica · 2017. 12. 8. · LayoutManager •Posicionamento e tamanho dos componentes Java Swing são controlados por LayoutManager’s. •Um](https://reader034.fdocuments.net/reader034/viewer/2022052006/6019efa9e3038a39c56e36e4/html5/thumbnails/9.jpg)
FlowLayout
• Esse Layout Manager arranja os componentes da esquerda para direita e quando o tamanho horizontal não é suficiente ele “pula” para a próxima “linha”.
• O FlowLayout não altera o tamanho preferencial dos componentes.
• O FlowLayout é o Layout Manager padrão de um JPanel.
9
![Page 10: Linguagem de Programação Interface Gráfica · 2017. 12. 8. · LayoutManager •Posicionamento e tamanho dos componentes Java Swing são controlados por LayoutManager’s. •Um](https://reader034.fdocuments.net/reader034/viewer/2022052006/6019efa9e3038a39c56e36e4/html5/thumbnails/10.jpg)
FlowLayout
10
![Page 11: Linguagem de Programação Interface Gráfica · 2017. 12. 8. · LayoutManager •Posicionamento e tamanho dos componentes Java Swing são controlados por LayoutManager’s. •Um](https://reader034.fdocuments.net/reader034/viewer/2022052006/6019efa9e3038a39c56e36e4/html5/thumbnails/11.jpg)
BoxLayout
• BoxLayout: Esse Layout Manager arranja os componentes de cima para baixo “quebrando linha” a cada componente adicionado.
• O BoxLayout não altera o tamanho preferencial dos componentes.
11
![Page 12: Linguagem de Programação Interface Gráfica · 2017. 12. 8. · LayoutManager •Posicionamento e tamanho dos componentes Java Swing são controlados por LayoutManager’s. •Um](https://reader034.fdocuments.net/reader034/viewer/2022052006/6019efa9e3038a39c56e36e4/html5/thumbnails/12.jpg)
BoxLayout
12
panel.setLayout(new BoxLayout(panel,BoxLayout.PAGE_AXIS));
panel.setLayout(new BoxLayout(panel,BoxLayout.LINE_AXIS));
![Page 13: Linguagem de Programação Interface Gráfica · 2017. 12. 8. · LayoutManager •Posicionamento e tamanho dos componentes Java Swing são controlados por LayoutManager’s. •Um](https://reader034.fdocuments.net/reader034/viewer/2022052006/6019efa9e3038a39c56e36e4/html5/thumbnails/13.jpg)
Exemplo
• Sem Layout
• Com BoxLayout
JFrame janela=new JFrame("Janela"); janela.setSize(500,500); janela.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); Panel p = new Panel(); p.setLayout(new BoxLayout(p,BoxLayout.X_AXIS)); JLabel rotulo=new JLabel(); rotulo.setText("Bem vindo! Sistema Financeiro"); p.add(rotulo); JLabel rotulo2=new JLabel(); rotulo2.setText("Usuario"); p.add(rotulo2); JTextField campo=new JTextField(10); p.add(campo); JLabel rotulo3=new JLabel(); rotulo3.setText("Comentarios:"); p.add(rotulo3); JTextArea texto=new JTextArea(5, 5); p.add(texto); JButton botao=new JButton("salvar"); p.add(botao);
![Page 14: Linguagem de Programação Interface Gráfica · 2017. 12. 8. · LayoutManager •Posicionamento e tamanho dos componentes Java Swing são controlados por LayoutManager’s. •Um](https://reader034.fdocuments.net/reader034/viewer/2022052006/6019efa9e3038a39c56e36e4/html5/thumbnails/14.jpg)
GridLayout
• Esse Layout Manager divide a área de um componente de background em células semelhantemente a uma tabela. As células possuem o mesmo tamanho.
14
![Page 15: Linguagem de Programação Interface Gráfica · 2017. 12. 8. · LayoutManager •Posicionamento e tamanho dos componentes Java Swing são controlados por LayoutManager’s. •Um](https://reader034.fdocuments.net/reader034/viewer/2022052006/6019efa9e3038a39c56e36e4/html5/thumbnails/15.jpg)
GridLayout
15
panel.setLayout(new GridLayout(0,2));
![Page 16: Linguagem de Programação Interface Gráfica · 2017. 12. 8. · LayoutManager •Posicionamento e tamanho dos componentes Java Swing são controlados por LayoutManager’s. •Um](https://reader034.fdocuments.net/reader034/viewer/2022052006/6019efa9e3038a39c56e36e4/html5/thumbnails/16.jpg)
Exemplo GridLayout
JFrame janela=new JFrame("Janela");
janela.setSize(500,500);
janela.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
Panel p = new Panel();
p.setLayout(new GridLayout(0,2));
JLabel rotulo=new JLabel();
rotulo.setText("Sistema Financeiro");
p.add(rotulo);
JLabel rotulo5=new JLabel();
rotulo5.setText("");
p.add(rotulo5);
JLabel rotulo2=new JLabel();
rotulo2.setText("Usuario");
p.add(rotulo2);
JTextField campo=new JTextField(10);
p.add(campo);
JLabel rotulo3=new JLabel();
rotulo3.setText("Comentarios:");
p.add(rotulo3);
JTextArea texto=new JTextArea(5, 5);
p.add(texto);
JLabel rotulo6=new JLabel();
rotulo6.setText("");
p.add(rotulo6);
JButton botao=new JButton("salvar");
p.add(botao);
janela.setContentPane(p);
janela.setVisible(true);
![Page 17: Linguagem de Programação Interface Gráfica · 2017. 12. 8. · LayoutManager •Posicionamento e tamanho dos componentes Java Swing são controlados por LayoutManager’s. •Um](https://reader034.fdocuments.net/reader034/viewer/2022052006/6019efa9e3038a39c56e36e4/html5/thumbnails/17.jpg)
Construtor de GUI do Netbeans
• Passo a passo:
![Page 18: Linguagem de Programação Interface Gráfica · 2017. 12. 8. · LayoutManager •Posicionamento e tamanho dos componentes Java Swing são controlados por LayoutManager’s. •Um](https://reader034.fdocuments.net/reader034/viewer/2022052006/6019efa9e3038a39c56e36e4/html5/thumbnails/18.jpg)
Passo 1: Criar novo projeto Java
![Page 19: Linguagem de Programação Interface Gráfica · 2017. 12. 8. · LayoutManager •Posicionamento e tamanho dos componentes Java Swing são controlados por LayoutManager’s. •Um](https://reader034.fdocuments.net/reader034/viewer/2022052006/6019efa9e3038a39c56e36e4/html5/thumbnails/19.jpg)
Passo 2: Nomeie seu projeto
![Page 20: Linguagem de Programação Interface Gráfica · 2017. 12. 8. · LayoutManager •Posicionamento e tamanho dos componentes Java Swing são controlados por LayoutManager’s. •Um](https://reader034.fdocuments.net/reader034/viewer/2022052006/6019efa9e3038a39c56e36e4/html5/thumbnails/20.jpg)
Passo 3: Clique no projeto com botão direito
![Page 21: Linguagem de Programação Interface Gráfica · 2017. 12. 8. · LayoutManager •Posicionamento e tamanho dos componentes Java Swing são controlados por LayoutManager’s. •Um](https://reader034.fdocuments.net/reader034/viewer/2022052006/6019efa9e3038a39c56e36e4/html5/thumbnails/21.jpg)
Passo 4: Selecione Formulário Jframe Form
![Page 22: Linguagem de Programação Interface Gráfica · 2017. 12. 8. · LayoutManager •Posicionamento e tamanho dos componentes Java Swing são controlados por LayoutManager’s. •Um](https://reader034.fdocuments.net/reader034/viewer/2022052006/6019efa9e3038a39c56e36e4/html5/thumbnails/22.jpg)
Passo 5: Nomeie sua tela
![Page 23: Linguagem de Programação Interface Gráfica · 2017. 12. 8. · LayoutManager •Posicionamento e tamanho dos componentes Java Swing são controlados por LayoutManager’s. •Um](https://reader034.fdocuments.net/reader034/viewer/2022052006/6019efa9e3038a39c56e36e4/html5/thumbnails/23.jpg)
Passo 6: Visualize os componentes a direita
![Page 24: Linguagem de Programação Interface Gráfica · 2017. 12. 8. · LayoutManager •Posicionamento e tamanho dos componentes Java Swing são controlados por LayoutManager’s. •Um](https://reader034.fdocuments.net/reader034/viewer/2022052006/6019efa9e3038a39c56e36e4/html5/thumbnails/24.jpg)
Passo 7: Arraste os componentes
![Page 25: Linguagem de Programação Interface Gráfica · 2017. 12. 8. · LayoutManager •Posicionamento e tamanho dos componentes Java Swing são controlados por LayoutManager’s. •Um](https://reader034.fdocuments.net/reader034/viewer/2022052006/6019efa9e3038a39c56e36e4/html5/thumbnails/25.jpg)
Passo 8: Veja o código em Source
![Page 26: Linguagem de Programação Interface Gráfica · 2017. 12. 8. · LayoutManager •Posicionamento e tamanho dos componentes Java Swing são controlados por LayoutManager’s. •Um](https://reader034.fdocuments.net/reader034/viewer/2022052006/6019efa9e3038a39c56e36e4/html5/thumbnails/26.jpg)
![Page 27: Linguagem de Programação Interface Gráfica · 2017. 12. 8. · LayoutManager •Posicionamento e tamanho dos componentes Java Swing são controlados por LayoutManager’s. •Um](https://reader034.fdocuments.net/reader034/viewer/2022052006/6019efa9e3038a39c56e36e4/html5/thumbnails/27.jpg)
Exemplo
• Faça a seguinte tela usando o Construtor GUI do Netbeans
![Page 28: Linguagem de Programação Interface Gráfica · 2017. 12. 8. · LayoutManager •Posicionamento e tamanho dos componentes Java Swing são controlados por LayoutManager’s. •Um](https://reader034.fdocuments.net/reader034/viewer/2022052006/6019efa9e3038a39c56e36e4/html5/thumbnails/28.jpg)
Exercício • Faça a seguinte tela usando o Construtor GUI do
Netbeans