Criando Uma GUI Swing No NetBeans IDE - Tutorial

Embed Size (px)

Citation preview

14/05/2011

Criando uma GUI Swing no NetBeans I

Search: Choose page language English Japanese Russian Simplified Chinese HOME / Docs & Support / NetBeans IDE 6.7 / Basic Java Programming

Criando uma GUI Swing no NetBeans IDE

Baixe quickstart-gui.zip como um arquivo zip de leitura offline Esse tutorial o conduzir no processo de criao da interface grfica do usurio (GUI) de uma aplicao denominada ContactEditor por meio do Construtor de GUIs do NetBeans IDE. No processo, voc far o layout de uma GUI inicial que possibilita exibir e editar informaes de contato dos indivduos includos em um banco de dados de funcionrios. Nesse tutorial, voc aprender a: Usar a interface do Construtor de GUI Criar um continer de GUIs Adicionar componentes Redimensionar componentes Alinhar componentes Ajustar a ancoragem dos componentes Definir o comportamento de redimensionamento automtico dos componentes Editar as propriedades dos componentes Esse tutorial demora aproximadamente 30 minutos para ser concludo. cone for mostrado, voc poder clicar para visualizar uma Observao: sempre que o demonstrao interativa detalhada da funcionalidade do Construtor de GUIs. Para concluir este tutorial, voc precisa dos seguintes recursos e softwares. Software ou recurso NetBeans IDE Java Development Kit (JDK) Verso necessria verso 6.5, 6.1 ou 6.0 verso 6 ou verso 5

Guia de introduoO Construtor de GUIs do IDE torna possvel construir GUIs de aparncia profissional sem um conhecimento profundo dos gerenciadores de layout. Voc pode criar formulrios, simplesmente colocando componentes onde desejar. Para obter descries sobre os comentrios visuais do Construtor de GUIs, voc pode usar a Legenda de comentrios visuais do Construtor de GUIs.

Criando um projetonetbeans.org//quickstart-gui_pt_BR.h

Como todo o desenvolvimento em Java no IDE ocorre dentro dos projetos, precisamos

1/21

14/05/2011

Como todo o desenvolvimento em Java no IDE ocorre dentro dos projetos, precisamos primeiro criar um projeto ContactEditor para armazenar as fontes e outros arquivos do projeto. Um projeto do IDE um grupo de arquivos de Cdigos-fonte Java e metadados associados que inclui arquivos de propriedades especficos do projeto, um script de construo Ant que controla as configuraes de construo e execuo e um arquivo project.xml que mapeia destinos Ant para comandos do IDE. Embora as aplicaes Java geralmente consistam em vrios projetos do IDE, para o objetivo desse tutorial, construiremos uma aplicao simples, inteiramente armazenada em um nico projeto. Para criar um novo projeto de aplicao ContactEditor: 1. Escolha Arquivo > Novo projeto. Como alternativa, voc pode clicar no cone Novo projeto na barra de ferramentas do IDE. 2. No painel Categorias, selecione o n Java e no painel Projetos, escolha Aplicao Java. Clique em Prximo. 3. Insira ContactEditor no campo Nome do projeto e especifique o local do projeto. 4. Deixe desmarcada a caixa de verificao Usar pasta dedicada para armazenar bibliotecas. (Se voc estiver usando o NetBeans IDE 6.0, essa opo no est disponvel.) 5. Verifique se a caixa de verificao Definir como projeto principal est marcada e limpe o campo Criar classe principal. 6. Clique em Terminar. O IDE criar a pasta ContactEditor no sistema no local designado. Essa pasta contm todos os arquivos associados ao projeto, como o script Ant, pastas para armazenamento de fontes e testes e uma pasta para os metadados especficos do projeto. Para exibir a estrutura do projeto, use a janela Arquivos do IDE.

Criando uma GUI Swing no NetBeans I

Criar um continer de GUIsAps criar a nova aplicao, voc pode ter percebido que a pasta Pacotes de cdigos-fonte na janela Projetos contm um n vazio. Para prosseguir com a construo da nossa interface, precisamos criar um continer Java no qual colocaremos os outros componentes requeridos da GUI. Nessa etapa criaremos um continer usando o componente JFrame e o colocaremos em um novo pacote. Para criar um continer JFrame: 1. Na janela Projetos, clique com o boto direito do mouse no n ContactEditor e selecione Novo > Formulrio JFrame. 2. Insira ContactEditorUI como Nome da classe. 3. Insira my.contacteditor como nome do pacote. 4. Clique em Terminar. O IDE criar o formulrio ContactEditorUI e a classe ContactEditorUI na aplicao ContactEditorUI.java e abrir o formulrio ContactEditorUI no Construtor de GUIs. Observe que o pacote my.contacteditor substitui o pacote padro.

incio

Familiarizando-se com o Construtor de GUIsAgora que j configuramos o novo projeto para a aplicao, vamos nos familiarizar com a interface do Construtor de GUIs. Para explorar a interface do Construtor de GUIs com uma demonstrao interativa, clique no cone Exibir demonstrao.netbeans.org//quickstart-gui_pt_BR.h 2/21

14/05/2011

Criando uma GUI Swing no NetBeans I

