Criando Um GUI Swing No NetBeans IDE

  • Published on
    11-Jul-2015

  • View
    176

  • Download
    0

Transcript

IntroduoConstrutor de GUI 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 projetoComo todo o desenvolvimento Java no IDE ocorre dentro de projetos, precisamos primeiro criar um novo ContactEditor projeto dentro do qual para armazenar fontes e outros arquivos do projeto. Um projeto do IDE um grupo de arquivos-fonte Java e metadados associados, incluindo projetos especficos arquivos de propriedades, um script de construo Ant que controla a construir e executar as configuraes, e um project.xml arquivo que mapeia destinos Ant para comandos do IDE. Enquanto as aplicaes Java geralmente consistem de vrios projetos IDE, para os fins deste tutorial, vamos construir uma aplicao simples, inteiramente armazenada em um nico projeto.

Para criar um novo ContactEditor projeto do aplicativo: 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 especificar a localizao 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 selecionada e limpar o campo Criar classe principal. 6. Clique em Concluir. O IDE cria o ContactEditor pasta 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 JFrameDepois de criar o novo aplicativo, voc deve ter notado que a pasta Source Packages na janela Projetos contm um vazio n. Para continuar com a construo de nossa interface, precisamos criar um continer Java no qual colocaremos os outros componentes GUI necessrio. Nesta etapa vamos criar um continer usando o JFramecomponente e coloque o recipiente em um novo pacote.

Para adicionar um JFrame container: 1. Na janela Projetos, clique com o ContactEditor n e escolha 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 ContactEditorUI forma eo ContactEditorUI classe dentro do ContactEditorUI.java aplicao e abre o ContactEditorUI formulrio no Construtor de GUI. Observe que o my.contacteditor pacote substitui o pacote padro.topo

Familiarizando-se com o Construtor de GUIAgora 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 GUI Builder com uma demonstrao interativa, consulte o Explorando GUI Builder (swf). screencast.

Quando adicionamos o continer JFrame, o IDE abriu o recmcriado ContactEditorUI formulrio 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-lhe navegar, organizar e editar formas GUI como voc construir eles. Vrias janelas do Construtor de GUIs incluem:

rea de design. janela principal do Construtor de GUIs para a criao e edio de formulrios Java GUI. 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 fornecem 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 novisual, 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 GUIs, bem como permite organizar 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 para o 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 atualizaes fontes do arquivo. Nota: Para os desenvolvedores avanados, o Palette Manager est disponvel que permite adicionar componentes personalizados de JARs, bibliotecas ou outros projectos para a paleta. Para adicionar componentes personalizados atravs do Gerenciador de Paleta, selecione Ferramentas> Paleta balano> / AWT Components. topo

Conceitos-chaveGUI do IDE Builder 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 definir o seu formulrio, o Construtor 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 as relaes definidas entre os componentes. Sempre que voc redimensionar o formulrio, alterar locais ou especificar uma aparncia diferente, o seu GUI ajusta automaticamente a respeitar o olhar alvo e inseres sentir e compensaes.

Desenho livreNo Construtor de GUI do IDE, voc pode construir formulrios simplesmente colocando os componentes onde quiser, como se estivesse usando o posicionamento absoluto. O Construtor de GUIs descobre quais os 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) medida que 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 in-line til e feedback visual sobre outros onde os componentes devem ser colocados em seu formulrio, encaixando automaticamente os componentes na posio em funo de orientaes. Ele faz essas sugestes com base nas posies dos componentes que j foram colocados no formulrio, permitindo o preenchimento de

permanecer flexvel de tal forma que aparncia diferente do destino seja processada corretamente em tempo de execuo.

Feedback visualO 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. Isto acelera o processo de design GUI, permitindolhe criar rapidamente profissional-olhando interfaces visuais que trabalham. topo

First Things FirstAgora que voc j familiarizado com a interface do Construtor de GUIs, hora de comear a desenvolver a interface do usurio da 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 j no tem 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 interactiva na seo abaixo.

Adicionando componentes: The BasicsApesar de GUI do IDE Builder simplifica o processo de criao de GUIs Java, muitas vezes til esboar a maneira que voc quiser que o seu interface para olhar antes de comear a coloc-lo 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 pr-visualizar o seu GUI seo. 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 da interface do usurio usando nossa fronteiras com o ttulo. 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 localizado perto de margens superior e esquerda do recipiente, as diretrizes de alinhamento horizontal e vertical aparecem indicando as margens preferidas. Clique na forma de colocar o JPanel neste local. O JPanel componente aparece na ContactEditorUI formulrio com realce na cor laranja, significando que ele est selecionado, 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 o 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. Liberar a ala de redimensionamento para redimensionar o componente. O JPanel componente estendido para ficar entre as margens esquerda e direita do container de acordo 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 outro diretamente abaixo da primeira para a informao email. 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 ela 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, digite nome para a propriedade Title. 5. Clique nas reticncias (...) ao lado da propriedade Fonte, selecione Negrito em Estilo de fonte, e digite 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 direito do mouse no JPanel e acessar a janela Propriedades usando o menu pop-up.Digite E-mail para a propriedade Title. Intitulado fronteiras so adicionados a ambos JPanel componentes.Adicionando componentes individuais ao formulrioAgora, precisamos comear a adicionar os componentes que ir apresentar as informaes de contato real em 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 orientaes horizontal e vertical que exibe o Construtor de GUI, 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 nome JPanel 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. Tipo Nome: 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 de 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 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, precisamos adicionar mais um JLabel e JTextField imediatamente direita dos que acabamos de adicionar, como mostrado na ilustrao a seguir. Desta vez entram 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 a margem do JPanel margem recomendada, como mostrado na ilustrao a seguir.

