// 
//     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 Avançado 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 Avançado usando o GridBag Customizer - Apache NetBeans
:keywords: Apache NetBeans, Tutorials, Criando um Form Java Avançado usando o GridBag Customizer

Escrito por Jan Stola, Tomas Pavek e Alyona Stashkova

Este tutorial é a segunda série de duas partes que demonstra como criar um form Java usando as funcionalidades avançadas 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: link:../java/gbcustomizer-basic.html[+Criando um Form Java Básico usando o GridBag Customizer+]
* Parte 2: Criando um Form Java Avançado usando o GridBag Customizer

O link:../java/gbcustomizer-basic.html[+primeiro tutorial da série+] demonstrou como modificar um form Java simples, usando as funcionalidades básicas do GridBag Customizer do NetBeans IDE. Neste tutorial você irá aprender como usar as funcionalidades avançadas do GridBag Customizer para alterar o layout do form existente.


image::images/netbeans-stamp-80-74.png[title="O conteúdo desta página se aplica ao NetBeans IDE 7.1 e posterior"]


*Para seguir este tutorial, são necessários os recursos e o software a seguir.*

|===
|Software ou Recurso |Versão Necessária 

|link:http://netbeans.org/downloads/index.html[+NetBeans IDE+] |7.1 ou 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-advanced-tutorial.zip[+gbcustomizer-advanced-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

Antes de começar a efetuar o layout dos componentes com a ajuda do GridBag Customizer, faça o download do link:https://netbeans.org/projects/samples/downloads/download/Samples%252FJava%252Fgbcustomizer-advanced-tutorial.zip[+gbcustomizer-advanced-tutorial.zip+], extraia o projeto  ``GridBagCustomizerAdvancedTutorial``  em seu disco rígido e abra-o no NetBeans IDE.

1. Faça download e descompacte o projeto link:https://netbeans.org/projects/samples/downloads/download/Samples%252FJava%252Fgbcustomizer-advanced-tutorial.zip[+gbcustomizer-basic-tutorial.zip+] em qualquer lugar no computador.
2. Na guia Projetos do NetBeans IDE, clique em Abrir Projeto no menu Arquivo, navegue para o projeto  ``GridBagCustomizerAdvancedTutorial``  que você extraiu na etapa anterior e clique em Abrir Projeto. A pasta do projeto pode estar contida em uma pasta que também é chamada de  ``GridBagCustomizerAdvancedTutorial`` .

*Observação:* o projeto  ``GridBagCustomizerAdvancedTutorial``  usa as bibliotecas de classe  ``Junit``  e  ``JUnit 4`` , que estão localizadas na Central de Atualização. Você precisa clicar em Resolver Problemas na caixa de diálogo Abrir projeto, em seguida, clique em Resolver na caixa de diálogo Resolver Problemas de referência e instale o plug-in JUnit seguindo as instruções no Instalador NetBeans IDE. Quando a instalação for concluída, clique em Finalizar para fechar a caixa de diálogo do Instalador do NetBeans IDE e, em seguida, clique em Fechar para fechar a caixa de diálogo Resolver Problemas de Referência.


[start=3]
. 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"]
--


== Chamando o GridBag Customizer

Para exibir o GridBag Customizer, conclua as seguintes etapas:

1. Na view Design, selecione o form JFrame.
2. Clique com botão direito do mouse no form e escolha  ``Personalizar Layout`` .
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``  (isso ativa o item de menu  ``Personalizar Layout`` ) e conclua o procedimento.


== Funcionalidades Avançadas

Nesta seção, você usará as funcionalidades avançadas do GridBag Customizer para reorganizar os componentes do form  ``ContactsAdvancedInitial``  de acordo com o layout alvo abaixo mostrado.

image::images/targetlayout.png[]

*Observação:* para exibir o layout alvo em seu NetBeans IDE, na guia Projetos, expanda  ``Pacotes de Código-fonte > tutorial``  e clique duas vezes em  ``ContactsAdvancedFinal.java`` . 
O form  ``ContactsAdvancedFinal``  com o layout alvo é aberto na view Projeto do GUI Builder.


=== Inserindo Nova Linha

A seção  ``Telefone``  de um form existente apresenta três entradas de telefone. Para aprimorá-la e adicionar um campo extra de label e texto (por exemplo, nome do usuário Skype entre  ``Telefone Celular:``  e  ``Telefone Residencial:`` ), crie uma nova linha aqui como segue:

1. Na caixa de diálogo Personalizar Layout, clique com o botão direito do mouse no cabeçalho da linha que contém as informações de  ``Telefone Residencial:`` .
2. Escolha  ``Inserir Linha Antes`` .

image::images/insertrow.png[]

Uma nova linha é adicionada como na figura a seguir.

image::images/rowinserted.png[]


=== Adicionando Novos Componentes

Para adicionar um novo label e campo de texto à linha recém-adicionada, execute as seguintes etapas:

1. Clique com o botão direito do mouse na primeira célula da linha recém adicionada.
2. No menu de contexto, escolha  ``Adicionar Componentes > Controles do Swing > Label`` , como mostrado abaixo.

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

O  ``JLabel1``  realçado é exibido na primeira célula.


[start=3]
. Clique com o botão direito do mouse na segunda célula da linha recém-adicionada.

[start=4]
. No menu de contexto, escolha  ``Adicionar Componentes > Controle do Swing >Campo de Texto`` .
O  ``JTextField1``  realçado é exibido na segunda célula.

image::images/highlightedtextfield.png[]

Após os componentes terem sido adicionados, suas restrições do gridbag precisam ser especificadas para os alinhar com outros componentes.

Com o componente  ``JTextField1``  selecionado na Área da Grade, faça o seguinte na Folha de Propriedades:

1. Na caixa de combinação Largura da Grade, insira  ``3``  e pressione Enter.
2. Na caixa de combinação Preencher, selecione  ``horizontal`` .
3. Na caixa de combinação Ancorar, navegue para baixo e selecione  ``Linha base`` .
4. No campo de texto Espessura X, insira  ``1.0``  e pressione Enter.

image::images/textfieldconstraints.png[]

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 dois componentes  ``JLabel1``  e  ``JTextField1``  na Área da Grade, clique no botão Procurar (image::images/browsebutton.png[]) à direita do campo de texto  ``Insets`` . A caixa de diálogo  ``Insets``  é exibida. Insira  ``5``  no campo de texto  ``Superior:``  e clique em OK.

O form deve se parecer como mostrado abaixo.

image::images/constraintsset.png[]

*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 o texto de exibição para o  ``JLabel1`` , faça o seguinte:

1. Clique em Fechar para sair da caixa de diálogo Personalizar Layout.
2. Na view Design, selecione o componente  ``JLabel1``  e pressione F2 (alternativamente, selecione Editar Texto no menu de contexto).
3. Delete o texto selecionado e insira  ``Skype:`` .
4. Pressione Enter.

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

1. Na view Design, selecione o componente  ``JTextField1``  e pressione F2 (alternativamente, selecione Editar Texto no menu de contexto).
2. Delete o texto selecionado e pressione Enter.


=== Reorganizando o Layout

O GridBag Customizer pode economizar seu tempo e esforço ao reposicionar rapidamente os componentes do form como desejado.

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

1. Clique com o botão direito do mouse no form 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.

image::images/textfieldsonecolumn.png[]

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


[start=4]
. Clique fora do form para cancelar a seleção dos campos de texto redimensionados.

[start=5]
. Pressione Ctrl e clique para selecionar todos os  ``Skype:``  e  ``Telefone Residencial:``  dos componentes  ``JLabel``  e  ``JTextField``  na seção  ``Telefone`` .

[start=6]
. Posicione o cursor sobre a seleção e arraste-o para a direita dos dois campos superiores de texto.

image::images/movesecondcolumn.png[]

*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 form deveria se parecer com o exibido abaixo.

image::images/extrarows.png[]

Para descartar as linhas 10 e 11 redundantes (índices de linha 9 e 10 respectivamente), clique com o botão direito do mouse nos cabeçalhos das linhas e escolha  ``Excluir Linha``  no menu de contexto.

A seção  ``Telefone``  tornou-se mais compacta.

image::images/textfieldsmoved.png[]

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

1. Pressione Ctrl+Clique nos labels  ``Skype:``  e  ``Telefone Residencial:``  para selecioná-los na Área da grade.
2. Clique no botão Procurar (image::images/browsebutton.png[]) à direita do campo de texto  ``Insets`` .
A caixa de diálogo  ``Insets``  é exibida.

[start=3]
. Insira  ``5``  no campo de texto  ``Esquerda:``  e clique em OK.


=== Introduzindo Subcontêineres

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