Exibir demonstrao Quando adicionamos o continer JFrame, o IDE abriu o formulrio ContactEditorUI recm-criado em uma aba do Editor com uma barra de ferramentas que contm vrios botes, como mostra a ilustrao anterior. O formulrio ContactEditor aberto na exibio Design do Construtor de GUIs e trs janelas adicionais apareceram automaticamente ao longo das margens do IDE, permitindo navegar, organizar e editar formulrios de GUI medida que voc os constri. As vrias janelas do Construtor de GUIs incluem: rea de design. Janela principal do Construtor de GUIs para a criao e edio de formulrios de GUI Java. Os botes de alternncia Fonte e Design da barra de ferramentas permitem exibir o cdigo-fonte de uma classe ou uma exibio grfica dos seus componentes de GUI. Os botes adicionais da barra de ferramentas oferecem 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. Inspetor. Fornece uma representao de todos os componentes, tanto visuais como no visuais, na aplicao como uma hierarquia em rvore. O Inspetor tambm oferece comentrios visuais sobre qual componente da rvore est sendo editado no Construtor de GUIs, bem como permite organizar componentes nos painis disponveis. Paleta. Uma lista personalizvel dos componentes disponveis contendo abas para os componentes JFC/Swing, AWT e JavaBeans, bem como gerenciadores de layout. Alm disso, possvel criar, remover e reorganizar as categorias exibidas na Paleta usando o personalizador. Janela Propriedades. Exibe as propriedades do componente atualmente selecionado no Construtor de GUIs ou nas janelas Inspetor, Projetos ou Arquivos. Se voc clicar no boto Fonte, o IDE exibir o cdigo-fonte Java da aplicao no Editor com sees de cdigo geradas automaticamente pelo Construtor de GUIs e indicadas por reas azuis, denominadas Blocos protegidos. Blocos protegidos so rea protegidas que no so editveis na exibio Fonte. S possvel editar o cdigo exibido nas reas brancas do Editor na exibio Fonte. Se for necessrio fazer alteraes no cdigo em um Bloco protegido, clicar no boto Design far com que o Editor do IDE volte ao Construtor de GUIs, onde voc poder fazer os ajustes necessrios ao formulrio. Quando voc salvar as alteraes, o IDE atualizar as fontes do arquivo. Observao: para os desenvolvedores avanados, est disponvel um Personalizador de paleta e permite adicionar componentes personalizados de JARs, bibliotecas ou projetos Paleta.netbeans.org//quickstart-gui_pt_BR.h 3/21

14/05/2011

Criando uma GUI Swing no NetBeans I

incio

Conceitos-chaveO Construtor de GUIs do IDE resolve o problema central da criao de GUIs Java otimizando o fluxo de dados da criao de interfaces grficas, liberando os desenvolvedores das complexidades dos gerenciadores de layout do Swing. Ele faz isso estendendo o Construtor de GUIs atual do NetBeans para dar suporte ao paradigma claro "Design livre" com regras simples de layout, fceis de compreender e usar. medida que voc faz o layout do formulrio, o Construtor de GUIs fornece linhas de guia visuais sugerindo espaamento e alinhamento timo dos componentes. Em segundo plano, o Construtor de GUIs converte as decises de design em uma IU funcional implementada com o uso de um gerenciador de layouts GroupLayout e outras construes do Swing. Como ele usa um modelo de layout dinmico, as GUIs construdas com o Construtor de GUIs se comportam como o esperado em tempo de execuo, ajustando para acomodar as alteraes feitas sem alterar os relacionamentos definidos entre os componentes. Quando voc redimensionar o formulrio, alterar locais ou especificar aparncia diferente, a GUI se ajustar automaticamente para respeitar a aparncia das inseres e dos deslocamentos.

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

Posicionamento automtico dos componentes (Encaixe) medida que voc adiciona componentes a um formulrio, o Construtor de GUIs fornece comentrios visuais que auxiliam no posicionamento dos componentes de acordo com a aparncia do seu sistema operacional. O Construtor de GUIs oferece dicas in-line teis e outros comentrios visuais em relao ao local no qual os componentes devem ser colocados no formulrio, encaixando automaticamente os componentes na posio ao longo das linhas de guia. Ele faz essas sugestes de acordo com a posio dos componentes j colocados no formulrio, enquanto permite que o enchimento permanea flexvel, de maneira que a aparncia diferente do destino seja processada corretamente em tempo de execuo.

Comentrio visualO Construtor de GUIs tambm oferece comentrios visuais sobre as relaes de ancoragem e encadeamento de componentes. Esses indicadores permitem identificar rapidamente as vrias relaes de posicionamento e o comportamento fixo dos componentes que afetam a maneira como a GUI aparecer e se comportar em tempo de execuo. Isso acelera o processo de design de GUIs, permitindo que voc crie rapidamente interfaces visuais com aspecto profissional e que funcionam. incio

O principal primeiroAgora que voc est familiarizado com a interface do Construtor de GUIs, esse o momento para comear a desenvolver a IU da nossa aplicao ContactEditor. Nesta seo veremos a utilizao da Paleta do IDE para adicionar os vrios componentes da GUI necessrios ao nosso formulrio. Graas ao paradigma Design livre do IDE, no necessrio brigar com os gerenciadores de layout para controlar o tamanho e posio dos componentes nos contineres. Tudo o que voc precisa fazer arrastar e soltar os componentes necessrios no formulrio da GUI conforme exibido nas ilustraes abaixo.

Adicionando componentes: os Fundamentosnetbeans.org//quickstart-gui_pt_BR.h 4/21

14/05/2011

