Joyce França Professora de Ciência da Computação - IFNMG

Linguagem de Programação

Interface Gráfica

Exemplo

• Fazer a tela

Exemplo

• Como ficou?

• Precisamos organizar os espaços dos componentes da interface gráfica! Layout Manager

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

LayoutManager

• Os quatro principais LayoutManager’s do Java Swing são:

▫ BorderLayout

▫ FlowLayout

▫ BoxLayout

▫ GridLayout

5

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

BorderLayout

7

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

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

FlowLayout

10

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

BoxLayout

12

panel.setLayout(new BoxLayout(panel,BoxLayout.PAGE_AXIS));

panel.setLayout(new BoxLayout(panel,BoxLayout.LINE_AXIS));

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

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

GridLayout

15

panel.setLayout(new GridLayout(0,2));

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

Construtor de GUI do Netbeans

• Passo a passo:

Passo 1: Criar novo projeto Java

Passo 2: Nomeie seu projeto

Passo 3: Clique no projeto com botão direito

Passo 4: Selecione Formulário Jframe Form

Passo 5: Nomeie sua tela

Passo 6: Visualize os componentes a direita

Passo 7: Arraste os componentes

Passo 8: Veja o código em Source

Exemplo

• Faça a seguinte tela usando o Construtor GUI do Netbeans

Exercício • Faça a seguinte tela usando o Construtor GUI do

Netbeans