Criando um Form Java Avanado Usando o GridBag Customizer - Tut... https://netbeans.org/kb/docs/java/gbcustomizer-advanced_pt_BR.html?...

Criando um Form Java Avanado usando o GridBag Customizer

Escrito por Jan Stola, Tomas Pavek e Alyona Stashkova

Este tutorial a segunda srie de duas partes que demonstra como criar um form Java usando as
funcionalidades avanadas do GridBag Customizer do NetBeans IDE.
Esta srie tem a inteno de ser um guia para mostrar como possvel criar o layout de seus
componentes da GUI sem escrever manualmente seu cdigo de layout e, a seguir, executar alteraes
adicionais em um form existente para implementar um layout alvo especfico que seja necessrio ao seu
projeto.

Cada documento nesta srie aborda conjuntos especficos de funcionalidades.

Parte 1: Criando um Form Java Bsico usando o GridBag Customizer

Parte 2: Criando um Form Java Avanado usando o GridBag Customizer

O primeiro tutorial da srie demonstrou como modificar um form Java simples, usando as funcionalidades
bsicas do GridBag Customizer do NetBeans IDE. Neste tutorial voc ir aprender como usar as
funcionalidades avanadas do GridBag Customizer para alterar o layout do form existente.

Contedo

Abrindo o Projeto de Exemplo

Chamando o GridBag Customizer
Funcionalidades Avanadas

Inserindo Nova Linha

Adicionando Novos Componentes
Reorganizando o Layout
Introduzindo Subcontineres
Navegando entre Contineres

Resumo
Consulte Tambm

Para seguir este tutorial, so necessrios os recursos e o software a seguir.

Software ou Recurso Verso Necessria

NetBeans IDE 7.1 ou posterior

JDK (Java Development

Verso 6, 7 ou 8
Kit)

gbcustomizer-advanced- Um arquivo compactado com o projeto de demonstrao contendo os

tutorial.zip layouts inicial e de destino do tutorial.

Observaes:

Voc pode fazer download do projeto que usado como um ponto inicial para esta srie como
um arquivo compactado .zip.

Este tutorial concentra-se na criao do layout somente para o continer. A adio de

funcionalidade na GUI est fora de seu escopo.

Abrindo o Projeto de Exemplo

1 de 15 10/02/2016 21:51
Criando um Form Java Avanado Usando o GridBag Customizer - Tut... https://netbeans.org/kb/docs/java/gbcustomizer-advanced_pt_BR.html?...

Antes de comear a efetuar o layout dos componentes com a ajuda do GridBag Customizer, faa o
download do gbcustomizer-advanced-tutorial.zip, extraia o projeto
GridBagCustomizerAdvancedTutorial em seu disco rgido e abra-o no NetBeans IDE.

1. Faa download e descompacte o projeto 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 tambm
chamada de GridBagCustomizerAdvancedTutorial.
Observao: o projeto GridBagCustomizerAdvancedTutorial usa as bibliotecas
de classe Junit e JUnit 4, que esto localizadas na Central de Atualizao. Voc
precisa clicar em Resolver Problemas na caixa de dilogo Abrir projeto, em seguida, clique
em Resolver na caixa de dilogo Resolver Problemas de referncia e instale o plug-in JUnit
seguindo as instrues no Instalador NetBeans IDE. Quando a instalao for concluda,
clique em Finalizar para fechar a caixa de dilogo do Instalador do NetBeans IDE e, em
seguida, clique em Fechar para fechar a caixa de dilogo Resolver Problemas de
Referncia.

3. Expanda Pacotes de Cdigo-fonte > tutorial e clique duas vezes em

ContactsAdvancedInitial.java.
O form de exemplo aberto na view Design do GUI Builder.

Chamando o GridBag Customizer

Para exibir o GridBag Customizer, conclua as seguintes etapas:

1. Na view Design, selecione o form JFrame.

2. Clique com boto direito do mouse no form e escolha Personalizar Layout.

A caixa de dilogo Personalizar Layout aberta, conforme mostrado abaixo.

2 de 15 10/02/2016 21:51
Criando um Form Java Avanado Usando o GridBag Customizer - Tut... https://netbeans.org/kb/docs/java/gbcustomizer-advanced_pt_BR.html?...

