Você está na página 1de 21

Criando um GUI Swing no NetBeans IDE

Este tutorial o orienta durante o processo de criao da interface grfica do usurio (GUI) para um aplicativo chamado ContactEditor usando o NetBeans IDE GUI Builder. No processo, voc far o layout de uma GUI frontend que permite visualizar e editar as informaes de contato dos indivduos includos em um banco de dados dos funcionrios. Neste tutorial, voc aprender como: usar o Interface Builder GUI, criar um Container GUI, adicionar, redimensionar e alinhar componentes, ajustar componentes de ancoragem, definir o comportamento de dimensionamento automtico, editar as propriedades do componente. Este tutorial leva cerca de 30 minutos para ser concludo.

Contedo
o o o o o o o o o o o o o o
Introduo Criando um projeto Criando um Container JFrame Familiarizando-se com o Construtor de GUI Conceitos-chave Desenho livre Posicionamento automtico dos componentes (Encaixe) Feedback visual First Things First Adicionando componentes: The Basics Adicionando componentes individuais ao formulrio Adicionando vrios componentes ao formulrio Componentes inserindo Moving Forward Alinhamento de componentes Alinhamento de base Reviso que foi aprendido Adicionando, alinhando e Ancoragem Dimensionamento de componentes Entalhe Fazendo os ajustes finais Inspecionando Seu GUI Implantando aplicativos GUI Veja tambm Para concluir este tutorial, voc precisa dos seguintes programas e recursos.

Software ou recurso NetBeans IDE

Verso necessria verso 6.9 ou 7.0

Java Development Kit (JDK) verso 6

Introduo

Construtor de GUIs do IDE torna possvel a construo de GUIs de aparncia profissional sem um conhecimento profundo dos gerenciadores de layout. Voc pode criar formulrios, simplesmente colocando componentes onde quiser. Para obter descries de feedback visual do Construtor de GUIs, voc pode usar o GUI Builder Legenda de comentrios Visual .

Criando um projeto
Como todo o desenvolvimento Java no IDE ocorre dentro de projetos, precisamos primeiro criar um projeto novo no qual ContactEditor para armazenar fontes e outros arquivos do projeto. Um projeto do IDE um grupo de arquivos-fonte Java e metadados associados, incluindo projeto especfico arquivos de propriedades, um script de construo Ant que controla a construir e executar as configuraes, e um arquivo project.xml que mapeia destinos Ant para comandos do IDE. Enquanto as aplicaes Java consistem muitas vezes em vrios projetos IDE, para os fins deste tutorial, vamos construir uma aplicao simples, inteiramente armazenada em um nico projeto.

Para criar um novo projeto de aplicao ContactEditor: 1. Escolha Arquivo> Novo projeto. Alternativamente, voc pode clicar no cone Novo projeto na barra de ferramentas IDE. 2. No painel Categorias, selecione o n Java e no painel Projetos, escolha Aplicao Java. Clique em Avanar. 3. Digite ContactEditor no campo Nome do projeto e especifique o local do projeto. 4. Deixe o Usar pasta dedicada para armazenar bibliotecas checkbox desmarcada. 5. Garantir que a caixa de seleo Definir como projeto principal est marcada e limpe o campo Criar classe principal. 6. Clique em Concluir. O IDE cria a pasta ContactEditor em seu sistema no local designado. Esta pasta contm todos os arquivos associados ao projeto, como o script Ant, pastas para armazenamento de fontes e testes, e uma pasta para projetos especficos de metadados. Para visualizar a estrutura do projeto, use a janela Arquivos do IDE. Criando um Container JFrame
Depois de criar o novo aplicativo, voc deve ter notado que a pasta Source Packages na janela Projetos contm um n <pacote padro> vazio. Para prosseguir com a construo da nossa interface, precisamos criar um continer Java no qual colocaremos os outros componentes GUI necessrio. Nesta etapa vamos criar um continer usando o componente JFrame e coloque o recipiente em um novo pacote.

Para adicionar um continer JFrame: 1. Na janela Projetos, clique com o n ContactEditor e selecione Novo> Formulrio JFrame. Alternativamente, voc pode encontrar um formulrio JFrame escolhendo Novo> Outro> Formulrios GUI Swing> Formulrio JFrame. 2. Digite ContactEditorUI como o nome da classe. 3. Digite my.contacteditor como o pacote. 4. Clique em Concluir. O IDE cria o formulrio ContactEditorUI ea classe ContactEditorUI dentro do aplicativo ContactEditorUI.java e abre o formulrio ContactEditorUI no Construtor de GUI. Observe que o pacote my.contacteditor substitui o pacote padro.
topo

Familiarizando-se com o Construtor de GUI


Agora que criamos um novo projeto para a nossa aplicao, vamos dar um minuto para nos familiarizar com a interface do Construtor de GUIs. Nota: Para explorar a interface do Construtor de GUI com uma demonstrao interativa, veja o Explorando GUI Builder (swf). screencast.

