| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
| <!-- |
| Copyright (c) 2009, 2014, Oracle and/or its affiliates. All rights reserved. |
| --> |
| <html> |
| <head> |
| <title>Criando um Form Java Avançado Usando o GridBag Customizer - Tutorial do NetBeans IDE</title> |
| <!-- BEGIN METADATA --> |
| <meta name="author" content="Alyona.Stashkova@oracle.com"> |
| <meta http-equiv="content-type" content="text/html; charset=UTF-8" > |
| <meta name="description" content="This tutorial guides you through the process of modifying an application form layout using the NetBeans IDE GridBag Designer Advanced Features."> |
| <meta name="KEYWORDS" content="NetBeans, GridBag, Layout Manager, Tutorial, Guide, User, Documentation, Advanced"> |
| <link rel="stylesheet" type="text/css" href="../../../netbeans.css"> |
| <!-- END METADATA --> |
| |
| </head> |
| <body> |
| |
| <a name="top"></a> |
| <h1>Criando um Form Java Avançado usando o GridBag Customizer</h1> |
| <div class="articledate" style="margin-left: 0px;">Escrito por Jan Stola, Tomas Pavek e Alyona Stashkova</div> |
| |
| <p>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.<br> 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. </p> |
| <p>Cada documento nesta série aborda conjuntos específicos de funcionalidades.</p> |
| <ul> |
| <li>Parte 1: <a href="../java/gbcustomizer-basic.html">Criando um Form Java Básico usando o GridBag Customizer</a></li> |
| <li>Parte 2: Criando um Form Java Avançado usando o GridBag Customizer</li> |
| |
| </ul> |
| |
| <p>O <a href="../java/gbcustomizer-basic.html">primeiro tutorial da série</a> 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. </p> |
| |
| |
| |
| |
| <p><b>Conteúdo</b></p> |
| <img alt="O conteúdo desta página se aplica ao NetBeans IDE 7.1 e à versão mais recente" class="stamp" src="../../../images_www/articles/74/netbeans-stamp-80-74.png" title="O conteúdo desta página se aplica ao NetBeans IDE 7.1 e posterior"> |
| <ul class="toc"> |
| <li><a href="#zip">Abrindo o Projeto de Exemplo</a></li> |
| <li><a href="#invokegb">Chamando o GridBag Customizer</a></li> |
| <li><a href="#01">Funcionalidades Avançadas</a> |
| <ul> |
| <li><a href="#01a">Inserindo Nova Linha</a></li> |
| <li><a href="#01b">Adicionando Novos Componentes</a></li> |
| <li><a href="#01c">Reorganizando o Layout</a></li> |
| <li><a href="#01d">Introduzindo Subcontêineres</a></li> |
| <li><a href="#01e">Navegando entre Contêineres</a></li> |
| |
| </ul></li> |
| |
| <li><a href="#summary">Resumo</a></li> |
| <li><a href="#seealso">Consulte Também</a></li> |
| |
| |
| |
| </ul> |
| |
| |
| <p><b>Para seguir este tutorial, são necessários os recursos e o software a seguir.</b></p> |
| |
| <table> |
| <tbody> |
| <tr> |
| <th class="tblheader" scope="col">Software ou Recurso</th> |
| <th class="tblheader" scope="col">Versão Necessária</th> |
| </tr> |
| <tr> |
| <td class="tbltd1"><a href="http://netbeans.org/downloads/index.html">NetBeans IDE</a></td> |
| <td class="tbltd1">7.1 ou posterior </td> |
| </tr> |
| <tr> |
| <td class="tbltd1"><a href="http://www.oracle.com/technetwork/java/javase/downloads/index.html">JDK (Java Development Kit)</a></td> |
| <td class="tbltd1">Versão 6, 7 ou 8 </td> |
| </tr> |
| |
| <tr> |
| <td class="tbltd1"><a href="https://netbeans.org/projects/samples/downloads/download/Samples%252FJava%252Fgbcustomizer-advanced-tutorial.zip">gbcustomizer-advanced-tutorial.zip</a></td> |
| <td class="tbltd1">Um arquivo compactado com o projeto de demonstração contendo os layouts inicial e de destino do tutorial.</td> |
| </tr> |
| |
| </tbody> |
| </table> |
| |
| <p class="notes"><b>Observações:</b></p> |
| |
| <div class="indent"> |
| <ul> |
| |
| <li>Você pode fazer download do projeto que é usado como um ponto inicial para esta série como um arquivo compactado <tt>.zip</tt>. </li> |
| <li>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.</li> |
| </ul> |
| |
| |
| </div> |
| |
| |
| <!-- ++++++++++++ Using .zip ++++++++++++ --> |
| <a name="zip"></a> |
| <h2>Abrindo o Projeto de Exemplo</h2> |
| |
| <p>Antes de começar a efetuar o layout dos componentes com a ajuda do GridBag Customizer, faça o download do <a href="https://netbeans.org/projects/samples/downloads/download/Samples%252FJava%252Fgbcustomizer-advanced-tutorial.zip">gbcustomizer-advanced-tutorial.zip</a>, extraia o projeto <tt>GridBagCustomizerAdvancedTutorial</tt> em seu disco rígido e abra-o no NetBeans IDE.</p> |
| <ol><li>Faça download e descompacte o projeto <a href="https://netbeans.org/projects/samples/downloads/download/Samples%252FJava%252Fgbcustomizer-advanced-tutorial.zip">gbcustomizer-basic-tutorial.zip</a> em qualquer lugar no computador.</li> |
| <li>Na guia Projetos do NetBeans IDE, clique em Abrir Projeto no menu Arquivo, navegue para o projeto <tt>GridBagCustomizerAdvancedTutorial</tt> 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 <tt>GridBagCustomizerAdvancedTutorial</tt>. |
| <p class="notes"><b>Observação:</b> o projeto <tt>GridBagCustomizerAdvancedTutorial</tt> usa as bibliotecas de classe <tt>Junit</tt> e <tt>JUnit 4</tt>, 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. </p> |
| </li> |
| <li> Expanda <tt>Pacotes de Código-fonte > tutorial</tt> e clique duas vezes em <tt>ContactsAdvancedInitial.java</tt>. <br>O form de exemplo é aberto na view Design do GUI Builder. </li> |
| </ol> |
| <p class="align-center"> |
| <a href="../../../images_www/articles/80/java/gbcustomizer-advanced/sampleform.png" rel="lytebox" title="GridBag Customizer"> <img alt="GridBag Customizer" border="1" src="../../../images_www/articles/80/java/gbcustomizer-advanced/sampleform-small.png"></a></p> |
| |
| |
| |
| <!-- ++++++++++++ Invoking GBCustomizer ++++++++++++ --> |
| <a name="invokegb"></a> |
| <h2>Chamando o GridBag Customizer</h2> |
| |
| <p>Para exibir o GridBag Customizer, conclua as seguintes etapas: </p> |
| <ol> |
| <li>Na view Design, selecione o form JFrame.</li> |
| |
| <li>Clique com botão direito do mouse no form e escolha <tt>Personalizar Layout</tt>.<br> A caixa de diálogo Personalizar Layout é aberta, conforme mostrado abaixo.</li> |
| |
| </ol> |
| <p class="align-center"> |
| <a href="../../../images_www/articles/80/java/gbcustomizer-advanced/customizerdialog.png" rel="lytebox" title="GridBag Customizer"> <img alt="GridBag Customizer" border="1" src="../../../images_www/articles/80/java/gbcustomizer-advanced/customizerdialog-small.png"></a></p> |
| |
| <p class="notes"><b>Observação:</b> 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 <tt>Definir Layout</tt> > <tt>Layout do Grid Bag</tt> (isso ativa o item de menu <tt>Personalizar Layout</tt>) e conclua o procedimento.</p> |
| |
| |
| <a name="01"></a> |
| <h2>Funcionalidades Avançadas</h2> |
| <p>Nesta seção, você usará as funcionalidades avançadas do GridBag Customizer para reorganizar os componentes do form <tt>ContactsAdvancedInitial</tt> de acordo com o layout alvo abaixo mostrado. </p> |
| <p class="align-center"><img alt="Layout de Destino" border="1" src="../../../images_www/articles/80/java/gbcustomizer-advanced/targetlayout.png"></p> |
| <p class="notes"><b>Observação:</b> para exibir o layout alvo em seu NetBeans IDE, na guia Projetos, expanda <tt>Pacotes de Código-fonte > tutorial</tt> e clique duas vezes em <tt>ContactsAdvancedFinal.java</tt>. <br> O form <tt>ContactsAdvancedFinal</tt> com o layout alvo é aberto na view Projeto do GUI Builder.</p> |
| |
| <!-- ++++++++++++ Inserting New Row ++++++++++++ --> |
| <a name="01a"></a> |
| <h3>Inserindo Nova Linha</h3> |
| <p>A seção <tt>Telefone</tt> 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 <tt>Telefone Celular:</tt> e <tt>Telefone Residencial:</tt>), crie uma nova linha aqui como segue:</p> |
| <ol> |
| |
| <li>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 <tt>Telefone Residencial:</tt>. </li> |
| <li>Escolha <tt>Inserir Linha Antes</tt>. |
| <p class="align-center"><img alt="Menu de Contexto-Inserir Linha" border="1" src="../../../images_www/articles/80/java/gbcustomizer-advanced/insertrow.png"></p> |
| <p>Uma nova linha é adicionada como na figura a seguir.</p> |
| <p class="align-center"><img alt="Menu de Contexto - Linha Inserida" border="1" src="../../../images_www/articles/80/java/gbcustomizer-advanced/rowinserted.png"></p></li> |
| </ol> |
| |
| |
| <!-- ++++++++++++ Adding New Components ++++++++++++ --> |
| <a name="01b"></a> |
| <h3>Adicionando Novos Componentes</h3> |
| <p>Para adicionar um novo label e campo de texto à linha recém-adicionada, execute as seguintes etapas: </p> |
| <ol> |
| <li>Clique com o botão direito do mouse na primeira célula da linha recém adicionada.</li> |
| <li>No menu de contexto, escolha <tt>Adicionar Componentes > Controles do Swing > Label</tt>, como mostrado abaixo. |
| <p class="align-center"> |
| <a href="../../../images_www/articles/80/java/gbcustomizer-advanced/addcomponent.png" rel="lytebox" title="Menu de Contexto - Adicionar Label"> <img alt="Menu de Contexto - Adicionar Label" border="1" src="../../../images_www/articles/80/java/gbcustomizer-advanced/addcomponent-small.png"></a></p> |
| |
| <p>O <tt>JLabel1</tt> realçado é exibido na primeira célula.</p></li> |
| <li>Clique com o botão direito do mouse na segunda célula da linha recém-adicionada.</li> |
| <li>No menu de contexto, escolha <tt>Adicionar Componentes > Controle do Swing >Campo de Texto</tt>.<br>O <tt>JTextField1</tt> realçado é exibido na segunda célula. |
| <p class="align-center"><img alt="Menu de Contexto - Jtextfield1 Destacado" border="1" src="../../../images_www/articles/80/java/gbcustomizer-advanced/highlightedtextfield.png"></p></li> |
| |
| </ol> |
| <p>Após os componentes terem sido adicionados, suas restrições do gridbag precisam ser especificadas para os alinhar com outros componentes. </p> |
| <p> |
| Com o componente <tt>JTextField1</tt> selecionado na Área da Grade, faça o seguinte na Folha de Propriedades:</p> |
| <ol> |
| <li>Na caixa de combinação Largura da Grade, insira <tt>3</tt> e pressione Enter. </li> |
| <li>Na caixa de combinação Preencher, selecione <tt>horizontal</tt>.</li> |
| <li>Na caixa de combinação Ancorar, navegue para baixo e selecione <tt>Linha base</tt>. </li> |
| <li>No campo de texto Espessura X, insira <tt>1.0</tt> e pressione Enter. </li> |
| </ol> |
| <p class="align-center"><img alt="jTextField1 - Restrições Especificadas" border="1" src="../../../images_www/articles/80/java/gbcustomizer-advanced/textfieldconstraints.png"></p> |
| <p>Na Área da Grade, selecione o componente <tt>JLabel1</tt> e especifique sua restrição de <tt>Âncora</tt> navegando para baixo e selecionando <tt>Linha Base à Direita</tt> na Folha de Propriedades.</p> |
| <p>Selecione os dois componentes <tt>JLabel1</tt> e <tt>JTextField1</tt> na Área da Grade, clique no botão Procurar (<img alt="Botão Procurar" src="../../../images_www/articles/80/java/gbcustomizer-advanced/browsebutton.png">) à direita do campo de texto <tt>Insets</tt>. A caixa de diálogo <tt>Insets</tt> é exibida. Insira <tt>5</tt> no campo de texto <tt>Superior:</tt> e clique em OK. </p> |
| <p>O form deve se parecer como mostrado abaixo.</p> |
| <p class="align-center"><img alt="Restrições Especificadas" border="1" src="../../../images_www/articles/80/java/gbcustomizer-advanced/constraintsset.png"></p> |
| <p class="notes"><b>Observação:</b> 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.</p> |
| <p>Para definir o texto de exibição para o <tt>JLabel1</tt>, faça o seguinte:</p> |
| <ol> |
| <li> Clique em Fechar para sair da caixa de diálogo Personalizar Layout.</li> |
| <li>Na view Design, selecione o componente <tt>JLabel1</tt> e pressione F2 (alternativamente, selecione Editar Texto no menu de contexto).</li> |
| <li>Delete o texto selecionado e insira <tt>Skype:</tt>. </li> |
| <li>Pressione Enter.</li> |
| </ol> |
| <p>Para remover o texto do componente <tt>JTextField1</tt>, conclua as seguintes etapas:</p> |
| <ol> |
| <li>Na view Design, selecione o componente <tt>JTextField1</tt> e pressione F2 (alternativamente, selecione Editar Texto no menu de contexto).</li> |
| <li>Delete o texto selecionado e pressione Enter. </li> |
| </ol> |
| |
| |
| |
| |
| |
| |
| |
| |
| <!-- ++++++++++++ Reorganizing Layout ++++++++++++ --> |
| <a name="01c"></a> |
| <h3>Reorganizando o Layout</h3> |
| <p>O GridBag Customizer pode economizar seu tempo e esforço ao reposicionar rapidamente os componentes do form como desejado.</p> |
| <p>Para alterar o layout da seção <tt>Telefone</tt> e posicionar quatro campos de texto existentes de uma coluna para duas colunas com dois campos de texto, conclua as seguintes etapas:</p> |
| <ol> |
| <li>Clique com o botão direito do mouse no form e escolha <tt>Personalizar Layout</tt> a partir do menu de contexto.</li> |
| <li>Na caixa de diálogo Personalizar Layout, pressione Ctrl+clique nos quatro componentes <tt>JTextField</tt> para selecioná-los.</li> |
| <li>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. |
| <p class="align-center"><img alt="Campos de Texto Ocupam uma Coluna" border="1" src="../../../images_www/articles/80/java/gbcustomizer-advanced/textfieldsonecolumn.png"></p> |
| <p>O GridBag Customizer pode redimensionar diversos componentes juntos, portanto, criando espaço para a segunda coluna de campos de texto.</p></li> |
| <li>Clique fora do form para cancelar a seleção dos campos de texto redimensionados.</li> |
| <li>Pressione Ctrl e clique para selecionar todos os <tt>Skype:</tt> e <tt>Telefone Residencial:</tt> dos componentes <tt>JLabel</tt> e <tt>JTextField</tt> na seção <tt>Telefone</tt>. </li> |
| <li>Posicione o cursor sobre a seleção e arraste-o para a direita dos dois campos superiores de texto. |
| <p class="align-center"><img alt="Campos de Texto Estão Sendo Movidos para Segunda Coluna" border="1" src="../../../images_www/articles/80/java/gbcustomizer-advanced/movesecondcolumn.png"></p> |
| <p class="notes"><b>Observação:</b> 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. </p> |
| <p>Após mover os componentes, o form deveria se parecer com o exibido abaixo. </p> |
| <p class="align-center"><img alt="Linhas Extras" border="1" src="../../../images_www/articles/80/java/gbcustomizer-advanced/extrarows.png"></p> |
| <p> |
| 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 <tt>Excluir Linha</tt> no menu de contexto. </p> |
| <p>A seção <tt>Telefone</tt> tornou-se mais compacta.</p> |
| <p class="align-center"><img alt="Campos de Texto Movidos para Segunda Coluna" border="1" src="../../../images_www/articles/80/java/gbcustomizer-advanced/textfieldsmoved.png"></p> </li> |
| </ol> |
| <p>Para corrigir o espaço da segunda coluna aqui, faça como segue:</p> |
| <ol><li>Pressione Ctrl+Clique nos labels <tt>Skype:</tt> e <tt>Telefone Residencial:</tt> para selecioná-los na Área da grade.</li> |
| <li>Clique no botão Procurar (<img alt="Botão Procurar" src="../../../images_www/articles/80/java/gbcustomizer-advanced/browsebutton.png">) à direita do campo de texto <tt>Insets</tt>.<br> A caixa de diálogo <tt>Insets</tt> é exibida. </li> |
| <li>Insira <tt>5</tt> no campo de texto <tt>Esquerda:</tt> e clique em OK.</li> |
| </ol> |
| |
| <!-- ++++++++++++ Introducing Subcontainers ++++++++++++ --> |
| <a name="01d"></a> |
| <h3>Introduzindo Subcontêineres</h3> |
| <p>O layout com base na grade algumas vezes introduz dependências desnecessárias que precisam ser solucionadas por meio de subcontêineres.</p> |
| <p>Se você clicar no botão Layout de Teste na barra de ferramentas (<img alt="Botão Layout de Teste" src="../../../images_www/articles/80/java/gbcustomizer-advanced/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.</p> |
| <p class="align-center"> |
| <a href="../../../images_www/articles/80/java/gbcustomizer-advanced/unwantedspace.png" rel="lytebox" title="Espaço Indesejado"> <img alt="Espaço Indesejado" border="1" src="../../../images_www/articles/80/java/gbcustomizer-advanced/unwantedspace-small.png"></a></p> |
| |
| <p>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 <tt>Procurar</tt> seja consumido pelos campos de texto <tt>Rua</tt> e <tt>Cidade:</tt>. O layout atual assegura que a borda direita dos campos de texto <tt>Rua:</tt> e <tt>Cidade:</tt> esteja na mesma posição vertical que a borda esquerda do campo de texto <tt>Telefone Residencial:</tt>. Para tornar estas posições independentes, conclua as seguintes etapas:</p> |
| <ol><li>Pressione Ctrl+clique no campo de texto <tt>Rua:</tt> e no botão <tt>Procurar</tt> à direita dele para selecioná-los.</li> |
| <li>Clique com o botão direito do mouse e escolha <tt>Colocar no Contêiner</tt> no menu de contexto. |
| |
| <p class="align-center"> |
| <a href="../../../images_www/articles/80/java/gbcustomizer-advanced/enclose.png" rel="lytebox" title="Incluir no Contêiner"> <img alt="Incluir no Contêiner" border="1" src="../../../images_www/articles/80/java/gbcustomizer-advanced/enclose-small.png"></a></p> |
| <p>Depois que componentes forem incluídos em um subcontêiner, a borda entre o label <tt>Telefone Residencial:</tt> e o campo de texto não afeta mais a borda entre o campo de texto <tt>Rua</tt> e o botão. </p> |
| <p class="notes"><b>Observação:</b> A ação <tt>Incluir no Contêiner</tt> 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.</p></li> |
| </ol> |
| <p>Repita as duas etapas acima listadas para o campo de texto <tt>Cidade:</tt> e para o botão <tt>Procurar</tt> à direita dele para incorporá-los em um subcontêiner como mostrado abaixo.</p> |
| |
| <p class="align-center"><img alt="Incluir no Contêiner" border="1" src="../../../images_www/articles/80/java/gbcustomizer-advanced/enclosecity.png"></p> |
| |
| <p>Agora você deseja corrigir o espaço indesejado em torno dos botões <tt>OK</tt> e <tt>Cancelar</tt>, como segue:</p> |
| <ol> |
| <li>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 <tt>Personalizar Layout</tt> no menu de contexto.</li> |
| <li>Pressione Ctrl+Clique nos botões <tt>OK</tt> e <tt>Cancelar</tt> na parte inferior do form para selecioná-los.</li> |
| <li>Clique com o botão direito do mouse e escolha <tt>Incluir no Contêiner</tt> a partir do menu de contexto.<br>Um novo subcontêiner é criado para os dois botões. |
| <p class="align-center"><img alt="Botões no Subcontêiner" border="1" src="../../../images_www/articles/80/java/gbcustomizer-advanced/subcontainerbuttons.png"></p> |
| <p class="notes"><b>Observação:</b> 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.</p></li> |
| </ol> |
| |
| <p>Para alterar a ancoragem de todo o subcontêiner, conclua as seguintes etapas:</p> |
| <ol> |
| <li>Certifique-se de que o subcontêiner com os botões <tt>OK</tt> e <tt>Cancelar</tt> é selecionado e clique no botão de seta (<img alt="Botão Layout de Teste" src="../../../images_www/articles/80/java/gbcustomizer-advanced/arrowbutton.png">) à direita da caixa de combinação de <tt>Âncora</tt>.</li> |
| <li>Role a tela para baixo e escolha <tt>Fim da Linha</tt> na lista. |
| <p class="align-center"><img alt="Botões Ancorado para Fim da Linha" border="1" src="../../../images_www/articles/80/java/gbcustomizer-advanced/subcontainerlineend.png"></p></li> |
| |
| </ol> |
| <p>O layout parece bom, mas o subcontêiner com os botões <tt>OK</tt> e <tt>Cancelar</tt> ocupa somente as duas últimas células na última linha.<br> Caso os botões <tt>OK</tt> e </tt>Cancelar<tt> se tornem mais largos (por exemplo, durante a tradução em outro idioma), eles empurrarão as bordas direitas dos campos de texto </tt>Telefone Comercial:<tt> e </tt>Telefone Celular:<tt>. <br> 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. </p> |
| <p class="align-center"><img alt="Subcontêiner Redimensionado" border="1" src="../../../images_www/articles/80/java/gbcustomizer-advanced/subcontainerresized.png"></p> |
| <p>O subcontêiner ocupa todas as células na linha inferior.</p> |
| |
| |
| <!-- ++++++++++++ Navigating Between Containers ++++++++++++ --> |
| <a name="01e"></a> |
| <h3>Navegando entre Contêineres</h3> |
| <p>Para adicionar um componente a um subcontêiner (por exemplo, um botão <tt>Ajuda</tt> para os botões <tt>OK</tt> e <tt>Cancelar</tt> existentes), é preciso alternar do contêiner principal para o subcontêiner antes de editar seu último layout. </p> |
| <p>Conclua as etapas abaixo listadas para adicionar um botão em um subcontêiner existente: </p> |
| <ol><li>Clique no subcontêiner com os botões <tt>OK</tt> e <tt>Cancelar</tt> para selecioná-lo.</li> |
| <li>Clique com o botão direito do mouse no contêiner para exibir o menu de contexto e escolha <tt>Criar Este Contêiner</tt>. |
| |
| <p class="align-center"> |
| <a href="../../../images_www/articles/80/java/gbcustomizer-advanced/designsubcontainer.png" rel="lytebox" title="Criando Subcontêiner"> <img alt="Criando Subcontêiner" border="1" src="../../../images_www/articles/80/java/gbcustomizer-advanced/designsubcontainer-small.png"></a></p> |
| </li> |
| <li>Clique com o botão direito do mouse no cabeçalho da segunda coluna e escolha <tt>Inserir Coluna Após</tt> a partir do menu de contexto.<br> Uma célula vazia para o novo botão é exibida. |
| |
| <p class="align-center"> |
| <a href="../../../images_www/articles/80/java/gbcustomizer-advanced/emptycell.png" rel="lytebox" title="Célula Vazia"> <img alt="Célula Vazia" border="1" src="../../../images_www/articles/80/java/gbcustomizer-advanced/emptycell-small.png"></a></p></li> |
| <li>Clique com o botão direito do mouse na célula recém-criada e escolha <tt>Adicionar Componente</tt> > <tt>Controles do Swing</tt> > <tt>Botão</tt> a partir do menu de contexto.<br> Um novo botão <tt>jButton1</tt> é adicionado. |
| <p class="align-center"> |
| <a href="../../../images_www/articles/80/java/gbcustomizer-advanced/newbutton.png" rel="lytebox" title="Botão Novo Adicionado"> <img alt="Botão Novo Adicionado" border="1" src="../../../images_www/articles/80/java/gbcustomizer-advanced/newbutton-small.png"></a></p></li> |
| <li>Clique no botão de Âncora Relacionado à Linha de Base (<img alt="Âncora Relacionada à Linha de Base" src="../../../images_www/articles/80/java/gbcustomizer-advanced/baselineanchor.png">) no Personalizador de Propriedades para alinhar o botão Novo com os dois existentes na linha.</li> |
| <li>Clique no botão Procurar (<img alt="Botão Procurar" src="../../../images_www/articles/80/java/gbcustomizer-advanced/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.</li> |
| |
| <li>Para verificar a aparência do contêiner principal, clique com o botão direito do mouse no subcontêiner desenhado e escolha <tt>Criar Contêiner Pai</tt> no menu de contexto. |
| <p class="align-center"><img alt="Criar Contêiner Pai" border="1" src="../../../images_www/articles/80/java/gbcustomizer-advanced/designparentcontainer.png"></p> |
| <p class="notes"><b>Observação:</b> O menu de contexto não é exibido se você clicar com o botão direito do mouse nos botões.</p> |
| </li> |
| </ol> |
| |
| <p>A criação do layout foi concluída.<br> Falta uma alteração final não relativa ao layout do contêiner.<br> Para renomear o botão, conclua as seguintes etapas:</p> |
| <ol> |
| <li>Clique em Fechar para sair da caixa de diálogo Personalizar Layout.</li> |
| <li>Na view Design, selecione o componente <tt>JButton1</tt> e pressione F2 (se preferir, selecione Editar Texto a partir do menu de contexto).</li> |
| <li>Delete o texto selecionado e insira <tt>Ajuda</tt>. </li> |
| <li>Pressione Enter. |
| <p class="align-center"><img alt="Layout Final" border="1" src="../../../images_www/articles/80/java/gbcustomizer-advanced/finallayout.png"></p></li> |
| </ol> |
| |
| |
| |
| <a name="summary"></a> |
| <h2>Resumo</h2> |
| <p>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.</p> |
| <p>Vá para <a href="../java/gbcustomizer-basic.html">Criando um Form Java Básico usando o GridBag Customizer</a></p> |
| |
| |
| <p class="align-center"><a href="#top">início</a></p> |
| |
| |
| <div class="feedback-box" ><a href="/about/contact_form.html?to=3&subject=Feedback:%20Designing%20an%20Advanced%20Java%20Form%20Using%20the%20GridBag%20Customizer">Enviar Feedback neste Tutorial</a></div> |
| <br style="clear:both;" > |
| |
| |
| <a name="seealso"></a> |
| <h2>Consulte Também</h2> |
| |
| <p>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:</p> |
| <ul> |
| <li><a href="gui-functionality.html">Introdução à Construção de GUIs</a> </li> |
| |
| <li><a href="gui-image-display.html">Manipulando Imagens em uma Aplicação da GUI</a></li> |
| |
| |
| <li><a href="http://wiki.netbeans.org/NetBeansUserFAQ#GUI_Editor_.28Matisse.29" target="_blank"> FAQ do GUI Builder</a> </li> |
| <li><a href="../../trails/matisse.html">Trilha de Aprendizado das Aplicações de GUI do Java</a> </li> |
| <li><a href="http://www.oracle.com/pls/topic/lookup?ctx=nb8000&id=NBDAG920">Implementando GUIs de Java</a> em <i>Desenvolvendo Aplicações com o NetBeans IDE</i></a></li> |
| </ul> |
| |
| <p class="align-center"><a href="#top">início</a></p> |
| </body> |
| </html> |