Criando uma GUI Swing no NetBeans I

Embora o Construtor de GUIs simplifique o processo de criao de GUIs Java, sempre til esboar a maneira como quer que a interface se parea antes de comear a fazer seu layout. Muitos designers de interfaces consideram isso uma tcnica de "melhor prtica", entretanto, para esse tutorial, voc pode simplesmente dar uma olhada como nosso formulrio preenchido deve se parecer indo para a seo Visualizao da GUI . Como j adicionamos um JFrame como continer de nvel superior do formulrio, a prxima etapa adicionar dois JPanels que permitiro unir os componentes da nossa IU usando bordas com ttulos. Veja as ilustraes 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 boto do mouse. 2. Mova o cursor at o canto esquerdo superior do formulrio no Construtor de GUIs. Quando o componente estiver localizado ao lado das margens superior e esquerda do continer, linhas de guia de alinhamento horizontal e vertical sero exibidas indicando as margens preferidas. Clique no formulrio para colocar o JPanel nesse local. O componente JPanel ser exibido no formulrio ContactEditorUI com realce na cor laranja, que significa que est selecionado, como mostra a ilustrao abaixo. Aps soltar o boto do mouse, pequenos indicadores sero exibidos para mostrar as relaes de ancoragem dos componentes e um n JPanel correspondente ser exibido na janela Inspetor.

Depois, precisamos redimensionar o JPanel para dar espao aos componentes que sero inseridos posteriormente, mas tomemos um minuto para indicar antes outros recursos de visualizao do Construtor de GUIs. Para fazer isso, precisamos cancelar a seleo do JPanel que acabamos de adicionar. Como ns ainda no adicionamos uma borda com ttulo, o painel desaparecer. Observe, entretanto, que quando voc passar o cursor sobre o JPanel, as margens mudaro para cinza claro para que sua posio possa ser vista claramente. Voc precisa apenas clicar em qualquer lugar no componente para selecion-lo novamente e fazer com que as alas de redimensionamento e os indicadores de ancoragem reapaream. Para redimensionar o JPanel: 1. Selecione o JPanel recm-adicionado. As pequenas alas de redimensionamento quadradas reaparecero em torno do permetro do componente.netbeans.org//quickstart-gui_pt_BR.h 5/21

14/05/2011

Criando uma GUI Swing no NetBeans I

2. Clique e segure a ala de redimensionamento na margem direita do JPanel e arraste-a at que a linha de guia de alinhamento pontilhada seja exibida ao lado da margem 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 continer de acordo com o deslocamento recomendado, como mostra a ilustrao abaixo.

Agora que adicionamos um painel para conter a informao Nome da nossa IU, precisamos repetir o processo para adicionar outro diretamente abaixo da primeira para a informao Email. Consultando as ilustraes abaixo, 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 que entre as margens. Quando voc tiver adicionado o segundo JPanel, redimensione-o para que preencha o espao vertical restante do formulrio.

netbeans.org//quickstart-gui_pt_BR.h

6/21

14/05/2011

Criando uma GUI Swing no NetBeans I

Como queremos distinguir visualmente as funes nas sees superior e inferior da nossa GUI, precisamos adicionar uma borda e ttulo a cada JPanel. Primeiro faremos isso usando a janela Propriedades e depois a experimentaremos usando o menu pop-up. Para adicionar bordas de ttulo aos JPanels: 1. Selecione o JPanel superior no Construtor de GUIs. 2. Na janela Propriedades, clique no boto de reticncias (...) ao lado da propriedade Borda. 3. No editor de bordas do JPanel exibido, selecione o n TitledBorder no painel Bordas disponveis. 4. No painel Propriedades abaixo, insira Name para a propriedade Ttulo. 5. Clique nas reticncias (...) ao lado da propriedade Fonte, selecione Negrito em Estilo de fonte e insira 12 em Tamanho. Clique em OK para fechar as caixas de dilogo. 6. Selecione o JPanel inferior e repita as etapas de 2 a 5, mas dessa vez clique com o boto direito do mouse no JPanel e acesse a janela Propriedades usando o menu pop-up. Insira E-mail para a propriedade Ttulo. As bordas com ttulo sero adicionadas a ambos componentes JPanel. Para ver uma demonstrao do procedimento anterior, clique em Exibir demonstrao

Adicionando componentes individuais ao formulrioAgora precisamos comear a adio dos componentes que apresentaro as informaes de contato reais na nossa lista de contatos. Nessa tarefa, adicionaremos quatro JTextFields que exibiro as informaes de contato e os JLabels que as descrevero. Enquanto faz isso, observe as linhas de guia horizontais e verticais que o Construtor de GUIs exibe, sugerindo o espaamento preferido dos componentes conforme definido pela aparncia do sistema operacional. Isso assegura que nossa GUI seja processada automaticamente respeitando a aparncia do sistema operacional de destino em tempo de execuo. Para adicionar um JLabel ao formulrio: 1. Na janela Paleta, selecione o componente Rtulo 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 rtulo.netbeans.org//quickstart-gui_pt_BR.h

O JLabel ser adicionado ao formulrio e um n correspondente,

7/21

14/05/2011

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

Criando uma GUI Swing no NetBeans I

