corner imagecorner image
IDEPlatformPluginsDocs & SupportCommunityPartners

Criando uma GUI Swing no NetBeans IDE

O conteúdo desta página se aplica ao NetBeans IDE 6.7, 6.8 e 6.9

baixe o quickstart-gui.zip que contém o seguinte:

  • O arquivo HTML do tutorial para leitura off-line.
  • Demonstrações interativas detalhadas da funcionalidade do Construtor de GUI (arquivos .swf).

Este tutorial conduzirá você através do processo de criação da interface gráfica do usuário (GUI) para um aplicativo nomeado ContactEditor, utilizando Construtor de GUI do NetBeans IDE. No processo, será feito o layout de uma GUI inicial que habilita visualizar e editar informações de contato dos indivíduos incluídos em um banco de dados de funcionários.

Neste tutorial, você aprenderá a:

  • Utilizar a interface do Construtor de GUI
  • Criar um contêiner GUIs
  • Adicionar componentes
  • Redimensionar componentes
  • Alinhar componentes
  • Ajustar a ancoragem dos componentes
  • Definir o comportamento de redimensionamento automático dos componentes
  • Editar as propriedades dos componentes

    • Este tutorial demora aproximadamente 30 minutos para ser concluído.

Para concluir este tutorial, são necessários os seguintes recursos e softwares.

Software ou recurso Versão necessária
NetBeans IDE Versão 6.9, 6.8 ou 6.7
Java Development Kit (JDK) versão 6
quickstart-gui.zip Um arquivo zip que contém demonstrações

Primeiros passos

O Construtor de GUIs do IDE torna possível construir GUIs de aparência profissional sem um conhecimento profundo dos gerenciadores de layout. Você pode criar formulários, simplesmente colocando componentes onde desejar.

Para obter descrições sobre o comentário visual do Construtor de GUI, é possível utilizar a Legenda de comentário visual do Construtor de GUI.

Criando um projeto

Como todo o desenvolvimento em Java no IDE ocorre dentro dos projetos, precisamos primeiro criar um projeto ContactEditor para armazenar os códigos-fonte e outros arquivos do projeto. Um projeto do IDE é um grupo de arquivos de códigos-fonte Java e metadados associados que inclui arquivos de propriedades específicos do projeto, um script de construção Ant que controla as configurações de construção e execução e um arquivo project.xml, que mapeia alvos Ant para comandos do IDE. Embora as aplicações Java geralmente consistam em vários projetos do IDE, para o objetivo deste tutorial, construiremos uma aplicação simples, inteiramente armazenada em um único projeto.

Para criar um novo projeto de aplicação ContactEditor:

  1. escolha Arquivo > Novo projeto. Alternativamente, é possível clicar no ícone Novo projeto na barra de ferramentas do IDE.
  2. No painel Categorias, selecione o nó Java e no painel Projetos, escolha Aplicativo Java. Clique em Próximo.
  3. Insira ContactEditor no campo Nome do projeto e especifique o local do projeto.
  4. Deixe desmarcada a caixa de verificação Utilizar pasta dedicada para armazenar bibliotecas.
  5. Verifique se a caixa de verificação Definir como projeto principal está marcada e desmarque o campo Criar classe principal.
  6. Clique em Terminar.

    O IDE criará a pasta ContactEditor no sistema no local designado. Essa pasta contém todos os arquivos associados do projeto, como o script Ant, pastas para armazenamento de fontes e testes e uma pasta para os metadados específicos do projeto. Para visualizar a estrutura do projeto, utilize a janela Arquivos do IDE.

Criando um contêiner JFrame

Após criar a nova aplicação, você pode ter percebido que a pasta Pacotes de códigos-fonte na janela Projetos contém um nó <pacote padrão> vazio. Para prosseguir com a construção da nossa interface, precisamos criar um contêiner Java no qual colocaremos os outros componentes requeridos da GUI. Nessa etapa, criaremos um contêiner utilizando o componente JFrame e o colocaremos em um novo pacote.

Para adicionar um contêiner JFrame:

  1. na janela Projetos, clique com o botão direito do mouse no nó ContactEditor e selecione Novo > Formulário JFrame.
    Outra opção é localizar um formulário JFrame escolhendo Novo > Outro > Formulários da GUI Swing > Formulário JFrame.
  2. Insira ContactEditorUI como Nome da classe.
  3. Insira my.contacteditor como nome do pacote.
  4. Clique em Terminar.

    O IDE criará o formulário ContactEditorUI e a classe ContactEditorUI no aplicativo ContactEditorUI.java e abrirá o formulário ContactEditorUI no Construtor de GUI. Observe que o pacote my.contacteditor substitui o pacote padrão.

início

Familiarizando-se com o Construtor de GUI

Agora que já configuramos o novo projeto para o aplicativo, vamos nos familiarizar com a interface do Construtor de GUI.

Nota: para explorar a interface do Construtor de GUI com uma demonstração interativa, abra o arquivo the quickstart-gui_swfs/001_gui_builder_ui.html na pasta zip que você baixou.

Interface do Construtor de GUI do IDE.

Quando adicionamos o contêiner JFrame, o IDE abriu o formulário ContactEditorUI recém-criado em uma aba do Editor com uma barra de ferramentas que contém vários botões, como mostra a ilustração anterior. O formulário ContactEditor aberto na exibição Desenho do Construtor de GUI e três janelas adicionais apareceram automaticamente ao longo das margens do IDE, permitindo navegar, organizar e editar formulários GUI à medida que você os constroi.

