aula 3 netbeans ide

11
Projeto 1 http://erinaldosn.wordpress.com NetBeans IDE O NetBens é um IDE que permite criar uma interface de usuário gráfica simples e adicionar funcionalidade back-end simples. Em particular, você vai aprender como codificar o comportamento dos botões e dos campos em um formulário Swing. Você trabalhará no layout e no design de uma GUI e adicionará alguns botões e campo 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. O aplicativo que você criará será uma calculadora simples mas funcional. Criar um projeto A primeira etapa é criar um projeto do IDE para o aplicativo que vamos desenvolver. Chamaremos nosso projeto de Calculadora. 1. Escolha Arquivo Novo projeto. Como alternativa, você pode clicar no ícone Novo Projeto na barra de farramentas do IDE. 2. No painel Categorias, selecione o nó Java. No painel Projetos, escolha Aplicativo Java. Clique em Próximo. 3. Digite Calculadora no campo Nome do projeto e especifique o caminho, ou seja, o seu diretório base como a localização do projeto.

Upload: carlos-alberto

Post on 02-Aug-2015

31 views

Category:

Documents


1 download

TRANSCRIPT

Page 1: Aula 3 Netbeans Ide

Projeto – 1

http://erinaldosn.wordpress.com

NetBeans IDE

O NetBens é um IDE que permite criar uma interface de usuário gráfica simples

e adicionar funcionalidade back-end simples. Em particular, você vai aprender como

codificar o comportamento dos botões e dos campos em um formulário Swing.

Você trabalhará no layout e no design de uma GUI e adicionará alguns botões e

campo 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. O aplicativo que você criará será uma calculadora simples mas funcional.

Criar um projeto A primeira etapa é criar um projeto do IDE para o aplicativo que vamos

desenvolver. Chamaremos nosso projeto de Calculadora.

1. Escolha Arquivo – Novo projeto. Como alternativa, você

pode clicar no ícone Novo Projeto na barra de farramentas

do IDE.

2. No painel Categorias, selecione o nó Java. No painel

Projetos, escolha Aplicativo Java. Clique em Próximo.

3. Digite Calculadora no campo Nome do projeto e especifique o caminho, ou seja, o

seu diretório base como a localização do projeto.

Page 2: Aula 3 Netbeans Ide

2 – NetBeans IDE

http://erinaldosn.wordpress.com

4. (Opcional) Selecione a caixa de verificação Usar pasta dedicada para armazenar

bibliotecas e especifique o local da pasta de bibliotecas.

5. Verifique se a caixa de verificação Definir como projeto principal está

selecionada.

6. Desmarque a caixa de verificação Criar classe principal caso esteja selecionada.

7. Clique em Finalizar.

Construir o front end Para prosseguir com a construção da interface, você precisa criar um contêiner

Java no qual colocaremos os outros componentes requeridos na GUI. Nesta etapa você

criará um contêiner usando o componente JFrame. Colocaremos o contêiner em um

novo pacote, que aparecerá no nó Pacotes de códigos-fonte.

Criar um contêiner JFrame 1. Na janela Projetos, clique com o botão direito do mouse no nó Calculadora e

selecione Novo – Formulário JFrame.

2. Indique CalculadoraUI como

o nome da classe.

3. Indique minha.calculadora

como o pacote.

4. Cliquem em Finalizar.

Adicionar componentes Em seguida, usaremos a paleta para preencher o front end do nosso aplicativo

com um JPanel. Em seguida, adicionaremos três JLabels, três JTextFields e

três JButtons.

Page 3: Aula 3 Netbeans Ide

Projeto – 3

http://erinaldosn.wordpress.com

Depois de terminar de arrastar e

posicionar os componentes

mencionados, o JFrame deve ter uma

aparência como a da tela ao lado.

Se você não ver a janela Paleta

no canto direito superior do IDE,

escolha Janelas – Paleta.

1. Selecione um JPanel 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

e sai da caixa de diálogo.

Renomear os componentes Você pode 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. Exclua o texto de amostra de jTextField1. Você pode tornar o texto de exibição

editável, clicando no campo de texto, pausando e clicando no campo de texto

novamente. Repita esta etapa para jTextField2 e jTextField3.

5. Renomeie o texto de exibição de jButton1 para Adicionar. Você pode editar o

texto de um botão clicando com o botão direito do mouse o botão e escolher Editar

texto. Ou você pode clicar no botão, pausar e clicar novamente.

6. Renomeie o texto de exibição de jButton2 para Limpar.