Antes de prosseguir, precisamos editar o texto de exibio do JLabel que acabamos de adicionar. Embora seja possvel editar o texto de exibio do componente em qualquer ponto, a maneira mais fcil fazer isso medida que o adiciona. Para editar o texto de exibio de um JLabel: 1. Clique duas vezes no JLabel para selecionar a exibio de texto. 2. Digite Nome: e pressione Enter. O novo nome do JLabel ser exibido e a largura do componente ser ajustada como resultado da edio.

Agora adicionaremos um JTextField para que possamos ter uma vista rpida do recurso de alinhamento da linha de base do Construtor de GUIs. Para adicionar um JTextField ao formulrio: 1. Na janela Paleta, selecione o componente Campo de texto na categoria Swing. 2. Mova o cursor imediatamente direita do JLabel Nome: recm-adicionado. Quando a linha de guia horizontal aparecer, indicando que a linha de base do JTextField est alinhada com aquela do JLabel e o espaamento entre os dois componentes for sugerido com uma linha de guia vertical, clique para posicionar o JTextField. O JTextField se encaixar na posio no formulrio alinhado com a linha de base do JLabel, conforme mostra a ilustrao 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 ilustrao abaixo. Agora insira Sobrenome: como texto de exibio do JLabel e mantenha, por enquanto, o texto do espao reservado dos JTextFields como est.

Para redimensionar um JTextField:netbeans.org//quickstart-gui_pt_BR.h 8/21

14/05/2011

Criando uma GUI Swing no NetBeans I

1. Selecione o JTextField que ns acabamos de adicionar direita do JLabel Sobrenome:. 2. Arraste a ala de redimensionamento direita do JTextField em direo 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 boto do mouse para redimensionar o JTextField. A margem direita do JTextField se encaixar em alinhamento margem recomendada do JPanel, conforme mostra a ilustrao abaixo.

Para ver uma demonstrao do procedimento anterior, clique em

Exibir demonstrao

Adicionando vrios componentes ao formulrioAgora adicionaremos os JLabels Ttulo: e Apelido: que descrevem dois JTextFields que adicionaremos em um minuto. Arrastaremos e soltaremos os componentes enquanto pressionamos a tecla Shift para adicion-los rapidamente ao formulrio. Enquanto fazemos isso, observe novamente que o Construtor de GUIs exibe linhas de guia 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 Swing, clicando e soltando o boto do mouse. 2. Mova o cursor sobre o formulrio diretamente abaixo do JLabel Nome: adicionado anteriormente. Quando as linhas de guia 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. Os JLabels sero adicionados ao formulrio criando uma segunda linha, como mostra a ilustrao abaixo. Os ns que representam os componentes sero adicionados janela Inspetor.

Antes de continuar, precisamos editar o nome do JLabels para que possamos ver o efeito dos alinhamentos que definiremos posteriormente.netbeans.org//quickstart-gui_pt_BR.h 9/21

14/05/2011

Criando uma GUI Swing no NetBeans I

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 as etapas 1 e 2, inserindo Apelido: para a propriedade nome do segundo JLabel. Os novos nomes dos JLabels sero exibidos no formulrio e mudaro como resultado das larguras editadas, como mostra a ilustrao abaixo.

Para ver uma demonstrao do procedimento anterior, clique em

Exibir demonstrao.

Inserindo componentesGeralmente, necessrio adicionar um componente entre componentes j colocados em um formulrio. Quando voc adicionar um componente entre dois componentes existentes, o Construtor de GUIs automaticamente os mudar para dar espao para o novo componente. Para demonstrar isso, inseriremos um JTextField entre os JLabels adicionados anteriormente, como mostram as duas ilustraes 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 Ttulo: 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 linha de guia esquerda do JLabel Apelido, como mostra a primeira imagem abaixo. 3. Clique para posicionar o JTextField entre os JLabels Ttulo: e Apelido:. O JTextField se encaixar entre os dois JLabels. O JLabel da extremidade direita muda em direo direita do JTextField para acomodar o deslocamento horizontal sugerido.

netbeans.org//quickstart-gui_pt_BR.h

Training10/21

14/05/2011

Criando uma GUI Swing no NetBeans I

TrainingJava Programming Language Developing Applications for the Java EE Platform

Ainda precisamos adicionar outro JTextField ao formulrio que 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. Mova o cursor para a direita do rtulo Apelido e clique para posicionar o campo de texto. O JTextField se encaixar no lado esquerdo do JLabel. Para redimensionar um JTextField: 1. Arraste as alas de redimensionamento do JTextField do rtulo Apelido: adicionado na tarefa anterior direita do JPanel de fechamento. 2. Quando as linhas de guia de alinhamento vertical aparecerem sugerindo a margem entre o campo de texto e as margens do JPanel, solte o boto do mouse para redimensionar o JTextField. A margem direita do JTextField se encaixar em alinhamento com a margem recomendada do JPanel e o Construtor de GUIs deduzir o comportamento de redimensionamento correto.

SupportOracle Development Tools Support Offering for NetBeans IDE

DocumentationGeneral Java Development External Tools and Services Java GUI Applications Java EE & Java Web Development Web Services Applications NetBeans Platform (RCP) and Module Development PHP Applications C/C++ Applications Mobile Applications Sample Applications Demos and Screencasts

Para ver uma demonstrao do procedimento anterior, clique em incio

Exibir demonstrao

Avanar

More