As várias janelas do Construtor de GUI incluem:

  • Área de desenho. Janela principal do Construtor de GUI para a criação e edição de formulários de GUI Java. Os botões de alternância Código-fonte e Desenho da barra de ferramentas permitem visualizar um código-fonte de classe ou uma visualização gráfica dos componentes GUI. Os botões adicionais da barra de ferramentas oferecem acesso conveniente aos comandos comuns, como escolher entre os modos Seleção e Conexão, alinhamento de componentes, definição do comportamento de dimensionamento automático e visualização de formulários.
  • Inspetor. Fornece uma representação de todos os componentes, tanto visuais como não visuais, no aplicativo como uma hierarquia em árvore. O Inspetor também oferece comentário visual sobre qual componente da árvore está sendo editado no Construtor de GUI, bem como permite organizar componentes nos painéis disponíveis.
  • Paleta. Uma lista personalizável dos componentes disponíveis contendo abas para os componentes JFC/Swing, AWT e JavaBeans, bem como gerenciadores de layout. Além disso, é possível criar, remover e reorganizar as categorias exibidas na Paleta utilizando o personalizador.
  • Janela Propriedades. Exibe as propriedades do componente atualmente selecionado no Construtor de GUI ou nas janelas Inspetor, Projetos ou Arquivos.

Se você clicar no botão Código-fonte, o IDE exibirá o código-fonte Java do aplicativo no Editor com seções de código geradas automaticamente pelo Construtor de GUI e indicadas por áreas azuis, nomeadas Blocos protegidos. Blocos protegidos são áreas protegidas que não são editáveis na exibição de Código-fonte. Só é possível editar o código exibido nas áreas brancas do Editor na exibição de Código-fonte. Se for necessário fazer alterações no código em um Bloco protegido, clique no botão Desenho para que o Editor do IDE volte ao Construtor de GUI, onde você poderá fazer os ajustes necessários ao formulário. Ao salvar as alterações, o IDE atualizará os códigos-fonte do arquivo.

Nota: para os desenvolvedores avançados, está disponível o Gerenciador de paleta, que habilita adicionar componentes personalizados de JARs, bibliotecas ou projetos à Paleta. Para adicionar componentes personalizados através do Gerenciador de paleta, escolha Ferramentas > Paleta > Componentes Swing/AWT.

início

Conceitos-chave

O Construtor de GUI do IDE resolve o problema central da criação de GUIs Java otimizando o fluxo de dados da criação de interfaces gráficas, liberando os desenvolvedores das complexidades dos gerenciadores de layout do Swing. Ele faz isso estendendo o Construtor de GUI atual do NetBeans para dar suporte ao paradigma claro "Desenho livre" com regras simples de layout, fáceis de compreender e utilizar. À medida que você faz o layout do formulário, o Construtor de GUI fornece diretrizes visuais sugerindo o espaçamento e alinhamento ideais dos componentes. Em segundo plano, o Construtor de GUI converte as decisões de desenho em uma UI funcional, que é implementada com o uso de um gerenciador de layouts GroupLayout e outras construções do Swing. Como ele utiliza um modelo de layout dinâmico, as GUIs construídas com o Construtor de GUI se comportam como o esperado em tempo de execução, ajustando para acomodar as alterações feitas sem alterar os relacionamentos definidos entre os componentes. Quando você redimensionar o formulário, alterar locais ou especificar aparência e funcionalidade diferentes, a GUI se ajustará automaticamente para respeitar a aparência do alvo e os suplementos e deslocamentos da funcionalidade.

Desenho livre

No Construtor de GUI do IDE, é possível construir formulários simplesmente colocando os componentes onde quiser, como se estivesse utilizando posicionamento absoluto. O Construtor de GUI descobre quais atributos de layout são obrigatórios e gera o código automaticamente. Você não precisa se preocupar com suplementos, âncoras, preenchimentos, etc.

Posicionamento automático dos componentes (Encaixe)

À medida em que os componentes são adicionados a um formulário, o Construtor de GUI fornece comentário visual, que auxilia no posicionamento dos componentes com base na aparência e funcionalidade do seu sistema operacional. O Construtor de GUI oferece dicas in-line úteis e outros comentários visuais em relação ao local no qual os componentes devem ser colocados no formulário, encaixando automaticamente os componentes na posição ao longo das diretrizes. Ele faz essas sugestões com base na posição dos componentes já colocados no formulário, enquanto permite que o preenchimento permaneça flexível, de maneira que a aparência e a funcionalidade do alvo diferente sejam processadas corretamente em tempo de execução.

Comentário visual

O Construtor de GUI também oferece comentário visual sobre as relações de ancoragem e encadeamento de componentes. Esses indicadores permitem identificar rapidamente as várias relações de posicionamento e o comportamento fixo dos componentes que afetam a maneira como a GUI aparecerá e se comportará em tempo de execução. Isso acelera o processo de desenho GUI, permitindo que você crie rapidamente interfaces visuais com aspecto profissional e que funcionam.

início

Primeiro o principal

Agora que você está familiarizado com a interface do Construtor de GUI, este é o momento para começar a desenvolver a UI do nosso aplicativo ContactEditor. Nesta seção, veremos a utilização da Paleta do IDE para adicionar os vários componentes GUI necessários ao nosso formulário.

Graças ao paradigma Desenho livre do IDE, não é necessário brigar com os gerenciadores de layout para controlar o tamanho e posição dos componentes nos contêineres. Tudo o que você precisa fazer é arrastar e soltar os componentes necessários no formulário GUI, conforme as ilustrações abaixo mostram.

Adicionando componentes: os Fundamentos

Embora o Construtor de GUI simplifique o processo de criação de GUI Java, é sempre útil esboçar a maneira como quer que a interface se pareça antes de começar a fazer seu layout. Muitos projetistas de interfaces consideram isso uma técnica de "melhor prática", entretanto, para este tutorial, você pode simplesmente dar uma olhada como nosso formulário preenchido deve se parecer indo para a seção Visualização da GUI .

Como já adicionamos um JFrame como contêiner de nível superior do formulário, a próxima etapa é adicionar dois JPanels que nos permitirão unir os componentes da nossa UI utilizando bordas com títulos. Veja as ilustrações abaixo e observe o comportamento "arrastar e soltar" do IDE para fazer isso.

