Criando um Form Java Básico usando o GridBag Customizer

Este tutorial é a primeira série de duas partes que demonstra como criar um form Java simples usando as funcionalidades básicas do GridBag Customizer do NetBeans IDE.
Esta série tem a intenção de ser um guia para mostrar como é possível criar o layout de seus componentes da GUI sem escrever manualmente seu código de layout e, a seguir, executar alterações adicionais em um form existente para implementar um layout alvo específico que seja necessário ao seu projeto.

Cada documento nesta série aborda conjuntos específicos de funcionalidades.

Conteúdo

O conteúdo desta página se aplica ao NetBeans IDE 7.1 e à versão mais recente

Para acompanhar este tutorial, são necessários os recursos e softwares listados abaixo.

Software ou Recurso Versão Necessária
NetBeans IDE 7.1 e posterior
JDK (Java Development Kit) Versão 6, 7 ou 8
gbcustomizer-basic-tutorial.zip Um arquivo compactado com o projeto de demonstração contendo os layouts inicial e de destino do tutorial.

Observações:

  • Você pode fazer download do projeto que é usado como um ponto inicial para esta série como um arquivo compactado .zip.
  • Este tutorial concentra-se na criação do layout somente para o contêiner. A adição de funcionalidade na GUI está fora de seu escopo.

Abrindo o Projeto de Exemplo

  1. Faça download e descompacte o projeto gbcustomizer-basic-tutorial.zip em qualquer lugar no computador.
  2. Na guia Projetos, selecione Arquivo > Abrir Projeto, navegue para o projeto gbcustomizer-basic-tutorial que você extraiu na etapa anterior e clique em Abrir Projeto. A pasta do projeto pode estar contida em uma pasta também chamada gbcustomizer-basic-tutorial.
  3. Na caixa de diálogo Problema de Referência, clique em Resolver. O IDE faz download automaticamente das bibliotecas JUnit e JUnit4. Siga as instruções do instalador do NetBeans IDE para instalar os plug-ins necessários. Quando a instalação for concluída, clique em Finalizar.
  4. Expanda Pacotes de Código-fonte > Tutorial e clique duas vezes em ContactsAdvancedInitial.java.
    O form de exemplo é aberto na view Design do GUI Builder.

    Form de amostra inicial aberto

Visão Geral do GridBag Customizer

O GridBag Layout Customizer é um dos gerenciadores de layout mais flexível e complexo que a plataforma Java fornece. O Personalizador coloca os componentes em uma grade de linhas e colunas, permitindo que componentes especificados se expandam para múltiplas linhas ou colunas. Nem todas as linhas precisam necessariamente ter a mesma altura. De forma similar, nem todas as colunas precisam necessariamente ter a mesma largura. Essencialmente, o GridBagLayout coloca os componentes em retângulos (células) em uma grade e, a seguir, usa os tamanhos preferenciais dos componentes para determinar o tamanho das células.

Para exibir o GridBag Customizer, siga as etapas abaixo:

  1. Na view Design, selecione o form JFrame.
  2. Clique com o botão direito do mouse no form e escolha Personalizar Layout a partir do menu de contexto.
    A caixa de diálogo Personalizar Layout é aberta, conforme mostrado abaixo.

    GridBag Customizer

Observação: neste tutorial, o GridBagLayout já está definido. Caso você trabalhe com outro form, na etapa 2 acima, clique com o botão direito do mouse no form e escolha Definir Layout > Layout do Grid Bag no menu de contexto (isso ativa o item de menu Personalizar Layout). A seguir, conclua o procedimento.

Área da Grade

A Área da grade está no lado direito da caixa de diálogo Personalizar Layout. Ela mostra o layout da grade dos componentes.
Os componentes no form de amostra já estão adicionados, mas não estão dispostos corretamente.

Barra de Ferramentas

Uma barra de ferramentas com cinco botões está localizada acima da Área da grade. Ela fornece acesso conveniente para comandos comuns, como desfazer, refazer, ativar intervalos uniformes, ocultar linhas e colunas vazias e testar o layout.

Barra de Ferramentas

Personalizador de Propriedades

O Personalizador de Propriedades está posicionado no canto superior esquerdo da caixa de diálogo Personalizar Layout. Ele permite modificar com facilidade as restrições mais comuns de layout, como Ancorar e Insets.

Personalizador de Propriedades

Folha de Propriedades

A Folha de Propriedades está localizada abaixo do Personalizador de Propriedades. Ela exibe as restrições do layout dos componentes selecionados.

Folha de Propriedades

Criando o Layout de Componentes