Quando adicionamos o continer JFrame, o IDE abriu o recm-criado forma ContactEditorUI em uma aba do Editor com uma barra de ferramentas contendo vrios botes, como mostrado na ilustrao anterior. A forma ContactEditor aberto na exibio do Construtor de GUIs Design e trs janelas adicionais apareceram automaticamente ao longo das bordas do IDE, permitindo navegar, organizar e editar formas GUI como voc constru-los. Vrias janelas do Construtor de GUIs incluem: rea de design. Janela principal do Construtor de GUI para criao e edio de formulrios de GUI Java. Fonte da barra de ferramentas e botes de alternncia Design permitem que voc visualize o cdigo-fonte de uma classe ou uma viso grfica de seus componentes GUI. Os botes da barra de ferramentas adicionais proporcionar um acesso conveniente aos comandos comuns, como escolher entre os modos Seleo e Conexo, alinhamento de componentes, definio do comportamento de dimensionamento automtico e exibio de formulrios. Inspector. Fornece uma representao de todos os componentes, tanto visuais e no-visual, em sua aplicao como uma hierarquia de rvore. O Inspector tambm fornece feedback visual sobre qual componente da rvore est sendo editado no Construtor de GUI, assim como permite que voc organize componentes nos painis disponveis. Paleta. A lista personalizvel de componentes disponveis contendo guias para Swing JFC /, AWT e componentes JavaBeans, bem como gestores de layout. Alm disso, voc pode criar, remover e reorganizar as categorias exibidas na Paleta usando o personalizador. Janela Propriedades. Exibe as propriedades do componente atualmente selecionado no Construtor de GUI, janelas Inspetor, Projetos ou janela Arquivos. Se voc clicar no boto Fonte, o IDE exibe o cdigo-fonte do aplicativo Java no Editor com sees de cdigo que so geradas automaticamente pelo Construtor de GUI indicadas por reas azuis, chamado Blocos protegidos. Blocos protegidos so reas protegidas que no so editveis no modo Source. Voc s pode editar

o cdigo exibido nas reas brancas do Editor na exibio Fonte. Se voc precisar fazer alteraes no cdigo dentro de um bloco protegido, clicar no boto Design retorna o Editor do IDE para o Construtor de GUI onde voc pode fazer os ajustes necessrios para o formulrio. Quando voc salvar suas alteraes, o IDE atualiza as fontes do arquivo. Nota: Para os desenvolvedores avanados, o Palette Manager est disponvel que lhe permite adicionar componentes personalizados de JARs, bibliotecas ou outros projetos para a paleta. Para adicionar componentes personalizados atravs do Gerenciador de Paleta, selecione Ferramentas> Paleta balano> / AWT Components. topo

Conceitos-chave
GUI Builder do IDE resolve o problema central da criao de GUIs Java otimizando o fluxo de criao de interfaces grficas, liberando os desenvolvedores das complexidades dos gerenciadores de layout Swing. Ele faz isso atravs do alargamento do actual NetBeans IDE GUI Builder para suportar uma simples "Free Design" paradigma com as regras de layout simples que so fceis de entender e usar. medida que voc colocar para fora seu formulrio, o Construtor de GUI fornece diretrizes visuais sugerindo espaamento e alinhamento timo de componentes. No fundo, o Construtor de GUI converte as decises de design em uma IU funcional que implementado usando o gerenciador de layout GroupLayout e outras construes do Swing. Porque ele usa um modelo de layout dinmico, GUI construda com o Construtor de GUI se comportam como seria de esperar em tempo de execuo, ajustando para acomodar as alteraes feitas sem alterar os relacionamentos definidos entre os componentes. Sempre que voc redimensionar o formulrio, alterar locais ou especificar um olhar diferente e sentir, a sua GUI ajusta automaticamente a respeitar o olhar alvo e inseres sentir e compensaes.

Desenho livre
No Construtor de GUIs do IDE, voc pode construir seus formulrios, simplesmente colocando os componentes onde quiser, como se estivesse usando posicionamento absoluto. O Construtor de GUIs descobre quais atributos de layout so obrigatrios e gera o cdigo para voc automaticamente. Voc no precisa se preocupar com inseres, ncoras, preenchimentos e assim por diante.

Posicionamento automtico dos componentes (Encaixe)


Como voc adicionar componentes a um formulrio, o Construtor de GUI fornece feedback visual que auxilia no posicionamento dos componentes com base na aparncia do seu sistema operacional e sentir. O Construtor de GUI fornece dicas teis em linha e outros comentrios visuais sobre onde os componentes devem ser colocados em sua forma, encaixando automaticamente os componentes na posio em funo de orientaes. Ele faz essas sugestes com base nas posies dos componentes que j foram colocados na forma, permitindo o preenchimento de permanecer flexvel de tal forma que aparncia diferente do destino seja processada corretamente em tempo de execuo.

Feedback visual
O Construtor de GUI tambm fornece feedback visual sobre componente de ancoragem e relaes de encadeamento. Esses indicadores permitem identificar rapidamente as vrias relaes de posicionamento e comportamento componente pinagem que afetam a forma como o GUI aparecer e se comportar durante a execuo. Isso acelera o processo de design GUI, permitindo-lhe criar rapidamente profissional-olhando interfaces visuais que trabalham. topo

First Things First


Agora que voc j familiarizado com a interface do Construtor de GUIs, hora de comear a desenvolver a interface do usurio de nossa aplicao ContactEditor. Nesta seo, vamos dar uma olhada na utilizao da Paleta do IDE para adicionar os vrios componentes GUI que precisamos para nosso formulrio. Graas ao paradigma do IDE Desenho Livre, voc no tem mais que lutar com gerenciadores de layout para controlar o tamanho ea posio dos componentes nos contineres. Tudo que voc precisa fazer arrastar e soltar os componentes necessrios ao seu formulrio GUI, como mostrado nas ilustraes que se seguem. Nota: Consulte a componentes Adicionando individuais e mltiplos (swf). screencast para uma demonstrao interativa na seo abaixo.

Adicionando componentes: The Basics


Apesar de GUI do IDE Builder simplifica o processo de criao de GUIs Java, frequentemente til para esboar a maneira que voc quiser que o seu interface para olhar antes de comear a coloc-lo para fora. Muitos designers de interfaces consideram isso uma "melhor prtica" tcnica, no entanto, para os fins deste tutorial,