Alinhamento um dos aspectos mais fundamentais da criao de GUIs com aparncia profissional. Na FAQs seo anterior, tivemos uma vista rpida dos recursos de alinhamento do IDE durante a adio dos Contribute Documentation! componentes JLabel e JTextField ao nosso formulrio ContactEditorUI. Depois, veremos de maneira Docs for Earlier Releases mais profunda os recursos de alinhamento do Construtor de GUIs, conforme trabalhamos com os outros componentes necessrios para a nossa aplicao.

Alinhamento de componentesSempre que voc adiciona um componente a um formulrio, o Construtor de GUIs os alinha efetivamente, conforme evidenciado pelas linhas de guia de alinhamento exibidas. Entretanto, s vezes, tambm necessrio especificar diferentes relacionamentos entre os grupos de componentes. Anteriormente, ns adicionamos quatro JLabels necessrios para a nossa GUI ContactEditor, mas ns no os alinhamos. Agora alinharemos as duas colunas de JLabels para que as margens direitas se alinhem. Para alinhar componentes: 1. Selecione os JLabels Nome: e Ttulo: no lado esquerdo do formulrio. 2. Clique no boto Alinhar direita na coluna ( ) na barra de ferramentas. Como alternativa, clique com o boto direito do mouse em um deles e escolha Alinhar > direita na coluna no menu pop-up. 3. Repita isso tambm para os JLabels Sobrenome: e Apelido:. A posio dos JLabels muda para que as margens direitas do texto de exibio sejam alinhadas. Os relacionamentos de ancoragem seronetbeans.org//quickstart-gui_pt_BR.h 11/21

14/05/2011

exibio sejam alinhadas. Os relacionamentos de Swing no NetBeans I Criando uma GUI ancoragem sero 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 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 um componente: 1. Clique pressionando a tecla Control nos dois componentes JTextField inseridos para selecion-los no Construtor de GUIs. 2. Com os dois JTextFields selecionados, clique com o boto direito do mouse em um deles e escolha Redimensionamento automtico > Horizontal no menu pop-up. Os JTextFields sero configurados com redimensionamento horizontal em tempo de execuo. As linhas de guia de alinhamento e os indicadores de ancoragem sero atualizados, fornecendo comentrio 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 formulrio para selecion-los. 2. Com os JTextFields selecionados, clique com o boto direito do mouse em um deles e escolha Definir tamanho padro no menu pop-up. Todos os JTextFields tero a mesma largura definida e os indicadores sero adicionados na parte superior destes, fornecendo comentrio visual dos relacionamentos dos componentes.

Agora precisamos adicionar outro JLabel que descreva a JComboBox que permitir aos usurios selecionar o formato das informaes que nossa aplicao ContactEditor exibir. Para alinhar um JLabel a um grupo de componentes: 1. Na janela Paleta, selecione o componente Rtulo na categoria Swing. 2. Mova o cursor abaixo dos JLabels Nome: e Ttulo: no lado esquerdo do JPanel. Quando as linhas de guia 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. O JLabel se encaixar em uma posio alinhada direita com a coluna dos JLabels acima, conforme mostra a ilustrao abaixo. O Construtor de GUIs atualiza as linhas de status de alinhamento, indicando as relaes de espaamento e ancoragem do componente.

netbeans.org//quickstart-gui_pt_BR.h

Como nos exemplos anteriores, clique duas vezes no JLabel para selecionar o texto de

12/21

14/05/2011

Criando uma GUI Swing no NetBeans Como nos exemplos anteriores, clique duas vezes no JLabel para selecionar oI de texto exibio e insira Exibir formato: para nome de exibio. Observe que quando o JLabel se encaixa na posio, os outros componentes mudam para acomodar o texto de exibio maior.

Para ver uma demonstrao do procedimento anterior, clique em

Exibir demonstrao

Alinhamento da linha de baseQuando 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 combinao que permitir aos usurios selecionar o formato das informaes que nossa aplicao ContactEditor exibir. medida que adicionamos JComboBox, alinharemos a linha de base com o texto do JLabel. Observe mais uma vez as linhas de guia de alinhamento da linha de base exibidas para nos auxiliar com o posicionamento. Para alinhar as linhas de base dos componentes: 1. Na janela Paleta, selecione o componente Caixa de combinao na categoria Swing. 2. Mova o cursor direita do JLabel recm-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 espaamento entre os dois componentes sugerido com uma linha de guia vertical, clique para posicionar a caixa de combinao. O componente se encaixar em uma posio alinhada com a linha de base do JLabel esquerda, conforme mostra a ilustrao abaixo. O Construtor de GUIs exibe as linhas de status, indicando as relaes de espaamento e ancoragem do componente.

Para redimensionar o JComboBox: 1. Selecione a Caixa de combinao no Construtor de GUIs. 2. Arraste a ala de redimensionamento na margem direita do JComboBox at que as linhas de guia de alinhamento sejam exibidas sugerindo o deslocamento preferido entre as margens do JComboBox e do JPanel. Conforme mostra a ilustrao 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 formulrio.

netbeans.org//quickstart-gui_pt_BR.h

13/21

14/05/2011

Criando uma GUI Swing no NetBeans I

A edio de modelos de componentes est alm do escopo desse tutorial, portanto deixaremos, por enquanto, a lista de itens de espao reservado da JComboBox como est. Para ver uma demonstrao do procedimento anterior, clique em incio Exibir demonstrao