Para adicionar um JPanel:

  1. Na janela Paleta, selecione o componente Painel na categoria Swing, clicando e soltando o botão do mouse.
  2. Mova o cursor até o canto esquerdo superior do formulário no Construtor de GUI. Quando o componente estiver localizado próximo às margens superior e esquerda do contêiner, diretrizes de alinhamento horizontal e vertical aparecerão indicando as margens preferidas. Clique no formulário para colocar o JPanel nesse local.

    3. O componente JPanel aparecerá no formulário ContactEditorUI com realce na cor laranja, o que significa que ele está selecionado, como mostra a ilustração abaixo. Após soltar o botão do mouse, pequenos indicadores aparecerão para mostrar as relações de ancoragem dos componentes e um nó JPanel correspondente será exibido na janela Inspetor.

Depois, precisamos redimensionar o JPanel para dar espaço aos componentes que serão inseridos posteriormente, mas antes tomemos um minuto para indicar outros recursos de visualização do Construtor de GUI. Para fazer isso, precisamos desmarcar o JPanel que acabamos de adicionar. Como nós ainda não adicionamos uma borda com título, o painel desaparecerá. Observe, entretanto, que quando ao passar o cursor sobre o JPanel, as margens mudarão para cinza claro para que sua posição possa ser vista claramente. Você precisa apenas clicar em qualquer lugar no componente para selecioná-lo novamente e fazer com que as alças de redimensionamento e os indicadores de ancoragem reapareçam.

Para redimensionar o JPanel:

  1. Selecione o JPanel recém-adicionado. As pequenas alças de redimensionamento quadradas reaparecerão em torno do perímetro do componente.
  2. Clique e segure a alça de redimensionamento na margem direita do JPanel e arraste-a até que a diretriz de alinhamento pontilhada seja exibida próxima à margem do formulário.
  3. Solte a alça de redimensionamento para redimensionar o componente.

    4. O componente JPanel é estendido para ficar entre as margens esquerda e direita do contêiner de acordo com o deslocamento recomendado, como mostra a ilustração abaixo.

Agora que adicionamos um painel para conter a informação Nome da nossa UI, precisamos repetir o processo para adicionar outro diretamente abaixo da primeira para a informação E-mail. Consultando as ilustrações abaixo, repita as duas tarefas anteriores, prestando atenção ao posicionamento sugerido pelo Construtor de GUI. Observe que o espaçamento vertical sugerido entre os dois JPanels é muito mais estreito que entre as margens. Quando você tiver adicionado o segundo JPanel, redimensione-o para que preencha o espaço vertical restante do formulário.

Como queremos distinguir visualmente as funções nas seções superior e inferior da nossa GUI, precisamos adicionar uma borda e título a cada JPanel. Primeiro faremos isso utilizando a janela Propriedades e depois a experimentaremos utilizando o menu pop-up.

Para adicionar bordas de título aos JPanels:

  1. Selecione o JPanel superior no Construtor de GUI.
  2. Na janela Propriedades, clique no botão de reticências (...) ao lado da propriedade Borda.
  3. No editor de bordas do JPanel exibido, selecione o nó TitledBorder no painel Bordas disponíveis.
  4. No painel Propriedades abaixo, insira Name para a propriedade Título.
  5. Clique nas reticências (...) ao lado da propriedade Fonte, selecione Negrito em Estilo de fonte e insira 12 no Tamanho. Clique em OK para fechar as caixas de diálogo.
  6. Selecione o JPanel inferior e repita as etapas de 2 a 5, mas dessa vez clique com o botão direito do mouse no JPanel e acesse a janela Propriedades utilizando o menu pop-up. Insira E-mail para a propriedade Título.

    As bordas com título serão adicionadas a ambos componentes JPanel.

Nota: para visualizar uma demonstração do procedimento anterior, abra o arquivo quickstart-gui_swfs/002_add_components_basic.html na pasta zip que você baixou.

Adicionando componentes individuais ao formulário

Agora precisamos começar a adição dos componentes que apresentarão as informações de contato reais na nossa lista de contatos. Nessa tarefa, adicionaremos quatro JTextFields que exibirão as informações de contato e os JLabels que as descreverão. Ao fazer isso, observe as linhas de guia horizontais e verticais que o Construtor de GUI exibe, sugerindo o espaçamento preferido dos componentes conforme definido pela aparência e funcionalidade do sistema operacional. Isso assegura que nossa GUI seja processada automaticamente respeitando a aparência do sistema operacional de destino em tempo de execução.

Para adicionar um JLabel ao formulário:

  1. na janela Paleta, selecione o componente Rótulo na categoria Swing.
  2. Mova o cursor acima do JPanel Name adicionado anteriormente. Quando as linhas de guia aparecerem, indicando que o JLabel está posicionado no canto superior esquerdo do JPanel com pequena margem nos cantos superior e esquerdo, clique para posicionar o rótulo.

    3. O JLabel será adicionado ao formulário e um nó correspondente, representando o componente, será adicionado à janela Inspetor.

Antes de prosseguir, precisamos editar o texto de exibição do JLabel que acabamos de adicionar. Embora seja possível editar o texto de exibição do componente em qualquer ponto, a maneira mais fácil é fazer isso à medida que o adiciona.

Para editar o texto de exibição de um JLabel:

  1. clique duas vezes no JLabel para selecionar a exibição de texto.
  2. Digite Nome: e pressione Enter.

    3. O novo nome do JLabel é exibido e a largura do componente será ajustada como resultado da edição.

Agora adicionaremos um JTextField para que possamos ter uma vista rápida do recurso de alinhamento da linha de base do Construtor de GUI.

