76536050 tutorial netbeans guis1

Material didtico

Java GUI do NetBeans Criando interfaces grficas rpidas

Prof. Carlos Alberto

1

UTILIZANDO A INTERFACE GRFICA GUI NO NETBEANS FAZENDO PROJETOS RPIDOS, DIGITANDO POUCO CDIGO JAVA

ANTES DE MAIS NADA, CRIA-SE UMA PASTA PARA CADA PROJETO EM UM LOCAL (PEN DRIVE, REA DE TRABALHO, ENFIM...)

Exemplo 1: Criando um projeto:

Adio

A primeira etapa criar um projeto do IDE para o aplicativo que vamos desenvolver. Chamaremos nosso projeto de AdicaoNumero. 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 Aplicativo Java. Clique em Prximo. 3. Digite Adicao no campo Nome do projeto e escolha um caminho, ou seja, em seu diretrio base como a localizao do projeto, em outras palavra um lugar onde voc vai grav-lo. 4. No apague nenhum cdigo do formulrio, o cdigo ser criado automaticamente. 5. Verifique se a caixa de verificao Definir como projeto principal est selecionada. 6. Desmarque a caixa de verificao Criar classe principal caso esteja selecionada. 7. Clique em Terminar. Ok o projeto Adio foi iniciado

Exerccio 2: Construindo o front end Pacote GUIsPara prosseguir com a construo da nossa interface, precisamos criar um continer Java no qual colocaremos os outros componentes requeridos da GUI. Nesta etapa criaremos um continer usando o componente JFrame. Colocaremos o continer em um novo pacote, que aparecer no n Pacotes de cdigos-fonte. Crie um continer JFrame 1. Na janela Projetos, clique com o boto direito do mouse no n Adicao e selecione Novo Arquivo > Formulrio GUI Swing >Formulrio JFrame.

Material didtico



2

2. Indique o nome da classe: NumeroAdicao. 3. Indique o pacote: Adicao. 4. Clique em Terminar. Percebe que: O IDE cria o formulrio JFrame e a classe NumeroAdicao no aplicativo Adicao, e abre o formulrio construtor de GUIs.

Adicionando componentes: Criando o front endAgora ficou muito mais fcil! s selecionar o componente e arrast-lo para dentro do JFrame: Nosso NetBeans est em portugus-br, logo: JFrame = Painel JLabel = Rtulo JTextFields = Campo de texto JButtons = OK Button Usaremos a paleta para preencher o front end do nosso aplicativo com um JPanel. Adicionaremos trs JLabels, trs JTextFields e trs JButtons. Depois de terminar de arrastar e posicionar os componentes mencionados anteriormente, o JFrame deve ter uma aparncia como a da captura de tela seguinte, fcil redimension-los, deixe-os bem bonitinhos.

Obs. Se voc no vir a janela Paleta no canto direito superior do IDE, escolha Janelas > Paleta.

1. Comece selecionando um JPanel na paleta e solte-o no JFrame.

Material didtico



3

2. Enquanto o JPanel estiver realado, v para a janela Propriedades e clique no boto de reticncias (...) ao lado da borda para escolher um estilo de borda. 3. Na caixa de dilogo Borda, selecione TitledBorder na lista, e digite Adio de nmeros no campo Ttulo. Clique em OK para salvar as alteraes de e saia da caixa de dilogo. 4. Voc agora deve ver um JFrame intitulado vazio que diz Adio de nmero como na captura de tela. Observe a captura de tela e os trs JLabels, trs JTextFields e trs JButtons como voc v acima.

