Trabalhando com Layouts

1 Introduo
Em um Panel podemos inserir componentes para criarmos nossa janela. Para posicionar nossos componentes usaremos ferramenta poderosa do Java, LAYOUT. Os layouts organizam nossos componentes de maneira inteligente, poupando tempo de programao, j que o prprio layout calcula o tamanho e reorganizao dos componentes caso nossa janela aumente ou diminua de tamanho.

1.1 Border Layout

http://java.sun.com/docs/books/tutorial/uiswing/layout/border.html

Todos os Content Panes so inicializados com Border Layout. Um Content Pene um Panel que faz parte de um continer de componentes. O Border Layout divide nosso Panel em 5 regies, onde a regio central a mais importante. Quando colocamos um componente na regio central, esse ocupa todo o espao vazio do nosso Panel independente do valor que atribumos ao tamanho desse componente. Quem controla isso o layout e caso nossa janela mude de tamanho, o componente que est na regio central ser redimensionado.

1.2 Box Layout

http://java.sun.com/docs/books/tutorial/uiswing/layout/box.html

Esse layout organiza os componentes em uma coluna ou linha, depende de como estiver configurado.

1.3 Card Layout

http://java.sun.com/docs/books/tutorial/uiswing/layout/card.html

Esse layout nos ajuda a implementar uma rea que contem diferentes componentes a cada momento. Esse layout, por exemplo, pode ser controlado por uma ComboBox, onde o estado dessa combo determina qual ser o conjunto de componentes mostrados pelo Card Layout.

1.4 Flow Layout

http://java.sun.com/docs/books/tutorial/uiswing/layout/flow.html

Esse o layout padro do JPanel. Simplesmente ordena os componentes em uma linha e quando no h mais espao, uma nova linha criada.

1.5 GridBag Layout

http://java.sun.com/docs/books/tutorial/uiswing/layout/gridbag.html

Esse layout sofisticado e flexvel. Permite alinhar, distanciar, configurar mudanas de tamanho etc. um dos mais utilizados para organizao de componentes em janelas com grande quantidade e variedade de componentes.

1.6 Grid Layout

http://java.sun.com/docs/books/tutorial/uiswing/layout/grid.html

O Grid Layout simplesmente divide os componentes em linhas e colunas.

1.7 Spring Layout

http://java.sun.com/docs/books/tutorial/uiswing/layout/spring.html

um layout flexvel e desenvolvido para construtores de layout.

2 Configurando um layout
Podemos modificar o layout do componente usando o mtodo setLayout().
public class FramePrincipal extends JFrame { public FramePrincipal() { setDefaultCloseOperation(EXIT_ON_CLOSE); setSize(400, 300); setLocationRelativeTo(null); Panel panelPrincipal = new Panel(); panelPrincipal.setLayout(new GridBagLayout()); } }

3 Praticando o Border Layout

Quando criamos um JFrame, seu Content Pane j vem configurado com Border Layout. Caso precisarmos configurar um Border Layout em JPanel, basta chamar o mtodo setLayout() passando o objeto do layout.

public class FramePrincipal extends JFrame { public FramePrincipal() { setDefaultCloseOperation(EXIT_ON_CLOSE); setSize(400, 300); setLocationRelativeTo(null); Panel panelPrincipal = new Panel(); panelPrincipal.setLayout(new BorderLayout()); } }

Como mostrado na figura abaixo, podemos ver como o layout dividido em 5 regies, sendo que a regio central sempre ocupa o maior espao possvel.

Irei usar como exemplo uma janela com um JPanel e um JToolBar. O JToolBar interessante nesse caso por ter uma integrao interessante com o Border Layout. Se posicionarmos o toolbar em uma das laterais, poderemos clicar e arrastar o componente para fora ou para outra posio do layout. Como j vimos, sempre que quisermos inserir um componente em um continer usamos o mtodo add(), mas dependendo do layout utilizado, podemos passar parmetros para configurar o layout para cada componente individualmente. No caso do Border Layout podemos usar as constantes da classe BorderLayout: PAGE_START, LINE_START, PAGE_END, LINE_END e CENTER. Quando inserimos um componente usando o mtodo add() passando apenas o componente, ou seja, sem passar em qual posio queremos posiciona-lo, esse componente ser colocado na regio central.
public class FramePrincipal extends JFrame { public FramePrincipal() { setDefaultCloseOperation(EXIT_ON_CLOSE); setSize(400, 300); setLocationRelativeTo(null); Panel panelPrincipal = new Panel(); panelPrincipal.setBackground(Color.DARK_GRAY); add(panelPrincipal); JToolBar toolBar = new JToolBar(); toolBar.add(new JButton("Teste"));

add(toolBar, BorderLayout.PAGE_START); } }

