Criando um GUI Swing no NetBeans IDE
Este tutorial o orienta durante o processo de criação da interface gráfica do usuário (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 a s informações de contato dos indivíduos incluídos em um banco de dados dos funcionários. 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 automático, editar as propriedades do componente. Este tutorial leva cerca de 30 minutos para ser concluído.
Conteúdo •
o o •
•
o o o •
o o o o •
o o •
o o o •
•
•
•
Introdução Criando um projeto Criando um Container JFrame Familiarizando-se com o Construtor de GUI Conceitos-chave Desenho livre Posicionamento automático dos componentes (Encaixe) Feedback visual First Things First Adicionando componentes: The Basics Adicionando componentes individuais ao formulário Adicionando vários componentes ao formulário Componentes inserindo Moving Forward Alinhamento de componentes Alinhamento de base Revisão que foi aprendido Adicionando, alinhando e Ancoragem Dimensionamento de componentes Entalhe Fazendo os ajustes finais Inspecionando Seu GUI Implantando aplicativos GUI Veja também Para concluir este tutorial, você precisa dos seguintes programas e recursos.
Software ou recurso NetBeans IDE
Versão necessária versão 6.9 ou 7.0
Java Development Kit (JDK) versão 6
Introdução
Construtor de GUIs do IDE torna possível a construção de GUIs de aparência profissional sem um conhecimento profundo dos gerenciadores de layout. Você pode criar formulários, simplesmente colocando componentes onde quiser. Para obter descrições de feedback visual do Construtor de GUIs, você pode usar o GUI Builder Legenda de comentários 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 específico arquivos de propriedades, um script de construção Ant que controla a construir e executar as configurações, e um arquivo project.xml que mapeia destinos Ant para comandos do IDE. Enquanto as aplicações Java consistem muitas vezes em vários projetos IDE, para os fins deste tutorial, vamos construir uma aplicação simples, inteiramente armazenada em um único projeto.
Para criar um novo projeto de aplicação ContactEditor: 1. Escolha Arquivo> Novo projeto. Alternativamente, 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 Aplicação Java. Clique em Avançar. 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 seleção 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 contém todos os arquivos associados ao projeto, como o script Ant, pastas para armazenamento de fontes e testes, e uma pasta para projetos específicos de metadados. Para visualizar a estrutura es trutura 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 contém um nó
vazio. Para prosseguir com a construção da nossa interface, precisamos criar um contêiner Java no qual colocaremos os outros componentes GUI necessário. Nesta etapa vamos criar um contêiner usando o componente JFrame e coloque o recipiente em um novo pacote.
Para adicionar um contêiner JFrame: 1. Na janela Projetos, clique com o nó ContactEditor e selecione Novo> Formulário JFrame. Alternativamente, você pode encontrar um formulário JFrame escolhendo Novo> Outro> Formulários GUI Swing> Formulário JFrame. 2. Digite ContactEditorUI como o nome da classe. 3. Digite my.contacteditor como o pacote. 4. Clique em Concluir. O IDE cria o formulário ContactEditorUI ea classe ContactEditorUI dentro do aplicativo ContactEditorUI.java e abre o formulário ContactEditorUI no Construtor de GUI. Observe que o pacote my.contacteditor substitui o pacote padrão. topo
Familiarizando-se com o Construtor de GUI Agora que criamos um novo projeto para a nossa aplicação, 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 demonstração interativa, veja o Explorando GUI Builder (swf). screencast.
•
•
•
•
Quando adicionamos o contêiner JFrame, o IDE abriu o recém-criado forma ContactEditorUI em uma aba do Editor com uma barra de ferramentas contendo vários botões, como mostrado na ilustração anterior. A forma ContactEditor aberto na exibição do Construtor de GUIs Design e três janelas adicionais apareceram automaticamente ao longo das bordas do IDE, permitindo navegar, organizar e editar formas GUI como você construí-los. Várias janelas do Construtor de GUIs incluem: Área de design. Janela principal do Construtor de GUI para criação e edição de formulários de GUI Java. Fonte da barra de ferramentas e botões de alternância Design permitem que você visualize o código-fonte de uma classe ou uma visão gráfica de seus componentes GUI. Os botões da barra de ferramentas adicionais proporcionar um acesso conveniente aos comandos comuns, como escolher entre os modos Seleção e Conexão, alinhamento de componentes, definição do comportamento de dimensionamento automático e exibição de formulários. Inspector. Fornece uma representação de todos os componentes, tanto visuais e não-visual, em sua aplicação como uma hierarquia de árvore. O Inspector também fornece feedback visual sobre qual componente da árvore está sendo editado no Construtor de GUI, assim como permite que você organize componentes nos painéis disponíveis. Paleta. A lista personalizável de componentes disponíveis contendo guias para Swing JFC /, AWT e componentes JavaBeans, bem como gestores de layout. Além 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 botão Fonte, o IDE exibe o código-fonte do aplicativo Java no Editor com seções de código que são geradas automaticamente pelo Construtor de GUI indicadas por áreas azuis, chamado Blocos protegidos. Blocos protegidos são áreas protegidas que não são editáveis no modo Source. Você só pode editar
o código exibido nas áreas brancas do Editor na exibição Fonte. Se você precisar fazer alterações no código dentro de um bloco protegido, clicar no botão Design retorna o Editor do IDE para o Construtor de GUI onde você pode fazer os ajustes necessários para o formulário. Quando você salvar suas alterações, o IDE atualiza as fontes do arquivo. Nota: Para os desenvolvedores avançados, o Palette Manager está disponível que lhe permite adicionar componentes personalizados de JARs, bibliotecas ou outros projetos para a paleta. Para adicionar componentes personalizados através do Gerenciador de Paleta, selecione Ferramentas> Paleta balanço> / AWT Components. topo
Conceitos-chave GUI Builder do IDE resolve o problema central da criação de GUIs Java otimizando o fluxo de criação de interfaces gráficas, liberando os desenvolvedores das complexidades dos gerenciadores de layout Swing. Ele faz isso através do alargamento do actual NetBeans IDE GUI Builder para suportar uma simples "Free Design" paradigma com as regras de layout simples que são fáceis de entender e usar. À medida que você colocar para fora seu formulário, o Construtor de GUI fornece diretrizes visuais sugerindo espaçamento e alinhamento ótimo de componentes. No fundo, o Construtor de GUI converte as decisões de design em uma IU funcional que é implementado usando o gerenciador de layout GroupLayout e outras construções do Swing. Porque ele usa um modelo de layout dinâmico, GUI é construída com o Construtor de GUI se comportam como seria de esperar em tempo de execução, ajustando para acomodar as alterações feitas sem alterar os relacionamentos definidos entre os componentes. Sempre que você redimensionar o formulário, alterar locais ou especificar um olhar diferente e sentir, a sua GUI ajusta automaticamente a respeitar o olhar alvo e inserções sentir e compensações.
Desenho livre
No Construtor de GUIs do IDE, você pode construir seus formulários, simplesmente colocando os componentes onde quiser, como se estivesse usando posicionamento absoluto. O Construtor de GUIs descobre quais atributos de layout são obrigatórios e gera o código para você automaticamente. Você não precisa se preocupar com inserções, âncoras, preenchimentos e assim por diante.
Posicionamento automático dos componentes (Encaixe)
Como você adicionar componentes a um formulário, o Construtor de GUI fornece feedback visual que auxilia no posicionamento dos componentes com base na aparência do seu sistema operacional e sentir. O Construtor de GUI fornece dicas úteis em linha e outros comentários visuais sobre onde os componentes devem ser colocados em sua forma, encaixando automaticamente os componentes na posição em função de orientações. Ele faz essas sugestões com base nas posições dos componentes que já foram colocados na forma, permitindo o preenchimento de permanecer flexível de tal forma que aparência diferente do destino seja processada corretamente em tempo de execução.
Feedback visual
O Construtor de GUI também fornece feedback visual sobre componente de ancoragem e relações de encadeamento. Esses indicadores permitem identificar rapidamente as várias relações de posicionamento e comportamento componente pinagem que afetam a forma como o GUI aparecerá e se comportar durante a execução. 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 começar a desenvolver a interface do usuário de nossa aplicação ContactEditor. Nesta seção, vamos dar uma olhada na utilização da Paleta do IDE para adicionar os vários componentes GUI que precisamos para nosso formulário. Graças ao paradigma do IDE Desenho Livre, você não tem mais que lutar com gerenciadores de layout para controlar o tamanho ea posição dos componentes nos contêineres. Tudo que você precisa fazer é arrastar e soltar os componentes necessários ao seu formulário GUI, como mostrado nas ilustrações que se seguem. Nota: Consulte a componentes Adicionando individuais e múltiplos (swf). screencast para uma demonstração interativa na seção abaixo.
Adicionando componentes: The Basics
Apesar de GUI do IDE Builder simplifica o processo de criação de GUIs Java, é frequentemente útil para esboçar a maneira que você quiser que o seu interface para olhar antes de começar a colocá-lo para fora. Muitos designers de interfaces consideram isso uma "melhor prática" técnica, no entanto, para os fins deste tutorial,
você pode simplesmente dar uma olhada como nosso formulário preenchido deve se parecer indo para a prévisualizar o seu GUIseção. Desde já adicionamos um JFrame como recipiente nosso formulário de nível superior, o próximo passo é adicionar um par de JPanels que nos permitirá unir os componentes de nossa interface de usuário usando bordas com títulos. Consulte as ilustrações 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 botão do mouse. 2. Mover o cursor para o canto superior esquerdo do formulário 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 formulário 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 ilustração a seguir. Após soltar o botão do mouse, pequenos indicadores parecem mostrar as relações de ancoragem dos componentes e um nó JPanel correspondente será exibido na janela Inspetor.
Em seguida, precisamos redimensionar o JPanel para dar espaço para os componentes vamos colocar dentro dele um pouco mais tarde, mas vamos dar um minuto para apontar outro de visualização do Construtor de GUIs primeiras características. Para fazer isso, precisamos desmarcar a JPanel que acabamos de adicionar. Porque nós não adicionamos uma borda com título, o painel desaparecerá. Observe, entretanto, que quando você passa o cursor sobre o JPanel, as margens mudarão para cinza claro para que a sua posição pode ser visto claramente. Você só precisa clicar em qualquer lugar dentro do componente para selecioná-la novamente e fazer com que as alças 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 alças quadradas reaparecer em torno do perímetro do componente. 2. Clique e segure a alça de redimensionamento na margem direita do JPanel e arraste até que a diretriz de alinhamento pontilhada aparece perto da borda do formulário.
3. Solte a alça 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 ilustração a seguir.
Agora que nós adicionamos um painel para conter informações Nome da nossa IU, é preciso repetir o processo para adicionar outra diretamente abaixo da primeira para a informação e-mail. Referindo-se as ilustrações a seguir, repita as duas tarefas anteriores, prestando atenção ao posicionamento sugerido pelo Construtor de GUIs. Observe que o espaçamento 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 espaço restante do formulário vertical.
Porque queremos distinguir visualmente as funções nas seções superior e inferior da nossa GUI, precisamos adicionar uma borda e título a cada JPanel.Primeiro vamos fazer isso usando a janela Propriedades e depois nós vamos experimentá-lo usando o menu pop-up.
Para adicionar bordas de título aos JPanels: 1. Selecione o JPanel superior no Construtor de GUI. 2. Na janela Propriedades, clique no botão reticências (...) próximo à propriedade de Fronteira. 3. No editor de Border JPanel que aparece, selecione o nó TitledBorder no painel Bordas disponíveis. 4. No painel de propriedades abaixo, digitar o nome para a propriedade Title. 5. Clique nas reticências (...) ao lado da propriedade Fonte, selecione Negrito para o estilo de fonte e insira 12 para o tamanho. Clique em OK para sair do diálogo. 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 títulos serão adicionadas a ambos componentes Adicionando componentes individuais ao formulário
JPanel.
Agora, precisamos começar a adicionar os componentes que apresentará as informações de contato reais na nossa lista de contatos. Nesta tarefa, vamos adicionar quatro JTextFields que irá exibir as informações 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 espaçamento preferido dos componentes conforme definido pelo olhar do seu sistema operacional e sentir. Isso garante que a GUI seja processada automaticamente respeitando a aparência do sistema operacional de destino e sentir-se em tempo de execução.
Para adicionar um JLabel ao formulário: 1. Na janela Paleta, selecione o componente Rótulo 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 rótulo.
O JLabel é adicionado ao formulário e um nó correspondente, representando o componente é adicionado à janela Inspetor. Antes de prosseguir, precisamos editar o texto de exibição do JLabel que acabamos de adicionar. Embora você pode editar o texto de exibição do componente em qualquer ponto, a maneira mais fácil é fazer isso como você adicioná-los.
Para editar o texto de exibição de um JLabel: 1. Clique duas vezes no JLabel para selecionar a exibição de texto. 2. Nome Primeiro tipo: e pressione Enter. O novo nome do JLabel é exibido e largura do componente será ajustada como resultado da edição. Agora vamos adicionar um JTextField para que possamos obter um vislumbre do alinhamento do Construtor de GUIs base recurso.
Para adicionar um JTextField ao formulário: 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 orientação horizontal indicando que a linha de base JTextField está alinhada com a do JLabel eo espaçamento entre os dois componentes é sugerido com uma orientação vertical, clique para posicionar o JTextField. O JTextField se encaixará na forma alinhada com os valores basais do JLabel, como mostrado na ilustração 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 ilustração a seguir. Desta vez, insira Sobrenome: como texto de exibição do JLabel e deixar o JTextFields "texto do espaço reservado, como é para agora.
Para redimensionar um JTextField: 1. Selecione o JTextField que acabamos de adicionar à direita do Sobrenome: JLabel.
2. Arraste a alça de redimensionamento do JTextField direita em direção à 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 botão do mouse para redimensionar o JTextField. A margem direita do JTextField se encaixará em alinhamento com margem do JPanel borda recomendado, como mostrado na ilustração a seguir.
Adicionando vários componentes ao formulário Agora vamos adicionar o Título: 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 espaçamento preferido do componente.
Para adicionar vários JLabels ao formulário: 1. Na janela Paleta, selecione o componente Rótulo na categoria Controles Swing, clicando e soltando o botão do mouse. 2. Mover o cursor sobre o formulário 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 são adicionados ao formulário criando uma segunda linha, como mostrado na ilustração a seguir. Nós representando cada componente são adicionados à janela Inspetor.
Antes de prosseguirmos, precisamos editar o nome do JLabels "de modo que nós vamos ser capazes de ver o efeito dos alinhamentos que definiremos posteriormente.
Para editar o texto de exibição de JLabels:
1. Clique duas vezes no primeiro JLabel para selecionar a exibição de texto. 2.
Título:
e pressione Enter.
3. Repita as etapas 1 e 2, inserindo Apelido: para a propriedade do JLabel do segundo nome. O JLabels 'novos nomes são exibidos na forma e são deslocados como resultado de suas larguras editadas, como mostra a ilustração a seguir.
Componentes inserindo Nota: Consulte a inserção de componentes (swf). screencast para uma demonstração interativa na seção abaixo. Muitas vezes é necessário adicionar um componente entre os componentes que já estão colocadas em um formulário. Sempre que você adicionar um componente entre dois componentes existentes, o Construtor de GUI automaticamente muda-los para abrir espaço para o novo componente. Para demonstrar isso, vamos inserir um JTextField entre os JLabels adicionados anteriormente, como mostrado nas seguintes ilustrações.
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 Título: e Apelido: JLabels na segunda linha de tal forma que as sobreposições 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
Título: e Apelido:
JLabels.
O JTextField se encaixará entre os dois JLabels. As mudanças mais à direita JLabel para a direita do JTextField para acomodar o deslocamento horizontal sugerido.
Nós ainda precisamos adicionar um JTextField adicionais para a forma que irá exibir o apelido do contato no lado direito do formulário.
Para adicionar um JTextField: 1. Na janela Paleta, selecione o componente Campo de texto na categoria Swing. 2. Mover o cursor para a direita do rótulo 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 alças 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 botão 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 criação de aspecto profissional GUIs. Na seção anterior, tivemos um vislumbre das características do IDE de alinhamento ao adicionar o JLabel e componentes JTextField ao nosso formulário ContactEditorUI. Em seguida, vamos dar uma visão mais profunda os recursos do Construtor de GUIs alinhamento à medida que trabalhamos com os outros componentes que precisamos para nossa aplicação.
Alinhamento de componentes
Nota: Consulte o alinhamento e ancoragem componentes (swf). screencast para uma demonstração interativa nas seções abaixo. Toda vez que você adicionar um componente a um formulário, o Construtor de GUI efetivamente alinha-los, como evidenciado pelas diretrizes de alinhamento que aparecem. Às vezes é necessário, no entanto, para especificar as relações entre diferentes grupos de componentes também.Anteriormente, nós adicionamos quatro JLabels que precisamos para o nosso ContactEditor GUI, mas nós não 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 Título: JLabels no lado esquerdo do formulário. 2. Clique no botão Alinhar à Direita na coluna ( ) Na barra de ferramentas. Alternativamente, você pode botão 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
também. A posição dos JLabels muda para que as margens direita do texto de exibição estão alinhados. As relações de ancoragem serão 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 são definidas para redimensionar corretamente. Ao contrário dos dois JTextFields que foram esticados para a margem direita do formulário, o comportamento de redimensionamento dos componentes inseridos não é definido automaticamente.
Para definir o comportamento de redimensionamento de componentes: 1. Control-clique os dois componentes JTextField inseridos para selecioná-los no Construtor de GUI. 2. Com ambos os JTextFields selecionado, botão direito do mouse qualquer um deles e escolha Redimensionamento automático> Horizontal no menu pop-up. O JTextFields são definidas para redimensionar horizontalmente em tempo de execução. As diretrizes de alinhamento e os indicadores de ancoragem serão 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 formulário para selecioná-los. 2. Com o JTextFields selecionado, botão 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 são adicionados à borda superior de cada um, fornecendo feedback visual dos relacionamentos dos componentes. Agora precisamos adicionar outro JLabel descrevendo o JComboBox que permitirá aos usuários selecionar o formato das informações a nossa aplicação ContactEditor será exibida.
Para alinhar um JLabel para um grupo de componentes: 1. Na janela Paleta, selecione o componente Rótulo na categoria Swing. 2. Mover o cursor abaixo do Nome e JLabels Título no lado esquerdo do JPanel. Quando a orientação é 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 posição alinhada à direita com a coluna de JLabels acima, como mostra a ilustração a seguir. O Construtor de GUI atualiza as linhas de alinhamento de status indicando o espaçamento dos componentes e as relações de ancoragem.
Como nos exemplos anteriores, clique duas vezes no JLabel para selecionar a exibição de texto e digite Display: para o nome de exibição.Observe que quando o JLabel se encaixa na posição, os outros componentes mudam para acomodar o texto de exibição maior.
Format
Alinhamento de base
Sempre que você adicionar ou mover componentes que incluem texto (JLabels, JTextFields, e assim por diante), o IDE sugere alinhamentos que são 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 combinação que permitirá aos usuários selecionar o formato da informação que a nossa aplicação 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 combinação na categoria Controles Swing. 2. Mover o cursor imediatamente à direita do JLabel que acabamos de adicionar. Quando a orientação horizontal indicando que a linha de base JComboBox está alinhada com a linha de base do texto no JLabel eo espaçamento entre os dois componentes é sugerido com uma orientação vertical, clique para posicionar a caixa de combinação. O componente se encaixará em uma posição alinhada com a linha de base do texto no JLabel à sua esquerda, como mostra a ilustração a seguir. O Construtor de GUI exibe linhas de status indicando o espaçamento dos componentes e as relações de ancoragem.
Para redimensionar o JComboBox: 1. Selecione o ComboBox no Construtor de GUI. 2. Arraste a alça 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 ilustração 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 formulário.
Edição de modelos de componentes está além do escopo deste tutorial, então por enquanto vamos deixá-lista do JComboBox item de espaço reservado como ele é. topo
Revisão que foi aprendido Nós teve um bom início de construção da nossa GUI ContactEditor, mas vamos dar um minuto para recapitular o que aprendemos enquanto nós acrescentar mais alguns dos componentes da nossa interface requer. Até agora nós nos concentramos na adição 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 nós não discutimos isso ainda, você já aproveitou este recurso sem perceber. Como mencionado anteriormente, sempre que você adicionar um componente a um formulário, o IDE sugere o olhar alvo e posicionamento preferido sentir com as orientações. Uma vez colocado, novos componentes também são ancorados na margem mais próxima container ou componente para assegurar que as relações componente são mantidas em tempo de execução. Nesta seção, 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 formulários de forma rápida e facilmente otimizando gestos fluxo de trabalho típico. Sempre que você adicionar um componente a um formulário, o Construtor de GUI automaticamente se encaixa-los na posição preferida e define as relações de encadeamento necessárias para que você possa se concentrar no design dos formulários ao invés de lutar com detalhes de implementação complicada.
Para adicionar, alinhar e editar o texto de exibição de um JLabel: 1. Na janela Paleta, selecione o componente Rótulo na categoria Controles Swing. 2. Mover o cursor sobre o formulário imediatamente abaixo do título 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 exibição de texto. Então Endereço de E-mail do tipo: e pressione Enter. O JLabel se encaixará na posição preferida no formulário, 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 rótulo endereço 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 orientação vertical, clique para posicionar o campo de texto. O JTextField se encaixará no lado direito do endereço de e-mail: JLabel e está acorrentado ao JLabel. O nó correspondente também é adicionado à janela Inspetor. 3. Arraste a alça 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 Endereço de Email adicionado anteriormente. Quando as diretrizes exibida indicando que a JList de margens superior e esquerda estão alinhados com as margens preferenciais ao longo da margem esquerda do JPanel e do JLabel acima, clique para posicionar o JList. 3. Arraste a alça de redimensionamento do JList direção à 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 posição designada pelas diretrizes de alinhamento e seu nó correspondente é exibido na janela Inspetor.Observe também que a forma se expande para acomodar o JList recém-adicionado. Desde JLists são usados para exibir longas listas de dados, geralmente requerem a adição de um JScrollPane. Sempre que você adicionar um componente que requer um JScrollPane, o Construtor de GUI adiciona automaticamente para você. Porque JScrollPanes são componentes não 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 indentação (swf). screencast para uma demonstração interativa nas seções abaixo. É sempre benéfico definir vários componentes relacionados, tais como botões de diálogos modais, para ser o mesmo tamanho e consistência visual. Para demonstrar isso vamos adicionar quatro JButtons ao nosso formulário ContactEditor que nos permitirá adicionar, editar e remover entradas individuais da nossa lista de contatos, como mostrado nas seguintes ilustrações. Depois, vamos definir os quatro botões que podem ser do mesmo tamanho para que possam ser facilmente reconhecidos como oferecendo funcionalidades relacionadas.
Para adicionar, alinhar e editar o texto de exibição de vários botões: 1. Na janela Paleta, selecione o componente Botão da categoria Controles Swing. 2. Mova o JButton acima da margem direita do JTextField Endereço de Email no JPanel inferior. Quando as diretrizes aparecem indicando que linha de base do JButton ea margem direita estão alinhados com a do JTextField, shift-clique para colocar o primeiro botão ao longo da margem direita do JFrame. A largura do JTextField diminui para acomodar o JButton quando você soltar o botão 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 estão alinhadas com a do JList, shift-clique
para colocar o segundo botão ao longo da margem direita do JFrame. 4. Adicione dois outros JButtons abaixo dos dois já adicionados para criar uma coluna. Certifique-se a posição do JButtons de tal forma que o espaçamento 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 exibição de cada JButton. (Você pode editar o texto de um botão direito do mouse no botão e escolhendo Editar texto. Ou você pode clicar no botão, pausar e clicar novamente.) Digite Add para o botão superior, Edit para o segundo, Removepara o terceiro, e As Default para o quarto. Os componentes JButton se encaixam nas posições designadas pelas diretrizes de alinhamento. A largura dos botões muda para acomodar os novos nomes.
Agora que os botões estão posicionados onde os queremos, nós vamos definir os quatro botões para ter o mesmo tamanho e consistência visual, bem como para esclarecer que elas estão relacionadas funcionalmente.
Para definir os componentes para o mesmo tamanho: 1. Selecione todos os quatro JButtons pressionando a tecla Control enquanto faz a seleção. 2. Botão direito do mouse um deles e escolha Mesmo tamanho> Mesma largura a partir do menu pop-up. O JButtons estão definidos para o mesmo tamanho que o botão com o nome mais longo. Entalhe
Muitas vezes é necessário componentes de cluster múltiplos com outro componente, que é claro que pertencem a um grupo de funções relacionadas. Um caso típico, por exemplo, é colocar várias caixas de verificação relacionadas abaixo de um rótulo comum. O Construtor de GUI permite o recuo facilmente fornecer orientações especiais sugerindo o deslocamento preferido para olhar seu sistema operacional e sentir. Nesta seção, vamos adicionar alguns JRadioButtons abaixo de um JLabel que permitirá que os usuários personalizem a maneira como o aplicativo exibe dados. Consulte as ilustrações abaixo enquanto faz isso ou clique no link Visualizar demonstração seguindo o procedimento para exibir uma demonstração interativa.
Para recuar JRadioButtons abaixo de um JLabel: 1. Adicionar um JLabel Formato de Correio nomeado para o formulário abaixo do JList. Certifique-se o rótulo está alinhado à esquerda com o JList acima. 2. Na janela Paleta, selecione o componente Botão de opção 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 secundárias aparecerem. Shift-clique para colocar o primeiro botão de opção. 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 espaçamento sugerido do componente. Certifique-se de soltar a tecla Shift antes de posicionar o último JRadioButton. 5. Definir o texto de exibição para cada JRadioButton. (Você pode editar o texto de um botão direito do mouse no botão e escolhendo Editar texto. Ou você pode clicar no botão, pausar e clicar novamente.) Digite HTML para o botão de rádio à esquerda, Plain Textpara o segundo, e Custom para o terceiro. Três JRadioButtons são adicionados ao formulário e recuado abaixo do JLabel Formato de Correio.
Agora precisamos adicionar os três JRadioButtons a um ButtonGroup para permitir que o comportamento de alternância esperado em que apenas um botão de opção pode ser selecionada por vez. Este, por sua vez, garantir que as informações 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 botões na categoria Controles Swing. 2. Clique em qualquer lugar na área de design do Construtor de GUI para adicionar o componente ButtonGroup ao formulário. Observe que o ButtonGroup não aparece no próprio formulário, no entanto, é visível na área do Inspetor outros componentes. 3. Selecione todas as três JRadioButtons no formulário. 4. Na janela Propriedades, escolha buttonGroup1 na caixa de combinação propriedade buttonGroup. Três JRadioButtons são adicionados ao grupo de botões. topo
Fazendo os ajustes finais Conseguimos esboçar nossa GUI do aplicativo ContactEditor, mas ainda há algumas coisas a serem feitas. Nesta seção, vamos dar uma olhada em algumas das tarefas de layout típicas que o Construtor de GUIs simplifica.
Acabamento Up
Agora precisamos adicionar os botões que permitem que os usuários para confirmar a informação 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 botões necessários e depois editá-los para que eles apareçam no mesmo tamanho em nosso formulário, embora seus textos de exibição tenham tamanhos diferentes.
Para adicionar e editar o texto de exibição de botões: 1. Se o JPanel inferior se estende até a borda inferior do formulário JFrame, arraste a borda inferior do JFrame para baixo. Isto dá-lhe espaço entre a borda do JFrame e da borda do JPanel para o seu botões OK e Cancelar. 2. Na janela Paleta, selecione o componente Botão da categoria Controles Swing. 3. Mover o cursor sobre o formulário 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 botão. 4. Adicionar outro JButton à esquerda do primeiro, certificando-se de colocálo usando o espaçamento sugerido ao longo da borda inferior do JFrame. 5. Definir o texto de exibição de cada JButton. OK para entrar o botão esquerdo e Cancelar para a direita. Observe que a largura dos botões muda para acomodar os novos nomes. 6. Defina os dois JButtons para ter o mesmo tamanho, selecionando ambos, botão 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 nós correspondentes são exibidos na janela Inspetor. O código dos componentes JButton também será adicionado ao arquivo do formulário fonte que é visível na exibição Fonte do editor. Cada um dos JButtons estão definidos para o mesmo tamanho que o botão com o nome mais longo. A última coisa que precisamos fazer é apagar o texto do espaço reservado nos vários componentes. Note que ao remover texto de espaço reservado após desbaste um formulário pode ser uma técnica útil para evitar problemas com alinhamentos de componentes e as relações de ancoragem, a maioria dos desenvolvedores tipicamente remover este texto no processo de colocar para fora as suas formas. Como você vai através do formulário, selecione e exclua o texto de espaço reservado para cada um dos JTextFields. Vamos deixar os itens de espaço 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 botão Preview Form ( ) Na barra de ferramentas do Construtor de GUIs. O formulário é aberto em sua própria janela, permitindo que você teste antes da construção e execução.
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 também tem aquelas classes disponíveis em tempo de execução. Essas classes são incluídas no Java SE 6, mas não em Java SE 5. Se você desenvolver a aplicação para rodar em Java SE 5, seu aplicativo precisa usar a biblioteca de extensões de layout Swing. Se você estiver executando o IDE no JDK 5, o IDE gera automaticamente o código do aplicativo para usar a biblioteca de extensões de layout Swing. Quando você implanta o aplicativo, você precisa incluir a biblioteca de extensões de layout Swing com a aplicação. Quando você criar o aplicativo (Build> Build Main Project), o IDE fornece automaticamente uma cópia de arquivo da biblioteca JAR na pasta dist / lib do aplicativo. O IDE também adiciona todos os arquivos JAR que estão na pasta dist no elemento Class-Path no arquivo o arquivo JAR da aplicação manifest.mf. Se você estiver executando o IDE no JDK 6, o IDE gera o código do aplicativo para usar as classes GroupLayout que estão no Java SE 6. Isto significa que você pode implantar o aplicativo seja executado em sistemas com Java SE 6 instalado e você não precisa empacotar seu aplicativo com a biblioteca do Swing extensões de layout. Observação: Se você criar seu aplicativo usando JDK 6, mas você precisa que o aplicativo rodar também no Java SE 5, você pode ter o IDE gerar seu código para usar o layout Swing biblioteca de extensões, 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 formulário. Na janela Propriedades, altere o valor da propriedade Estilo de geração de layout do Swing Biblioteca extensões de layout.
Distribuindo e executando aplicações de GUI
Para preparar a aplicação GUI para distribuição fora do IDE: Zip pasta dist do projeto em um arquivo ZIP. (A pasta você também precisa incluir.) •
dist
também pode conter uma pasta lib, que
Para executar o aplicativo, clique com o nome do projeto e selecione Executar no menu de contexto. Na caixa de diálogo 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 . jar
Nota: Se você encontrar o seguinte erro: Exceção em java.lang.NoClassDefFoundError thread "main": org / JDesktop / layout / GroupLayout $ Grupo
Assegurar que as referências do arquivo manifest.mf a versão atualmente instalada do Balanço Biblioteca extensões de layout. Para mais informações sobre a biblioteca de extensão layout, visitar o projeto de layout Swing Extensions . topo Envie-nos seus comentários
Veja também •
Você acabou de completar o tutorial Criando um balanço do GUI. Para obter informações sobre como adicionar funcionalidade ao GUIs que você crie, veja: Introdução à construção de GUIs
•
Manipulação de imagens em um aplicativo GUI
•
Construção de um aplicativo Java Desktop Database
•
Criar um personalizado Java Application Desktop Database
•
GUI Builder FAQ
•
Java e JavaFX GUI Trilha de aprendizado topo