voc pode simplesmente dar uma olhada como nosso formulrio preenchido deve se parecer indo para a prvisualizar o seu GUIseo. Desde j adicionamos um JFrame como recipiente nosso formulrio de nvel superior, o prximo passo adicionar um par de JPanels que nos permitir unir os componentes de nossa interface de usurio usando bordas com ttulos. Consulte as ilustraes abaixo e observe o IDE "drag and drop" comportamento quando fazer isso.

Para adicionar um JPanel: 1. Na janela Paleta, selecione o componente Painel na categoria Swing Containers, clicando e soltando o boto do mouse. 2. Mover o cursor para o canto superior esquerdo do formulrio no Construtor de GUI. Quando o componente est localizado perto de margens superior e esquerda do recipiente, as diretrizes de alinhamento horizontal e vertical aparecem indicando as margens preferidas. Clique no formulrio para colocar o JPanel neste local. O componente JPanel aparece na forma ContactEditorUI com realce na cor laranja, significando que ela est selecionada, como mostrado na ilustrao a seguir. Aps soltar o boto do mouse, pequenos indicadores parecem mostrar as relaes de ancoragem dos componentes e um n JPanel correspondente ser exibido na janela Inspetor.

Em seguida, precisamos redimensionar o JPanel para dar espao para os componentes vamos colocar dentro dele um pouco mais tarde, mas vamos dar um minuto para apontar outro de visualizao do Construtor de GUIs primeiras caractersticas. Para fazer isso, precisamos desmarcar a JPanel que acabamos de adicionar. Porque ns no adicionamos uma borda com ttulo, o painel desaparecer. Observe, entretanto, que quando voc passa o cursor sobre o JPanel, as margens mudaro para cinza claro para que a sua posio pode ser visto claramente. Voc s precisa clicar em qualquer lugar dentro do componente para selecion-la novamente e fazer com que as alas de redimensionamento e os indicadores de ancoragem para reaparecer.

Para redimensionar o JPanel: 1. Selecione o JPanel que voc acabou de adicionar. A redimensionar pequenas alas quadradas reaparecer em torno do permetro do componente. 2. Clique e segure a ala de redimensionamento na margem direita do JPanel e arraste at que a diretriz de alinhamento pontilhada aparece perto da borda do formulrio.

3. Solte a ala de redimensionamento para redimensionar o componente. O componente JPanel estendido para ficar entre as margens esquerda e direita do container, em conformidade com o deslocamento recomendado, como mostrado na ilustrao a seguir.

Agora que ns adicionamos um painel para conter informaes Nome da nossa IU, preciso repetir o processo para adicionar outra diretamente abaixo da primeira para a informao e-mail. Referindo-se as ilustraes a seguir, repita as duas tarefas anteriores, prestando ateno ao posicionamento sugerido pelo Construtor de GUIs. Observe que o espaamento vertical sugerido entre os dois JPanels muito mais estreito do que nas bordas. Depois de ter adicionado o segundo JPanel, redimension-la de tal forma que preenche o espao restante do formulrio vertical.

Porque queremos distinguir visualmente as funes nas sees superior e inferior da nossa GUI, precisamos adicionar uma borda e ttulo a cada JPanel.Primeiro vamos fazer isso usando a janela Propriedades e depois ns vamos experiment-lo usando o menu pop-up.

Para adicionar bordas de ttulo aos JPanels: 1. Selecione o JPanel superior no Construtor de GUI. 2. Na janela Propriedades, clique no boto reticncias (...) prximo propriedade de Fronteira. 3. No editor de Border JPanel que aparece, selecione o n TitledBorder no painel Bordas disponveis. 4. No painel de propriedades abaixo, digitar o nome para a propriedade Title. 5. Clique nas reticncias (...) ao lado da propriedade Fonte, selecione Negrito para o estilo de fonte e insira 12 para o tamanho. Clique em OK para sair do dilogo. 6. Selecione o JPanel inferior e repita os passos 2 a 5, mas desta vez clique com o JPanel e acessar a janela Propriedades usando o menu pop-up. Seu e-mail para a propriedade Title. Bordas com ttulos sero adicionadas a ambos componentes JPanel.

Adicionando componentes individuais ao formulrio


Agora, precisamos comear a adicionar os componentes que apresentar as informaes de contato reais na nossa lista de contatos. Nesta tarefa, vamos adicionar quatro JTextFields que ir exibir as informaes de contato e os JLabels que ir descrev-los. Enquanto faz isso, observe as diretrizes horizontal e vertical que o Construtor de GUIs exibe, sugerindo o espaamento preferido dos componentes conforme definido pelo olhar do seu sistema operacional e sentir. Isso garante que a GUI seja processada automaticamente respeitando a aparncia do sistema operacional de destino e sentir-se em tempo de execuo.

Para adicionar um JLabel ao formulrio: 1. Na janela Paleta, selecione o componente Rtulo na categoria Controles Swing. 2. Mover o cursor sobre o JPanel Name adicionado anteriormente. Quando as diretrizes aparecem indicando que o JLabel est posicionado no canto superior esquerdo do JPanel com uma pequena margem nas bordas superior e esquerda, clique para colocar o rtulo.

O JLabel adicionado ao formulrio e um n correspondente, representando o componente adicionado janela Inspetor.


Antes de prosseguir, precisamos editar o texto de exibio do JLabel que acabamos de adicionar. Embora voc pode editar o texto de exibio do componente em qualquer ponto, a maneira mais fcil fazer isso como voc adicion-los.