Os componentes do form ContactsBasicInitial são adicionados e dispostos em uma única linha. O GridBagLayout dispõe os componentes desta forma quando nenhuma restrição de layout for especificada.

Movendo

Você pode mover os componentes usando um simples arrastar e soltar, como desejado. O componente é realçado em verde quando for selecionado. Enquanto você arrasta um componente, as propriedades de Grade X e Grade Y alteram-se para refletir a nova posição. Novas colunas e linhas são automaticamente criadas quando necessário.

Para criar um layout como o mostrado na figura abaixo, mova os componentes da coluna 2 para a 11, como segue:

  1. Arraste o label Sobrenome: e o campo de texto adjacente para a primeira das duas células da segunda linha.
  2. Arraste o label Rua:, o campo de texto adjacente e o botão Procurar adjacente para a primeira das três células da terceira linha.
  3. Arraste o label Cidade:, o campo de texto adjacente e o botão Procurar adjacente para a primeira das três células da quarta linha.
  4. Arraste o label Estado: e a caixa de combinação adjacente para a primeira das duas células da quinta linha.

    Os componentes estão agora colocados de acordo com o layout alvo.

Layout sem colunas extras

Observação: Quando um componente for movido para as células alvo, ele será realçado em verde.

Redimensionando

Um componente pode ser redimensionado arrastando-se as alças de redimensionamento quadradas que aparece em torno de seu perímetro quando ele é selecionado.

Para redimensionar os campos de texto Nome: e Sobrenome: e fazer com que ocupem duas células adjacentes, complete as etapas abaixo:

  1. Pressione Ctrl+Clique nos dois componentes JTextField para selecioná-los.
  2. Com ambos os JTextFields selecionados, posicione o cursor sobre a borda direita da células, clique e arraste até que a linha guia laranja realçada envolva as células adjacentes na coluna 2 na direita.
  3. Solte o cursor para redimensionar os componentes.

    Os campos de texto Nome: e Sobrenome: são redimensionados para se estender entre as duas células, como mostrado na ilustração a seguir. As células ocupadas são realçadas.

Campos de texto redimensionados

Especificando a Restrição de Preenchimento do Layout

Apesar dos campos de texto Nome: e Sobrenome: ocuparem duas células, eles têm o tamanho preferencial e são colocados no meio da área de exibição. Antes de continuar, precisamos preencher toda a área de células usando a restrição de layout Preencher.

Para tornar os campos de texto largos o suficiente para preencher suas áreas horizontalmente sem alterar suas alturas, na caixa de combinação Preencher na área Folha de propriedades, selecione Horizontal.

Campos de texto redimensionados

Visualizando

Agora que você completou com êxito o layout do form ContactsBasicInitial, pode testar sua interface para ver os resultados. É possível exibir o form à medida que trabalha clicando no botão Testar Layout () na barra de ferramentas do Personalizador. O form será aberto em sua própria janela, permitindo que você o teste antes da construção e execução.

Visualização do Design

A visualização é útil para testar o comportamento dinâmico do layout, ou seja, como o layout se comporta quando o contêiner desenhado é redimensionado.

Especificando as Restrições da Espessura X e Y

A especificação de espessuras tem um impacto significativo na aparência dos componentes do GridBagLayout. As espessuras são usadas para determinar como distribuir o espaço entre colunas (peso X) e entre linhas (peso Y). Isso é importante para especificar o comportamento do redimensionamento.
Normalmente os pesos são especificados como 0.0 e 1.0 com os extremos. Os números entre eles são usados conforme necessário. Números maiores indicam que a linha ou coluna do componente deveria ter mais espaço.

Se você tentar redimensionar na horizontal o contêiner exibido, poderá ver que os componentes do layout permanecem com o mesmo tamanho e permanecem acumulados no meio do contêiner. Até os campos Nome: e Sobrenome, que têm a restrição Preencher definida como Horizontal, não crescem, porque a restrição Preencher se refere à área interna da célula e não ao tamanho dela. Em outras palavras, um componente com o atributo Preencher definido para um valor diferente de none alega que "pode" crescer, mas não alega que "deseja" crescer.
As restrições de layout de Espessura X e Espessura Y determinam se um componente "deseja" crescer nas direções horizontal e vertical.
Quando dois componentes em uma linha (ou coluna) têm uma restrição de valor não zero de Espessura X (ou Espessura Y), os valores determinam como o componente individual cresce. Por exemplo, se os valores forem 0.6 e 0.4, então o primeiro componente obtém 60% do espaço disponível e o segundo componente obtém 40%.