Rotulando os componentes jLabels:Nesta etapa, vamos renomear o texto de exibio dos componentes que acabamos de adicionar ao JFrame. 1. Clique duas vezes em jLabel1 e altere a propriedade do texto para Primeiro nmero: 2. Clique duas vezes em jLabel2 e altere o texto para Segundo nmero: 3. Clique duas vezes em jLabel3 e altere o texto para Resultado: 4. Exclua o texto da amostra de jTextField1. Voc pode tornar o texto de exibio editvel, clicando no campo de texto, pausando e clicando no campo de texto novamente. Talvez voc tenha que redimensionar o jTextField1 para seu tamanho original. Repita esta etapa para jTextField2 e jTextField3. 5. Renomeie o texto de exibio de jButton1 para Limpar. (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.) 6. Renomeie o texto de exibio de jButton2 para Adicionar. 7. Renomeie o texto de exibio de jButton3 para Sair. Sua GUI finalizada agora deve ser semelhante captura de tela seguinte:

Material didtico



4

Adicionando funcionalidade nos botes:

(Programao em Java)

Neste exerccio, vamos dar funcionalidade aos botes Adicionar, Limpar e Sair. As caixas jTextField1 e jTextField2 sero usadas para entrada do usurio e jTextField3 para a sada do programa - o que estamos criando uma calculadora muito simples. Vamos comear.