Para editar o texto de exibio de um JLabel: 1. Clique duas vezes no JLabel para selecionar a exibio de texto. 2. Nome Primeiro tipo: e pressione Enter. O novo nome do JLabel exibido e largura do componente ser ajustada como resultado da edio.
Agora vamos adicionar um JTextField para que possamos obter um vislumbre do alinhamento do Construtor de GUIs base recurso.

Para adicionar um JTextField ao formulrio: 1. Na janela Paleta, selecione o componente Campo de texto na categoria Controles Swing. 2. Mover o cursor imediatamente direita do primeiro nome: JLabel que acabamos de adicionar. Quando a orientao horizontal indicando que a linha de base JTextField est alinhada com a do JLabel eo espaamento entre os dois componentes sugerido com uma orientao vertical, clique para posicionar o JTextField. O JTextField se encaixar na forma alinhada com os valores basais do JLabel, como mostrado na ilustrao a seguir. Observe que o JLabel mudou ligeiramente para baixo a fim de alinhar com a linha de base no campo de texto mais alto. Como de costume, um n que representa o componente adicionado janela Inspetor.

Antes de prosseguir, preciso adicionar mais um JLabel e JTextField imediatamente direita dos que acabamos de adicionar, como mostrado na ilustrao a seguir. Desta vez, insira Sobrenome: como texto de exibio do JLabel e deixar o JTextFields "texto do espao reservado, como para agora.

Para redimensionar um JTextField: 1. Selecione o JTextField que acabamos de adicionar direita do Sobrenome: JLabel.

2. Arraste a ala de redimensionamento do JTextField direita em direo margem direita do JPanel de fechamento. 3. Quando as diretrizes de alinhamento vertical aparecerem sugerindo a margem entre o campo de texto e margem direita do JPanel, solte o boto do mouse para redimensionar o JTextField. A margem direita do JTextField se encaixar em alinhamento com margem do JPanel borda recomendado, como mostrado na ilustrao a seguir.

Adicionando vrios componentes ao formulrio


Agora vamos adicionar o Ttulo: e Apelido: JLabels que descrevem dois JTextFields que estamos indo para adicionar em um minuto. Vamos arrastar e soltar os componentes enquanto pressiona a tecla Shift, para adicion-los rapidamente para a forma. Enquanto fazemos isso, observe novamente que o Construtor de GUI exibe diretrizes horizontais e verticais sugerindo o espaamento preferido do componente.

Para adicionar vrios JLabels ao formulrio: 1. Na janela Paleta, selecione o componente Rtulo na categoria Controles Swing, clicando e soltando o boto do mouse. 2. Mover o cursor sobre o formulrio diretamente abaixo do JLabel Nome: adicionado anteriormente. Quando as diretrizes aparecem indicando que a borda esquerda do JLabel novo est alinhada com a do JLabel acima e houver uma pequena margem entre eles, shift-clique 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 esquecer de soltar a tecla Shift antes de posicionar o ltimo JLabel, basta pressionar a tecla Escape. O JLabels so adicionados ao formulrio criando uma segunda linha, como mostrado na ilustrao a seguir. Ns representando cada componente so adicionados janela Inspetor.

Antes de prosseguirmos, precisamos editar o nome do JLabels "de modo que ns vamos ser capazes de ver o efeito dos alinhamentos que definiremos posteriormente.

Para editar o texto de exibio de JLabels:

1. Clique duas vezes no primeiro JLabel para selecionar a exibio de texto. 2. Ttulo: e pressione Enter. 3. Repita as etapas 1 e 2, inserindo Apelido: para a propriedade do JLabel do segundo nome. O JLabels 'novos nomes so exibidos na forma e so deslocados como resultado de suas larguras editadas, como mostra a ilustrao a seguir.

Componentes inserindo
Nota: Consulte a insero de componentes (swf). screencast para uma demonstrao interativa na seo abaixo. Muitas vezes necessrio adicionar um componente entre os componentes que j esto colocadas em um formulrio. Sempre que voc adicionar um componente entre dois componentes existentes, o Construtor de GUI automaticamente muda-los para abrir espao para o novo componente. Para demonstrar isso, vamos inserir um JTextField entre os JLabels adicionados anteriormente, como mostrado nas seguintes ilustraes.

Para inserir um JTextField entre dois JLabels: 1. Na janela Paleta, selecione o componente Campo de texto na categoria Controles Swing. 2. Mover o cursor sobre o Ttulo: e Apelido: JLabels na segunda linha de tal forma que as sobreposies JTextField ambos e est alinhada com suas linhas de base. Se voc tiver dificuldade em posicionar o novo campo de texto, voc pode encaix-lo com a diretriz esquerda do JLabel Apelido, como mostra a primeira imagem abaixo. 3. Clique para colocar o JTextField entre o Ttulo: e Apelido: JLabels. O JTextField se encaixar entre os dois JLabels. As mudanas mais direita JLabel para a direita do JTextField para acomodar o deslocamento horizontal sugerido.

Ns ainda precisamos adicionar um JTextField adicionais para a forma que ir exibir o apelido do contato no lado direito do formulrio.

Para adicionar um JTextField: 1. Na janela Paleta, selecione o componente Campo de texto na categoria Swing. 2. Mover o cursor para a direita do rtulo Apelido e clique para colocar o campo de texto. O JTextField se encaixar ao lado do JLabel sua esquerda. Para redimensionar um JTextField: 1. Arraste as alas de redimensionamento da Nickname: JTextField etiqueta que voc adicionou 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 do JPanel, solte o boto do mouse para redimensionar o JTextField. A margem direita do JTextField se encaixar em alinhamento com margem do JPanel borda e recomendado o Construtor de GUI infere o comportamento de redimensionamento correto.
topo