Observao: neste tutorial, o GridBagLayout j est definido. Caso voc trabalhe com outro form,
na etapa 2 acima, clique com o boto 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 Avanadas
Nesta seo, voc usar as funcionalidades avanadas do GridBag Customizer para reorganizar os
componentes do form ContactsAdvancedInitial de acordo com o layout alvo abaixo mostrado.

Observao: para exibir o layout alvo em seu NetBeans IDE, na guia Projetos, expanda Pacotes
de Cdigo-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 seo Telefone de um form existente apresenta trs entradas de telefone. Para aprimor-la e
adicionar um campo extra de label e texto (por exemplo, nome do usurio Skype entre Telefone
Celular: e Telefone Residencial:), crie uma nova linha aqui como segue:

1. Na caixa de dilogo Personalizar Layout, clique com o boto direito do mouse no cabealho da
linha que contm as informaes de Telefone Residencial:.

3 de 15 10/02/2016 21:51
Criando um Form Java Avanado Usando o GridBag Customizer - Tut... https://netbeans.org/kb/docs/java/gbcustomizer-advanced_pt_BR.html?...

2. Escolha Inserir Linha Antes.

Uma nova linha adicionada como na figura a seguir.

Adicionando Novos Componentes

Para adicionar um novo label e campo de texto linha recm-adicionada, execute as seguintes etapas:

1. Clique com o boto direito do mouse na primeira clula da linha recm adicionada.

2. No menu de contexto, escolha Adicionar Componentes > Controles do Swing >

Label, como mostrado abaixo.

4 de 15 10/02/2016 21:51
Criando um Form Java Avanado Usando o GridBag Customizer - Tut... https://netbeans.org/kb/docs/java/gbcustomizer-advanced_pt_BR.html?...

O JLabel1 realado exibido na primeira clula.

3. Clique com o boto direito do mouse na segunda clula da linha recm-adicionada.

4. No menu de contexto, escolha Adicionar Componentes > Controle do Swing

>Campo de Texto.
O JTextField1 realado exibido na segunda clula.

Aps os componentes terem sido adicionados, suas restries do gridbag precisam ser especificadas
para os alinhar com outros componentes.

Com o componente JTextField1 selecionado na rea da Grade, faa o seguinte na Folha de

Propriedades:

5 de 15 10/02/2016 21:51
Criando um Form Java Avanado Usando o GridBag Customizer - Tut... https://netbeans.org/kb/docs/java/gbcustomizer-advanced_pt_BR.html?...

1. Na caixa de combinao Largura da Grade, insira 3 e pressione Enter.

2. Na caixa de combinao Preencher, selecione horizontal.

3. Na caixa de combinao Ancorar, navegue para baixo e selecione Linha base.

4. No campo de texto Espessura X, insira 1.0 e pressione Enter.

Na rea da Grade, selecione o componente JLabel1 e especifique sua restrio 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 boto

Procurar ( ) direita do campo de texto Insets. A caixa de dilogo Insets exibida. Insira 5 no
campo de texto Superior: e clique em OK.

O form deve se parecer como mostrado abaixo.

6 de 15 10/02/2016 21:51
Criando um Form Java Avanado Usando o GridBag Customizer - Tut... https://netbeans.org/kb/docs/java/gbcustomizer-advanced_pt_BR.html?...

Observao: O GridBag Customizer ajuda a adicionar, remover e alterar a posio 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 exibio para o JLabel1, faa o seguinte:

1. Clique em Fechar para sair da caixa de dilogo 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 esforo ao reposicionar rapidamente os
componentes do form como desejado.

Para alterar o layout da seo 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 boto direito do mouse no form e escolha Personalizar Layout a partir do
menu de contexto.

2. Na caixa de dilogo Personalizar Layout, pressione Ctrl+clique nos quatro componentes

JTextField para selecion-los.

7 de 15 10/02/2016 21:51
Criando um Form Java Avanado Usando o GridBag Customizer - Tut... https://netbeans.org/kb/docs/java/gbcustomizer-advanced_pt_BR.html?...

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 no mais
ocupem a terceira e quarta coluna de grade.

