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

Área da grade

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

Barra de ferramentas

Uma barra de ferramentas com quatro botões está localizada acima da Área da grade. Ela fornece o acesso convenientes aos comandos comuns, como Desfazer, Refazer, Preencher e Visualizar o layout.

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 - Ancorar e Preencher.

Folha de propriedades

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

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 3 para a 12, como segue:

1. Arraste o rótulo Surname: e o campo de texto adjacente para a primeira das duas células da segunda linha.
2. Arraste o rótulo Street:, 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 rótulo City:, 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 rótulo State: 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.

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

Redimensionando

Um componente pode ser redimensionado ao arrastar o pequeno quadrado de manipulador de redimensionamento que aparece em trono de seu perímetro quando for selecionado.

Para redimensionar os campos de texto First Name: e Surname: 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 abrace as células adjacentes na coluna 3 na direita.
3. Solte o cursor para redimensionar os componentes.

Os campos de texto First Name: e Surname: 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.

Especificando a restrição de preenchimento do layout

Apesar dos campos de texto First Name: e Surname: 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.

Visualizando

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

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

Especificando as restrições do peso X e do peso Y

A especificação de pesos tem um impacto significativo na aparência dos componentes do GridBagLayout. Os pesos são usados 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 como necessário. Números maiores indicam que a linha ou coluna do componente deveria obter mais espaço.

Se você tentar redimensionar na horizontal o container visualizado, poderá ver que os componentes do layout permanecem com o mesmo tamanho e permanecem acumulados no meio do container. Até os campos First Name: e Surname:, 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 Peso X e Peso 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 Peso X (ou Peso 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 container desenhado seja corretamente redimensionado, faça o seguinte:

1. Selecione o campo de texto à direita do rótulo First Name: na Área de grade do GridBag Customizer.
2. Digite 1.0 no campo de valor de restrição de layout, Peso X, e pressione Enter.
3. Selecione o
campo de texto à direita do rótulo Surname: na Área de grade do GridBag Customizer.
4. Digite 1.0 no campo de valor de restrição de layout, Peso X, e pressione Enter.
5. Selecione o campo de texto à direita do rótulo Street 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, Peso X, e pressione Enter.
8. Selecione o campo de texto à direita do rótulo Street 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, Peso 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 Customizer e arraste as bordas do formulário ContactsBasicInitial.

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 formulário ContactsBasicInitial na seção anterior, você provavelmente observou que a caixa de combinação State se move para longe do rótulo State. Como o tamanho preferido da caixa combo é menor do que o tamanho da célula correspondentes, o GridBagLayout coloca o componente no centro da célula por padrão.

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

1. Selecione a caixa de combinação à direita do rótulo State e clique no botão () à direita da caixa de combinação Âncora.
2. Escolha Início da linha na lista suspensa.

A caixa de combinação State é ancorada no lado esquerdo do formulário quando a anterior é agora redimensionada na horizontal.

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

1. Selecione os rótulos First name:, Surname:, Street, City e State.

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 rótulos. 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.



2. Altere a restrição do layout Âncora dos rótulos para Início da linha.
   As legendas são ancoradas na esquerda.

Espaçamento

Por padrão, cada componente não tem preenchimento externo. A restrição Suplemento 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 de inserção.
3. Na caixa de diálogo exibida, altere os valores de Superior: e Esquerda: para 5 e clique em OK.
   Seu formulário deverá ter a aparência do formulário do arquivo ContactsBasicFinal.java caso você o abra.