Notem que o panelPrincipal inserido sem passar a posio, mas seria o mesmo do que chamar o mtodo add() passando BorderLayout.CENTER como segundo parmetro. No segundo caso, passamos PAGE_START como segundo parmetro, ou seja, posicionando o toolbar na parte superior da tela. Tente arrastar o toolbar para outra posio do layout ou para fora.

4 Praticando GridBag Layout

Esse layout tem muito mais funcionalidades do que o Border Layout e sua configurao no feita atravs de simples constantes, mas sim, utilizando um objeto da classe GridBagConstraints. Iremos utilizar esse layout no Panel que est inserido no centro de nossa janela, para isso temos que modificar seu layout para GridBagLayout, j que como vimos anteriormente, um Panel vem configurado como Floy Layout.
public class FramePrincipal extends JFrame { public FramePrincipal() { ... Panel panelPrincipal = new Panel(); panelPrincipal.setLayout(new GridBagLayout()); add(panelPrincipal); } }

Muito bom, agora que temos nosso layout configurado vamos fazer algumas experincias. Vamos primeiro adicionar alguns componentes para possibilitar o cadastro de clientes com nome, telefone e CPF.
public class FramePrincipal extends JFrame { private JTextField _fieldNome = null; private JTextField _fieldTelefone = null; private JTextField _fieldCPF = null; public FramePrincipal() { ... Panel panelPrincipal = new Panel(); panelPrincipal.setLayout(new GridBagLayout()); panelPrincipal.add(new JLabel("Nome:")); _fieldNome = new JTextField(15); panelPrincipal.add(_fieldNome); panelPrincipal.add(new JLabel("Telefone:")); _fieldTelefone = new JTextField(15); panelPrincipal.add(_fieldTelefone); panelPrincipal.add(new JLabel("CPF:")); _fieldCPF = new JTextField(15); panelPrincipal.add(_fieldCPF); add(panelPrincipal); } }

Hum... no ficou muito bom. Isso acontece porque quando inserimos componentes em um GridBagLayout sem configurar o layout para ele, os componentes so organizados em uma linha apenas e como no possvel desenhar todos os componentes em uma linha por falta de espao,

automaticamente os JTextFields so configurados para seu tamanho mnimo. Caso precisarmos modificar o tamanho mnimo para o componente iremos usar o mtodo setMinimumSize(). Se voc expandir a tela, os componentes sero desenhados em seu tamanho normal.

4.1 Posicionando os componentes (gridx / gridy)

Como j comentei anteriormente, para configurar o layout precisamos criar um objeto da classe GridBagConstraints. Essa classe possui vrios atributos que servem para configurar o layout, dois desses atributos so o gridx e gridy que usaremos para posicionar nossos componentes em linhas e colunas imaginrias como mostrado no diagrama abaixo.
(x,y) Eixo X de 0 n

0,0 0,1 0,2 0,3

1,0 1,1 1,2 1,3

2,0 2,1 2,2 2,3

3,0 3,1 3,2 3,3

Seguindo esse diagrama poderemos posicionar nossos componentes da seguinte forma: lable Nome na posio 0 , 0; field Nome na posio 1 , 0; label Telefone na posio 0 , 1 e assim por diante.
public class FramePrincipal extends JFrame { public FramePrincipal() { ... Panel panelPrincipal = new Panel(); panelPrincipal.setLayout(new GridBagLayout()); GridBagConstraints gbc = new GridBagConstraints(); gbc.gridx = 0; gbc.gridy = 0; panelPrincipal.add(new JLabel("Nome:"), gbc); _fieldNome = new JTextField(15); gbc.gridx = 1; gbc.gridy = 0; panelPrincipal.add(_fieldNome, gbc); gbc.gridx = 0; gbc.gridy = 1; panelPrincipal.add(new JLabel("Telefone:"), gbc); _fieldTelefone = new JTextField(15); gbc.gridx = 1; gbc.gridy = 1; panelPrincipal.add(_fieldTelefone, gbc); gbc.gridx = 0;

Eixo Y de 0

gbc.gridy = 2; panelPrincipal.add(new JLabel("CPF:"), gbc); _fieldCPF = new JTextField(15); gbc.gridx = 1; gbc.gridy = 2; panelPrincipal.add(_fieldCPF, gbc); add(panelPrincipal); } }