O GridBag Customizer pode redimensionar diversos componentes juntos, portanto, criando

espao para a segunda coluna de campos de texto.

4. Clique fora do form para cancelar a seleo dos campos de texto redimensionados.

5. Pressione Ctrl e clique para selecionar todos os Skype: e Telefone Residencial: dos
componentes JLabel e JTextField na seo Telefone.

6. Posicione o cursor sobre a seleo e arraste-o para a direita dos dois campos superiores de
texto.

Observao: Antes de arrastar, assegure-se de que o cursor no mudou para uma seta de

8 de 15 10/02/2016 21:51
Criando um Form Java Avanado Usando o GridBag Customizer - Tut... https://netbeans.org/kb/docs/java/gbcustomizer-advanced_pt_BR.html?...

duas direes, caso contrrio, voc redimensionar a seleo.

Aps mover os componentes, o form deveria se parecer com o exibido abaixo.

Para descartar as linhas 10 e 11 redundantes (ndices de linha 9 e 10 respectivamente), clique

com o boto direito do mouse nos cabealhos das linhas e escolha Excluir Linha no menu
de contexto.
A seo Telefone tornou-se mais compacta.

Para corrigir o espao da segunda coluna aqui, faa como segue:

1. Pressione Ctrl+Clique nos labels Skype: e Telefone Residencial: para selecion-los na

rea da grade.

2. Clique no boto Procurar ( ) direita do campo de texto Insets.

A caixa de dilogo Insets exibida.

3. Insira 5 no campo de texto Esquerda: e clique em OK.

9 de 15 10/02/2016 21:51
Criando um Form Java Avanado Usando o GridBag Customizer - Tut... https://netbeans.org/kb/docs/java/gbcustomizer-advanced_pt_BR.html?...

Introduzindo Subcontineres
O layout com base na grade algumas vezes introduz dependncias desnecessrias que precisam ser
solucionadas por meio de subcontineres.

Se voc clicar no boto Layout de Teste na barra de ferramentas ( ) e testar o redimensionamento

horizontal do layout atual, voc observar que o espao indesejado criado ao redor dos botes
Procurar, OK e Cancelar.

Isso acontece porque a quarta coluna compreende os campos de texto e os botes (os componentes que
deveriam crescer e os componentes que no deveriam crescer, respectivamente). preciso modificar o
layout para que o espao adicional em torno do boto 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 posio vertical que a borda esquerda do campo de texto Telefone
Residencial:. Para tornar estas posies independentes, conclua as seguintes etapas:

1. Pressione Ctrl+clique no campo de texto Rua: e no boto Procurar direita dele para
selecion-los.

2. Clique com o boto direito do mouse e escolha Colocar no Continer no menu de

contexto.

Depois que componentes forem includos em um subcontiner, a borda entre o label Telefone
Residencial: e o campo de texto no afeta mais a borda entre o campo de texto Rua e o
boto.

Observao: A ao Incluir no Continer cria um novo subcontiner nas clulas

ocupadas pelos componentes selecionados. Ela move os componentes selecionados em
um novo continer recm-incorporado, mas preserva suas posies relativas e outras
restries de layout.

Repita as duas etapas acima listadas para o campo de texto Cidade: e para o boto Procurar

10 de 15 10/02/2016 21:51
Criando um Form Java Avanado Usando o GridBag Customizer - Tut... https://netbeans.org/kb/docs/java/gbcustomizer-advanced_pt_BR.html?...

direita dele para incorpor-los em um subcontiner como mostrado abaixo.

Agora voc deseja corrigir o espao indesejado em torno dos botes OK e Cancelar, como segue:

1. Clique em Fechar para cancelar a seleo do incorporado em componentes do subcontiner,

clique com o boto direito do mouse no form e escolha Personalizar Layout no menu de
contexto.

2. Pressione Ctrl+Clique nos botes OK e Cancelar na parte inferior do form para selecion-los.

3. Clique com o boto direito do mouse e escolha Incluir no Continer a partir do menu de
contexto.
Um novo subcontiner criado para os dois botes.

Observao: Nenhum dos componentes no subcontiner redimensionvel. Portanto, eles

so colocados prximos um do outro no centro do continer, que a ancoragem default.

