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

= Suporte de Edição da Lacuna no GUI Builder do NetBeans
:jbake-type: tutorial
:jbake-tags: tutorials 
:jbake-status: published
:icons: font
:syntax: true
:source-highlighter: pygments
:toc: left
:toc-title:
:description: Suporte de Edição da Lacuna no GUI Builder do NetBeans - Apache NetBeans
:keywords: Apache NetBeans, Tutorials, Suporte de Edição da Lacuna no GUI Builder do NetBeans

Jan Stola, Alyona Stashkova

Um layout de um contêiner no modo Design Livre consiste em componentes e intervalos entre esses componentes. Os componentes e intervalos são visualizados na view Design do GUI Builder. O NetBeans IDE permite que você edite lacunas diretamente no GUI Builder.

Este tutorial demonstra como utilizar edição de lacuna para inserir novos componentes de IU entre outros componentes, bem como para centralizar componentes facilmente em torno de um quadro no GUI Builder do NetBeans sem preocupação para o gerenciador de layout subjacente. O tutorial destina-se como um guia para mostrar como você pode executar alterações em um form existente no modo Design Livre para implementar um layout de destino específico que é necessário pelo projeto.


image::images/netbeans-stamp-80-74-73.png[title="O conteúdo desta página se aplica ao NetBeans IDE 7.2, 7.3, 7.4 e 8.0"]


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

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

|link:https://netbeans.org/downloads/index.html[+NetBeans IDE+] |7.2, 7.3, 7.4 ou 8.0 

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

|link:https://netbeans.org/projects/samples/downloads/download/Samples%252FJava%252FGapSupport.zip[+GapSupport.zip+] |Um arquivo compactado com arquivos de código-fonte que contém os layouts inicial e de destino do tutorial. 
|===

*Observações:*

* Você pode fazer download do projeto que é usado como um ponto inicial para este tutorial 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.
* Você pode ativar e desativar a visualização de lacunas, usando a opção  ``Visualizar Informações de Layout Adicionais``  depois de escolher  ``Ferramentas``  >  ``Opções``  >  ``Java``  >  ``GUI Builder``  no menu principal do IDE.


== Abrindo o Projeto de Exemplo

1. Faça download e descompacte o arquivo compactado link:https://netbeans.org/projects/samples/downloads/download/Samples%252FJava%252FGapSupport.zip[+GapSupport.zip+] em qualquer lugar no computador.
2. No menu principal do NetBeans IDE, selecione  ``Arquivo``  >  ``Abrir Projeto`` , navegue até a pasta que contém os arquivos descompactado do projeto  ``GapSupport``  que você extraiu na etapa anterior.
3. Clique em Abrir Projeto.
A janela Projetos deve ter uma aparência semelhante a esta:

image::images/prj.png[]


[start=4]
. Clique duas vezes no arquivo  ``Initial.java`` .
O form de exemplo é aberto na view Design do GUI Builder.

image::images/initialform.png[]

*Observação:* você pode exibir a hierarquia de componentes do form na janela do Navegador escolhendo Janela > Navegador na barra de ferramentas principal.

image::images/navigator.png[]

<<top,início>>


== Redimensionando uma Lacuna Arrastando e Soltando suas Bordas

Vamos explorar como editar uma lacuna arrastando e soltando suas bordas na view Design do IDE.

Para adicionar uma linha de  ``Nome do Meio``  entre as linhas do  ``Nome``  e do  ``Sobrenome`` , você precisa concluir as seguintes etapas:

1. Clique na lacuna entre os labels  ``Nome``  e o  ``Sobrenome`` .
A lacuna é realçada em verde.

image::images/gap-highlighted.png[]


[start=2]
. Passe o ponteiro do mouse sobre a parte inferior da lacuna realçada.
O ponteiro é alterado para um redimensionável vertical.

image::images/gap-resizable.png[]


[start=3]
. Aumente a lacuna selecionada para 50, pressionando o botão esquerdo do mouse, arrastando o ponteiro para baixo, e liberando o botão esquerdo do mouse.
O novo tamanho da lacuna é exibido em uma dica de ferramenta.

image::images/resizing.png[]


[start=4]
. Adicionar um novo label à lacuna criada, arrastando-a da seção Controles Swing da Paleta e soltando-a para que sua borda esquerda seja alinhada com a borda esquerda do label  ``Nome``  e sua borda superior tenha a lacuna preferencial sugerida da linha  ``Nome`` .

image::images/jlabel.png[]


[start=5]
. Clique duas vezes no label e altere o texto do label para  ``Nome do Meio:`` .

image::images/middle-name.png[]


[start=6]
. Adicione um novo campo de texto à direita do nome do label  ``Nome do Meio:`` , arrastando-o da seção Controles Swing da Paleta e soltando-o, de forma que ele seja alinhado com o label do  ``Nome do Meio``  e sua borda esquerda seja alinhada com os outros campos de texto.