Para adicionar um JTextField ao formulário:

  1. na janela Paleta, selecione o componente Campo de texto na categoria Swing.
  2. Mova o cursor imediatamente à direita do JLabel Nome: recém-adicionado. Quando a diretriz horizontal aparecer, indicando que a linha de base do JTextField está alinhada com aquela do JLabel e o espaçamento entre os dois componentes for sugerido com uma diretriz vertical, clique para posicionar o JTextField.

    3. O JTextField se encaixará na posição no formulário alinhado com a linha de base do JLabel, conforme mostra a ilustração abaixo. Observe que o JLabel mudou ligeiramente para baixo para se alinhar à linha de base do campo de texto mais alto. Como sempre, um nó, representando o componente, será adicionado à janela Inspetor.

Antes de prosseguir, precisamos adicionar mais um JLabel e JTextField imediatamente à direita desses já adicionados, conforme mostra a ilustração abaixo. Agora insira Sobrenome: como texto de exibição do JLabel e mantenha, por enquanto, o texto do espaço reservado dos JTextFields como está.

Para redimensionar um JTextField:

  1. selecione o JTextField que nós acabamos de adicionar à direita do Sobrenome: JLabel.
  2. Arraste a alça de redimensionamento direita do JTextField em direção à margem direita do JPanel de fechamento.
  3. Quando as linhas de guia de alinhamento vertical aparecerem sugerindo a margem entre o campo de texto e a margem direita do JPanel, solte o botão do mouse para redimensionar o JTextField.

    4. A margem direita do JTextField se encaixará em alinhamento à margem recomendada do JPanel, conforme mostra a ilustração abaixo.

Nota: para visualizar uma demonstração do procedimento anterior, abra o arquivo quickstart-gui_swfs/003_add_individual_components.html na pasta zip que você baixou.

Adicionando vários componentes ao formulário

Agora adicionaremos os JLabels Título: e Apelido: que descrevem dois JTextFields que adicionaremos em um minuto. Arrastaremos e soltaremos os componentes ao pressionarmos a tecla Shift para adicioná-los rapidamente ao formulário. Enquanto fazemos isso, observe novamente que o Construtor de GUI exibe diretrizes horizontais e verticais sugerindo o espaçamento preferido do componente.

Para adicionar vários JLabels ao formulário:

  1. Na janela Paleta, selecione o componente Rótulo na categoria Swing, clicando e soltando o botão do mouse.
  2. Mova o cursor sobre o formulário diretamente abaixo do JLabel Nome: adicionado anteriormente. Quando as diretrizes aparecerem, indicando que a nova borda esquerda do JLabel está alinhada à do JLabel acima e houver uma pequena margem entre ambos, clique pressionando a tecla Shift para posicionar o primeiro JLabel.
  3. Ainda pressionando a tecla Shift, clique para colocar outro JLabel imediatamente à direita do primeiro. Certifique-se de soltar a tecla Shift antes de posicionar o segundo JLabel. Se você se esquecer de soltar a tecla Shift antes de posicionar o último JLabel, basta pressionar a tecla Escape.

    4. Os JLabels serão adicionados ao formulário criando uma segunda linha, como mostra a ilustração abaixo. Os nós que representam os componentes serão adicionados à janela Inspetor.

Antes de continuar, precisamos editar o nome do JLabels para que possamos ver o efeito dos alinhamentos que definiremos posteriormente.

Para editar o texto de exibição de JLabels:

  1. clique duas vezes no primeiro JLabel para selecionar a exibição de texto.
  2. Digite Título: e pressione Enter.
  3. Repita as etapas 1 e 2, inserindo Apelido: para a propriedade nome do segundo JLabel.

    4. Os novos nomes dos JLabels serão exibidos no formulário e mudarão como resultado das larguras editadas, como mostra a ilustração abaixo.

Nota: para visualizar uma demonstração do procedimento anterior, abra o arquivo quickstart-gui_swfs/004_add_multi_components.html na pasta zip que você baixou.

Inserindo componentes

Geralmente, é necessário adicionar um componente entre componentes já colocados em um formulário. Ao adicionar um componente entre dois componentes existentes, o Construtor de GUI automaticamente os mudará para dar espaço para o novo componente. Para demonstrar isso, inseriremos um JTextField entre os JLabels adicionados anteriormente, como mostram as duas ilustrações abaixo.

Para inserir um JTextField entre dois JLabels:

  1. Na janela Paleta, selecione o componente Campo de texto na categoria Swing.
  2. Mova o cursor acima dos JLabels Título: e Apelido: na segunda linha de maneira que o JTextField sobreponha ambos e fique alinhado às suas linhas de base. Se você tiver dificuldade em posicionar o novo campo de texto, poderá encaixá-lo à diretriz esquerda do JLabel Apelido, como mostra a primeira imagem abaixo.
  3. Clique para posicionar o JTextField entre os JLabels Título: e Apelido:.

    4. O JTextField se encaixará entre os dois JLabels. O JLabel da extremidade direita muda em direção à direita do JTextField para acomodar o deslocamento horizontal sugerido.

Ainda precisamos adicionar outro JTextField ao formulário que exibirá o apelido do contato no lado direito do formulário.

Para adicionar um JTextField:

  1. na janela Paleta, selecione o componente Campo de texto na categoria Swing.
  2. Mova o cursor para a direita do rótulo Apelido e clique para posicionar o campo de texto.

    3. O JTextField se encaixará ao lado esquerdo do JLabel.

Para redimensionar um JTextField:

  1. arraste as alças de redimensionamento do JTextField do rótulo Apelido: adicionado na tarefa anterior à direita do JPanel de fechamento.
  2. Quando as diretrizes de alinhamento vertical aparecerem sugerindo a margem entre o campo de texto e as margens do JPanel, solte o botão do mouse para redimensionar o JTextField.

    3. A margem direita do JTextField se encaixará em alinhamento com a margem recomendada do JPanel e o Construtor de GUI deduzirá o comportamento de redimensionamento correto.