7. Renomeio o texto de exibição do jButton3 para Sair.

Sua GUI finalizada deve ser semelhante a figura abaixo.

Page 4: Aula 3 Netbeans Ide

4 – NetBeans IDE

http://erinaldosn.wordpress.com

Adicionar funcionalidade Vamos dar funcionalidade aos botões Adicionar, Limpar e Sair. As caixa

jTextField1 e jTextField2 serão usadas para entrada do usuário e jTextField3 para a

saída do programa.

Fazer o botão Sair funcionar Para dar função aos botões, você tem que atribuir um manipulador de eventos a

cada um deles para responder aos eventos. Em nosso caso, queremos saber quando o

botão é pressionado, por um clique do mouse ou via teclado. Portanto, use

ActionListener respondendo a ActionEvent.

1. Clique com

o botão direito do

mouse no botão

Sair. No meu pop-

up, escolha

Eventos – Ação –

actionPerformed.

Quando você

seleciona o evento actionPerfor

med, o IDE

adiciona

automaticamente

um

ActionListener ao botão Sair e gera um método manipulador para manipular o

método actionPerformed do ouvinte.

2. O IDE abra a janela código-fonte e rola para onde você implementa a ação que

deseja que o botão faça quando é pressionado.

3. Adicione o código que deseja que o botão Sair faça.

Page 5: Aula 3 Netbeans Ide

Projeto – 5

http://erinaldosn.wordpress.com

Fazer o botão Limpar funcionar O código abaixo altera o texto em todos os três jTextFields para nada, na

essência, ele sobrescreve o texto existente por um espaço em branco.

1. Clique na aba Design (Projeto) na parte superior da sua área de trabalho para volta o

design do formulário.

2. Clique com o botão direito do mouse no botão Limpar. No menu pop-up selecione

Eventos – Ação – actionPerformed.

3. Agora você fará o botão Limpar apagar todo o texto dos jTextFields. O código-fonte

ficará com a seguinte aparência depois de finalizado.

Fazer 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ª) Em seguida, ele fará a adição dos dois números.

3ª) E, finalmente, converterá a soma para um tipo String e o colocará em jTextField3.

Siga os passos abaixo.

1. Clique na aba Design (Projeto) na parte superior da sua área de trabalho para voltar

para o design do formulário.

2. Clique com o botão direito do mouse no botão Adicionar. No menu pop-up,

selecione Eventos – Ação – actionPerformed.

3. Adicione o código para fazer o botão Adicionar funcionar. O código-fonte

finalizado terá a seguinte aparência.

Agora o programa está completo e pode ser construído e compilado para você

vê-lo em ação.

Executar o programa Siga os passos abaixo para executar o programa no IDE.

1. Escolha Executar – Executar projeto principal.

Page 6: Aula 3 Netbeans Ide

6 – NetBeans IDE

http://erinaldosn.wordpress.com

2. Se aparecer uma entrada informando que o Projet Calculadora não possui uma

classe principal definida, você deve selecionar

minha.calculadora.CalculadoraUI como a classe principal na mesma

janela e clicar no botão OK.

Siga os passos para executar o programa fora do IDE.

1. Escolha Executar – Limpar e construir o projeto principal (Shift-F11) para construir

o arquivo JAR do aplicativo.

2. Use o explorador de arquivos ou o gerenciador de arquivos do seu sistema, navegue

até o diretório Calculadora\dist.

3. Clique duas vezes no arquivo Calculadora.jar.

Depois de alguns segundos o aplicativo deve ser iniciado.

Você também pode iniciar o aplicativo a partir da linha de comando.

1. Em seu sistema abra um prompt ou uma janela de terminal.

2. Altere os diretórios para o diretório Calculadora\dist.

3. Na linha de comando insira java –jar Calculadora.jar.

Como funciona a manipulação de eventos Existe muito mais eventos aos quais você pode fazer seu aplicativo 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 editor do arquivo CalculadoraUI.java, Clique na aba Projeto para ver o

layout da GUI no Construtor de GUIs.

2. Clique com o botão direito do mouse em qualquer

componente de GUI, e selecione Eventos no menu pop-

up.

3. Como alternativa você pode selecionar

Propriedades no menu Janela. Na janela Propriedades,

clique na aba Eventos. Na aba Eventos você pode ver e

editar os manipuladores de eventos associados ao

componente de GUI ativos no momento.

4. Você pode fazer seu aplicativo 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

manipuladores de eventos para todos eles no menu

Eventos. O evento mais comum usará um evento Ação.

Page 7: Aula 3 Netbeans Ide

Projeto – 7

http://erinaldosn.wordpress.com

Toda vez que você seleciona um evento no menu Evento, o IDE cria

automaticamente um ouvinte de evento para você e o adiciona ao seu componente.

Percorra as etapas seguintes para ver como a manipulação de eventos funciona.

1. Volte ao editor do arquivo CalculadoraUI.java. Clique na aba 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 manipuladores de eventos.

3. Agora role para um método chamado initComponents(). private void initComponents() {

jLabel1 = new javax.swing.JLabel();

jPanel1 = new javax.swing.JPanel();

jLabel2 = new javax.swing.JLabel();

jTextField1 = new javax.swing.JTextField();

jLabel3 = new javax.swing.JLabel();

jTextField2 = new javax.swing.JTextField();

jLabel4 = new javax.swing.JLabel();

jTextField3 = new javax.swing.JTextField();

jButton1 = new javax.swing.JButton();

jButton2 = new javax.swing.JButton();

jButton3 = new javax.swing.JButton();

jLabel1.setText("jLabel1");

setDefaultCloseOperation(javax.swing.WindowConstants.EXIT_ON_CLOSE)

;

jPanel1.setBorder(javax.swing.BorderFactory.createBevelBorder(javax

.swing.border.BevelBorder.RAISED));

jLabel2.setText("Primeiro Número");

jLabel3.setText("Segundo Número");

jTextField2.addActionListener(new

java.awt.event.ActionListener() {

public void actionPerformed(java.awt.event.ActionEvent

evt) {

jTextField2ActionPerformed(evt);

}

});

jLabel4.setText("Terceiro Número");

jButton1.setText("Adicionar");

jButton1.addActionListener(new

java.awt.event.ActionListener() {

public void actionPerformed(java.awt.event.ActionEvent

evt) {

jButton1ActionPerformed(evt);

}

});

jButton2.setText("Limpar");

jButton2.addActionListener(new

java.awt.event.ActionListener() {

Page 8: Aula 3 Netbeans Ide

8 – NetBeans IDE

http://erinaldosn.wordpress.com

public void actionPerformed(java.awt.event.ActionEvent

evt) {

jButton2ActionPerformed(evt);

}

});

jButton3.setText("Sair");

jButton3.addActionListener(new

java.awt.event.ActionListener() {

public void actionPerformed(java.awt.event.ActionEvent

evt) {

jButton3ActionPerformed(evt);

}

});

javax.swing.GroupLayout jPanel1Layout = new

javax.swing.GroupLayout(jPanel1);

jPanel1.setLayout(jPanel1Layout);

jPanel1Layout.setHorizontalGroup(

jPanel1Layout.createParallelGroup(javax.swing.GroupLayout.Alignment

.LEADING)

.addGap(0, 356, Short.MAX_VALUE)

.addGroup(jPanel1Layout.createParallelGroup(javax.swing.GroupLayout

.Alignment.LEADING)

.addGroup(jPanel1Layout.createSequentialGroup()

.addGap(48, 48, 48)

.addGroup(jPanel1Layout.createParallelGroup(javax.swing.GroupLayout

.Alignment.LEADING)

.addGroup(jPanel1Layout.createSequentialGroup()

.addComponent(jButton1)

.addGap(42, 42, 42)

.addComponent(jButton2))

.addGroup(jPanel1Layout.createSequentialGroup()

.addGroup(jPanel1Layout.createParallelGroup(javax.swing.GroupLayout

.Alignment.LEADING)

.addComponent(jLabel2)

.addComponent(jLabel3)

.addComponent(jLabel4))

.addGap(36, 36, 36)

.addGroup(jPanel1Layout.createParallelGroup(javax.swing.GroupLayout

.Alignment.LEADING, false)

.addComponent(jTextField3)

.addComponent(jTextField2)

.addComponent(jTextField1,

javax.swing.GroupLayout.PREFERRED_SIZE, 141,

javax.swing.GroupLayout.PREFERRED_SIZE)))

.addComponent(jButton3))

.addContainerGap(49, Short.MAX_VALUE)))

);

jPanel1Layout.setVerticalGroup(

jPanel1Layout.createParallelGroup(javax.swing.GroupLayout.Alignment

.LEADING)

.addGap(0, 268, Short.MAX_VALUE)

Page 9: Aula 3 Netbeans Ide

Projeto – 9

http://erinaldosn.wordpress.com

.addGroup(jPanel1Layout.createParallelGroup(javax.swing.GroupLayout

.Alignment.LEADING)

.addGroup(jPanel1Layout.createSequentialGroup()

.addGap(18, 18, 18)

.addGroup(jPanel1Layout.createParallelGroup(javax.swing.GroupLayout

.Alignment.BASELINE)

.addComponent(jLabel2)

.addComponent(jTextField1,

javax.swing.GroupLayout.PREFERRED_SIZE,

javax.swing.GroupLayout.DEFAULT_SIZE,

javax.swing.GroupLayout.PREFERRED_SIZE))

.addGap(30, 30, 30)

.addGroup(jPanel1Layout.createParallelGroup(javax.swing.GroupLayout

.Alignment.BASELINE)

.addComponent(jLabel3)

.addComponent(jTextField2,

javax.swing.GroupLayout.PREFERRED_SIZE,

javax.swing.GroupLayout.DEFAULT_SIZE,

javax.swing.GroupLayout.PREFERRED_SIZE))

.addGap(27, 27, 27)

.addGroup(jPanel1Layout.createParallelGroup(javax.swing.GroupLayout

.Alignment.BASELINE)

.addComponent(jLabel4)

.addComponent(jTextField3,

javax.swing.GroupLayout.PREFERRED_SIZE,

javax.swing.GroupLayout.DEFAULT_SIZE,

javax.swing.GroupLayout.PREFERRED_SIZE))

.addGap(51, 51, 51)

.addGroup(jPanel1Layout.createParallelGroup(javax.swing.GroupLayout

.Alignment.BASELINE)

.addComponent(jButton1)

.addComponent(jButton2))

.addGap(18, 18, 18)

.addComponent(jButton3)

.addContainerGap(18, Short.MAX_VALUE)))

);

javax.swing.GroupLayout layout = new

javax.swing.GroupLayout(getContentPane());

getContentPane().setLayout(layout);

layout.setHorizontalGroup(

layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADIN

G)

.addGroup(layout.createSequentialGroup()

.addGap(24, 24, 24)

.addComponent(jPanel1,

javax.swing.GroupLayout.PREFERRED_SIZE,

javax.swing.GroupLayout.DEFAULT_SIZE,

javax.swing.GroupLayout.PREFERRED_SIZE)

.addContainerGap(javax.swing.GroupLayout.DEFAULT_SIZE,

Short.MAX_VALUE))

);

layout.setVerticalGroup(

Page 10: Aula 3 Netbeans Ide

10 – NetBeans IDE

http://erinaldosn.wordpress.com

layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADIN

G)

.addGroup(layout.createSequentialGroup()

.addContainerGap()

.addComponent(jPanel1,

javax.swing.GroupLayout.PREFERRED_SIZE,

javax.swing.GroupLayout.DEFAULT_SIZE,

javax.swing.GroupLayout.PREFERRED_SIZE)

.addContainerGap(13, Short.MAX_VALUE))

);

pack();

}

Esse código foi gerado automaticamente pelo IDE e você não pode editá-lo.

4. Entre outra coisas, ele contém o código que inicializa e coloca seus componentes de

GUI no formulário. Esse código é gerado e atualizado automaticamente enquanto

você coloca e edita componentes na visualização Projeto.

5. Você registra um ActionListener a um componente GUI. A interface ActionListener

possui um método actionPerformed usando o objeto ActionEvent que é

implementado simplesmente pela chamada do manipulador de eventos

jButton3ActionPerformed, por exemplo. O botão agora está ouvindo eventos de

ação. Toda vez que é pressionando, um ActionEvent é gerado e passado para o

método actionPerformed do ouvinte que por sua vez executa o código que você

forneceu no manipulador de eventos desse evento.

De grosso modo, para poder responder, cada componente de GUI interativo

precisa registrar um ouvinte de evento e precisa implementar um manipulador de

eventos. O IDE NetBeans manipula a anexação do ouvinte de evento, portanto, você

pode se concentrar na implementação da lógica comercial real que deve ser adicionada

pelo evento.

Exercício Crie as seguintes GUI. Você não precisa fornecer funcionalidades.

Page 11: Aula 3 Netbeans Ide

Projeto – 11

http://erinaldosn.wordpress.com

Bibliografia Java: como programar

H. M. Deitel, P. J. Deitel

São Paulo: Pearson Prentice Hall, 2005

Use a Cabeça Java

Kathy Sierra, Bert Bates

Rio de Janeiro: Alta Books, 2005

http://netbeans.org/kb/trails/matisse_pt_BR.html

http://download.oracle.com/javase/tutorial/uiswing/index.html