Se você clicar no botão Layout de Teste na barra de ferramentas (image::images/testlayoutbutton.png[]) e testar o redimensionamento horizontal do layout atual, você observará que o espaço indesejado é criado ao redor dos botões Procurar, OK e Cancelar.

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

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  ``Rua``  e  ``Cidade:`` . O layout atual assegura que a borda direita dos campos de texto  ``Rua:``  e  ``Cidade:``  esteja na mesma posição vertical que a borda esquerda do campo de texto  ``Telefone Residencial:`` . Para tornar estas posições independentes, conclua as seguintes etapas:

1. Pressione Ctrl+clique no campo de texto  ``Rua:``  e no botão  ``Procurar``  à direita dele para selecioná-los.
2. Clique com o botão direito do mouse e escolha  ``Colocar no Contêiner``  no menu de contexto.

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

Depois que componentes forem incluídos em um subcontêiner, a borda entre o label  ``Telefone Residencial:``  e o campo de texto não afeta mais a borda entre o campo de texto  ``Rua``  e o botão.

*Observação:* A ação  ``Incluir no Contêiner``  cria um novo subcontêiner nas células ocupadas pelos componentes selecionados. Ela move os componentes selecionados em um novo contêiner 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  ``Cidade:``  e para o botão  ``Procurar``  à direita dele para incorporá-los em um subcontêiner como mostrado abaixo.

image::images/enclosecity.png[]

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 form e escolha  ``Personalizar Layout``  no menu de contexto.
2. Pressione Ctrl+Clique nos botões  ``OK``  e  ``Cancelar``  na parte inferior do form para selecioná-los.
3. Clique com o botão direito do mouse e escolha  ``Incluir no Contêiner``  a partir do menu de contexto.
Um novo subcontêiner é criado para os dois botões.

image::images/subcontainerbuttons.png[]

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

Para alterar a ancoragem de todo o subcontêiner, conclua as seguintes etapas:

1. Certifique-se de que o subcontêiner com os botões  ``OK``  e  ``Cancelar``  é selecionado e clique no botão de seta (image::images/arrowbutton.png[]) à direita da caixa de combinação de  ``Âncora`` .
2. Role a tela para baixo e escolha  ``Fim da Linha``  na lista.

image::images/subcontainerlineend.png[]

O layout parece bom, mas o subcontêiner com os botões  ``OK``  e  ``Cancelar``  ocupa somente as duas últimas células na última linha.
Caso os botões  ``OK``  e Cancelar `` se tornem mais largos (por exemplo, durante a tradução em outro idioma), eles empurrarão as bordas direitas dos campos de texto `` Telefone Comercial: `` e `` Telefone Celular: ``. Para evitar este problema potencial e deixar que o subcontêiner ocupe todas as células na linha inferior, selecione o subcontêiner e arraste sua borda esquerda para o início da linha. `` 

 ``image::images/subcontainerresized.png[]

O subcontêiner ocupa todas as células na linha inferior.

 
=== Navegando entre Contêineres

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.

Conclua as etapas abaixo listadas para adicionar um botão em um subcontêiner 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  ``Criar Este Contêiner`` .

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


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

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


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

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


[start=5]
. Clique no botão de Âncora Relacionado à Linha de Base (image::images/baselineanchor.png[]) no Personalizador de Propriedades para alinhar o botão Novo com os dois existentes na linha.

[start=6]
. Clique no botão Procurar (image::images/browsebutton.png[]) à direita do campo de texto Insets. A caixa de diálogo Insets é exibida. Insira 5 no campo de texto Superior: e clique em OK.

[start=7]
. Para verificar a aparência do contêiner principal, clique com o botão direito do mouse no subcontêiner desenhado e escolha  ``Criar Contêiner Pai``  no menu de contexto.

image::images/designparentcontainer.png[]

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

A criação do layout foi concluída.
Falta uma alteração final não relativa ao layout do contêiner.
Para renomear o botão, conclua as seguintes etapas:

1. Clique em Fechar para sair da caixa de diálogo Personalizar Layout.
2. Na view Design, selecione o componente  ``JButton1``  e pressione F2 (se preferir, selecione Editar Texto a partir do menu de contexto).
3. Delete o texto selecionado e insira  ``Ajuda`` .
4. Pressione Enter.

image::images/finallayout.png[]


== Resumo

Neste tutorial, você modificou um form existente ao adicionar novos componentes, ao inserir linhas, etc. Ao criar o layout, você aprendeu como usar as funcionalidades avançadas do GridBag Customizer para reorganizar o layout do form.

Vá para link:../java/gbcustomizer-basic.html[+Criando um Form Java Básico usando o GridBag Customizer+]

<<top,início>>

link:/about/contact_form.html?to=3&subject=Feedback:%20Designing%20an%20Advanced%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>>

  ``