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