Suporte de Edição da Lacuna no GUI Builder do NetBeans

This tutorial needs a review. You can open a JIRA issue, or edit it in GitHub following these contribution guidelines.

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.

netbeans stamp 80 74 73
Figure 1. 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

NetBeans IDE

7.2, 7.3, 7.4 ou 8.0

JDK (Java Development Kit)

Versão 6, 7 ou 8

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

prj

  1. Clique duas vezes no arquivo Initial.java . O form de exemplo é aberto na view Design do GUI Builder.

initialform

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

navigator

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.

gap highlighted

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

gap resizable

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

resizing

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

jlabel

  1. Clique duas vezes no label e altere o texto do label para Nome do Meio: .

middle name

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

textfield

  1. Arraste a borda direita do campo de texto para alinhá-la com a borda direita dos outros campos de texto.

textfield resized

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

middle inserted gap

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 .

default small

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

middle inserted

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.

enclose panel

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

buttons enclosed

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

edit layout space

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

gaps removed

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.

    1. Na caixa de diálogo Editar Espaço de Layout, selecione a opção Redimensionável e clique em OK.

bottom small

  1. 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:

align

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.

buttons centered

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.

início

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:

início