Programando o boto Sair:Para dar funo aos botes, temos que atribuir um manipulador de eventos a cada um deles para responder aos eventos. Em nosso caso, queremos saber quando o boto pressionado, por clique do mouse ou via teclado. Portanto, usaremos ActionListener respondendo a ActionEvent. 1. Duplo clique no boto Sair. Ele automaticamente indicar onde voc deve escrever o cdigo 2. Escreva apenas: System.exit(0); para sair do programa, ficar com esta aparncia: 1. private void jButton3ActionPerformed(java.awt.event.ActionEvent evt) { 2. //TODO: Add your handling code here: - Traduzindo: Adicione todo o seu cdigo aqui: } 3. 4. private void jButton3ActionPerformed(java.awt.event.ActionEvent evt) { System.exit(0); }

Programando o boto Limpar:1. Agora faremos o boto Limpar apagar todo o texto dos jTextFields. D um duplo clique no boto Limpar. Digite o cdigo no local similar indicado anteriormente: jTextField1.setText(""); jTextField2.setText(""); jTextField3.setText(""); O cdigo acima altera o texto em todos os nossos trs JTextFields para nada, na essncia, ele est sobrescrevendo o texto existente por um espao em branco.

Programando o boto Adicionar:O boto Adicionar realizar trs aes. 1. Ele vai aceitar a entrada do usurio de jTextField1 e jTextField2 e converter a entrada de um tipo String para uma flutuao. 2. Em seguida, ele far a adio dos dois nmeros e, finalmente, 3. converter a soma para um tipo String e o colocar em jTextField3.

Material didtico



5

Vamos comear! 1. D duplo clique no boto Adicionar e digite o cdigo a seguir, a partir da linha 3 lgico. float num1, num2, resultado; // vamos converter texto para nmero real (float). num1 = Float.parseFloat(jTextField1.getText()); num2 = Float.parseFloat(jTextField2.getText()); // Agora vamos adicionar colocando na varivel resultado resultado = num1+num2; // Vamos colocar o resultado na caixa de texto // para isso temos que converter float para string. jTextField3.setText(String.valueOf(resultado));

Agora nosso programa est completo e podemos constru-lo e execut-lo para v-lo em ao.

Executando o programaPara executar o programa no IDE: 1. Escolha Executar > Executar projeto principal 2. Eu costumo, primeiramente COMPILAR e depois EXECUTAR

De agora em diante vamos utilizar o Netbeans para fazermos as interfaces grficas com maior rapidez e tornar o trabalho mais agradvel.

Material didtico



6

Programa piscina 011. Cria-se uma pasta com o nome: Projeto Piscina; 2. Cria-se um novo projeto com o nome Piscina dentro da Pasta: Projeto Piscina; 3. No canto superior esquerdo do NetBeans, em cima do nome do projeto Piscina, clique com o boto direito para ADICIONAR UM NOVO JFRAME; 4. Salve este JFRAME com um nome de classe diferente de Piscina, por exemplo: Pisc; 5. Coloque um Painel e os componentes abaixo: 6. Componentes utilizados: 1 Painel, 4 jLabels ou Rtulos , 4 jTextFields ou Campos de Textos, 3 OK-Buttons ou Botes; 7. Clique com o boto direito em cima de cada componente em EDITAR TEXTO para os rtulos abaixo:

8.

Com o layout, acima, pronto, basta apenas programar os botes:

9. Duplo clique no boto Sair: // TODO add your handling code here: System.exit(0); 10. Duplo clique no boto Limpar: // TODO add your handling code here: jTextField1.setText(""); jTextField2.setText(""); jTextField3.setText(""); jTextField4.setText(""); 11. Duplo clique no boto Calcular: // TODO add your handling code here: double larg, comp, alt, a1,a2,a3,atotal, m2, qtcxs; larg = Float.parseFloat(jTextField1.getText()); comp = Float.parseFloat(jTextField2.getText()); alt = Float.parseFloat(jTextField3.getText()); m2 = Float.parseFloat(jTextField4.getText()); a1 = larg*alt*2; a2 = comp*alt*2; a3 = larg*comp; atotal = a1+a2+a3; qtcxs = (atotal/m2)*1.1;

Material didtico



7

JOptionPane.showMessageDialog(null,"Area total = "+atotal+" m"+"\nQuantidade de caixas = "+qtcxs);

12. Nunca esquea que em cada etapa, acima, clique no cone disquetes duplos para SALVAR 13. No menu escolha: EXECUTAR, desce e vai em: COMPILAR ARQUIVO F9 e depois clique em: EXECUTAR ARQUIVO SHIFT+F6

Ou seja a rea total desta piscina de 79,0 m e dever ser comprada cerca de 49 caixas do azulejos escolhido no depsito pelo comprador.

Programa Mdia Escolar (Agora vou fazer mais rpido,busque os detalhes no outro de cima)1. 2. 3. 4. Crie uma pasta: Projeto Media Nome do projeto: Media Nome da classe (novo JFrame): Med Faa o layout abaixo:

Material didtico



8

5. Boto sair: // TODO add your handling code here: System.exit(0); 6. Boto Limpar: // TODO add your handling code here: jTextField1.setText(" "); jTextField2.setText(" "); jTextField3.setText(" "); 7. Boto Calcular: // TODO add your handling code here: double nota1, nota2, media; nota1 = Float.parseFloat(jTextField2.getText()); nota2 = Float.parseFloat(jTextField3.getText()); media = (nota1 + nota2)/2; JOptionPane.showMessageDialog(null,"Media = "+media); 8. Compilar o com e somente depois executar com

Material didtico



9

EXERCCIO: FAZENDO UMA INTERFACE GRFICA PARA CADASTRO DE CLIENTES2 EXEMPLO: FORMULRIO PARA CADASTRO DE CLIENTES Neste segundo exerccio vamos fazer um cadastro de clientes com o seguinte layout:

Dentro do JFrame principal (Formulrio de trabalho) vemos:a) 3 Paineis com ttulo (TitledBorder) devidamente alinhados; b) No primeiro Painel vemos: 5 Rtulos (Labels): Nome, Endereo, Cidade, CEP e UF; 3 Campos de Texto (jTextFields); 1 Campo Formatvel (jFormattedTextField); 1 Caixa de Combinao (jComboBox); c) No segundo Painel vemos: 4 Rtulos; 2 Campos de textos Formatveis; 1 Campo de texto, 3 Botes de Opes (RadioButtons): 3.1 Adicione um componente GRUPO DE BOTES (ele invisvel) para agrupar cada boto de opo; 3.2 Clique em cada boto de opo (RadioButton) para ativ-lo, em seguida vai na propriedade deste e escolha a opo BUTTONGROUP e selecione a opo: BUTTONGROUP1, repita isso para cada boto de opo; d) No terceiro Painel vemos 3 botes (jButtons): Confirmar, Limpar e Fechar

Material didtico



10

Preparando os componentes utilizando o Painel de Propriedades1. Digitao dos Rtulos (Labels), basta dar duplo clique e quando ficar azul digite o rtulo; 2. Nos Campos, para retirar os nomes deles, d um clique para selecion-lo e pause 2 a 3 segundos e d outro clique para ativ-lo, quando o texto ficar azul apague; 3. Campo Formatvel (jFormattedTextField): CEP escolhe a propriedade FormattedFactory e escolha Mscara e Personalizado, formate assim: #####-### para o CEP. Para telefone faa o mesmo fazendo o formato: (##)####-#### 4. Na Caixa de combinao, escolha a propriedade Model e altere os itens: tem1 para SP, tem2 para MG, enfim... 5. Para digitar no botes, faa o mesmo: d um clique para selecion-lo espere 2 a 3 segundos e d outro clique para ativ-lo e digitar 6. Mude a cor da fonte com Foreground e mude a cor de fundo com BackGround, mude a fonte na propriedade font....

Codificao dos eventos:1. Comeando pelo boto Fechar, d duplo clique no boto e digite: // TODO add your handling code here: = Digite todo o seu cdigo aqui: System.exit(0); 2. D duplo clique no boto Limpar e digite o cdigo: jTextField1.setText(""); jTextField2.setText(""); jTextField3.setText(""); jTextField4.setText(""); jRadioButton1.setSelected(false); jRadioButton2.setSelected(false); jRadioButton3.setSelected(false); jRadioButton4.setSelected(false); jComboBox1.setSelectedIndex(0); 3. O boto confirmar, ficar para codificar depois ou fazemos um arquivo ou fazemos um banco de dados. Assim terminamos mais um exemplo.

Material didtico



11

Mais Exemplos feitos em classe: Converso de dlar para Real, pela cotao do diaComponentes: Um JFrame, com 1 Painel, 3 Rtulos (Labels), 3 Campos de texto, 3 OK Buttons

Boto Calcular:float vlr_dolar, vlr_real,cotacao; vlr_dolar=Float.parseFloat(jTextField1.getText()); cotacao=Float.parseFloat(jTextField2.getText()); vlr_real=vlr_dolar*cotacao; jTextField3.setText(String.valueOf(vlr_real));

Boto Limpar:

Material didtico



12

jTextField1.setText(""); jTextField2.setText(""); jTextField3.setText("");

Boto Sair:System.exit(0);

Peso Ideal e IMCComponentes 1 jFrame, 2 Paineis, no primeiro painel: 4 Rtulos (Labels), 3 Campos de texto, 2 botes de opo (RadioButtons), 3 OK Button1s. No segundo painel: 6 Rtulos (Labels) dispostos abaixo: No esquea de ativar as propriedades do botes de opo 9RadioButtons): 1. Adicione um componente GRUPO DE BOTES (ele invisvel) para agrupar cada boto de opo; 2. Clique em cada boto de opo (RadioButton) para ativ-lo, em seguida vai na propriedade deste e escolha a opo BUTTONGROUP e selecione a opo: BUTTONGROUP1, repita isso para cada boto de opo;

Boto Calcular:double pi=0, altura, pa, imc; altura = Float.parseFloat(jTextField2.getText()); pa = Float.parseFloat(jTextField3.getText()); imc = pa/(altura*altura); jLabel8.setText(String.valueOf(imc)); if (jRadioButton1.isSelected()) { jRadioButton2.setSelected(false); pi = (72.7 * altura) - 62; } else if (jRadioButton2.isSelected()) { jRadioButton1.setSelected(false); pi = ((62.1 * altura) - 48.7); } jLabel9.setText(String.valueOf(pi)); if (imc

76536050 tutorial netbeans guis1

Documents