Para alterar a ancoragem de todo o subcontiner, conclua as seguintes etapas:

1. Certifique-se de que o subcontiner com os botes OK e Cancelar selecionado e clique no

11 de 15 10/02/2016 21:51
Criando um Form Java Avanado Usando o GridBag Customizer - Tut... https://netbeans.org/kb/docs/java/gbcustomizer-advanced_pt_BR.html?...

boto de seta ( ) direita da caixa de combinao de ncora.

2. Role a tela para baixo e escolha Fim da Linha na lista.

O layout parece bom, mas o subcontiner com os botes OK e Cancelar ocupa somente as duas
ltimas clulas na ltima linha.
Caso os botes OK e Cancelar se tornem mais largos (por exemplo, durante a
traduo em outro idioma), eles empurraro as bordas direitas dos
campos de texto Telefone Comercial: e Telefone Celular:.
Para evitar este problema potencial e deixar que o subcontiner ocupe
todas as clulas na linha inferior, selecione o subcontiner e arraste
sua borda esquerda para o incio da linha.

O subcontiner ocupa todas as clulas na linha inferior.

Navegando entre Contineres

Para adicionar um componente a um subcontiner (por exemplo, um boto

12 de 15 10/02/2016 21:51
Criando um Form Java Avanado Usando o GridBag Customizer - Tut... https://netbeans.org/kb/docs/java/gbcustomizer-advanced_pt_BR.html?...

Ajuda para os botes OK e Cancelar existentes), preciso alternar do

continer principal para o subcontiner antes de editar seu ltimo
layout.

Conclua as etapas abaixo listadas para adicionar um boto em um

subcontiner existente:

1. Clique no subcontiner com os botes OK e Cancelar para

selecion-lo.

2. Clique com o boto direito do mouse no continer para exibir o

menu de contexto e escolha Criar Este Continer.

3. Clique com o boto direito do mouse no cabealho da segunda

coluna e escolha Inserir Coluna Aps a partir do menu de
contexto.
Uma clula vazia para o novo boto exibida.

4. Clique com o boto direito do mouse na clula recm-criada e

escolha Adicionar Componente > Controles do Swing > Boto a

13 de 15 10/02/2016 21:51
Criando um Form Java Avanado Usando o GridBag Customizer - Tut... https://netbeans.org/kb/docs/java/gbcustomizer-advanced_pt_BR.html?...

partir do menu de contexto.

Um novo boto jButton1 adicionado.

5. Clique no boto de ncora Relacionado Linha de Base ( ) no

Personalizador de Propriedades para alinhar o boto Novo com os
dois existentes na linha.

6. Clique no boto Procurar ( ) direita do campo de texto Insets.

A caixa de dilogo Insets exibida. Insira 5 no campo de texto
Superior: e clique em OK.

7. Para verificar a aparncia do continer principal, clique com o

boto direito do mouse no subcontiner desenhado e escolha Criar
Continer Pai no menu de contexto.

Observao: O menu de contexto no exibido se voc clicar

com o boto direito do mouse nos botes.

A criao do layout foi concluda.

Falta uma alterao final no relativa ao layout do continer.
Para renomear o boto, conclua as seguintes etapas:

1. Clique em Fechar para sair da caixa de dilogo 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.

14 de 15 10/02/2016 21:51
Criando um Form Java Avanado Usando o GridBag Customizer - Tut... https://netbeans.org/kb/docs/java/gbcustomizer-advanced_pt_BR.html?...

4. Pressione Enter.

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 avanadas do GridBag Customizer para
reorganizar o layout do form.

V para Criando um Form Java Bsico usando o GridBag Customizer

incio

Enviar Feedback neste Tutorial

Consulte Tambm
Voc agora completou o tutorial Criando um Form Java Bsico usando o
GridBag Customizer. Para obter informaes sobre como adicionar
funcionalidade s GUIs que voc cria, consulte:

Introduo Construo de GUIs

Manipulando Imagens em uma Aplicao da GUI

FAQ do GUI Builder

Trilha de Aprendizado das Aplicaes de GUI do Java

Implementando GUIs de Java em Desenvolvendo Aplicaes com o

NetBeans IDE

incio

15 de 15 10/02/2016 21:51