Tutorial NetBeans GUIs

download Tutorial NetBeans GUIs

of 18

Transcript of Tutorial NetBeans GUIs

Material didtico

Java GUI do NetBeans Criando interfaces grficas rpidas

Prof. Carlos

1

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

Exemplo 1: Criando um projetoA 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 JFrame1. Na janela Projetos, clique com o boto direito do mouse no n Arquivo > Formulrio GUI Swing >Formulrio JFrame.

Adicao e selecione Novo

Material didtico Java GUI do NetBeans Criando interfaces grficas rpidas 2. Indique o nome da classe: NumeroAdicao. 3. Indique o pacote: Adicao. 4. Clique em Terminar.

Prof. Carlos

2

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. 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.

Material didtico

Java GUI do NetBeans Criando interfaces grficas rpidas

Prof. Carlos

3

Renomeando os componentesNesta etapa, vamos renomear o texto de exibio dos componentes que acabamos de adicionar ao JFrame. 1. Clique duas vezes em 2. Clique duas vezes em 3. Clique duas vezes em

jLabel1 e altere a propriedade do texto para Primeiro nmero: jLabel2 e altere o texto para Segundo nmero: 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 7. Renomeie o texto de exibio de

jButton2 para Adicionar. jButton3 para Sair.

Sua GUI finalizada agora deve ser semelhante captura de tela seguinte:

Exerccio 3: Adicionando funcionalidadeNeste 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.

Material didtico

Java GUI do NetBeans Criando interfaces grficas rpidas

Prof. Carlos

4

Fazendo o boto Sair funcionarPara 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 para sair do programa, ficar com esta aparncia:

2. Escreva apenas: System.exit(0);

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); }

Fazendo o boto Limpar funcionar1. 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.

Fazendo o boto Adicionar funcionarO 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. 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

Material didtico Java GUI do NetBeans Criando interfaces grficas rpidas resultado = num1+num2; // Vamos colocar o resultado na caixa de texto // para isso temos que converter float para string. jTextField3.setText(String.valueOf(resultado));

Prof. Carlos

5

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

Exerccio 4: 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.

EXERCCIO: FAZENDO UMA INTERFACE GRFICA PARA CADASTRO DE CLIENTES

Material didtico

Java GUI do NetBeans Criando interfaces grficas rpidas

Prof. Carlos

6

2 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) d) No terceiro Painel vemos 3 botes (jButtons): Confirmar, Limpar e Fechar

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;

Material didtico Java GUI do NetBeans Criando interfaces grficas rpidas Prof. Carlos 7 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

Java GUI do NetBeans Criando interfaces grficas rpidas

Prof. Carlos

8

+ Exemplos feitos em classe1. Converso de dlar para Real, pela cotao do dia

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:jTextField1.setText(""); jTextField2.setText(""); jTextField3.setText("");

Boto Sair:System.exit(0);

2. Peso Ideal e IMC

Boto Calcular:

Material didtico Java GUI do NetBeans Criando interfaces grficas rpidas 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