Nota: para visualizar uma demonstração do procedimento anterior, abra o arquivo quickstart-gui_swfs/005_insert_components.html na pasta zip que você baixou.

início

Avançar

Alinhamento é um dos aspectos mais fundamentais da criação GUI com aparência profissional. Na seção anterior, tivemos uma vista rápida dos recursos de alinhamento do IDE durante a adição dos componentes JLabel e JTextField ao nosso formulário ContactEditorUI. Depois, veremos de maneira mais profunda os recursos de alinhamento do Construtor de GUI, conforme trabalhamos com os outros componentes necessários para a nossa aplicação.

Alinhamento de componentes

Sempre que você adiciona um componente a um formulário, o Construtor de GUI os alinha efetivamente, conforme evidenciado pelas diretrizes de alinhamento exibidas. Entretanto, às vezes, também é necessário especificar diferentes relacionamentos entre os grupos de componentes. Anteriormente, nós adicionamos quatro JLabels necessários para a nossa GUI ContactEditor, mas nós não os alinhamos. Agora alinharemos as duas colunas de JLabels para que as margens direitas se alinhem.

Para alinhar componentes:

  1. mantenha pressionada a tecla Ctrl e clique para selecionar os JLabels Nome: e Título: do lado esquerdo do formulário.
  2. Clique no botão Alinhar à direita na coluna () na barra de ferramentas. Alternativamente, clique com o botão direito do mouse em um deles e escolha Alinhar > Direita na coluna no menu pop-up.
  3. Repita isso também para os JLabels Sobrenome: e Apelido:.

    4. A posição dos JLabels muda para que as margens direitas do texto de exibição sejam alinhadas. Os relacionamentos de ancoragem serão atualizados, indicando que os componentes foram agrupados.

Antes de terminarmos com os JTextFields adicionados anteriormente, precisamos nos certificar de que os dois JTextFields que inserimos entre os JLabels estejam definidos para se redimensionarem corretamente. Ao contrário dos dois JTextFields que foram esticados para a margem direita do formulário, o comportamento de redimensionamento dos componentes inseridos não é definido automaticamente.

Para definir o comportamento de redimensionamento de um componente:

  1. clique pressionando a tecla Control nos dois componentes JTextField inseridos para selecioná-los no Construtor de GUI.
  2. Com os dois JTextFields selecionados, clique com o botão direito do mouse em um deles e escolha Redimensionamento automático > Horizontal no menu pop-up.

    3. Os JTextFields serão configurados com redimensionamento horizontal em tempo de execução. As diretrizes de alinhamento e os indicadores de ancoragem serão atualizados, fornecendo comentário visual dos relacionamentos dos componentes.

Para configurar os componentes para que tenham o mesmo tamanho:

  1. clique pressionando a tecla Control nos quatro JTextFields do formulário para selecioná-los.
  2. Com os JTextFields selecionados, clique com o botão direito do mouse em um deles e escolha Definir tamanho padrão no menu pop-up.

    3. Todos os JTextFields terão a mesma largura definida e os indicadores serão adicionados na parte superior destes, fornecendo comentário visual dos relacionamentos dos componentes.

Agora precisamos adicionar outro JLabel que descreva a JComboBox que permitirá aos usuários selecionar o formato das informações que nossa aplicação ContactEditor exibirá.

Para alinhar um JLabel a um grupo de componentes:

  1. na janela Paleta, selecione o componente Rótulo na categoria Swing.
  2. Mova o cursor abaixo dos JLabels Nome: e Título: no lado esquerdo do JPanel. Quando as diretrizes aparecerem, indicando que a nova borda direita do JLabel está alinhada às margens direitas do grupo de componentes acima (os dois JLabels), clique para posicionar o componente.

    3. O JLabel se encaixará em uma posição alinhada à direita com a coluna dos JLabels acima, conforme mostra a ilustração abaixo. O Construtor de GUI atualiza as linhas de status de alinhamento, indicando as relações de espaçamento e ancoragem do componente.

Como nos exemplos anteriores, clique duas vezes no JLabel para selecionar o texto de exibição e insira Exibir formato: para nome de exibição. Observe que quando o JLabel se encaixa na posição, os outros componentes mudam para acomodar o texto de exibição maior.

Nota: para visualizar uma demonstração do procedimento anterior, abra o arquivo quickstart-gui_swfs/006_align_components.html na pasta zip que você baixou.

Alinhamento da linha de base

Quando você adiciona ou move componentes que incluem texto (JLabels, JTextFields, etc.), o IDE sugere alinhamentos baseados nas linhas de base do texto nos componentes. Quando inserimos o JTextField anteriormente, por exemplo, sua linha de base foi automaticamente alinhada aos JLabels adjacentes.

Agora adicionaremos a caixa de combinação que permitirá aos usuários selecionar o formato das informações que nossa aplicação ContactEditor exibirá. À medida que adicionamos JComboBox, alinharemos a linha de base com o texto do JLabel. Observe mais uma vez as diretrizes de alinhamento da linha de base aparece para nos auxiliar com o posicionamento.

Para alinhar as linhas de base dos componentes:

  1. na janela Paleta, selecione o componente Caixa de combinação na categoria Swing.
  2. Mova o cursor à direita do JLabel recém-adicionado. Quando a linha de guia horizontal aparecer, indicando que a linha de base do JComboBox está alinhada à linha de base do texto do JLabel e o espaçamento entre os dois componentes é sugerido com uma diretriz vertical, clique para posicionar a caixa de combinação.

    3. O componente se encaixará em uma posição alinhada com a linha de base do JLabel à esquerda, conforme mostra a ilustração abaixo. O Construtor de GUI exibe as linhas de status, indicando as relações de espaçamento e ancoragem do componente