Revisando que foi aprendidoSamos de um bom incio de construo da nossa GUI ContactEditor, mas tomemos um minuto para recapitular o que aprendemos enquanto adicionamos mais alguns componentes que nossa interface requer. At agora, ns nos concentramos na adio de componentes nossa GUI ContactEditor usando as linhas de guia de alinhamento do IDE para nos ajudar no posicionamento. Entretanto, importante compreender que a ancoragem outra parte integrante do posicionamento de componentes. Embora ainda no tenhamos discutido isso, voc j se beneficiou com esse recurso sem perceber. Como mencionado antes, quando voc adiciona um componente a um formulrio, o IDE sugere o posicionamento preferido da aparncia de destino com linhas de guia. Depois de posicionados, os novos componentes tambm so ancorados na margem mais prxima do continer ou componente para assegurar que os relacionamentos entre os componentes sejam mantidos em tempo de execuo. Nesta seo, ns nos concentraremos em concluir as tarefas de maneira mais otimizada enquanto ressaltamos o trabalho que o Construtor de GUIs est fazendo nos bastidores.

Adicionando, alinhando e ancorandoO Construtor de GUIs permite fazer o layout de formulrios rpida e facilmente otimizando gestos tpicos do fluxo de trabalho. Quando voc adiciona um componente a um formulrio, o Construtor de GUIs o encaixa automaticamente na posio preferida e define as relaes de encadeamento necessrias para que voc se concentre no design dos formulrios em vez de brigar com detalhes de implementao complicados. Para adicionar, alinhar e editar o texto de exibio de um JLabel: 1. Na janela Paleta, selecione o componente Rtulo na categoria Swing. 2. Mova o cursor sobre o formulrio imediatamente abaixo do ttulo E-mail do JPanel inferior. Quando as linhas de guia 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 exibio de texto. Depois digite Endereo de e-mail: e pressione Enter. O JLabel se encaixar na posio preferida no formulrio e ser ancorado nas margens superior e esquerda do JPanel de fechamento. Assim como ocorreu anteriormente, um n correspondente, representando o componente, tambm 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 rtulo

netbeans.org//quickstart-gui_pt_BR.h

14/21

14/05/2011

2. Mova o cursor imediatamente direita do rtulo Endereo de e-mail recm-adicionado. Quando as linhas de guia 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 linha de guia vertical, clique para posicionar o campo de texto. O JTextField se encaixar direita do JLabel Endereo de e-mail: e ser encadeado ao JLabel. O n correspondente tambm ser adicionado janela Inspetor. 3. Arraste a ala de redimensionamento do JTextField em direo direita do JPanel at que as linhas de guia de alinhamento sejam exibidas sugerindo o deslocamento entre as margens do JTextField e do JPanel. A margem direita do JTextField se encaixar na linha de guia de alinhamento indicando as margens preferidas.

Criando uma GUI Swing no NetBeans I

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 Endereo de e-mail adicionado anteriormente. Quando as linhas de guia aparecerem, indicando que as margens superior e esquerda do JList esto alinhadas s margens preferidas ao longo da margem esquerda do JPanel e do JLabel acima, clique para posicionar o JList. 3. Arraste a ala de redimensionamento do JList em direo direita do JPanel de fechamento at que as linhas de guia de alinhamento sejam exibidas indicando que tem a mesma largura do JTextField acima. O JList se encaixar na posio designada pelas linhas de guia de alinhamento e seu n correspondente ser exibido na janela Inspetor. Observe tambm que o formulrio se expande para acomodar o JList recm-adicionado. Como as JLists so usadas para exibir longas listas de dados, geralmente requerem a adio de um JScrollPane. Quando voc adiciona um componente que requer um JScrollPane, o Construtor de GUIs o adiciona automaticamente para voc. Como os JScrollPanes so componentes no visuais, voc precisa usar a janela Inspetor para exibir ou editar os JScrollPanes que o Construtor de GUIs criar. Para ver uma demonstrao do procedimento anterior, clique em Exibir demonstrao

Dimensionamento de componentes sempre benfico definir vrios componentes relacionados, como botes em caixas de dilogo modais, para que tenham o mesmo tamanho a fim de oferecer consistncia visual. Para demonstrar isso, adicionaremos quatro JButtons ao nosso formulrio ContactEditor que permitiro adicionar, editar e remover entradas individuais da nossa lista de contatos, como mostram as ilustraes abaixo. Depois, definiremos os quatro botes para que tenham o mesmo tamanho e possam ser facilmente reconhecidos e ofeream a funcionalidade relacionada. Para adicionar, alinhar e editar o texto de exibio de vrios botes: 1. Na janela Paleta, selecione o componente Boto. 2. Mova o JButton acima da margem direita do JTextField Endereo de email no JPanel inferior. Quando as linhas de guia aparecerem, indicando que a linha de base e a margem direita do JButton esto alinhadas snetbeans.org//quickstart-gui_pt_BR.h 15/21

14/05/2011

Criando uma GUI Swing alinhadas s que a linha de base e a margem direita do JButton esto no NetBeans I margens do JTextField, clique pressionando Shift para posicionar o primeiro boto ao longo da margem direita do JFrame. A largura do JTextField diminui para acomodar o JButton onde voc soltar o boto do mouse. 3. Mova o cursor sobre o canto superior direito do JList no JPanel inferior. Quando as linhas de guia aparecerem, indicando que as margens superior e direita do JButton esto alinhadas s margens do JList, clique pressionando Shift para posicionar 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 os JButtons de maneira que o espaamento 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 exibio de cada JButton. (Voc pode editar o texto de um boto, clicando com o boto direito do mouse no boto e escolhendo Editar texto. Ou voc pode clicar no boto, pausar e clicar novamente.) Insira Adicionar para o boto superior, Editar para o segundo, Remover para o terceiro e Padro para o quarto.

