// 
//     Licensed to the Apache Software Foundation (ASF) under one
//     or more contributor license agreements.  See the NOTICE file
//     distributed with this work for additional information
//     regarding copyright ownership.  The ASF licenses this file
//     to you under the Apache License, Version 2.0 (the
//     "License"); you may not use this file except in compliance
//     with the License.  You may obtain a copy of the License at
// 
//       http://www.apache.org/licenses/LICENSE-2.0
// 
//     Unless required by applicable law or agreed to in writing,
//     software distributed under the License is distributed on an
//     "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
//     KIND, either express or implied.  See the License for the
//     specific language governing permissions and limitations
//     under the License.
//

= Criando um Form Java Básico usando o GridBag Customizer
:jbake-type: tutorial
:jbake-tags: tutorials 
:jbake-status: published
:icons: font
:syntax: true
:source-highlighter: pygments
:toc: left
:toc-title:
:description: Criando um Form Java Básico usando o GridBag Customizer - Apache NetBeans
:keywords: Apache NetBeans, Tutorials, Criando um Form Java Básico usando o GridBag Customizer

Escrito por Jan Stola, Tomas Pavek e Alyona Stashkova

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.

* Parte 1: Criando um Form Java Básico usando o GridBag Customizer
* Parte 2: link:../java/gbcustomizer-advanced.html[+Criando um Form Java Avançado usando o GridBag Customizer+]


image::images/netbeans-stamp-80-74.png[title="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 

|link:http://netbeans.org/downloads/index.html[+NetBeans IDE+] |7.1 e posterior 

|link:http://www.oracle.com/technetwork/java/javase/downloads/index.html[+JDK (Java Development Kit)+] |Versão 6, 7 ou 8 

|link:https://netbeans.org/projects/samples/downloads/download/Samples%252FJava%252Fgbcustomizer-basic-tutorial.zip[+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 link:https://netbeans.org/projects/samples/downloads/download/Samples%252FJava%252Fgbcustomizer-basic-tutorial.zip[+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.

[.feature]
--
image::images/sampleform-small.png[role="left", link="images/sampleform.png"]
--


== 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.

[.feature]
--
image::images/customizerdialog-small.png[role="left", link="images/customizerdialog.png"]
--

*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.

image::images/toolbar.png[]


=== 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`` .

image::images/propcustomizer.png[]


=== Folha de Propriedades

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

image::images/propsheet.png[]


== 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.

[.feature]
--
image::images/layout1-small.png[role="left", link="images/layout1.png"]
--

*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.

[.feature]
--
image::images/tfieldsresized-small.png[role="left", link="images/tfieldsresized.png"]
--


=== 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`` .

[.feature]
--
image::images/horizontalset-small.png[role="left", link="images/horizontalset.png"]
--


=== 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 (image::images/testbutton.png[]) 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.

image::images/designpreview.png[]

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 (image::images/testbutton.png[]) na barra de ferramentas do Personalizador e arraste as bordas do form  ``ContactsBasicInitial`` .

image::images/resizedpreview.png[]


=== 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 (image::images/arrowbutton.png[]) à direita da caixa de combinação de  ``Âncora``  na <<01d,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.

[.feature]
--
image::images/comboanchored-small.png[role="left", link="images/comboanchored.png"]
--

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.

image::images/multiselect.png[]


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

image::images/linestartanchor.png[]


=== 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.

image::images/insets.png[]

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

[.feature]
--
image::images/contactsbasicfinal-small.png[role="left", link="images/contactsbasicfinal.png"]
--


== 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 link:../java/gbcustomizer-advanced.html[+Criando um Form Java Avançado usando o GridBag Customizer+]

<<top,início>>

link:/about/contact_form.html?to=3&subject=Feedback:%20Designing%20a%20Basic%20Java%20Form%20Using%20the%20GridBag%20Customizer[+Enviar Feedback neste Tutorial+]


== 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:

* link:gui-functionality.html[+Introdução à Construção de GUIs+]
* link:gui-image-display.html[+Manipulando Imagens em uma Aplicação da GUI+]
* link:http://wiki.netbeans.org/NetBeansUserFAQ#GUI_Editor_.28Matisse.29[+ FAQ do GUI Builder+]
* link:../../trails/matisse.html[+Trilha de Aprendizado das Aplicações de GUI do Java+]
* link:http://www.oracle.com/pls/topic/lookup?ctx=nb8000&id=NBDAG920[+Implementando GUIs de Java+] em _Desenvolvendo Aplicações com o NetBeans IDE_

<<top,início>>