GARANTIR DESCONTO

Fórum Tudo sobre o GridBagLayout. #566952

09/04/2009

0

Java

Por [url=http://vitorpamplona.com]Vitor Pamplona[/url] [b]Tudo sobre o GridBagLayout[/b]. Trabalhando com Swing você, frequentemente, criará telas de propriedades. Que são aquelas telas tradicionais com um label e um componente para edição. Um belo exemplo de uma tela como essa é a tela de cadastro de cliente, que possui vários campos, criando uma dificuldade a mais na hora da confecção da tela. O GridBagLayout é um gerenciador de layout para swing muito flexível. Similar ao GridLayout, o GridBagLayout possui uma matriz de células, porém cada coluna ou linha da matriz pode ter um tamanho e comportamento diferente, assim como cada célula também possuirá as suas variações. O layout é tão flexível que ao inluir um componente em determinada célula, você até pode definir que o mesmo componente ocupará várias células. [b] GridBagConstraints[/b] Este layout tem como base a utilização de um GridBagConstraints [b]para cada componente inserido[/b]. É este objeto que proporcionará a liberdade que queremos com o layout. A GridBagConstraints é uma classe que não possui métodos, ela servirá simplesmente para armazenar as informações para cada componente adicionado. Vamos dar uma olhada nas propriedades da classe: [b][i]anchor[/i][/b]: Essa propriedade é utilizada somente quando o tamanho do componente é menor que a área que lhe foi concedida. Normalmente, queremos que nosso componente ocupe toda a área disponível, mas em casos especiais, não podemos redimensionar os componentes. Sendo assim, o layout precisa saber em que posição da célula deixará o componente. Os valores para esse campo são de dois tipos: Absolutos (CENTER, NORTH, NORTHEAST, EAST, SOUTHEAST, SOUTH, SOUTHWEST, WEST, e NORTHWEST) e Relativos (PAGE_START, PAGE_END, LINE_START, LINE_END, FIRST_LINE_START, FIRST_LINE_END, LAST_LINE_START and LAST_LINE_END). O valor padrão é CENTER. [b][i]fill[/i][/b]: Determina como redimensionar o componente. Valores possíveis para esta propriedade são: NONE: Não redimensiona o componente HORIZONTAL: Redimensiona horizontalmente, fazendo com que o mesmo ocupe toda a área horizontal na célula VERTICAL: Redimensiona verticalmente, fazendo com que o mesmo ocupe toda a área vertical na célula BOTH: Redimensiona para ambas as direções. Valor padrão é NONE [b][i]gridx e gridy[/i][/b]: Especificam a posição X,Y para adicionar o componente. Não é necessário alterar seus valores, pois seu valor padrão é a constante RELATIVE e portanto o layout adicionará após o último componente que foi colocado. - gridx: Permite especificar qual a posição absoluta horizontalmente que o componente será adicionado. - gridy: Permite especificar qual a posição absoluta verticalmente que o componente será adicionado. [b][i]gridheight e gridwidth[/i][/b] Especificam o tamanho do componente baseado em [b]células[/b]. É com essa propriedade que você indicará que um componente seu ocupará duas células, ou ocupurá tantas quanto forem necessárias para ir até o final da tela. [b]Lembrem-se é células e não pixels[/b] Nestes valores podem ser utilizadas duas constantes: REMAINDER e RELATIVE. REMAINER fará com que o componente se estique até a última célula. Já o RELATIVE fará com que o componente ocupe todas as casas com excessão da última. - gridheight: Especifica o número de células que o componente ocupará verticalmente. Valor padrão é 1. - gridwidth: Especifica o número de células que o componente ocupará horizontalmente. Valor padrão é 1. [i]insets[/i]: Indica as distãncias entre os componentes do lauout. Um Insets possui valores para as 4 direções, cima, baixo, direita e esquerda. Permitindo com isso muita flexibilidade no gerenciador. Valor padrão é new Insets(0, 0, 0, 0) [b][i]weight[/i][/b]: Essas propriedades especificam um percentual de crescimento da [b]célula, não do componente[/b], quando a mesma precisa ser redimensionada. É dito isso, pois se o componente não pode se redimensionar, pois a propriedade fill do constraint afirma isso, o componente não vai sofrer as alterações, mas a célula irá aumentar. Com este layout é possível informar que uma célula redimensionará 75% e o outra 25%, portanto o primeiro componente receberá 3 vezes mais tamanho do que o segundo. O valor padrão é 0 e os valores percentuais são dados em casas decimais, por exemplo: 0.03 é igual a 3%, 1.00 é igual a 100% e por aí vai. - weightx: Peso em x. Especifica um peso no redimensionamento. Este peso será utilizado para um cálculo que o layout faz para determinar quais as células irão redimensionar horizontalmente, quais não irão, e quais aumentarão mais que os outros. - weighty: Peso em y. Especifica um peso no redimensionamento. Este peso será utilizado para um cálculo que o layout faz para determinar quais as células irão redimensionar verticalmente, quais não irão, e quais aumentarão mais que os outros. [b][i]ipadx e ipady[/i][/b] Determina um adicional nas bordas internas do componenete. Essa propriedade modifica o tamanho mínimo de cada componente. O tamanho mínimo será o ipad + o valor mínimo do componente. - ipadx: Valor para ser adicionado horizontalmente. - ipady: Valor para ser adicionado verticalmente. [b]Exemplos.[/b] Como primeiro exemplo iremos utilizar todos os atributos como default. Relembrando os atributos default: [i]anchor[/i]: CENTER [i]fill[/i]: NONE [i]gridx[/i]: RELATIVE [i]gridy[/i]: RELATIVE [i]gridheight[/i]: 1 [i]gridwidth[/i]: 1 [i]insets[/i]: Insets(0, 0, 0, 0) [i]weightx[/i]: 0 [i]weighty[/i]: 0 [i]ipadx[/i]: 0 [i]ipady[/i]: 0 Portanto ele ficará assim: 
import java.awt.*;
import javax.swing.*;

public class Exemplo1 extends JFrame {
    public Exemplo1() {
        super("Exemplo1");
        this.setDefaultCloseOperation(EXIT_ON_CLOSE);
        
        Container c = this.getContentPane();
   
        GridBagConstraints cons = new GridBagConstraints();
        GridBagLayout layout = new GridBagLayout();
        c.setLayout(layout);
       
        c.add(new JButton("Esquerda"), cons);
        c.add(new JButton("Direita"), cons);
            
        this.setSize(600,600);       
    }
    
    public static void main(String[] args ) {
        Exemplo1 exe = new Exemplo1();
        exe.show();      
    }
}
Neste exemplo1 criamos um layout com as células com o mesmo tamanho dos botões. Portanto nenhuma das propriedades invocada, pois o tamanho das células é igual ao tamanho dos componentes. Sendo assim, nenhum ajuste precisa ser feito pelo layout. [b]Analizando o ipad[/b] Vamos fazer um teste de ipadx e ipady. Coloque esses valores após o [i]setLayout[/i] e execute o programa. 
cons.ipadx = 50;
cons.ipady = 200;
Os dois botões ficarão com o tamanho de width = 141 e height= 225. Sem isto o tamanho dele era width = 91, height = 25 Retire a linha adicionada para seguirmos para o próximo teste. [b]Analizando o insets[/b] Adicione a seguinte linha depois do [i]setLayout[/i]; 
cons.insets = new Insets(10,10,10,10);
Isto fará com que cada componente adicionado crie um espaço de 10 pixels para cada uma das direções: acima, abaixo, direita e esquerda. Portanto a distância entre o botão da direita e o da esquerda é 20 pixels. Retire a linha adicionada para seguirmos para o próximo teste. [b]Analizando o weight[/b] Se você adicionar as linhas abaixo depois do [i]setLayout[/i], irá alterar o tamanho das células, como foi explicado anteriormente. 
cons.weightx = 1;
cons.weighty = 1;
Esta alteração fará com que o GridBagLayout ocupe todo o frame, e aumente também o tamanho das células. Portanto agora, o tamanho das células é 300 de largura x 600 de altura. Agora podemos perceber que os dois botões ficam centralizados nas suas células, porque estão ancorados no centro. Como o fill deles é NONE, eles não se redimensionáram. Deixe esta linha para continuarmos os testes. [b]Analizando o anchor[/b] Adicione a seguinte linha após o [i]setLayout[/i]; 
cons.anchor = GridBagConstraints.SOUTHEAST;
Isto fará com que os botões permaneçam no sudeste de suas células. Portanto, aparecerão no canto inferior direito. Faça testes com as outras constantes, lembrando que as relativas são mais complexas de analisar. [b]Analizando o fill[/b] Vamos fazer nosso botão preencher toda a tela e se tornar redimensionável. 
cons.fill = GridBagConstraints.BOTH;
Irão aparecer como se estivessem em um BorderLayout. Só que ao redimensionar, ambos estarão recebendo a mesma quantidade de pixels para aumentar de tamanho. Assim, eles possuirão sempre as mesmas alturas e larguras. Altere os valores do weightx e weighty para cada um dos botões. Será interessante ver como funciona o cálculo do redimensionamento De uma olhada neste exemplo: 
import java.awt.*;
import javax.swing.*;

public class Exemplo1 extends JFrame {
    public Exemplo1() {
        super("Exemplo1");
        this.setDefaultCloseOperation(EXIT_ON_CLOSE);
        
        Container c = this.getContentPane();
   
        GridBagConstraints cons = new GridBagConstraints();
        GridBagLayout layout = new GridBagLayout();
        c.setLayout(layout);
       
        cons.fill = GridBagConstraints.BOTH;
        cons.weighty = 1;
        
        cons.weightx = 0.75;
        c.add(new JButton("Esquerda"), cons);
        cons.weightx = 0.25;
        c.add(new JButton("Direita"), cons);
            
        this.setSize(600,600);       
    }
    
    public static void main(String[] args ) {
        Exemplo1 exe = new Exemplo1();
        exe.show();      
    }
}
Agora o botão esquerda ocupará sempre 75% da tela, enquanto o botão da direita, sempre 25% [b]Analizando gridx e gridy[/b] De uma olhada neste código: 
import java.awt.*;
import javax.swing.*;

public class Exemplo1 extends JFrame {
    public Exemplo1() {
        super("Exemplo1");
        this.setDefaultCloseOperation(EXIT_ON_CLOSE);
        
        Container c = this.getContentPane();
   
        GridBagConstraints cons = new GridBagConstraints();
        GridBagLayout layout = new GridBagLayout();
        c.setLayout(layout);
       
        cons.fill = GridBagConstraints.BOTH;
        cons.gridy = 0;
        cons.gridx = 0;
    
        c.add(new JButton("Esquerda"), cons);
        cons.gridx = 2;
        c.add(new JButton("Direita"), cons);

        cons.gridx = 0;
        cons.gridy = 1;
        c.add(new JButton("Esquerda"), cons);
        
        cons.gridx = 1;
        c.add(new JButton("Meio"), cons);
        
        cons.gridx = 2;
        c.add(new JButton("Direita"), cons);        
        
        this.setSize(600,600);       
    }
    
    public static void main(String[] args ) {
        Exemplo1 exe = new Exemplo1();
        exe.show();      
    }
}
Este código está setando as posições x e y para tornar mais maleável a criação das telas. [b]Analizando gridwidth e gridheight[/b] Baseado no código do exemplo anterior criei este outro. Com apenas a mudança no primeiro botão, codifiquei o gridwidth para ter o tamanho de duas células. E o layout assim entendeu. 
import java.awt.*;
import javax.swing.*;

public class Exemplo1 extends JFrame {
    public Exemplo1() {
        super("Exemplo1");
        this.setDefaultCloseOperation(EXIT_ON_CLOSE);
        
        Container c = this.getContentPane();
   
        GridBagConstraints cons = new GridBagConstraints();
        GridBagLayout layout = new GridBagLayout();
        c.setLayout(layout);
       
        cons.fill = GridBagConstraints.BOTH;
        cons.gridy = 0;
        cons.gridx = 0;
        cons.gridwidth = 2;
        c.add(new JButton("Esquerda"), cons);
        cons.gridwidth = 1;
        cons.gridx = 2;
        c.add(new JButton("Direita"), cons);

        cons.gridx = 0;
        cons.gridy = 1;
        c.add(new JButton("Esquerda"), cons);
        
        cons.gridx = 1;
        c.add(new JButton("Meio"), cons);
        
        cons.gridx = 2;
        c.add(new JButton("Direita"), cons);        
        
        this.setSize(600,600);       
    }
    
    public static void main(String[] args ) {
        Exemplo1 exe = new Exemplo1();
        exe.show();      
    }
}
Por aqui termina os nossos testes com esse layout. [b]Produtividade[/b] Como é possível ser produtivo ao desenhar uma tela dessas a mão? Simples, estipule padrões nas telas. Com esses padrões criaremos um componente específico para a nossa aplicação, tornando a fabricação das telas muito mais rápida. Digamos que a nossa aplicação tem como padrão colocar os Labels com alinhamento a esquerda, os componentes de edição irão ocupar todo o espaço disponível até o final da tela. Caso houverem duas colunas de componentes de edição na tela o espaço horizontal será dividido entre os dois componentes. Ao ser redimensionada, somente os componentes de edição poderão aumentar o tamanho. Os outros ficarão imóveis. Bom, agora é só apelar para Orientação a Objeto e detonar um componente para criação rápida de telas. Segue um exemplo abaixo: 
import java.awt.*;
import javax.swing.*;

public class Exemplo2 extends JFrame {

    public Exemplo2() {
        super("Exemplo2");
        this.setDefaultCloseOperation(EXIT_ON_CLOSE);
        
        this.getContentPane().setLayout(new GridBagLayout());
       
        add("Código", new JTextField(), "Nascimento", new JTextField());
        add("Nome", new JTextField());
        add("Nome Pai", new JTextField());
        add("Nome Mãe", new JTextField());
        add("RG", new JTextField(), "CPF", new JTextField());
        add("Endereços", new JScrollPane(new JTable()));
        
        this.setSize(600,600);       
    }

    /**
     * Adiciona um label e um componente horizontalmente
     * @param label String que irá aparecer no label
     * @param componente Componente de edição
     */
    public void add(String label, JComponent componente ) {
        GridBagConstraints cons = new GridBagConstraints();
        cons.fill = GridBagConstraints.NONE;
        cons.anchor = GridBagConstraints.NORTHWEST;
        cons.insets = new Insets(4,4,4,4);

        cons.weightx = 0;
        cons.gridwidth = 1;
        this.getContentPane().add(new JLabel(label), cons);
        
        cons.fill = GridBagConstraints.BOTH;
        cons.weightx = 1;
        cons.gridwidth = GridBagConstraints.REMAINDER;
        this.getContentPane().add(componente, cons);
    }
    

    /**
     * Adiciona um label e um componente horizontalmente. O componente ocupará todo o reto da tela
     * @param label String que irá aparecer no label
     * @param componente Componente de edição
     */
    public void add(String label, JScrollPane componente ) {
        GridBagConstraints cons = new GridBagConstraints();
        cons.fill = GridBagConstraints.NONE;
        cons.anchor = GridBagConstraints.NORTHWEST;
        cons.insets = new Insets(4,4,4,4);
        cons.weighty = 1;
        cons.gridheight = GridBagConstraints.REMAINDER;
        
        cons.weightx = 0;
        cons.gridwidth = 1;
        this.getContentPane().add(new JLabel(label), cons);
        
        cons.fill = GridBagConstraints.BOTH;
        cons.weightx = 1;
        cons.gridwidth = GridBagConstraints.REMAINDER;
        this.getContentPane().add(componente, cons);
    }    
    
    /**
     * Adiciona um label, um componente de edição, mais um label e outro componente de edição. Todos 
     * na mesma linha
     * @param label Label 1 
     * @param componente Componente de edição
     * @param label2 Label 2
     * @param componente2 Componente de edição 2
     */
    public void add(String label, JComponent componente, String label2, JComponent componente2) {
        GridBagConstraints cons = new GridBagConstraints();
        cons.fill = GridBagConstraints.BOTH;
        cons.insets = new Insets(4,4,4,4);

        cons.fill = GridBagConstraints.NONE;
        cons.anchor = GridBagConstraints.NORTHWEST;
        cons.weightx = 0;
        cons.gridwidth = 1;
        this.getContentPane().add(new JLabel(label), cons);
        
        cons.weightx = 1;
        cons.gridwidth = 1;
        cons.fill = GridBagConstraints.BOTH;
        this.getContentPane().add(componente, cons);

        cons.fill = GridBagConstraints.NONE;
        cons.weightx = 0;
        cons.gridwidth = 1;
        this.getContentPane().add(new JLabel(label2), cons);
        
        cons.weightx = 1;
        cons.fill = GridBagConstraints.BOTH;
        cons.gridwidth = GridBagConstraints.REMAINDER;
        this.getContentPane().add(componente2, cons);
    }    
    
    public static void main(String[] args ) {
        Exemplo2 exe = new Exemplo2();
        exe.show();      
    }
}
Valeu pessoal, espero que vocês tenham gostado. [url=http://vitorpamplona.com]Vitor Pamplona[/url] está cursando o 4º ano de Ciências da Computação da Universidade Regional de Blumenau. É entusiasta do Prevayler e XP, mas participa profissionalmente de um projeto envolvendo Swing, J2EE e Hibernate. É um dos administradores do portal sobre Java e Software Livre JavaFree.com.br
Vitor Pamplona

Vitor Pamplona

Responder

Posts

09/04/2009

Cu_ringa

Esse tutorial, caiu dos céus para mim. Valeu cara, ele me ajudou bastante, era a luz q eu precisava.
Responder

Gostei + 0

09/04/2009

Kleberdeoliveira

Um dos mais didáticos e objetivos tutoriais sobre java que já vi. Parabéns e obrigado
Responder

Gostei + 0

09/04/2009

Vitor Pamplona

Só para complementar. O tamanho original dos componentes é de acordo com as propriedades: preferredSize, minimumSize, e maximumSize :) []s
Responder

Gostei + 0

09/04/2009

Hicans

na linha q explica sobre o "insets:", layout estah escrito lauout... soh pra ter tudo certinho :!:
Responder

Gostei + 0

09/04/2009

Skyshining

Direto ao assunto com didática. :evil:
Responder

Gostei + 0

09/04/2009

Andre_guitar7

Tenho uma dúvida que não achei na documentação da Sun... E se eu quiser mudar algum conteúdo de uma célula? Tipo... tirar tudo que tem numa célula pra colocar outro conteúdo, num action??? :roll:
Responder

Gostei + 0

09/04/2009

Vitor Pamplona

[quote="andre_guitar7"]Tenho uma dúvida que não achei na documentação da Sun... E se eu quiser mudar algum conteúdo de uma célula? Tipo... tirar tudo que tem numa célula pra colocar outro conteúdo, num action??? :roll:
Você tem que remover e readicionar os componentes. Geralmente isso se torna mais fácil com um Panel especial para o local dessa troca. Tendo ele, você faz panel.removeAll() e adiciona os novos componentes :D
Responder

Gostei + 0

09/04/2009

Vitor Pamplona

Eu usei recentemente o SpringLayout em um projeto. Impressionante como ele simplifica a sua vida. Tem um grande poder como o GridBag, mas é mais simples e mais direto. Vale a pena conhecerem. :!:
Responder

Gostei + 0

09/04/2009

Andre_guitar7

[quote="vfpamp"][quote="andre_guitar7"]Tenho uma dúvida que não achei na documentação da Sun... E se eu quiser mudar algum conteúdo de uma célula? Tipo... tirar tudo que tem numa célula pra colocar outro conteúdo, num action??? :roll:
Você tem que remover e readicionar os componentes. Geralmente isso se torna mais fácil com um Panel especial para o local dessa troca. Tendo ele, você faz panel.removeAll() e adiciona os novos componentes :D
Um JPainel para cada célula?
Responder

Gostei + 0

09/04/2009

Andre_guitar7

Adicionei um painel com layout GridBagConstraints dentro de um frame com layout GridBagConstraints... resolveu
Responder

Gostei + 0

09/04/2009

Klarq

Valew pelo tutorial!!! :idea: :idea: :idea:
Responder

Gostei + 0

09/04/2009

Rodrigo Cansian

Dae Vitor, conforme conversei com você, to postando a dúvida aqui pra turma também.. Estou usando o GridBagLayout (ai meu deus) e quando mando inserir uma JTable usando os métodos do seu tutorial, ele insere em apenas uma linha, sendo que preciso de pelo menos umas 6. Valeu
Responder

Gostei + 0

09/04/2009

Vitor Pamplona

TADÃÃÃÃÃÃÃÃ!!! :P 
    /**
     * Adiciona um label e um componente horizontalmente com uma altura predefinida
     * @param label String que irá aparecer no label
     * @param componente Componente de edição
     */
    public void add(String label, JComponent componente, int altura ) {
        GridBagConstraints cons = new GridBagConstraints();
        cons.fill = GridBagConstraints.NONE;
        cons.anchor = GridBagConstraints.NORTHWEST;
        cons.insets = new Insets(4,4,4,4);

        cons.weightx = 0;
        cons.gridwidth = 1;
        cons.gridheight = altura;
        this.getContentPane().add(new JLabel(label), cons);
       
        cons.fill = GridBagConstraints.BOTH;
        cons.weightx = 1;
        cons.gridwidth = GridBagConstraints.REMAINDER;
        this.getContentPane().add(componente, cons);
    }
Da para reduzir e muuuito o código desses métodos hein :D
Responder

Gostei + 0

09/04/2009

Rodrigo Cansian

Arghhhh.. eu tinha feito isso, só que se vc nao inicializar o componente... Pior que to gostando de usar ele layout, é muito bom mexer com ele ;) Valeu Vitor
Responder

Gostei + 0

09/04/2009

Flávio Bianchi

GridBag é show de bola mesmo. Estamos usando ele em um trabalho de faculdade e um dos caras do meu grupo acabou virando uma máquina de construir telas...hahaha
Responder

Gostei + 0

Mais tópicos

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar