// 
//     Licensed to the Apache Software Foundation (ASF) under one
//     or more contributor license agreements.  See the NOTICE file
//     distributed with this work for additional information
//     regarding copyright ownership.  The ASF licenses this file
//     to you under the Apache License, Version 2.0 (the
//     "License"); you may not use this file except in compliance
//     with the License.  You may obtain a copy of the License at
// 
//       http://www.apache.org/licenses/LICENSE-2.0
// 
//     Unless required by applicable law or agreed to in writing,
//     software distributed under the License is distributed on an
//     "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
//     KIND, either express or implied.  See the License for the
//     specific language governing permissions and limitations
//     under the License.
//

= Introdução à Construção de GUIs
:jbake-type: tutorial
:jbake-tags: tutorials 
:jbake-status: published
:icons: font
:syntax: true
:source-highlighter: pygments
:toc: left
:toc-title:
:description: Introdução à Construção de GUIs - Apache NetBeans
:keywords: Apache NetBeans, Tutorials, Introdução à Construção de GUIs

Contribuição de Saleem Gul e Tomas Pavek

Este tutorial de iniciante ensina como criar uma interface de usuário gráfica simples e adicionar funcionalidade de back-end simples. Em particular, mostraremos como codificar o comportamento dos botões e dos campos em um form de Swing.

Nós iremos trabalhar no layout e design de uma GUI e adicionar alguns botões e campos de texto. Os campos de texto serão usados para receber entrada do usuário e também para exibir a saída do programa. O botão iniciará a funcionalidade interna do front-end. A aplicação que criamos será uma calculadora simples mas funcional.

Para uma guia mais abrangente das funcionalidades de design do GUI Builder, incluindo demonstrações em vídeo das várias funcionalidades de design, consulte link:quickstart-gui.html[+Projetando uma GUI Swing no NetBeans IDE+].

*Duração esperada: 20 minutos*


image::images/netbeans-stamp-80-74-73.png[title="O conteúdo desta página se aplica ao NetBeans IDE 6.9 e mais recente"]


*Para concluir este tutorial, você precisa dos seguintes recursos e softwares.*

|===
|Software ou Recurso |Versão Necessária 

|link:http://netbeans.org/downloads/[+NetBeans IDE com Java SE+] |versão 6.9 ou posterior 

|link:http://www.oracle.com/technetwork/java/javase/downloads/index.html[+JDK (Java Development Kit)+] |versão 6, 7 ou 8 
|===


== Exercício 1: Criando um Projeto

A primeira etapa é criar um projeto do IDE para a aplicação que vamos desenvolver. Chamaremos nosso projeto de  ``NumberAddition`` .

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. No painel Projetos, escolha Aplicação Java. Clique em Próximo.
3. Digite `NumberAddition` no campo Nome do Projeto e especifique um caminho; por exemplo: em seu diretório home, como a localização do projeto.
4. (Opcional) Marque a caixa de seleção Utilizar Pasta Dedicada para Armazenamento de Bibliotecas e especifique o local da pasta de bibliotecas. Consulte link:http://www.oracle.com/pls/topic/lookup?ctx=nb8000&id=NBDAG455[+Compartilhando uma Biblioteca com Outros Usuários+] em _Desenvolvendo Aplicações com o NetBeans IDE_ para obter mais informações.
5. Desmarque a caixa de seleção Criar Classe Principal caso esteja selecionada.
6. Clique em Finalizar.


== Exercício 2: Construindo o Front End

Para prosseguir com a construção da nossa interface, precisamos criar um contêiner Java no qual colocaremos os outros componentes requeridos da GUI. Nesta etapa criaremos um contêiner usando o componente `JFrame`. Colocaremos o contêiner em um novo pacote, que aparecerá no nó Pacotes de Códigos-fonte.


=== Crie um contêiner JFrame

1. Na janela Projetos, clique com o botão direito do mouse no nó  ``NumberAddition``  e selecione  ``Novo``  >  ``Outro`` .
2. Na caixa de diálogo Novo Arquivo, escolha a categoria  ``Swing GUI Forms``  e o tipo de arquivo  ``JFrame Form`` . Clique em Próximo.
3. Insira  ``NumberAdditionUI``  como o nome da classe.
4. Indique `my.numberaddition` como o pacote.
5. Clique em Finalizar.

O IDE cria o form `NumberAdditionUI` e a classe `NumberAdditionUI` na aplicação `NumberAddition` e abre o form `NumberAdditionUI` no GUI Builder. O pacote `my.NumberAddition` substitui o pacote default.


=== Adicionando componentes: Criando o Front End

Em seguida, usaremos a Paleta para preencher o front end da nossa aplicação com um JPanel. Em seguida, adicionaremos três JLabels, três JTextFields e três JButtons. Se você não usou o GUI Builder antes, pode achar úteis as informações no tutorial link:quickstart-gui.html[+Projetando uma GUI Swing no NetBeans IDE+] sobre posicionamento de componentes.

Depois de terminar de arrastar e posicionar os componentes mencionados anteriormente, o JFrame deve ter uma aparência como o da tela seguinte.

image::images/Figure1.png[]

Caso não veja a janela Paleta no canto superior direito do IDE, escolha Janela > Paleta.

1. Comece selecionando um Painel da categoria Contêineres Swing na Paleta e solte-o no JFrame.
2. Enquanto o JPanel estiver realçado, vá para a janela Propriedades e clique no botão de reticências (...) ao lado da borda para escolher um estilo de borda.
3. Na caixa de diálogo Borda, selecione TitledBorder na lista, e digite `Adição de Número` no campo Título. Clique em OK para salvar as alterações de e saia da caixa de diálogo.
4. Você agora deve ver um JFrame intitulado vazio que diz Adição de Número como na tela. Observe a tela e os três JLabels, três JTextFields e três JButtons como você vê acima.


=== Renomeando os Componentes

Nesta etapa, vamos renomear o texto de exibição dos componentes que acabamos de adicionar ao JFrame.

1. Clique duas vezes em `jLabel1` e altere a propriedade do texto para `Primeiro Número`
2. Clique duas vezes em `jLabel2` e altere o texto para `Segundo Número`
3. Clique duas vezes em `jLabel3` e altere o texto para `Resultado`
4. Delete o texto da amostra de `jTextField1`. Você pode tornar o texto editável ao clicar com o botão direito do mouse no campo de texto e escolher Editar Texto no menu suspenso. Talvez você tenha que redimensionar o `jTextField1` para seu tamanho original. Repita esta etapa para `jTextField2` e `jTextField3`.
5. Renomeie o texto de exibição de `jButton1` para `Limpar`. (Você pode editar o texto de um botão, clicando com o botão direito do mouse no botão e escolhendo Editar Texto. Ou você pode clicar no botão, pausar e clicar novamente.)
6. Renomeie o texto de exibição de `jButton2` para `Adicionar`.
7. Renomeie o texto de exibição de `jButton3` para `Sair`.

Sua GUI finalizada agora deve ser semelhante à tela seguinte:

image::images/Figure2.png[]


== Exercício 3: Adicionando Funcionalidade

Neste exercício, vamos dar funcionalidade aos botões Adicionar, Limpar e Sair. As caixas `jTextField1` e `jTextField2` serão usadas para entrada do usuário e `jTextField3` para a saída do programa - o que estamos criando é uma calculadora muito simples. Vamos começar.


=== Fazendo o Botão Sair Funcionar

Para dar função aos botões, temos que designar um handler de eventos a cada um deles para responder aos eventos. Em nosso caso, queremos saber quando o botão é pressionado, por clique do mouse ou por meio do teclado. Portanto, usaremos ActionListener respondendo a ActionEvent.

1. Clique com o botão direito do mouse no botão Sair. No menu suspenso, escolha Eventos > Ação> actionPerformed. Observe que o menu contém muito mais eventos aos quais você pode responder! Quando você selecionar o evento  ``actionPerformed`` , o IDE adicionará automaticamente um ActionListener ao botão Sair e gerará um método de handler para o método actionPerformed do listener.
2. O IDE abrirá a janela Código-fonte e rolará para onde você implementa a ação que deseja que o botão faça quando for pressionado (pelo clique do mouse ou por meio do teclado). Sua janela Código-fonte deve conter as seguintes linhas:

[source,java]
----

private void jButton3ActionPerformed(java.awt.event.ActionEvent evt) {
    //TODO add your handling code here:
                }
----

[start=3]
. Agora vamos adicionar o código da ação que desejamos que o botão Sair execute. Substitua a linha TODO por `System.exit(0);`. Seu código do botão Sair finalizado deve ter a seguinte aparência:

[source,java]
----

private void jButton3ActionPerformed(java.awt.event.ActionEvent evt) {
    System.exit(0);
                } 
----


=== Fazendo o Botão Limpar Funcionar

1. Clique na guia Design na parte superior da sua área de trabalho para voltar para o Design do Form.
2. Clique com o botão direito do mouse no botão Limpar (`jButton1`). No menu pop-up, escolha Eventos > Ação > actionPerformed.
3. Agora faremos o botão Limpar apagar todo o texto dos jTextFields. Para fazer isso, adicionaremos algum código como acima. Seu código-fonte finalizado deve ter a seguinte aparência:

[source,java]
----

private void jButton1ActionPerformed(java.awt.event.ActionEvent evt){
    jTextField1.setText("");
    jTextField2.setText("");
    jTextField3.setText("");
                }
----

O código acima quase não altera o texto em todos os nossos três JTextFields, basicamente está sobrescrevendo o Texto existente por um espaço em branco.


=== Fazendo o Botão Adicionar Funcionar

O botão Adicionar realizará três ações.

1. Ele vai aceitar a entrada do usuário de `jTextField1` e `jTextField2` e converter a entrada de um tipo String para uma flutuação.
2. Ele irá então executar a adição dos dois números.
3. E, finalmente, ele converterá a soma para um tipo string e irá colocá-lo no `TextField3`.
Vamos começar!

[start=1]
1. Clique na guia Design na parte superior da sua área de trabalho para voltar para o Design do Form.
2. Clique com o botão direito do mouse no botão Adicionar (`jButton2`). No menu pop-up, escolha Eventos > Ação> actionPerformed.
3. Agora vamos adicionar algum código para fazer nosso botão Adicionar funcionar. O código-fonte finalizado terá a seguinte aparência:

[source,java]
----

private void jButton2ActionPerformed(java.awt.event.ActionEvent evt){
    // First we define float variables.
    float num1, num2, result;
    // We have to parse the text to a type float.
    num1 = Float.parseFloat(jTextField1.getText());
    num2 = Float.parseFloat(jTextField2.getText());
   // Now we can perform the addition.
    result = num1+num2;
    // We will now pass the value of result to jTextField3.
    // At the same time, we are going to
    // change the value of result from a float to a string.
    jTextField3.setText(String.valueOf(result));
                    }
----

Agora nosso programa está completo e podemos construí-lo e executá-lo para vê-lo em ação.


== Exercício 4: Executando o Programa

*Para executar o programa no IDE:*

1. Escolha Executar > Executar Projeto Principal (se preferir, pressione F6).

*Observação:*Se aparecer uma entrada informando que o Project NumberAddition não possui uma classe principal definida, então você deve selecionar  ``my.NumberAddition.NumberAdditionUI``  como a classe principal na mesma janela e clicar no botão OK.

*Para executar o programa fora do IDE:*

1. Escolha Executar > Limpar e Construir Projeto Principal (Shift-F11) para construir o arquivo JAR da aplicação.
2. Usando o explorador de arquivos ou o gerenciador de arquivos de seu sistema, navegue até o diretório `NumberAddition/dist`.

*Observação:* a localização do diretório do projeto  ``NumberAddition``  depende o caminho que você especificou ao criar o projeto na etapa 3 da seção <<Exercise_1,Exercício 1: Criando um Projeto>>.


[start=3]
. Clique duas vezes no arquivo `NumberAddition.jar`.

Depois de alguns segundos, a aplicação deve ser iniciada.

*Observação:* Se clicar duas vezes no arquivo JAR e a aplicação não for iniciada, consulte link:../../articles/javase-deploy.html#troubleshooting[+este artigo+] para obter informações sobre a definição de associações do arquivo JAR em seu sistema operacional.

Você também pode iniciar a aplicação da linha de comandos.

*Para iniciar a aplicação partir da linha de comandos:*

1. em seu sistema, abra um prompt de comando ou uma janela de terminal.
2. No prompt de comando, altere os diretórios para o diretório `NumberAddition/dist`.
3. Na linha de comandos, digite a seguinte instrução:

[source,java]
----

java -jar  NumberAddition.jar
----

*Observação:* Certifique-se de  ``my.numberaddition.numberadditionui``  é definido como a classe principal antes de executar a aplicação. É possível verificar isso clicando com o botão direito no nó do projeto numberaddition no painel projetos, escolhendo Propriedades no menu pop-up, e selecionando Executar categoria na caixa de diálogo Propriedades do Projeto. O campo Classe Principal deve exibir  ``my.numberaddition.numberadditionui`` .


== Como o Tratamento de Eventos Funciona

Este tutorial mostrou como responder a um simples evento de botão. Existe muito mais eventos aos quais você pode fazer sua aplicação responder. O IDE pode ajudá-lo a encontrar a lista de eventos disponíveis que os componentes de GUI podem manipular:

1. Volte para o arquivo `NumberAdditionUI.java` no Editor. Clique na guia Design para ver o layout da GUI no GUI Builder.
2. Clique com o botão direito do mouse em qualquer componente de GUI, e selecione Eventos no menu pop-up. Por enquanto, apenas explore o menu para ver o que há nele, você não precisa selecionar nada.
3. Como alternativa, você pode selecionar Propriedades no menu Janela. Na janela Propriedades, clique na guia Eventos. Na guia Eventos, você pode exibir e editar os handlers de eventos associados ao componente de GUI ativos no momento.
4. Você pode fazer sua aplicação responder a pressionamentos de tecla, cliques únicos, duplos e triplos do mouse, movimentação do mouse, alterações do tamanho e do foco da janela. Você pode gerar handlers de eventos para todos eles no menu Eventos. O evento mais comum usará um evento Ação. (Aprenda link:http://java.sun.com/docs/books/tutorial/uiswing/events/generalrules.html#twokinds[+melhores práticas para Tratamento de eventos+] no link:http://java.sun.com/docs/books/tutorial/uiswing/events/index.html[+Tutorial de Eventos Java +] da Sun.)

Como o tratamento de eventos funciona? Cada vez que você seleciona um evento no menu Evento, o IDE automaticamente cria um listener de evento por você e o incorpora em seu componente. Percorra as etapas seguintes para ver como o tratamento de eventos funciona.

1. Volte para o arquivo `NumberAdditionUI.java` no Editor. Clique na guia Código-fonte para ver o código-fonte da GUI.
2. Role para baixo e observe os métodos `jButton1ActionPerformed()`, `jButton2ActionPerformed()` e `jButton3ActionPerformed()` que acabou de implementar. Esses métodos são chamados de handlers de eventos.
3. Agora role para um método chamado `initComponents()`. Se você não vir esse método, procure por uma linha que diz`Generated Code`; clique no sinal + ao lado dela para expandir o método `initComponents()` contraído.
4. Primeiro, observe o bloco azul ao lado do método `initComponents()`. Esse código foi gerado automaticamente pelo IDE e você não pode editá-lo.
5. Agora, explore o método `initComponents()`. Entre outras coisas, ele contém o código que inicializa e coloca seus componentes de GUI no form. Esse código é gerado e atualizado automaticamente enquanto você coloca e edita componentes na view Design.
6. Em `initComponents()`, role para baixo onde diz

[source,java]
----

jButton3.setText("Exit");
jButton3.addActionListener(new java.awt.event.ActionListener() {
    public void actionPerformed(java.awt.event.ActionEvent evt) {
           jButton3ActionPerformed(evt);
    }
            });
----

Esse é o local em que um objeto de listener de evento é adicionado ao componente de GUI; nesse caso, você registra um ActionListener ao `jButton3`. A interface ActionListener possui um método actionPerformed usando o objeto ActionEvent que é implementado simplesmente pela chamada do handler de eventos `jButton3ActionPerformed`. O botão agora está fazendo listening dos eventos de ação. Toda vez que é pressionado, um ActionEvent é gerado e passado para o método actionPerformed do listener que por sua vez executa o código que você forneceu no handler de eventos desse evento.

Generalizando, para poder responder, cada componente de GUI interativo precisa registrar um listener de evento e precisa implementar um handler de eventos. Como você pode ver, o NetBeans IDE manipula a anexação do listener de evento; portanto, você pode se concentrar na implementação da lógica comercial real que deve ser adicionada pelo evento.

link:/about/contact_form.html?to=3&subject=Feedback:%20Introduction%20to%20GUI%20Building[+Enviar Feedback neste Tutorial+]


== Consulte Também

* link:http://www.oracle.com/pls/topic/lookup?ctx=nb8000&id=NBDAG920[+Implementando GUIs de Java+] em _Desenvolvendo Aplicações com o NetBeans IDE_
* link:quickstart-gui.html[+Projetando uma GUI Swing no NetBeans IDE+]
* link:gui-image-display.html[+Tratando imagens em uma Aplicação da GUI+]
* link:hibernate-java-se.html[+Usando Hibernate em uma Aplicação Java Swing+]
* link:../../trails/matisse.html[+Trilha de Aprendizado das Aplicações de GUI do Java+]
* link:../../trails/java-se.html[+Trilha de Aprendizado do Desenvolvimento Geral em Java+]
* link:http://wiki.netbeans.org/wiki/view/NetBeansUserFAQ#section-NetBeansUserFAQ-GUIEditorMatisse[+GUI Builder - Perguntas Frequentes+]
* link:http://download.oracle.com/javase/tutorial/uiswing/events/index.html[+Lição: Gravando Listeners de Evento+] do link:http://download.oracle.com/javase/tutorial/index.html[+The Java(tm) Tutorials+].