Para redimensionar o JComboBox:

  1. selecione a Caixa de combinação no Construtor de GUI.
  2. Arraste a alça de redimensionamento na margem direita do JComboBox até que as diretrizes de alinhamento apareçam sugerindo o deslocamento preferido entre as margens do JComboBox e do JPanel.

    3. Conforme mostra a ilustração abaixo, a margem direita do JComboBox se encaixará em alinhamento com a margem recomendada do JPanel e a largura do componente será automaticamente definida para se redimensionar ao formulário.

A edição de modelos de componentes está além do escopo desse tutorial, portanto deixaremos, por enquanto, a lista de itens de espaço reservado da JComboBox como está.

Nota: para visualizar uma demonstração do procedimento anterior, abra o arquivo quickstart-gui_swfs/007_insert_baseline.html na pasta zip que você baixou.

início

Revisando que foi aprendido

Terminamos um bom início de construção da nossa GUI ContactEditor, mas tomemos um minuto para recapitular o que aprendemos enquanto adicionamos mais alguns componentes que nossa interface requer.

Até agora, nós nos concentramos na adição de componentes à nossa GUI ContactEditor utilizando as diretrizes de alinhamento do IDE para nos ajudar no posicionamento. Entretanto, é importante compreender que a ancoragem é outra parte integrante do posicionamento de componentes. Embora ainda não tenhamos discutido isso, você já se beneficiou com esse recurso sem perceber. Como mencionado antes, ao adicionar um componente a um formulário, o IDE sugere o posicionamento preferido da aparência de destino com diretrizes. Depois de posicionados, os novos componentes também são ancorados na margem mais próxima do contêiner ou componente para assegurar que os relacionamentos entre os componentes sejam mantidos em tempo de execução. Nesta seção, nós nos concentraremos em concluir as tarefas de maneira mais otimizada, ao ressaltarmos o trabalho que o Construtor de GUI está fazendo nos bastidores.

Adicionando, alinhando e ancorando

O Construtor de GUI permite fazer o layout de formulários rápida e facilmente otimizando gestos típicos do fluxo de trabalho. Ao adicionar um componente a um formulário, o Construtor de GUI o encaixa automaticamente na posição preferida e define as relações de encadeamento necessárias para que você se concentre no desenho dos formulários em vez de brigar com detalhes de implementação complicados.

Para adicionar, alinhar e editar o texto de exibição de um JLabel:

  1. na janela Paleta, selecione o componente Rótulo na categoria Swing.
  2. Mova o cursor sobre o formulário imediatamente abaixo do título E-mail do JPanel inferior. Quando as diretrizes aparecerem, indicando que está posicionado no canto superior esquerdo do JPanel com uma pequena margem nos cantos superior e esquerdo, clique para posicionar o JLabel.
  3. Clique duas vezes no JLabel para selecionar a exibição de texto. Depois digite Endereço de e-mail: e pressione Enter.

    4. O JLabel se encaixará na posição preferida no formulário e será ancorado nas margens superior e esquerda do JPanel de fechamento. Assim como ocorreu anteriormente, um nó correspondente, representando o componente, também será adicionado à janela Inspetor.

Para adicionar um JTextField:

  1. na janela Paleta, selecione o componente Campo de texto na categoria Swing.
  2. Mova o cursor imediatamente à direita do rótulo Endereço de e-mail recém-adicionado. Quando as diretrizes aparecerem, indicando que a linha de base do JTextField está alinhada à linha de base do texto no JLabel e a margem entre os dois componentes for sugerida com uma diretriz vertical, clique para posicionar o campo de texto.

    3. O JTextField se encaixará à direita do JLabel Endereço de e-mail: e será encadeado ao JLabel. O nó correspondente também será adicionado à janela Inspetor.

  3. Arraste a alça de redimensionamento do JTextField em direção à direita do JPanel até que as diretrizes de alinhamento sejam exibidas sugerindo o deslocamento entre as margens do JTextField e do JPanel.

    4. A margem direita do JTextField se encaixará na diretriz de alinhamento indicando as margens preferidas.

Agora precisamos adicionar o JList que exibirá a lista de contatos completa do ContactEditor.

Para adicionar e redimensionar um JList:

  1. na janela Paleta, selecione o componente Lista na categoria Swing.
  2. Mova o cursor imediatamente abaixo do JLabel Endereço de e-mail adicionado anteriormente. Quando as diretrizes aparecerem, indicando que as margens superior e esquerda do JList estão alinhadas às margens preferidas ao longo da margem esquerda do JPanel e do JLabel acima, clique para posicionar o JList.
  3. Arraste a alça de redimensionamento do JList em direção à direita do JPanel de fechamento até que as diretrizes de alinhamento sejam exibidas indicando que tem a mesma largura do JTextField acima.

    4. O JList se encaixará na posição designada pelas diretrizes de alinhamento e seu nó correspondente será exibido na janela Inspetor. Observe também que o formulário se expande para acomodar o JList recém-adicionado.

Como as JLists são utilizadas para exibir longas listas de dados, geralmente requerem a adição de um JScrollPane. Ao adicionar um componente que requer um JScrollPane, o Construtor de GUI o adiciona automaticamente para você. Como os JScrollPanes são componentes não visuais, é necessário utilizar a janela Inspetor para visualizar ou editar os JScrollPanes que o Construtor de GUI criar.

Nota: para visualizar uma demonstração do procedimento anterior, abra o arquivo quickstart-gui_swfs/008_add_align_anchor.html na pasta zip que você baixou.

Dimensionamento de componentes

É sempre benéfico definir vários componentes relacionados, como botões em caixas de diálogo modais, para que tenham o mesmo tamanho a fim de oferecer consistência visual. Para demonstrar isso, adicionaremos quatro JButtons ao nosso formulário ContactEditor que permitirão adicionar, editar e remover entradas individuais da nossa lista de contatos, como mostram as ilustrações abaixo. Depois, definiremos os quatro botões para que tenham o mesmo tamanho e possam ser facilmente reconhecidos e ofereçam a funcionalidade relacionada.