Para fazer com que o contêiner desenhado seja corretamente redimensionado, faça o seguinte:

  1. Selecione o campo de texto à direita do label Nome: na Área de grade do GridBag Customizer.
  2. Digite 1.0 no campo de valor de restrição de layout, Espessura X, e pressione Enter.
  3. Selecione o campo de texto à direita do label Sobrenome na Área de Grade do GridBag Customizer.
  4. Digite 1.0 no campo de valor de restrição de layout, Espessura X, e pressione Enter.
  5. Selecione o campo de texto à direita do label Rua na Área de Grade do GridBag Customizer.
  6. Selecione Horizontal na caixa de combinação Preencher e pressione Enter.
  7. Digite 1.0 no campo de valor de restrição de layout, Espessura X, e pressione Enter.
  8. Selecione o campo de texto à direita do label Rua na Área de Grade do GridBag Customizer.
  9. Selecione Horizontal na caixa de combinação Preencher e pressione Enter.
  10. Digite 1.0 no campo de valor de restrição de layout, Espessura X, e pressione Enter.

Para verificar se o contêiner desenhado é corretamente redimensionado na direção horizontal, clique no botão Testar Layout () na barra de ferramentas do Personalizador e arraste as bordas do form ContactsBasicInitial.

Contactsbasicinitial Redimensionada

Ancorando

A ancoragem é usada quando o componente for menor do que sua área de exibição para determinar onde (dentro da área) colocar o componente.

Durante o redimensionamento horizontal do form ContactsBasicInitial na seção anterior, você provavelmente observou que a caixa de combinação Estado se move para longe do label Estado. Como o tamanho preferencial da caixa combo é menor do que o tamanho da célula correspondentes, o GridBagLayout coloca o componente no centro da célula por default.

Para mudar este comportamento, especifique as restrições do layout Âncora como segue:

  1. Selecione a caixa de combinação à direita do label de Estado e clique no botão de seta (Botão de Seta) à direita da caixa de combinação de Âncora na Folha de Propriedades do Customizer.
  2. Escolha Início da Linha na lista drop-down.

A caixa de combinação Estado é ancorada no lado esquerdo do form quando a anterior é agora redimensionada na horizontal.

A caixa de combinação é ancorada

Para fazer com os labels se alinhem na esquerda ao invés de no centro, como estão no momento, complete as etapas abaixo:

  1. Selecione os labels Nome:, Sobrenome:, Rua, Cidade e Estado.

    Observação: Você pode selecionar vários componentes ao pressionar o botão esquerdo do mouse no primeiro componente, mantê-lo pressionado e arrastá-lo para o último componente, como se estivesse desenhando um retângulo que incorpora todos os labels. Após você soltar o botão do mouse, todos os cinco componentes são realçados com bordas laranja e um plano de fundo verde, como mostrado abaixo.

    Componentes selecionados

  2. Altere a restrição do layout Âncora dos labels para Início da Linha.
    Os labels são ancorados na esquerda.

    Os labels são ancorados na esquerda.

Espaçamento

Por default, cada componente não tem preenchimento externo. A restrição Inset especifica o preenchimento externo do componente - a quantidade mínima de espaço entre o componente e as bordas de sua área de exibição.

No layout atual, os componentes são colocados pertos uns dos outros. Para separá-los, faça o seguinte:

  1. Pressione Ctrl+Clique para selecionar todos os componentes.
  2. Pressione o botão na direita do campo de texto restrição Insets.
  3. Na caixa de diálogo exibida, altere os valores Superior: e Esquerad: para 5 e clique em OK.

    Caixa de diálogo Insets

    Seu form deverá ter a aparência de um do arquivo ContactsBasicFinal.java se você abri-lo.

    ContactsBasicFinal

Resumo

Neste curto tutorial você desenhou um form simples. Ao editar o layout, você aprendeu como usar as funcionalidades básicas do GridBag Customizer.
Você agora pode ir para a segunda parte de um tutorial em duas partes, onde modificará o form ContactsAdvancedInitial para se familiarizar com as funcionalidades avançadas do GridBag Customizer.

Siga para Criando um Form Java Avançado usando o GridBag Customizer

início


Consulte Também

Você agora completou o tutorial Criando um Form Java Básico usando o GridBag Customizer. Para obter informações sobre como adicionar funcionalidade às GUIs que você cria, consulte:

início

get support for the NetBeans

Support


By use of this website, you agree to the NetBeans Policies and Terms of Use. © 2013, Oracle Corporation and/or its affiliates. Sponsored by Oracle logo