Como estamos utilizando o mesmo objeto GridBagConstraints para todos os posicionamentos, as configuraes que fizemos para os componentes anteriores continuam para o componente atual. Temos que prestar ateno, pois caso configuremos uma propriedade do layout no componente anterior e no queremos que essa seja usada no componente atual, teremos que reconfigur-la.

4.2 Distncia entre componentes (Insets)

Para configurar a distncia entre componentes usaremos a propriedade Insets. Com essa propriedade podemos configurar a distncia entre o componente e o limite do grid. bom ressaltar que no a distncia entre os componentes, e sim, a distncia entre o componente e o limite do grid. Como configuramos para cada componente, se configurarmos 10px do lado direito de um componente e 10px do lado esquerdo de um componente posicionado do lado direito do primeiro, iremos ter uma distncia total de 20px entre os dois componentes. Para usar a propriedade Insets, teremos que criar um objeto da classe Insets passando em seu construtor as quatro distncias seguindo a seqncia: superior, esquerda, inferior e direita. Observe o cdigo.

public class FramePrincipal extends JFrame { public FramePrincipal() { setDefaultCloseOperation(EXIT_ON_CLOSE); setSize(400, 300); setLocationRelativeTo(null); JToolBar toolBar = new JToolBar(); toolBar.add(new JButton("Teste")); add(toolBar, BorderLayout.PAGE_START); Panel panelPrincipal = new Panel(); panelPrincipal.setLayout(new GridBagLayout()); GridBagConstraints gbc = new GridBagConstraints(); gbc.gridx = 0; gbc.gridy = 0; gbc.insets = new Insets(10, 10, 10, 10); panelPrincipal.add(new JLabel("Nome:"), gbc); _fieldNome = new JTextField(15); gbc.gridx = 1; gbc.gridy = 0; gbc.insets = new Insets(10, 0, 10, 10); panelPrincipal.add(_fieldNome, gbc); gbc.gridx = 0; gbc.gridy = 1; gbc.insets = new Insets(0, 10, 10, 10); panelPrincipal.add(new JLabel("Telefone:"), gbc); _fieldTelefone = new JTextField(15); gbc.gridx = 1; gbc.gridy = 1; gbc.insets = new Insets(0, 0, 10, 10); panelPrincipal.add(_fieldTelefone, gbc); gbc.gridx = 0; gbc.gridy = 2; gbc.insets = new Insets(0, 10, 10, 10); panelPrincipal.add(new JLabel("CPF:"), gbc); _fieldCPF = new JTextField(15); gbc.gridx = 1; gbc.gridy = 2; gbc.insets = new Insets(0, 0, 10, 10); panelPrincipal.add(_fieldCPF, gbc); add(panelPrincipal); } }

4.3 Alinhando os lables (anchor)

Como os componentes tm tamanhos diferentes, os grids so ajustados automaticamente com a largura do maior componente da coluna e com a altura do maior componente na linha. A propriedade anchor usada quando o componente no ocupa todo o espao do grid e com ele podemos posicionar nosso componente em uma das seguintes posies: FIRST_LINE_START LINE_START LAST_LINE_START PAGE_START CENTER PAGE_END FIRST_LINE_END LINE_END LAST_LINE_END