Os componentes JButton se encaixam nas posies designadas pelas linhas de guia de alinhamento. A largura dos botes muda para acomodar os novos nomes.

Agora que os botes esto posicionados onde os queremos, ns definiremos os quatro botes para que tenham o mesmo tamanho e consistncia 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 seleo. 2. Clique com o boto direito do mouse em um deles e escolha Mesmo tamanho > Mesma largura no menu pop-up.netbeans.org//quickstart-gui_pt_BR.h 16/21

14/05/2011

Criando uma GUI Swing no NetBeans I

Os JButtons sero definidos com o mesmo tamanho do boto que tiver o nome mais longo.

Para ver uma demonstrao do procedimento anterior, clique em

Exibir demonstrao.

RecuoFreqentemente necessrio unir vrios componentes em outro para que fique 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 GUIs permite fazer o recuo facilmente oferecendo linhas de guia especiais que sugerem o deslocamento preferido para a aparncia do seu sistema operacional. Nesta seo, adicionaremos alguns JRadioButtons abaixo de um JLabel que permitir aos usurios personalizar a maneira como a aplicao exibe dados. Veja as ilustraes abaixo enquanto faz isso ou clique no link Visualizar demonstrao seguindo o procedimento para ver uma demonstrao interativa. Para recuar JRadioButtons abaixo de um JLabel: 1. Adicione um JLabel denominado Formato de correspondncia ao formulrio abaixo do JList. Certifique-se de que o rtulo est alinhado esquerda do JList acima. 2. Na janela Paleta, selecione o componente Boto de opo na categoria Swing. 3. Mova o cursor abaixo do JLabel recm-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 linhas de guia de recuo secundrias aparecerem. Clique pressionando a tecla Shift para posicionar o primeiro boto de opo. 4. Mova o cursor direita do primeiro JRadioButton. Clique pressionando a tecla Shift para inserir o segundo e o terceiro JRadioButtons, respeitando o espaamento sugerido do componente. Certifique-se de soltar a tecla Shift antes de posicionar o ltimo JRadioButton. 5. Defina o texto de exibio de cada JRadioButton. (Voc pode editar o texto de um boto, clicando com o boto direito do mouse no boto e escolhendo Editar texto. Ou voc pode clicar no boto, pausar e clicar novamente.) Insira HTML para o boto de opo esquerdo, Texto simples para o segundo e Personalizado para o terceiro. Trs JRadioButtons sero adicionados ao formulrio e recuados abaixo do JLabel Formato de correspondncia.

netbeans.org//quickstart-gui_pt_BR.h

17/21

14/05/2011

Criando uma GUI Swing no NetBeans I

Agora, precisamos adicionar os trs JRadioButtons a um ButtonGroup para permitir o comportamento de alternncia esperado no qual somente um boto de opo pode ser selecionado por vez. Por sua vez, isso assegurar que as informaes de contato do aplicativo ContactEditor sero exibidas no formato de email da nossa escolha. Para adicionar JRadioButtons a um ButtonGroup: 1. Na janela Paleta, selecione o componente Grupo de botes na categoria Swing. 2. Clique em qualquer lugar na rea de design do Construtor de GUIs para adicionar o componente ButtonGroup ao formulrio. Observe que o Grupo de botes em si no exibido no formulrio, no entanto, visvel na rea Outros componentes do Inspetor. 3. Selecione os trs JRadioButtons do formulrio. 4. Na janela Propriedades, selecione buttonGroup1 na caixa de combinao da propriedade buttonGroup. Trs JRadioButtons sero adicionados ao grupo de botes.

Para ver uma demonstrao do procedimento anterior, clique em incio

Exibir demonstrao

Fazendo os ajustes finaisConseguimos esboar nossa GUI do aplicativo ContactEditor, mas ainda h algumas coisas a serem feitas. Nesta seo, observaremos algumas das tarefas de layout tpicas que o Construtor de GUIs simplifica.

Finalizandonetbeans.org//quickstart-gui_pt_BR.h

Agora precisamos adicionar os botes que permitiro aos usurios confirmar as informaes

18/21

14/05/2011

Agora precisamos adicionar os botes que permitiro aos usurios confirmar as informaes 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 botes requeridos e os editaremos para que sejam exibidos com o mesmo tamanho no formulrio, embora seus textos de exibio tenham tamanhos diferentes. Para adicionar e editar o texto de exibio dos botes. 1. Se o JPanel inferior estiver estendido na margem inferior do formulrio JFrame, arraste a margem inferior do JFrame para baixo. Isso proporciona espao entre as margens do JFrame e do JPanel para os botes OK e Cancelar. 2. Na janela Paleta, selecione o componente Boto na categoria Swing. 3. Mova o cursor sobre o formulrio abaixo do JPanel E-mail. Quando as linhas de guia aparecerem, indicando que a borda direita do JButton est alinhada ao canto direito do JFrame, clique para posicionar o boto. 4. Adicione outro JButton esquerda do primeiro, certificando-se de coloc-lo usando o espaamento sugerido ao longo da margem inferior do JFrame. 5. Defina o texto de exibio de cada JButton. Insira OK para o boto esquerdo e Cancelar para o boto direito. Observe que a largura dos botes muda para acomodar os novos nomes. 6. Defina os dois JButtons para terem o mesmo tamanho selecionando-os, clicando com o boto direito do mouse em um deles e selecionando Mesmo tamanho > Mesma largura no menu pop-up. Os componentes JButton sero exibidos no formulrio e seus ns correspondentes sero exibidos na janela Inspetor. O cdigo dos componentes JButton tambm ser adicionado ao arquivo de origem do formulrio, que visvel na exibio Fonte do editor. Todos os JButtons sero definidos com o mesmo tamanho definido do boto que tiver o nome mais longo.