image::images/textfield.png[]


[start=7]
. Arraste a borda direita do campo de texto para alinhá-la com a borda direita dos outros campos de texto.

image::images/textfield-resized.png[]


[start=8]
. Clique com o botão direito do mouse no texto no campo de texto e escolha Editar Texto no menu pop-up. Remover o texto.

A linha  ``Nome do Meio``  é inserida entre os componentes do form.

image::images/middle-inserted-gap.png[]

<<top,início>>


== Redimensionando uma Lacuna usando a Roda do Mouse

O IDE permite que você redimensione uma lacuna clicando nela e, em seguida, rodando o mouse para ajustar o tamanho da lacuna.

Para remover o espaço restante entre as linhas do  ``Nome do Meio``  e do  ``Sobrenome`` , clique na lacuna abaixo e diminua a altura da lacuna, rolando o mouse para baixo e definindo o novo tamanho para  ``pequeno default`` .

*Observação:* o GUI Builder do NetBeans suporta três lacunas preferenciais de posicionamento de componente -  ``pequeno default`` ,  ``pequeno médio`` e  ``grande default`` .

image::images/default-small.png[]

A lacuna entre os componentes do form é redimensionada usando a roda do mouse e utilizando uma lacuna preferencial.

image::images/middle-inserted.png[]

<<top,início>>


== Editando Lacunas em Torno de um Componente

Você pode centralizar um componente para consultá-lo em duas lacunas idênticas que tiverem sido marcadas como redimensionável anteriormente.

*Observação:* um contêiner ajuda a especificar onde os componentes deve ser centralizados. É possível centralizar os botões sem colocá-los em um novo painel, mas é mais difícil fazer isso no GUI Builder e o layout resultante é um pouco frágil. Portanto, sugerimos incluir o componente centralizado em um painel sempre que for possível.

*Para incluir os botões e lacunas redimensionáveis em um contêiner separado, faça o seguinte:*

1. Selecione todos os quatro botões no form.
2. Clique com o botão direito na seleção e escolha  ``Incluir em``  >  ``Painel``  no menu pop-up.

image::images/enclose-panel.png[]

Os botões são incluídos em um contêiner.

image::images/buttons-enclosed.png[]

*Para remover as lacunas recém-criadas à esquerda e à direita dos botões, conclua as seguintes etapas: *

1. Clique com o botão direito em um dos botões e escolha Editar Espaço de Layout do menu pop-up.
A caixa de diálogo Editar Espaço de Layout é exibida.

image::images/edit-layout-space.png[]


[start=2]
. Defina o tamanho das lacunas Esquerda e Direita para 0 e clique em OK.
As lacunas à esquerda e à direita dos botões são removidas usando a caixa de diálogo Editar Espaço de Layout.

image::images/gaps-removed.png[]

*Para colocar as lacunas acima e abaixo do contêiner redimensionável, faça o seguinte:*

1. Clique duas vezes na lacuna na parte inferior do último botão.
A caixa de diálogo Editar Espaço de Layout é exibida.

[start=2]
. Na caixa de diálogo Editar Espaço de Layout, selecione a opção  ``Redimensionável``  e clique em OK.

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


[start=3]
. Repita as etapas 1 e 2 da lacuna acima do botão superior.
As lacunas acima e abaixo do contêiner com os botões são redimensionáveis.

*Para centralizar os botões do form de exemplo*:

Arraste a borda inferior do contêiner com os botões para alinhar com as bordas inferiores·das listas, conforme mostrado abaixo:

image::images/align.png[]

O contêiner é aumentado para corresponder à altura das listas  ``Tópicos Disponíveis``  e  ``Tópicos Selecionado`` . Os botões são centralizados no espaço determinado pelo contêiner delimitador desde que os intervalos adjacentes foram marcados como redimensionáveis.

image::images/buttons-centered.png[]

<<top,início>>


== Resumo

Neste tutorial você aperfeiçoou form simples. Ao tratar lacunas, você aprendeu como gerenciar espaços vazios no modo Design Livre e como criar uma IU interessante sem gastos extras para ajustar cada detalhe da implementação do layout.

<<top,início>>

link:/about/contact_form.html?to=3&subject=Feedback:%20Gap%20Support[+Enviar Feedback neste Tutorial+]


== Consulte Também

Agora você concluiu o Suporte de Edição da Lacuna no tutorial do GUI Builder do NetBeans. Para obter informações sobre como adicionar funcionalidade às GUIs que você cria, consulte:

* link:http://www.oracle.com/pls/topic/lookup?ctx=nb8000&id=NBDAG920[+Implementando GUIs de Java+] em _Desenvolvendo Aplicações com o NetBeans IDE_
* link:gui-functionality.html[+Introdução à Construção de GUIs do Java+]
* 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+]

<<top,início>>