Irei posicionar os labels no final da linha usando a constante LINE_END. Observe o cdigo.
public class FramePrincipal extends JFrame { public FramePrincipal() { ... Panel panelPrincipal = new Panel(); panelPrincipal.setLayout(new GridBagLayout()); GridBagConstraints gbc = new GridBagConstraints(); gbc.gridx = 0; gbc.gridy = 0; gbc.insets = new Insets(10, 10, 10, 10); gbc.anchor = GridBagConstraints.LINE_END; panelPrincipal.add(new JLabel("Nome:"), gbc); _fieldNome = new JTextField(15); gbc.gridx = 1;

gbc.gridy = 0; gbc.insets = new Insets(10, 0, 10, 10); gbc.anchor = GridBagConstraints.CENTER; panelPrincipal.add(_fieldNome, gbc); gbc.gridx = 0; gbc.gridy = 1; gbc.insets = new Insets(0, 10, 10, 10); gbc.anchor = GridBagConstraints.LINE_END; panelPrincipal.add(new JLabel("Telefone:"), gbc); _fieldTelefone = new JTextField(15); gbc.gridx = 1; gbc.gridy = 1; gbc.insets = new Insets(0, 0, 10, 10); gbc.anchor = GridBagConstraints.CENTER; panelPrincipal.add(_fieldTelefone, gbc); gbc.gridx = 0; gbc.gridy = 2; gbc.insets = new Insets(0, 10, 10, 10); gbc.anchor = GridBagConstraints.LINE_END; panelPrincipal.add(new JLabel("CPF:"), gbc); _fieldCPF = new JTextField(15); gbc.gridx = 1; gbc.gridy = 2; gbc.insets = new Insets(0, 0, 10, 10); gbc.anchor = GridBagConstraints.CENTER; panelPrincipal.add(_fieldCPF, gbc); add(panelPrincipal); } }

4.4 Inserindo dois botes

Supondo que precisaremos de dois botes, um para processar os dados e outro para limpar os campos, e queremos que esses botes fiquem

centralizados em relao a tela, iremos usar para isso um panel auxiliar configurado como Flow Layout que o padro. Iremos inicialmente posicionar nosso panel logo abaixo no label CPF, ou seja, na posio 0, 3. Usaremos ainda, dois outras propriedades: fill e gridwidth. Nesse novo panel, poderemos inserir os botes sem se preocupar com como iremos centraliz-los, j que o Flow Layout tem como caracterstica principal posicionar os componentes sempre no centro horizontal. Alm disso, para melhorar a visualizao da ocupao do panel, iremos modificar para cinza escuro o fundo do panel onde colocaremos os botes.

4.5 Forando o componente a ocupar todo o espao (fill)

Com a propriedade fill podemos forar um componente, menor do que a rea do grid, a ocupar todo o espao horizontal e/ou vertical. As constantes que podemos utilizar para isso so: HORIZONTAL, VERTICAL e BOTH. Vou adicionar um novo panel para colocar os botes e configura-lo para ocupar todo o espao horizontal do grid. Observe o cdigo.
public class FramePrincipal extends JFrame { public FramePrincipal() { ... Panel panelPrincipal = new Panel(); panelPrincipal.setLayout(new GridBagLayout()); GridBagConstraints gbc = new GridBagConstraints(); ... JPanel panelBotes = new JPanel(); panelBotes.setBackground(Color.DARK_GRAY); gbc.gridx = 0; gbc.gridy = 3; gbc.insets = new Insets(0, 10, 10, 10); gbc.anchor = GridBagConstraints.CENTER; gbc.fill = GridBagConstraints.HORIZONTAL; panelPrincipal.add(panelBotes, gbc); add(panelPrincipal); } }

Agora precisamos configurar para que o panel ocupe duas colunas e inserir os botes.

4.6 Ocupando linhas e colunas (gridwidth e gridheight)

Com a propriedade gridwidth (largura) podemos configurar quantas colunas, ou quantas clulas na horizontal, iremos usar para exibir o componente. De forma similar, a propriedade gridheight (altura) pode ser usada para configurar quantas linhas, ou quantas clulas na vertical, sero usadas para exibir nosso componente. No nosso caso, iremos usar a propriedade gridwidth com valor 2 para o panel, o que significa que o componente ir utilizar duas colunas. Observe o cdigo.
public class FramePrincipal extends JFrame { public FramePrincipal() { ... Panel panelPrincipal = new Panel(); panelPrincipal.setLayout(new GridBagLayout()); GridBagConstraints gbc = new GridBagConstraints(); ... JPanel panelBotes = new JPanel(); panelBotes.setBackground(Color.DARK_GRAY); gbc.gridx = 0; gbc.gridy = 3; gbc.insets = new Insets(0, 10, 10, 10); gbc.anchor = GridBagConstraints.CENTER; gbc.fill = GridBagConstraints.HORIZONTAL; gbc.gridwidth = 2; panelPrincipal.add(panelBotes, gbc);

add(panelPrincipal); } }