Moving Forward
O alinhamento um dos aspectos mais fundamentais da criao de aspecto profissional GUIs. Na seo anterior, tivemos um vislumbre das caractersticas do IDE de alinhamento ao adicionar o JLabel e componentes JTextField ao nosso formulrio ContactEditorUI. Em seguida, vamos dar uma viso mais profunda os recursos do Construtor de GUIs alinhamento medida que trabalhamos com os outros componentes que precisamos para nossa aplicao.

Alinhamento de componentes
Nota: Consulte o alinhamento e ancoragem componentes (swf). screencast para uma demonstrao interativa nas sees abaixo. Toda vez que voc adicionar um componente a um formulrio, o Construtor de GUI efetivamente alinha-los, como evidenciado pelas diretrizes de alinhamento que aparecem. s vezes necessrio, no entanto, para especificar as relaes entre diferentes grupos de componentes tambm.Anteriormente, ns adicionamos quatro JLabels que precisamos para o nosso ContactEditor GUI, mas ns no alinh-los. Agora vamos alinhar as duas colunas de JLabels para que as margens direitas para cima.

Para alinhar componentes: 1. Mantenha pressionada a tecla Ctrl e clique para selecionar o Nome: e Ttulo: JLabels no lado esquerdo do formulrio. ) Na barra de 2. Clique no boto Alinhar Direita na coluna ( ferramentas. Alternativamente, voc pode boto direito do mouse em um deles e escolha Alinhar> direita na coluna no menu pop-up. 3. Repita este procedimento para o Sobrenome: e Apelido: JLabels

tambm. A posio dos JLabels muda para que as margens direita do texto de exibio esto alinhados. As relaes de ancoragem sero atualizados, indicando que os componentes foram agrupados.
Antes de terminarmos com os JTextFields adicionados anteriormente, precisamos ter certeza de que os dois JTextFields que inserimos entre os JLabels so definidas para redimensionar corretamente. Ao contrrio dos dois JTextFields que foram esticados para a margem direita do formulrio, o comportamento de redimensionamento dos componentes inseridos no definido automaticamente.

Para definir o comportamento de redimensionamento de componentes: 1. Control-clique os dois componentes JTextField inseridos para selecion-los no Construtor de GUI. 2. Com ambos os JTextFields selecionado, boto direito do mouse qualquer um deles e escolha Redimensionamento automtico> Horizontal no menu pop-up. O JTextFields so definidas para redimensionar horizontalmente em tempo de execuo. As diretrizes de alinhamento e os indicadores de ancoragem sero atualizados, fornecendo feedback visual dos relacionamentos dos componentes. Para configurar os componentes para ser do mesmo tamanho: 1. Control-clique em todos os quatro JTextFields no formulrio para selecion-los. 2. Com o JTextFields selecionado, boto direito do mouse em qualquer um deles e escolha Definir Tamanho Mesmo a partir do menu pop-up. O JTextFields est tudo pronto para a mesma largura e os indicadores so adicionados borda superior de cada um, fornecendo feedback visual dos relacionamentos dos componentes.
Agora precisamos adicionar outro JLabel descrevendo o JComboBox que permitir aos usurios selecionar o formato das informaes a nossa aplicao ContactEditor ser exibida.

Para alinhar um JLabel para um grupo de componentes: 1. Na janela Paleta, selecione o componente Rtulo na categoria Swing. 2. Mover o cursor abaixo do Nome e JLabels Ttulo no lado esquerdo do JPanel. Quando a orientao exibida indicando que a margem direita do JLabel novo est alinhada com as margens direita do grupo de componentes acima (os dois JLabels), clique para posicionar o componente. O JLabel se encaixar em uma posio alinhada direita com a coluna de JLabels acima, como mostra a ilustrao a seguir. O Construtor de GUI atualiza as linhas de alinhamento de status indicando o espaamento dos componentes e as relaes de ancoragem.

Como nos exemplos anteriores, clique duas vezes no JLabel para selecionar a exibio de texto e digite Format Display: para o nome de exibio.Observe que quando o JLabel se encaixa na posio, os outros componentes mudam para acomodar o texto de exibio maior.

Alinhamento de base
Sempre que voc adicionar ou mover componentes que incluem texto (JLabels, JTextFields, e assim por diante), o IDE sugere alinhamentos que so baseados em 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 vamos adicionar a caixa de combinao que permitir aos usurios selecionar o formato da informao que a nossa aplicao ContactEditor mostrar. medida que adicionar o JComboBox, vamos alinhar a sua linha de base para que do texto do JLabel. Observe mais uma vez as diretrizes de base de alinhamento que aparecem para nos ajudar com o posicionamento.

Para alinhar as linhas de base de componentes: 1. Na janela Paleta, selecione o componente Caixa de combinao na categoria Controles Swing. 2. Mover o cursor imediatamente direita do JLabel que acabamos de adicionar. Quando a orientao horizontal indicando que a linha de base JComboBox est alinhada com a linha de base do texto no JLabel eo espaamento entre os dois componentes sugerido com uma orientao vertical, clique para posicionar a caixa de combinao. O componente se encaixar em uma posio alinhada com a linha de base do texto no JLabel sua esquerda, como mostra a ilustrao a seguir. O Construtor de GUI exibe linhas de status indicando o espaamento dos componentes e as relaes de ancoragem.

Para redimensionar o JComboBox: 1. Selecione o ComboBox no Construtor de GUI. 2. Arraste a ala de redimensionamento na margem direita do JComboBox para a direita at que as diretrizes de alinhamento sejam exibidas sugerindo o deslocamento preferido entre o JComboBox e do JPanel. Como mostrado na ilustrao a seguir, a margem direita do JComboBox se encaixar em alinhamento com margem do JPanel borda recomendado e largura do componente automaticamente definida para redimensionar com o formulrio.

Edio de modelos de componentes est alm do escopo deste tutorial, ento por enquanto vamos deix-lista do JComboBox item de espao reservado como ele . topo

Reviso que foi aprendido


Ns teve um bom incio de construo da nossa GUI ContactEditor, mas vamos dar um minuto para recapitular o que aprendemos enquanto ns acrescentar mais alguns dos componentes da nossa interface requer. At agora ns nos concentramos na adio de componentes para a nossa GUI ContactEditor usando as diretrizes de alinhamento do IDE para nos ajudar com o posicionamento. importante entender, no entanto, que outra parte integrante do posicionamento de componentes ancoragem. Embora ns no discutimos isso ainda, voc j aproveitou este recurso sem perceber. Como mencionado anteriormente, sempre que voc adicionar um componente a um formulrio, o IDE sugere o olhar alvo e posicionamento preferido sentir com as orientaes. Uma vez colocado, novos componentes tambm so ancorados na margem mais prxima container ou componente para assegurar que as relaes componente so mantidas em tempo de execuo. Nesta seo, vamos nos concentrar em realizar as tarefas de uma forma mais simplificada embora salientando o trabalho que o construtor de GUI est fazendo nos bastidores.

Adicionando, alinhando e Ancoragem


O Construtor de GUI permite que voc colocar para fora seus formulrios de forma rpida e facilmente otimizando gestos fluxo de trabalho tpico. Sempre que voc adicionar um componente a um formulrio, o Construtor de GUI automaticamente se encaixa-los na posio preferida e define as relaes de encadeamento necessrias para que voc possa se concentrar no design dos formulrios ao invs de lutar com detalhes de implementao complicada.

Para adicionar, alinhar e editar o texto de exibio de um JLabel: 1. Na janela Paleta, selecione o componente Rtulo na categoria Controles Swing. 2. Mover o cursor sobre o formulrio imediatamente abaixo do ttulo do JPanel inferior e-mail. Quando as diretrizes aparecem indicando que est posicionado no canto superior esquerdo do JPanel com uma pequena margem nas bordas superior e esquerda, clique para colocar o JLabel. 3. Clique duas vezes no JLabel para selecionar a exibio de texto. Ento Endereo de E-mail do tipo: e pressione Enter. O JLabel se encaixar na posio preferida no formulrio, ancorado nas margens superior e esquerda do JPanel de fechamento. Tal como antes, um n correspondente, representando o componente adicionado janela Inspetor. Para adicionar um JTextField: 1. Na janela Paleta, selecione o componente Campo de texto na categoria Controles Swing. 2. Mover o cursor imediatamente direita do rtulo endereo de email que acabamos de adicionar. Quando as diretrizes aparecem indicando que a linha de base JTextField est alinhada com a linha de base

do texto no JLabel ea margem entre os dois componentes sugerido com uma orientao vertical, clique para posicionar o campo de texto. O JTextField se encaixar no lado direito do endereo de e-mail: JLabel e est acorrentado ao JLabel. O n correspondente tambm adicionado janela Inspetor. 3. Arraste a ala de redimensionamento do JTextField para a direita do JPanel at que as diretrizes de alinhamento sejam exibidas sugerindo o deslocamento entre o JTextField e do JPanel. A margem direita do JTextField se encaixar com a 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 da categoria Controles Swing. 2. Mover o cursor imediatamente abaixo do JLabel Endereo de Email adicionado anteriormente. Quando as diretrizes exibida indicando que a JList de margens superior e esquerda esto alinhados com as margens preferenciais ao longo da margem esquerda do JPanel e do JLabel acima, clique para posicionar o JList. 3. Arraste a ala de redimensionamento do JList direo direita do JPanel at que as diretrizes de alinhamento sejam exibidas indicando que a mesma largura que o JTextField acima. O JList se encaixar na posio designada pelas diretrizes de alinhamento e seu n correspondente exibido na janela Inspetor.Observe tambm que a forma se expande para acomodar o JList recm-adicionado.
Desde JLists so usados para exibir longas listas de dados, geralmente requerem a adio de um JScrollPane. Sempre que voc adicionar um componente que requer um JScrollPane, o Construtor de GUI adiciona automaticamente para voc. Porque JScrollPanes so componentes no visuais, voc tem que usar a janela Inspector, a fim de ver ou editar qualquer JScrollPanes que o Construtor de GUI criada.

Dimensionamento de componentes
Nota: Consulte o redimensionamento e componentes indentao (swf). screencast para uma demonstrao interativa nas sees abaixo. sempre benfico definir vrios componentes relacionados, tais como botes de dilogos modais, para ser o mesmo tamanho e consistncia visual. Para demonstrar isso vamos adicionar quatro JButtons ao nosso formulrio ContactEditor que nos permitir adicionar, editar e remover entradas individuais da nossa lista de contatos, como mostrado nas seguintes ilustraes. Depois, vamos definir os quatro botes que podem ser do mesmo tamanho para que possam ser facilmente reconhecidos como oferecendo funcionalidades relacionadas.

Para adicionar, alinhar e editar o texto de exibio de vrios botes: 1. Na janela Paleta, selecione o componente Boto da categoria Controles Swing. 2. Mova o JButton acima da margem direita do JTextField Endereo de Email no JPanel inferior. Quando as diretrizes aparecem indicando que linha de base do JButton ea margem direita esto alinhados com a do JTextField, shift-clique para colocar o primeiro boto ao longo da margem direita do JFrame. A largura do JTextField diminui para acomodar o JButton quando voc soltar o boto do mouse. 3. Mover o cursor sobre o canto superior direito do JList no JPanel inferior. Quando as diretrizes aparecem indicando que as margens superior e direita do JButton esto alinhadas com a do JList, shift-clique

para colocar o segundo boto ao longo da margem direita do JFrame. 4. Adicione dois outros JButtons abaixo dos dois j adicionados para criar uma coluna. Certifique-se a posio do JButtons de tal forma que o espaamento sugerido respeitado e consistente. Se voc esquecer de soltar a tecla Shift antes de posicionar o ltimo JButton, basta pressionar a tecla Escape. 5. Definir o texto de exibio de cada JButton. (Voc pode editar o texto de um boto direito do mouse no boto e escolhendo Editar texto. Ou voc pode clicar no boto, pausar e clicar novamente.) Digite Add para o boto superior, Edit para o segundo, Removepara o terceiro, e As Default para o quarto. Os componentes JButton se encaixam nas posies designadas pelas diretrizes de alinhamento. A largura dos botes muda para acomodar os novos nomes.

Agora que os botes esto posicionados onde os queremos, ns vamos definir os quatro botes para ter o mesmo tamanho e consistncia visual, bem como para esclarecer que elas esto relacionadas funcionalmente.

Para definir os componentes para o mesmo tamanho: 1. Selecione todos os quatro JButtons pressionando a tecla Control enquanto faz a seleo. 2. Boto direito do mouse um deles e escolha Mesmo tamanho> Mesma largura a partir do menu pop-up. O JButtons esto definidos para o mesmo tamanho que o boto com o nome mais longo. Entalhe

Muitas vezes necessrio componentes de cluster mltiplos com outro componente, que claro que pertencem a um grupo de funes relacionadas. Um caso tpico, por exemplo, colocar vrias caixas de verificao relacionadas abaixo de um rtulo comum. O Construtor de GUI permite o recuo facilmente fornecer orientaes especiais sugerindo o deslocamento preferido para olhar seu sistema operacional e sentir. Nesta seo, vamos adicionar alguns JRadioButtons abaixo de um JLabel que permitir que os usurios personalizem a maneira como o aplicativo exibe dados. Consulte as ilustraes abaixo enquanto faz isso ou clique no link Visualizar demonstrao seguindo o procedimento para exibir uma demonstrao interativa.

Para recuar JRadioButtons abaixo de um JLabel: 1. Adicionar um JLabel Formato de Correio nomeado para o formulrio abaixo do JList. Certifique-se o rtulo est alinhado esquerda com o JList acima. 2. Na janela Paleta, selecione o componente Boto de opo na categoria Swing. 3. Mover o cursor abaixo do JLabel que acabou de adicionar. Quando as diretrizes aparecem indicando que a borda esquerda do JRadioButton est alinhada com a do JLabel, mova o JRadioButton ligeiramente para a direita at diretrizes recuo secundrias aparecerem. Shift-clique para colocar o primeiro boto de opo. 4. Mover o cursor para a direita do primeiro JRadioButton. Shift-clique para colocar o JRadioButtons segundo e terceiro, tendo o cuidado de respeitar o espaamento sugerido do componente. Certifique-se de soltar a tecla Shift antes de posicionar o ltimo JRadioButton. 5. Definir o texto de exibio para cada JRadioButton. (Voc pode editar o texto de um boto direito do mouse no boto e escolhendo Editar texto. Ou voc pode clicar no boto, pausar e clicar novamente.) Digite HTML para o boto de rdio esquerda, Plain Textpara o segundo, e Custom para o terceiro. Trs JRadioButtons so adicionados ao formulrio e recuado abaixo do JLabel Formato de Correio.

Agora precisamos adicionar os trs JRadioButtons a um ButtonGroup para permitir que o comportamento de alternncia esperado em que apenas um boto de opo pode ser selecionada por vez. Este, por sua vez, garantir que as informaes de contato do aplicativo de contato ser exibido no formato de correio da nossa escolha.

Para adicionar JRadioButtons a um ButtonGroup: 1. Na janela Paleta, selecione o componente Grupo de botes na categoria Controles Swing. 2. Clique em qualquer lugar na rea de design do Construtor de GUI para adicionar o componente ButtonGroup ao formulrio. Observe que o ButtonGroup no aparece no prprio formulrio, no entanto, visvel na rea do Inspetor outros componentes. 3. Selecione todas as trs JRadioButtons no formulrio. 4. Na janela Propriedades, escolha buttonGroup1 na caixa de combinao propriedade buttonGroup. Trs JRadioButtons so adicionados ao grupo de botes.
topo

Fazendo os ajustes finais


Conseguimos esboar nossa GUI do aplicativo ContactEditor, mas ainda h algumas coisas a serem feitas. Nesta seo, vamos dar uma olhada em algumas das tarefas de layout tpicas que o Construtor de GUIs simplifica.

Acabamento Up
Agora precisamos adicionar os botes que permitem que os usurios para confirmar a informao de que entrar para um contato individual e adicion-lo lista de contatos ou cancelar, deixando o banco de dados inalterados. Nesta etapa, vamos adicionar os dois botes necessrios e depois edit-los para que eles apaream no mesmo tamanho em nosso formulrio, embora seus textos de exibio tenham tamanhos diferentes.

Para adicionar e editar o texto de exibio de botes: 1. Se o JPanel inferior se estende at a borda inferior do formulrio JFrame, arraste a borda inferior do JFrame para baixo. Isto d-lhe espao entre a borda do JFrame e da borda do JPanel para o seu botes OK e Cancelar. 2. Na janela Paleta, selecione o componente Boto da categoria Controles Swing. 3. Mover o cursor sobre o formulrio abaixo do JPanel e-mail. Quando as diretrizes aparecem indicando que a borda direita do JButton est alinhado com o canto inferior direito do JFrame, clique para colocar o boto. 4. Adicionar outro JButton esquerda do primeiro, certificando-se de coloclo usando o espaamento sugerido ao longo da borda inferior do JFrame. 5. Definir o texto de exibio de cada JButton. OK para entrar o boto esquerdo e Cancelar para a direita. Observe que a largura dos botes muda para acomodar os novos nomes. 6. Defina os dois JButtons para ter o mesmo tamanho, selecionando ambos, boto direito do mouse qualquer um, e escolhendo Mesmo tamanho> Mesma largura a partir do menu pop-up. Os componentes JButton aparecem na forma e seus ns correspondentes so exibidos na janela Inspetor. O cdigo dos componentes JButton tambm ser adicionado ao arquivo do formulrio fonte que visvel na exibio Fonte do editor. Cada um dos JButtons esto definidos para o mesmo tamanho que o boto com o nome mais longo.
A ltima coisa que precisamos fazer apagar o texto do espao reservado nos vrios componentes. Note que ao remover texto de espao reservado aps desbaste um formulrio pode ser uma tcnica til para evitar problemas com alinhamentos de componentes e as relaes de ancoragem, a maioria dos desenvolvedores tipicamente remover este texto no processo de colocar para fora as suas formas. Como voc vai atravs do formulrio, selecione e exclua o texto de espao reservado para cada um dos JTextFields. Vamos deixar os itens de espao reservado no JComboBox e JList para um tutorial mais tarde. topo

Inspecionando Seu GUI


Agora que voc criou com xito a GUI ContactEditor, voc pode experimentar a interface para ver os resultados. Voc pode visualizar sua forma como voc trabalha, clicando no boto Preview Form ( ) Na barra de ferramentas do Construtor de GUIs. O formulrio aberto em sua prpria janela, permitindo que voc teste antes da construo e execuo.

topo

Implantando aplicativos GUI


Para que as interfaces criadas com o Construtor de GUI para trabalhar fora do IDE, o aplicativo deve ser compilado nas classes do gerenciador de layout GroupLayout e tambm tem aquelas classes disponveis em tempo de execuo. Essas classes so includas no Java SE 6, mas no em Java SE 5. Se voc desenvolver a aplicao para rodar em Java SE 5, seu aplicativo precisa usar a biblioteca de extenses de layout Swing. Se voc estiver executando o IDE no JDK 5, o IDE gera automaticamente o cdigo do aplicativo para usar a biblioteca de extenses de layout Swing. Quando voc implanta o aplicativo, voc precisa incluir a biblioteca de extenses de layout Swing com a aplicao. Quando voc criar o aplicativo (Build> Build Main Project), o IDE fornece automaticamente uma cpia de arquivo da biblioteca JAR na pasta dist / lib do aplicativo. O IDE tambm adiciona todos os arquivos JAR que esto na pastadist no elemento Class-Path no arquivo o arquivo JAR da aplicao manifest.mf. Se voc estiver executando o IDE no JDK 6, o IDE gera o cdigo do aplicativo para usar as classes GroupLayout que esto no Java SE 6. Isto significa que voc pode implantar o aplicativo seja executado em sistemas com Java SE 6 instalado e voc no precisa empacotar seu aplicativo com a biblioteca do Swing extenses de layout. Observao: Se voc criar seu aplicativo usando JDK 6, mas voc precisa que o aplicativo rodar tambm no Java SE 5, voc pode ter o IDE gerar seu cdigo para usar o layout Swing biblioteca de extenses, em vez de as classes em Java SE 6. Abra a classe ContactEditorUI no editor GUI. No Inspetor, expanda o n ContactEditorUI e escolha ContactEditorUI formulrio. Na janela Propriedades, altere o valor da propriedade Estilo de gerao de layout do Swing Biblioteca extenses de layout.

Distribuindo e executando aplicaes de GUI


Para preparar a aplicao GUI para distribuio fora do IDE: Zip pasta dist do projeto em um arquivo ZIP. (A pasta dist tambm pode conter uma pasta lib, que voc tambm precisa incluir.) Para executar o aplicativo, clique com o nome do projeto e selecione Executar no menu de contexto. Na caixa de dilogo Executar projeto selecione o nome da classe principal (my.contacteditor.ContactEditorUI se falar sobre o projeto que voc acabou de criar) e clique em OK. Seu aplicativo instalado e funcionando. Para executar um aplicativo GUI a partir da linha de comando: 1. Navegue at a pasta dist do projeto.

2. Digite o seguinte:

java-jar <nome do jar>. jar


Nota: Se voc encontrar o seguinte erro:

Exceo em java.lang.NoClassDefFoundError thread "main": org / JDesktop / layout / GroupLayout $ Grupo


Assegurar que as referncias do arquivo manifest.mf a verso atualmente instalada do Balano Biblioteca extenses de layout. Para mais informaes sobre a biblioteca de extenso layout, visitar o projeto de layout Swing Extensions . topo Envie-nos seus comentrios

Veja tambm
Voc acabou de completar o tutorial Criando um balano do GUI. Para obter informaes sobre como adicionar funcionalidade ao GUIs que voc crie, veja: Introduo construo de GUIs Manipulao de imagens em um aplicativo GUI Construo de um aplicativo Java Desktop Database Criar um personalizado Java Application Desktop Database GUI Builder FAQ Java e JavaFX GUI Trilha de aprendizado topo