Para adicionar, alinhar e editar o texto de exibição de vários botões:

  1. na janela Paleta, selecione o componente Botão.
  2. Mova o JButton acima da margem direita do JTextField Endereço de e-mail no JPanel inferior. Quando as diretrizes aparecerem, indicando que a linha de base e a margem direita do JButton estão alinhadas às margens do JTextField, clique pressionando Shift para posicionar o primeiro botão ao longo da margem direita do JFrame. A largura do JTextField diminui para acomodar o JButton onde você soltar o botão do mouse.
  3. Mova o cursor sobre o canto superior direito do JList no JPanel inferior. Quando as diretrizes aparecerem, indicando que as margens superior e direita do JButton estão alinhadas às margens do JList, clique pressionando Shift para posicionar o segundo botão ao longo da margem direita do JFrame.
  4. Adicione dois outros JButtons abaixo dos dois já adicionados para criar uma coluna. Certifique-se de posicionar os JButtons de maneira que o espaçamento sugerido seja respeitado e consistente. Se você se esquecer de soltar a tecla Shift antes de posicionar o último JButton, basta pressionar a tecla Escape.
  5. Defina o texto de exibição de cada JButton. (É possível editar o texto de um botão, clicando com o botão direito do mouse no botão e escolhendo Editar texto. Ou clicar no botão, pausar e clicar novamente.) Insira Adicionar para o botão superior, Editar para o segundo, Remover para o terceiro e Padrão para o quarto.

    6. Os componentes JButton se encaixam nas posições designadas pelas diretrizes de alinhamento. A largura dos botões muda para acomodar os novos nomes.

Agora que os botões estão posicionados onde os queremos, nós definiremos os quatro botões para que tenham o mesmo tamanho e consistência visual, bem como para esclarecer a funcionalidade relacionada.

Para definir componente do mesmo tamanho:

  1. selecione os quatro JButtons pressionando a tecla Control enquanto faz a seleção.
  2. Clique com o botão direito do mouse em um deles e escolha Mesmo tamanho > Mesma largura no menu pop-up.

    Os JButtons serão definidos com o mesmo tamanho do botão que tiver o nome mais longo.

Nota: para visualizar uma demonstração do procedimento anterior, abra o arquivo quickstart-gui_swfs/009_size_components.html na pasta zip que você baixou.

Indentação

Frequentemente é necessário unir vários componentes em outro para que fique claro que pertencem a um grupo de funções relacionadas. Um caso típico, por exemplo, é colocar várias caixas de verificação relacionadas abaixo de um rótulo comum. O Construtor de GUI permite fazer a indentação facilmente oferecendo diretrizes especiais que sugerem o deslocamento preferido para a aparência e funcionalidade do seu sistema operacional.

Nesta seção, adicionaremos alguns JRadioButtons abaixo de um JLabel que permitirá aos usuários personalizar a maneira como o aplicativo exibe dados. Veja as ilustrações abaixo enquanto faz isso ou clique no link Visualizar demonstração seguindo o procedimento para ver uma demonstração interativa.

Para indentar JRadioButtons abaixo de um JLabel:

  1. Adicione um JLabel nomeado Formato de correspondência ao formulário abaixo do JList. Certifique-se de que o rótulo está alinhado à esquerda do JList acima.
  2. Na janela Paleta, selecione o componente Botão de opção na categoria Swing.
  3. Mova o cursor abaixo do JLabel recém-adicionado. Quando as linhas de guia aparecerem, indicando que a borda esquerda do JRadioButton está alinhada com a do JLabel, mova o JRadioButton ligeiramente para a direita até as diretrizes de indentação secundárias aparecerem. Clique pressionando a tecla Shift para posicionar o primeiro botão de opção.
  4. Mova o cursor à direita do primeiro JRadioButton. Clique pressionando a tecla Shift para inserir o segundo e o terceiro JRadioButtons, respeitando o espaçamento sugerido do componente. Certifique-se de soltar a tecla Shift antes de posicionar o último JRadioButton.
  5. Defina o texto de exibição de cada JRadioButton. (Você pode editar o texto de um botão, clicando com o botão direito do mouse no botão e escolhendo Editar texto. Ou clicando no botão, pausar e clicar novamente.) Insira HTML para o botão de opção esquerdo, Texto simples para o segundo e Personalizado para o terceiro.

    6. Três JRadioButtons serão adicionados ao formulário e indentados abaixo do JLabel Formato de correspondência.

Agora, precisamos adicionar os três JRadioButtons a um ButtonGroup para permitir o comportamento de alternância esperado, no qual somente um botão de opção pode ser selecionado por vez. Por sua vez, isso assegurará que as informações de contato do aplicativo ContactEditor serão exibidas no formato de email da nossa escolha.

Para adicionar JRadioButtons a um ButtonGroup:

  1. na janela Paleta, selecione o componente Grupo de botões na categoria Swing.
  2. Clique em qualquer lugar na área de desenho do Construtor de GUI para adicionar o componente ButtonGroup ao formulário. Observe que o ButtonGroup em si não é exibido no formulário, no entanto, é visível na área Outros componentes do Inspetor.
  3. Selecione os três JRadioButtons do formulário.
  4. Na janela Propriedades, selecione buttonGroup1 na caixa de combinação da propriedade buttonGroup.

    5. Três JRadioButtons serão adicionados ao grupo de botões.

Nota: para visualizar uma demonstração do procedimento anterior, abra o arquivo quickstart-gui_swfs/010_add_indent_components.html na pasta zip que você baixou.

início

Fazendo os ajustes finais

Conseguimos esboçar nossa GUI do aplicativo ContactEditor, mas ainda há algumas coisas a serem feitas. Nesta seção, observaremos algumas das tarefas de layout típicas que o Construtor de GUI simplifica.