4.7 Outras propriedades

Existe ainda mais quatro propriedades: ipadx, ipady, weightx e weighty. As propriedades ipadx e ipady so usadas para aumentar a parte interna dos componentes, j as propriedades weightx e weighty so usadas para dimensionar o quanto de espao restante do panel certo componente ir ocupar. Seu valor varia entre 0 e 1, assim, se colocarmos 1 para weightx e weighty e fill igual a BOTH no panelBotes ele ir ocupar todo espao vazio do panelPrincipal. Observe na imagem.

Expanda a janela para ver o que acontece. :D

4.8 Inserindo os botes

Agora, para finalizar, podemos inserir dois botes no panelBotes. Observe e analise o cdigo completo.
import import import import import import import import import import import import java.awt.BorderLayout; java.awt.Color; java.awt.GridBagConstraints; java.awt.GridBagLayout; java.awt.Insets; java.awt.Panel; javax.swing.JButton; javax.swing.JFrame; javax.swing.JLabel; javax.swing.JPanel; javax.swing.JTextField; javax.swing.JToolBar;

public class FramePrincipal extends JFrame { private JTextField _fieldNome = null; private JTextField _fieldTelefone = null; private JTextField _fieldCPF = null; public FramePrincipal() { setDefaultCloseOperation(EXIT_ON_CLOSE); setSize(400, 300); setLocationRelativeTo(null); JToolBar toolBar = new JToolBar(); toolBar.add(new JButton("Teste")); add(toolBar, BorderLayout.PAGE_START); Panel panelPrincipal = new Panel(); panelPrincipal.setLayout(new GridBagLayout()); GridBagConstraints gbc = new GridBagConstraints(); gbc.gridx = 0; gbc.gridy = 0; gbc.insets = new Insets(10, 10, 10, 10); gbc.anchor = GridBagConstraints.LINE_END; panelPrincipal.add(new JLabel("Nome:"), gbc); _fieldNome = new JTextField(15); gbc.gridx = 1; gbc.gridy = 0; gbc.insets = new Insets(10, 0, 10, 10); gbc.anchor = GridBagConstraints.CENTER; panelPrincipal.add(_fieldNome, gbc); gbc.gridx = 0; gbc.gridy = 1; gbc.insets = new Insets(0, 10, 10, 10); gbc.anchor = GridBagConstraints.LINE_END; panelPrincipal.add(new JLabel("Telefone:"), gbc); _fieldTelefone = new JTextField(15);

gbc.gridx = 1; gbc.gridy = 1; gbc.insets = new Insets(0, 0, 10, 10); gbc.anchor = GridBagConstraints.CENTER; panelPrincipal.add(_fieldTelefone, gbc); gbc.gridx = 0; gbc.gridy = 2; gbc.insets = new Insets(0, 10, 10, 10); gbc.anchor = GridBagConstraints.LINE_END; panelPrincipal.add(new JLabel("CPF:"), gbc); _fieldCPF = new JTextField(15); gbc.gridx = 1; gbc.gridy = 2; gbc.insets = new Insets(0, 0, 10, 10); gbc.anchor = GridBagConstraints.CENTER; panelPrincipal.add(_fieldCPF, gbc); JPanel panelBotes = new JPanel(); panelBotes.add(new JButton("Processar")); panelBotes.add(new JButton("Limpar")); gbc.gridx = 0; gbc.gridy = 3; gbc.insets = new Insets(0, 10, 10, 10); gbc.anchor = GridBagConstraints.CENTER; gbc.fill = GridBagConstraints.HORIZONTAL; gbc.gridwidth = 2; panelPrincipal.add(panelBotes, gbc); add(panelPrincipal); } }

Maiores informaes na pgina: http://java.sun.com/docs/books/tutorial/uiswing/layout/gridbag.html