Adicionando vrios componentes ao formulrioAgora vamos adicionar o ttulo: e Nickname: JLabels que descrevem dois JTextFields que vamos 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 horizontal e vertical, sugerindo o espaamento preferido do componente.

Para adicionar vrios JLabels ao formulrio: 1. Na janela Paleta, selecione o componente Rtulo na categoria Swing, clicando Controles e soltar o boto do mouse. 2. Mover o cursor sobre o formulrio diretamente abaixo do Nome: JLabel 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. Digite Ttulo: e pressione Enter. 3. Repita os passos 1 e 2, entrando Nickname: 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 inserindoNota: Consulte a insero de componentes (swf). screencast para uma demonstrao interactiva 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 Nickname: JLabels na segunda fileira 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 diretriz esquerda do Nickname JLabel como mostra a primeira imagem abaixo. 3. Clique para colocar o JTextField entre o Ttulo: e Nickname: 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 ao formulrio que exibir o apelido de cada 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 da Nickname rtulo 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. 2. Quando as diretrizes de alinhamento vertical aparecerem sugerindo a margem entre o campo de texto e bordas JPanel, solte o boto do mouse para redimensionar o JTextField. A margem direita do JTextField se encaixar em alinhamento com margem borda do JPanel e recomendado o Construtor de GUI infere o comportamento de redimensionamento apropriadas.topo

Moving ForwardO alinhamento um dos aspectos mais fundamentais da criao GUIs de aparncia profissional. 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 a nossa aplicao.

Alinhamento de componentesNota: Consulte o alinhamento e ancoragem componentes (swf). screencast para uma demonstrao interativa em 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, especificar 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 pressionada e clique para selecionar o nome: e Ttulo: JLabels no lado esquerdo do formulrio. 2. Clique no boto Alinhar Direita na coluna ( ) na barra de ferramentas. Alternativamente, voc pode boto direito do mouse em um deles e escolha Alinhar> direito na coluna a partir do menu pop-up. 3. Repita este procedimento para a Sobrenome: e Nickname: JLabels tambm. A posio dos JLabels muda para que as margens direitas do texto de exibio esto alinhados. As relaes de ancoragem sero atualizados, indicando que os componentes tenham sido agrupados.Antes de terminarmos com os JTextFields adicionados anteriormente, precisamos ter certeza de que os dois JTextFields que inserimos entre os JLabels esto definidas para redimensionar corretamente. Ao contrrio dos dois JTextFields que foram esticados para a borda direita da nossa forma, o comportamento 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 selecionados, clique com qualquer um deles e escolha Redimensionamento automtico> Horizontal no menu pop-up. O JTextFields esto 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 Same no 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 da informao 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 Ttulo JLabels 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 mostrado na ilustrao a seguir. O Construtor de GUI atualiza as linhas de alinhamento de status indicando o espaamento do componente 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 encaixar, os outros componentes mudam para acomodar o texto de exibio maior.

Alinhamento de baseSempre 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 permitem 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 alinhamento que aparecem para nos ajudar com o posicionamento.

Para alinhar as linhas de base de componentes: 1. Na janela Paleta, selecione o componente Combo Box da 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 mostrado na ilustrao a seguir. O Construtor de GUI exibe linhas de status indicando o espaamento do componente 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.

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

Reviso que foi aprendidoNs 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 nossa GUI ContactEditor utilizando as diretrizes de alinhamento do IDE para nos ajudar com o posicionamento. importante entender, no entanto, que outra parte integrante do posicionamento de componentes est ancorando. 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 colocados, os novos componentes tambm so ancorados na margem mais prxima container ou componente para assegurar que as relaes so mantidas componente em tempo de execuo. Nesta seo, vamos nos concentrar em realizar as tarefas de uma forma mais otimizada enquanto ressaltamos o trabalho do construtor de GUI est fazendo nos bastidores.

Adicionando, alinhando e AncoragemO Construtor de GUI permite fazer o layout de formulrios 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 a forma 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. Em seguida, digite Endereo de E-mail: e pressione Enter. O JLabel se encaixar na posio preferida no formulrio,