Finalizando

Agora precisamos adicionar os botões que permitirão aos usuários confirmar as informações que inserirem de um contato individual e adicioná-las à lista de contatos ou cancelar, deixando o banco de dados inalterado. Nesta etapa, adicionaremos os dois botões requeridos e os editaremos para que sejam exibidos com o mesmo tamanho no formulário, embora seus textos de exibição tenham tamanhos diferentes.

Para adicionar e editar o texto de exibição dos botões:

  1. se o JPanel inferior estiver estendido na margem inferior do formulário JFrame, arraste a margem inferior do JFrame para baixo. Isso proporciona espaço entre as margens do JFrame e do JPanel para os botões OK e Cancelar.
  2. Na janela Paleta, selecione o componente Botão na categoria Swing.
  3. Mova o cursor sobre o formulário abaixo do JPanel E-mail. Quando as diretrizes aparecerem, indicando que a borda direita do JButton está alinhada ao canto direito do JFrame, clique para posicionar o botão.
  4. Adicione outro JButton à esquerda do primeiro, certificando-se de colocá-lo utilizando o espaçamento sugerido ao longo da margem inferior do JFrame.
  5. Defina o texto de exibição de cada JButton. Insira OK para o botão esquerdo e Cancelar para o botão direito. Observe que a largura dos botões muda para acomodar os novos nomes.
  6. Defina os dois JButtons para terem o mesmo tamanho selecionando-os, clicando com o botão direito do mouse em um deles e selecionando Mesmo tamanho > Mesma largura no menu pop-up.

    Os componentes JButton serão exibidos no formulário e seus nós correspondentes serão exibidos na janela Inspetor. O código dos componentes JButton também será adicionado ao arquivo de código-fonte do formulário, que é visível na exibição Código-fonte do editor. Todos os JButtons serão definidos com o mesmo tamanho do botão que possuir o maior nome.

A última coisa que precisamos fazer é excluir o texto do espaço reservado nos vários componentes. Observe que, embora a remoção do texto do espaço reservado após a configuração preliminar de um formulário possa ser uma técnica útil para evitar problemas de alinhamento e relações de ancoragem dos componentes, a maioria dos desenvolvedores geralmente remove esse texto no processo de layout de seus formulários. À medida que percorre o formulário, selecione e exclua o texto do espaço reservado de cada um dos JTextFields. Deixaremos os itens de espaço reservado no JComboBox e no JList para um tutorial posterior.

Nota: para visualizar uma demonstração do procedimento anterior, abra o arquivo quickstart-gui_swfs/011_preview_gui.html na pasta zip que você baixou.

início

Visualizando a GUI

Agora que você criou com êxito a GUI ContactEditor, é possível experimentar a interface para ver os resultados. É possível visualizar o formulário à medida que trabalha clicando no botão Visualizar formulário () na barra de ferramentas do Construtor de GUIs. O formulário será aberto em sua própria janela, permitindo que você o teste antes da construção e execução.

início

Implantando aplicações de GUI

Para que as interfaces criadas com o Construtor de GUI funcionem fora do IDE, a aplicação deve ser compilada nas classes do gerenciador de layout GroupLayout e essas classes também devem estar disponíveis no tempo de execução. Essas classes são incluídas no Java SE 6, mas não no Java SE 5. Se você desenvolver o aplicativo para ser executado no Java SE 5, seu aplicativo precisa utilizar a biblioteca de extensões de layout Swing.

Se o IDE estiver sendo executado no JDK 5, o IDE gerará o código da aplicação automaticamente para utilizar a biblioteca de extensões de layout Swing. Ao implantar a aplicação, é necessário incluir a biblioteca de extensões de layout Swing. Quando você constrói o aplicativo (Construir > Construir projeto principal), o IDE fornece automaticamente uma cópia do arquivo JAR da biblioteca na pasta dist/lib do aplicativo. O IDE também adiciona todos os arquivos JAR da pasta dist/lib no elemento Class-Path no arquivo manifest.mf do arquivo JAR da aplicação.

Se você estiver executando o IDE no JDK 6, o IDE gera o código do seu aplicativo para utilizar as classes GroupLayout que estão no Java SE 6. Isso significa que é possível implantar o aplicativo para ser executado em sistemas com o Java SE 6 instalado e não é necessário empacotar seu aplicativo com a biblioteca de extensões de layout Swing.

Nota: se a aplicação for criada com o JDK 6, mas você precisar que também seja executada no Java SE 5, poderá fazer com que o IDE gere seu código para utilizar a biblioteca de extensões de layout Swing em vez das classes no Java SE 6. Abra a classe ContactEditorUI no Editor de GUI. No Inspetor, expanda o nó ContactEditorUI e selecione Formulário ContactEditorUI. Na janela Propriedades, altere o valor da propriedade Estilo de geração de layout para Biblioteca de extensões de layout Swing.

Distribuindo e executando aplicações de GUI independentes

Para preparar a aplicação de GUI para distribuição fora do IDE:

  • compacte a pasta dist do projeto em um arquivo ZIP. (A pasta dist também pode conter uma pasta lib, que também poderia necessitar ser incluída).

Para executar um aplicativo GUI a partir da linha de comando:

  1. Navegue até a pasta do dist projeto.
  2. Digite o seguinte:
    java -jar <nome do jar>.jar

Nota: se você encontrar este erro:

Exception in thread "main" java.lang.NoClassDefFoundError: org/jdesktop/layout/GroupLayout$Group

Verifique se o arquivo manifest.mf faz referência à versão atualmente instalada da biblioteca de extensões de layout Swing.

Para obter mais informações sobre a biblioteca de extensões de layout, visite o projeto Extensões de layout Swing.

início


Consulte também

Agora você concluiu o tutorial Criando uma GUI Swing. Para obter informações sobre como adicionar funcionalidade às GUIs que você criar, consulte:

início