Na Área da grade, selecione o componente JLabel1 e especifique sua restrição de Âncora navegando para baixo e selecionando Linha base à direita na Folha de propriedades.

Selecione os componentes JLabel1 e JTextField1 na área da grade e clique no botão Procurar () na direita do campo de texto Suplementos. A caixa de diálogo Suplementos é exibida. Insira 5 no campo de texto Top: e clique em OK.

O formulário deve se parecer como mostrado abaixo.

Observação: O GridBag Customizer ajuda a adicionar, remover e alterar a posição dos componentes no layout. Para alterar as propriedades dos componentes no layout, como o plano de fundo ou texto, use a janela GUI Builder Design.

Para definir a exibição do texto para o JLabel1, faça o seguinte:

1. Clique em Fechar para sair da caixa de diálogo Personalizar layout.
2. Na vista Desenho, selecione o componente JLabel1 e pressione F2 (alternativamente, selecione Editar texto a partir do menu de contexto).
3. Exclua o texto selecionado e insira Skype:.
4. Pressione Enter.

Para remover o texto do componente JTextField1, complete as seguintes etapas:

1. Na vista Desenho, selecione o componente JTextField1 e pressione F2 (alternativamente, selecione Editar texto a partir do menu de contexto).
2. Exclua o texto selecionado e pressione Enter.

Reorganizando o layout

O GridBag Customizer pode economizar-lhe tempo e esforço ao reposicionar rapidamente os componentes do formulário como desejado.

Para alterar o layout da seção Phone e posicionar quatro campos de texto existentes de uma coluna para duas colunas com dois campos de texto, complete as seguintes etapas:

1. Clique com o botão direito do mouse no formulário e escolha Personalizar layout a partir do menu de contexto.
2. Na caixa de diálogo Personalizar layout, pressione Ctrl+clique nos quatro componentes JTextField para selecioná-los.
3. Arraste a borda esquerda dos campos de texto para a esquerda e solte-os para que os campos de texto ocupem apenas a segunda coluna de grade, em outras palavras, para que eles não mais ocupem a terceira e quarta coluna de grade.

   

   O GridBag Customizer pode redimensionar diversos componentes juntos, portanto, criando espaço para a segunda coluna de campos de texto.

4. Clique fora do formulário para cancelar a seleção dos campos de texto redimensionados.
5. Pressione Ctrl e clique para selecionar todos os Skype: e Home Phone: dos componentes JLabel e JTextField na seção Phone.
6. Posicione o cursor sobre a seleção e arraste-o para a direita dos dois campos superiores de texto.

   

   Observação: Antes de arrastar, assegure-se de que o cursor não mudou para uma seta de duas direções, caso contrário, você redimensionará a seleção.

   Após mover os componentes, o formulário deveria se parecer com o abaixo exibido.

   

   Para descartar as linhas 10 e 11 redundantes, clique com o botão direito do mouse nos cabeçalhos de coluna e escolha Excluir linha a partir do menu de contexto.

   A seção Phone tornou-se mais compacta.

   

Para corrigir o espaço da segunda coluna aqui, faça como segue:

1. Pressione Ctrl+Clique nos rótulos Skype: e Home Phone: para selecioná-los na Área da grade.
2. Clique no botão Procurar () à direita do campo de texto Insets.
   A caixa de diálogo Suplementos é exibida.
3. Insira 5 no campo de texto Left: e clique em OK.

Introduzindo subcontainers

O layout com base na grade algumas vezes introduz dependências desnecessárias que precisam ser solucionadas por meio de subcontainers.

Se você clicar no botão Testar layout na barra de ferramentas ( ) e testar o redimensionamento horizontal do layout atual, notará que espaço indesejado é criado em torno dos botões Procurar, OK e Cancelar.

Isso acontece porque a quarta coluna compreende os campos de texto e os botões (os componentes que deveriam crescer e os componentes que não deveriam crescer, respectivamente). É preciso modificar o layout para que o espaço adicional em torno do botão Procurar seja consumido pelos campos de texto Street e City:. O layout atual assegura que a borda direita dos campos de texto Street: e City: esteja na mesma posição vertical que a borda esquerda do campo de texto Home Phone:. Para tornar estas posições independentes, complete as seguintes etapas:

1. Pressione Ctrl+clique no campo de texto Street: e no botão Procurar na direita para selecioná-los.
2. Clique com o botão direito do mouse e escolha Colocar no contêiner a partir do menu de contexto.

   

   Depois que componentes tiverem sido incorporados em um subcontêiner, a borda entre o rótulo Home Phone: e o campo de texto não afeta mais a borda entre o campo de texto Street e o botão.

   Observação: A ação Incorporar no contêiner cria um novo subcontêiner nas células ocupadas pelos componentes selecionados. Ela move os componentes selecionados em um novo container recém incorporado, mas preserva suas posições relativas e outras restrições de layout.

Repita as duas etapas acima listadas para o campo de texto City: e para o botão Procurar à direita dele para incorporá-los em um subcontêiner como mostrado abaixo.

Agora você deseja corrigir o espaço indesejado em torno dos botões OK e Cancelar, como segue:

1. Clique em Fechar para cancelar a seleção do incorporado em componentes do subcontêiner, clique com o botão direito do mouse no formulário e escolha Personalizar layout a partir do menu de contexto.
2. Pressione Ctrl+Clique nos botões OK e Cancelar na parte inferior do formulário para selecioná-los.
3. Clique com o botão direito do mouse e escolha Colocar no contêiner a partir do menu de contexto.
   Um novo subcontainer é criado para os dois botões.

   

   Observação: Nenhum dos componentes no subcontêiner é redimensionável. Portanto, eles são colocados próximos um do outro no centro do contêiner, que é a ancoragem padrão.

Para alterar a ancoragem de todo o subcontainer, complete as seguintes etapas:

1. Assegure-se de que o subcontêiner com os botões OK e Cancelar estejam selecionados e clique no botão de seta () à direita da caixa de combinação Ancorar.
2. Role a tela para baixo e escolha Fim da linha na lista.

   

O subcontainer ocupa todas as células na linha inferior.

Navegando entre containers

Para adicionar um componente a um subcontêiner (por exemplo, um botão Ajuda para os botões OK e Cancelar existentes), é preciso alternar do contêiner principal para o subcontêiner antes de editar seu último layout.

Complete as etapas abaixo listadas para adicionar um botão em um subcontainer existente:

1. Clique no subcontêiner com os botões OK e Cancelar para selecioná-lo.
2. Clique com o botão direito do mouse no contêiner para exibir o menu de contexto e escolha Desenhar este contêiner.

   

3. Clique com o botão direito do mouse no cabeçalho da segunda coluna e escolha Inserir coluna após a partir do menu de contexto.
   Uma célula vazia para o novo botão é exibida.

   

4. Clique com o botão direito do mouse na célula recém-criada e escolha Adicionar componente > Controles do Swing > Botão a partir do menu de contexto.
   Um novo botão jButton1 é adicionado.

   

5. Clique no botão Âncora relativa à linha base () no Personalizador de propriedades para alinhar o novo botão com os dois existentes na linha.
6. Para verificar a aparência do contêiner principal, clique com o botão direito do mouse no subcontêiner desenhado e escolha Desenhar contêiner principal a partir do menu de contexto.

   

   Observação: O menu de contexto não é exibido se você clicar com o botão direito do mouse nos botões.

O desenho do layout foi concluído.
Falta uma alteração final não relativa ao layout do container.
Para renomear o botão, complete as seguintes etapas:

1. Clique em Fechar para sair da caixa de diálogo Personalizar layout.
2. Na vista Desenho, selecione o componente JButton1 e pressione F2 (alternativamente, selecione Editar texto a partir do menu de contexto).
3. Exclua o texto selecionado e insira Ajuda.
4. Pressione Enter.

   

Resumo

Neste tutorial, você modificou um formulário existente ao adicionar novos componentes, ao inserir linhas, etc. Ao desenhar o layout, você aprendeu como usar os recursos avançados do GridBag Customizer para reorganizar o layout do formulário.

Vá para Projetando um formulário Java básico usando o GridBag Customizer

início

Consulte também

Você agora completou o tutorial Projetando um formulário Java avançado usando o GridBag Customizer. Para obter informações sobre como adicionar funcionalidade às GUIs que você criar, consulte:

• Introdução à construção GUI
• Manipulando imagens em um aplicativo de GUI
• Perguntas frequentes do Construtor de GUI
• Trilha de aprendizado dos aplicativos Java GUI

início