ancorado nas margens superior e esquerda do JPanel. Assim 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 endereo de email rtulo 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 Email: JLabel e est acorrentado ao JLabel. O n correspondente tambm adicionado janela Inspetor. 3. Arraste a ala de redimensionamento do JTextField em direo 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 E-mail JLabel adicionado anteriormente. Quando as diretrizes aparecem indicando que o 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 ser 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. JScrollPanes porque 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 componentesNota: Consulte o redimensionamento e componentes indentao (swf). screencast para uma demonstrao interativa em 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. Em seguida, vamos definir os quatro botes para ter o mesmo tamanho para que eles 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 ao longo da borda direita do Email JTextField no JPanel inferior. Quando as diretrizes aparecem indicando que linha de base do JButton ea margem direita esto alinhados com o 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 de posicionar o 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 Adicionar para o boto superior, Editar para o segundo, Remover para o terceiro, e como padropara 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, vamos definir os quatro botes para ter o mesmo tamanho e consistncia visual, bem como para esclarecer que elas esto relacionadas funcionalmente.

Para configurar 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 no menu pop-up. O JButtons esto definidos para o mesmo tamanho que o boto com o nome mais longo.EntalheMuitas vezes necessrio vrios componentes de cluster em 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, fornecendo 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 aos usurios personalizar 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 chamado Formato de Correio para o formulrio abaixo do JList. Certifique-se o rtulo est alinhado esquerda do 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 de 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 Text para o segundo, e personalizado para o terceiro. Trs JRadioButtons so adicionados ao formulrio e recuado abaixo do Formato de Correio JLabel.

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 sero exibidas no formato de email de 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 de inspetor de outros componentes. 3. Selecione todas as trs JRadioButtons no formulrio. 4. Na janela Propriedades, escolher buttonGroup1 na caixa de combinao propriedade buttonGroup. Trs JRadioButtons so adicionados ao grupo de botes.topo

Fazendo os ajustes finaisConseguimos 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 UpAgora precisamos adicionar os botes que permitem aos 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. Neste passo, vamos adicionar os dois botes necessrios e depois edit-los para que eles parecem do mesmo tamanho no formulrio, embora seu texto de exibio so diferentes comprimentos.

Para adicionar e editar o texto de exibio dos 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 email. 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 coloc-lo usando o espaamento sugerido ao longo da borda inferior do JFrame. 5. Definir o texto de exibio de cada JButton. Digite OK para 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 ser o mesmo tamanho selecionando ambos, boto direito do mouse tanto, e escolhendo Mesmo tamanho> Mesma largura no menu pop-up. O JButton componentes aparecem na forma e seus ns correspondentes so exibidos na janela Inspetor. O JButton cdigo dos componentes tambm 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 nas vrias componentes. Note que ao remover texto de espao reservado aps desbaste para fora 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 do 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 GUIAgora que voc criou com xito a GUI ContactEditor, voc pode experimentar a interface para ver os resultados. Voc pode visualizar o formulrio enquanto 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 GUIPara 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 esto includas no Java SE 6, mas no no 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 o aplicativo. Quando voc constri o aplicativo (Construir> Construir projeto principal), o IDE fornece automaticamente uma cpia de arquivo da biblioteca JAR na aplicao de dist / lib pasta. O IDE tambm adiciona todos os arquivos JAR que esto na dist pasta para o Class-Path elemento no arquivo JAR do aplicativo manifest.mf arquivo. 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. Isso 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. Nota: Se voc criar seu aplicativo usando o JDK 6, mas voc precisa do aplicativo para rodar tambm no Java SE 5, voc pode ter o IDE gerar seu cdigo para usar a biblioteca de extenses de layout Swing em vez de as classes em Java SE 6. Abra a classe ContactEditorUI no editor GUI. No Inspector, expanda o n ContactEditorUI e escolha ContactEditorUI formulrio. Na janela Propriedades, altere o valor da propriedade Estilo de gerao de layout do Swing Biblioteca de extenses de layout.

Distribuindo e executando aplicaes de GUI

Para preparar a aplicao GUI para distribuio fora do IDE: Zip do projeto dist pasta em um arquivo ZIP. (A dist pasta tambm pode conter uma lib pasta, 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 falando sobre o projeto que acabou de criar) e clique em OK. O aplicativo est instalado e funcionando. Para executar um aplicativo GUI a partir da linha de comando:

1.2.

Navegue at o projeto de dist da pasta. Digite o seguinte:

java-jar . jarNota: Se voc encontrar o seguinte erro:

Exceo em java.lang.NoClassDefFoundError thread "main": org / JDesktop / layout / GroupLayout $ GrupoAssegurar que as referncias do arquivo manifest.mf a verso atualmente instalada do Balano Biblioteca de extenses de layout. Para mais informaes sobre a biblioteca de extenses de layout, visite o balano do projeto Extenses de layout .