Criando uma GUI Swing no NetBeans I

A ltima tarefa a ser realizada excluir o texto do espao reservado nos vrios componentes. Observe que, embora a remoo do texto do espao reservado aps a configurao preliminar de um formulrio possa ser uma tcnica til para evitar problemas de alinhamento e relaes de ancoragem dos componentes, a maioria dos desenvolvedores geralmente remove esse texto no processo de layout de seus formulrios. medida que percorre o formulrio, selecione e exclua o texto do espao reservado de cada um dos JTextFields. Deixaremos os itens de espao reservado no JComboBox e no JList para um tutorial posterior. Para ver uma demonstrao do procedimento anterior, clique em Exibir demonstrao. incio

Visualizando a GUIAgora que voc criou com xito a GUI ContactEditor, voc pode experimentar a interface para ver os resultados. possvel visualizar o formulrio medida que trabalha clicando no boto Visualizar formulrio ( ) na barra de ferramentas do Construtor de GUIs. O formulrio ser aberto em sua prpria janela, permitindo que voc o teste antes da construo e execuo.

netbeans.org//quickstart-gui_pt_BR.h

19/21

14/05/2011

Criando uma GUI Swing no NetBeans I

incio

Implantando aplicaes de GUIPara que as interfaces criadas com o Construtor de GUIs funcionem fora do IDE, a aplicao deve ser compilada nas classes do gerenciador de layout GroupLayout e essas classes tambm devem estar disponveis no tempo de execuo. Essas classes so includas no Java SE 6, mas no no Java SE 5. Se voc desenvolver o aplicativo para ser executado no Java SE 5, seu aplicativo precisa usar a biblioteca de extenses de layout Swing. Se o IDE estiver sendo executado no JDK 5, o IDE gerar o cdigo da aplicao automaticamente para usar a biblioteca de extenses de layout Swing. Ao implantar a aplicao, voc precisa incluir a biblioteca de extenses de layout Swing. Quando voc constri o aplicativo (Construir > Construir projeto principal), o IDE fornece automaticamente uma cpia do arquivo JAR da biblioteca na pasta dist/lib do aplicativo. O IDE tambm adiciona todos os arquivos JAR da pasta dist/lib no elemento ClassPath no arquivo manifest.mf do arquivo JAR da aplicao. Se voc estiver executando o IDE no JDK 6, o IDE gera o cdigo do seu aplicativo para usar as classes GroupLayout que esto no Java SE 6. Isso significa que voc pode implantar o aplicativo para ser executado em sistemas com o Java SE 6 instalado e no necessrio empacotar seu aplicativo com a biblioteca de extenses de layout Swing. Observao: se s aplicao for criada com o JDK 6, mas voc precisar que tambm seja executada no Java SE 5, poder fazer com que o IDE gere seu cdigo para usar a biblioteca de extenses de layout Swing em vez das classes no Java SE 6. Abra a classe ContactEditorUI no Editor de GUIs. No Inspetor, expanda o n ContactEditorUI e selecione Formulrio ContactEditorUI. Na janela Propriedades, altere o valor da propriedade Estilo de gerao de layout para Biblioteca de extenses de layout Swing.

Distribuindo e executando aplicaes de GUI independentesPara preparar a aplicao de GUI para distribuio fora do IDE: Compacte a pasta dist do projeto em um arquivo ZIP. (A pasta dist tambm pode conter uma pasta lib, que tambm poderia necessitar ser includa). Para executar uma aplicao de GUI a partir da linha de comando: 1. Navegue at a pasta do dist projeto. 2. Digite o seguinte:java -jar .jar

Observao: se voc encontrar este erro:netbeans.org//quickstart-gui_pt_BR.h 20/21

14/05/2011

Criando uma GUI Swing no NetBeans I

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

Verifique se o arquivo manifest.mf faz referncia verso atualmente instalada da biblioteca de extenses de layout Swing. Para obter mais informaes sobre a biblioteca de extenses de layout, visite o projeto Extenses de layout Swing. incio Envie-nos seus comentrios

Consulte tambmAgora voc concluiu o tutorial Criando uma GUI Swing. Para obter informaes sobre como adicionar funcionalidade s GUIs que voc criar, consulte: Introduo construo de GUIs Criando uma aplicao de banco de dados de rea de trabalho Java Criando um aplicativo de banco de dados de rea de trabalho Java personalizado Perguntas freqentes do Construtor de GUIs Trilha do aprendizado das aplicaes de GUI em Java incio

SiteMap About Us Contact Legal By use of this website, you agree to the NetBeans Policies and Terms of Use. 2011, Oracle Corporation and/or its affiliates. Companion Projects: Sponsored by

netbeans.org//quickstart-gui_pt_BR.h

21/21