2013

Apostila Programao Visual com Java e IDE Netbeans

Robson de Lima Carvalho Centro Paula Souza: ETECs Prof. Fausto Mazzola de Avar e Pref. Jos Esteves de Cerqueira Csar contato: robson.carvalho13@etec.sp.gov.br Publicado: 15/04/2013

Sumrio Criando projetos e janelas .................................................................. 2 Converso de tipos de dados ............................................................. 9 Inserindo figuras/cones ................................................................... 12 Renomeando componentes e adicionando legendas .................... 17 Menu, itens de menu e navegao entre as janelas. ...................... 19 Boto de Rdio e Grupo de Botes ................................................. 22 Campo formatado e caixa de seleo .............................................. 27 Obras Citadas .................................................................................... 34

Sobre o autor O professor Robson de Lima Carvalho atua na rea acadmica nas escolas tcnica de Prof. Fausto Mazzola de Avar e Prefeito Jos Esteves de Cerqueira Csar So Paulo. No ano de 2012 ministrou curso de Desenvolvedor de Sistemas pela IFSP de Avar Formao acadmica: Bacharel em Sistema de Informao formado pelo Centro Universitrio Central Paulista (UNICEP) So Carlos-SP; Especialista em Desenvolvimento de Sistema Web pela faculdade Anhanguera de Bauru-SP; Licenciado em informtica pelo Programa Especial de Formao Pedaggica de Docentes para as Disciplinas do Currculo da Educao Profissional de Nvel Mdio.

Disciplinas Ministradas: Lgica de Programao (C e Javascript); Desenvolvimento de Software I e II (Com linguagem Java); Tcnicas de Linguagem de Banco de Dados I e II; Planejamento e Desenvolvimento de TCC; Estrutura de dados; Entre outras.

Criando projetos e janelas

Criando um novo projeto: Para criar um novo projeto no Netbeans clique na aba Arquivo->Novo Projeto, Figura 1- Criando projeto.

Figura 1- Criando projeto

Em seguida aparecer a tela para escolha do tipo de projeto, Figura 2 Escolha de Projeto, escolha Categoria->Java e Projetos->Aplicao Java para desenvolver sistemas para Desktop as outras categorias servem para outros tipos de projetos que nestas aulas no sero trabalhadas.

Figura 2 - Escolha de Projeto

Prximo passo definir um nome para o projeto Figura 3 - Atribuir nome ao projeto, neste caso devemos colocar um nome sem acentuao e espaos em branco, normalmente a primeira letra do projeto maiscula. Obs. No inicio no vamos deixar selecionar a opo para Criar Classe Principal.

Figura 3 - Atribuir nome ao projeto

Criao de uma Janela (JFrame): Clique com boto direito em cima da xcara (Projeto criado) e selecione Novo->FormJFrame, Figura 4 - Criao de Janelas:

Figura 4 - Criao de Janelas

Agora vamos definir um nome para Janela Figura 5 - Definindo o nome do JFrame no campo pacote, que no pode ficar vazio, temos que colocar dentro de um pacote, no caso vamos escrever janela que ser nossa pasta que ir possuir todos os JFrames/Janelas do sistema.

Figura 5 - Definindo o nome do JFrame

O programa criar uma nova janela Figura 6 - Nova Janela/JFrame para que possamos adicionar outros componentes visuais.

Figura 6 - Nova Janela/JFrame

Figura 7 - Janela Paleta do Netbeans

Com a criao da nova janela Figura 6 - Nova Janela/JFrame o programa abre numa aba do lado direito alguns componentes visuais da Figura 7 - Janela Paleta do Netbeans. Os componentes bsicos da paleta so: JFrame a classe do Swing do Java que responsvel por desenhar uma tela de um programa. (Java Free) JButton um componente para acionar aes dentro do programa, ou aes externas ao programa como salvar em um banco de dados ou salvar em um arquivo entre outros; (DEVMEDIA) JLabel um componente para a criao de formulrios onde necessria a insero de textos fixos ou imagens. (DEVMEDIA) JTextField um componente que recebe a insero dos dados pelo teclado. (DEVMEDIA) JPanel: O painel um componente utilizado para fazer subdivises na tela, ou para separar de forma organizada componentes dispostos na tela. (DEVMEDIA)

Vamos arrastar para a janela os componentes demonstrados abaixo Figura 8 - Inserindo componentes.

Figura 8 - Inserindo componentes

Agora vamos alterar os rtulos que aparecem na tela, para isso devemos selecionar o campo jLabel4, Figura 9 - Alterar aparncia dos componentes, e alterar o valor na aba propriedade escolha a propriedade text e deixe uma palavra ou frase para componentes tipos jLabel e para os Campos de Textos o texto normalmente fica vazio ou limpo, pois o usurio ir adicionar um contedo.

Figura 9 - Alterar aparncia dos componentes

Com o componente selecionado d para alterar aparncia, texto e tamanho dele, abaixo segue uns dos principais atributos que podemos modificar: Background -> cor de fundo; Font-> Tipo de letra e tamanho; Foreground -> Cor da letra; horizontalAlignment -> Se o texto vai ficar no centro, esquerda ou direita icon -> colocar figura text -> O texto que vai aparecer na tela

A tela/janela do aplicativo vai ficar parecido com a Figura 10 - Tela final do projeto. Para executar o Projeto pressione F6.

Figura 10 - Tela final do projeto

Agora vamos partir para criao do cdigo do boto Somar, para acionar o evento s dar dois cliques no boto somar, vai aparecer tela de codificao do projeto. Percorrer a tela e verificar onde o cursor est piscando para adicionar o cdigo abaixo Figura 11 - Cdigo boto somar:

Figura 11 - Cdigo boto somar

Obs.: Todo campo de texto gera ou recebe apenas tipos de dados String e para utilizar os tipos de dados diferentes, como int de Inteiro, nos temos que converter de String para Integer, ou outro tipo que veremos melhor no capitulo Converso de tipos Agora vamos adicionar um novo boto e adicionar alguns comandos para limpar os dados digitados Figura 12 - Cdigo boto Limpar.

Figura 12 - Cdigo boto Limpar

Importante: nomeComponente.getText( ); ->Esse comando pega um valor, ou retornar um valor, do componente;

nomeComponente.setText( texto ) -> Esse comando passa um valor para o componente, altera o valor existente por um novo;

Converso de tipos de dados

Agora vamos criar um novo projeto Media (Sem acento, pois o nome do arquivo no pode ter acentuao), criar uma nova janela e desenhar a tela colocando os componentes para ficar como na Figura 13 - Tela projeto Mdia.

Figura 13 - Tela projeto Mdia

Importante Criando um valor como double ou float (estes valores permitem usar nmeros decimais, ou seja, que possuem casas decimais, famoso nmero aps a vrgula) Estes nmeros possuem a notao americana, ou seja, os nmeros decimais so separados por ponto ( . ) no por vrgula ( , ).

As figuras abaixo so do mesmo boto, porm em um mtodo nos usamos double Figura 14 - Cdigo boto calcular com double e no outro float Figura 15 - Cdigo boto calcular com float. Basicamente a diferena dos dois o tamanho de casas que cada um suporta, o double muito superior ao float. Porm como a inteno aqui mostra a funcionalidade, por isso, foi demonstrado usando os dois tipos.

Figura 14 - Cdigo boto calcular com double

Figura 15 - Cdigo boto calcular com float

O resultado est sendo mostrado num jLabel6 criado que fica embaixo do boto, mas que na Figura 13 - Tela projeto Mdia no ficou explicita devido ao valor do text que nulo no comeo do programa.

Novamente vamos adicionar um boto para limpar a tela dos valores antigos a codificao ficar Figura 16 - Cdigo boto limpar de Mdia.

Figura 16 - Cdigo boto limpar de Mdia

Exerccio 1. Crie um novo projeto e uma nova janela conforme Figura 17 - Exerccio Reajuste Salarial o resultado final dever mostrar o nome do funcionrio e seu novo salrio.

Figura 17 - Exerccio Reajuste Salarial

11

Inserindo figuras/cones

Criar um projeto com o nome ProjetoIcone, tudo junto sem espao ou acentos e caracteres especiais, busque cones em sites especficos nos exemplos desta apostila utilizamos o site: http://www.iconfinder.com. Baixar cones com extenso png ou jpg, escolher o tamanho em pixel para os cones na barra superior direita. (Parece uma rgua o tamanho do cone que voc quer)

Figura 18 - Site iconfinder

Para buscar um cone digite no campo de busca Figura 18 - Site iconfinder e mude o tamanho dos pixels na rgua que aparece na tela Figura 19 - cone exit, depois s clicar em png, que a extenso do arquivo que voc deseja salvar.

Figura 19 - cone exit

Figura 20 - Pasta do arquivo

Uma maneira de adicionar figuras em seu projeto irmos para pasta que baixamos o arquivo Figura 21 - Aba projetos com figura depois arrastar essa figura para um pacote do projeto Figura 21 - Aba projetos com figura.

Figura 21 - Aba projetos com figura

13

Agora vamos adicionar um componente Boto/jButton na Janela, selecione o boto e v at propriedades campo icon Figura 22 - Propriedade do boto, clique nos trs pontinhos a direita do campo.

Figura 22 - Propriedade do boto

Agora s selecionar a imagem, primeiro selecione o pacote que a imagem pertence, depois procure nome do arquivo Figura 23 - Selecionando a imagem.

Figura 23 - Selecionando a imagem

Com a imagem selecionada a figura aparece para voc verificar se ela mesmo que voc deseja adicionar no projeto Figura 24 - Imagem selecionada

Figura 24 - Imagem selecionada

O componente boto ir mudar o visual onde ira acrescentar a imagem que voc selecionou Figura 25 - Boto com figura.

Figura 25 - Boto com figura

15

Exerccio 2. Vamos calcular quanto gastamos com o consumo de combustvel de um determinado veiculo. Gasto = distancia * consumo * preo

Figura 26 - Tela Exerccio 2

Renomeando componentes e adicionando legendas

Renomear um componente necessrio para no se perder na notao padro, ou seja, tem um monte de campo de texto jTextField e voc precisa pegar o valor de um, mas qual aquele que tem o dado que voc quer? Ento precisamos dar nomes mais significativos para os componentes.

Figura 27 - Renomear componente

Para renomear o componente primeiramente precisamos clicar com o boto direito em cima dele aparecer uma janela Figura 27 - Renomear componente depois clicar na opo para Alterar o Nome da Varivel abrir uma janela Figura 28 - Renomear componente 2, depois s renomear o componente.

Figura 28 - Renomear componente 2

17

Legenda, tambm conhecida como Hint, a propriedade que voc digita um texto e quando o usurio descansar o ponteiro do mouse em cima do componente aparece uma legenda que pode descrever a funo do componente ou dar uma dica. Para adicionar essa legenda basta selecionar um componente, tipo boto, selecionar a propriedade toolTipText, conforme Figura 29 - Legenda nos componentes, depois adicione a legenda ou a dica do componente.

Figura 29 - Legenda nos componentes

Menu, itens de menu e navegao entre as janelas.

Neste capitulo vamos criar um projeto que utilize menus Figura 30 Criando Menus, que vo servir para chamar outras telas do aplicativo ou uma funo externa, como abrir uma pgina no navegador.

Figura 30 - Criando Menus

Para fazer este programa crie um novo projeto e desta vez selecione criar classe Principal. Para inserir o Menu contido na Paleta: arraste o componente Barra de Menu, que a barra fixa, o Menu so os itens que possuem Item de Menu, ou seja, no exemplo, Figura 30 Criando Menus, possui dois Menus que foram nomeados como Arquivo e Ajuda e dentro do menu Arquivo foi inserido trs Itens de Menu: Funcionrios, Sair, JMenuItem2.
Figura 31 - Paleta Menus Swing

19

Nesta

Figura 32

- Classe Principal

fizemos

um cdigo para

chamar/invocar uma janela, que nosso caso chamamos de JanelaPrincipal mas que pode ser alterado com base no nome que voc atribuiu ao JFrame que criou.

Figura 32 - Classe Principal

Cdigos para criar uma Janela: JFramejanela = new Sobre(); janela.setVisible(true); Deixar a nova janela no centro da tela: janela.setLocationRelativeTo(null); Deixar a tela Maximizada (Tela Cheia): janela.setExtendedState(JFrame.MAXIMIZED_BOTH); Fechar a janela atual: dispose( ); Onde est sobre mudar para o Nome que voc deu para sua Janela.

Ao executar o projeto, com F6, o programa vai abrir a Figura 33 - Janela Principal, mas de uma maneira diferente, pois voc solicitou que a janela fosse maximizada, ou seja, que a janela preencha todo espao da tela do computador.

Agora vamos programar para Janela Principal abrir outra Janela a de Sobre. Para abrirmos outras janelas podemos adicionar o cdigo no item Sobre Figura 34 Cdigo para invocar a Janela Sobre ou em um boto.

Figura 33 - Janela Principal

Dentro da ao do Item de Menu que chama a janela Sobre, adicione o cdigo da Figura 34 Cdigo para invocar a Janela Sobre.

Figura 34 Cdigo para invocar a Janela Sobre

Depois disso uma nova janela vai surgir na tela. (Desde que haja um JFrame com este nome).

21
Figura 35 - Janela Sobre

Boto de Rdio e Grupo de Botes

As

funes

dos

componentes

RadioButton

CheckBox

so

semelhantes, conhecidos como botes de opes neles os usurio podem marcar ou desmarcar as opes. A diferena que o usurio seleciona um boto de opo qualquer e o boto de rdio selecionado anteriormente no mesmo grupo torna-se desmarcado.

Figura 36 - Paleta Boto e Grupo de Rdio

Figura 37 - Tela Cadastro de Sexo

Neste projeto estamos utilizando o componente Boto de Rdio, para mostrar as opes que o usurio pode selecionar. Para criar a tela Figura 37 Tela Cadastro de Sexo precisamos adicionar dois novos componentes contidos na Figura 36 - Paleta Boto e Grupo de Rdio, alm dos componentes j estudados aqui, o primeiro componente o Boto de Rdio ou RadioButton, para cada opo que voc desejar adicionar tem que adicionar um Boto de Rdio, neste caso nos vamos adicionar apenas dois, um para masculino e outro para feminino. Depois precisamos adicionar o Grupo de botes, ele arrastado para o projeto e pode ficar apenas 1 (neste caso), que ser para indicar para os componentes masculino e feminino que eles pertencem ao mesmo grupo e quando a pessoa selecionar masculino, no pode selecionar feminino junto, ou vice-versa. Quando voc arrasta um componente Grupo de botes o painel Navegao fica como na Figura 38 - Aba navegador programa com grupo de botes, este componente aparece fora do JFrame, isto normal, pois ele est atrelado ao projeto, mas no um elemento visual.

Figura 38 - Aba navegador programa com grupo de botes

23

Para vincular os componentes primeiro selecione o boto de opo feminino e altere o valor da propriedade buttonGroup Figura 39 - Propriedade do boto de opo, na propriedade selecione a opo buttonGroup1, que o componente arrastado na tela e que no ficou visvel.

Figura 39 - Propriedade do boto de opo

No boto de opo de masculino fazer o mesmo passo e depois disso quando voc executar o projeto o usurio do seu sistema no vai poder selecionar duas opes, ficando opo exclusiva, ou seja, ou ele cadastra a pessoa com o sexo masculino ou com sexo feminino, nunca as duas. Agora precisamos codificar, conforme exemplo Figura 40 - Cdigo do boto OK usando Opo, para que quando o usurio do sistema digitar um nome e escolher a opo do sexo o programa vai mostrar uma mensagem que vai utilizar o pronome de tratamento de senhor para sexo masculino e senhora ou senhorita, alm de pegar o peso de ambos.

Figura 40 - Cdigo do boto OK usando Opo

Exerccios 3. Fazer um programa que pegue o nome e a idade de uma pessoa e mostre uma mensagem. Na mensagem mostrar o nome da pessoa e a qual faixa etria ela pertence de acordo com Tabela 2 - ndice de Massa Corporal:
Tabela 1 - Mensagem por faixa etria

Faixa etria (em anos) De 0 a 2 De 3 a 11 De 12 a 19 De 20 a 30 De 31 a 60 Maior de 60

Mensagem

Beb Criana Adolescente Jovem Adulto Melhor idade

25

4. Calcule o IMC ndice de Massa Corporal Figura 41- Tela IMC, conforme frmula abaixo: Onde: imc = peso / altura

Figura 41- Tela IMC

O resultado verificar o ndice que a pessoa pertence na Tabela 2 ndice de Massa Corporal:
Tabela 2 - ndice de Massa Corporal

ndice IMC Menor que 18,5 Entre 18,5 e 24,4 Entre 24,5 e 29,9 Entre 30 e 34,9 Entre 35 e 39,9 Maior que 39,9

Descrio Peso abaixo do Normal Peso Ideal Pr-Obesidade Obesidade classe I Obesidade classe II (severa) Obesidade classe III (mrbida)

Campo formatado e caixa de seleo

Agora vamos aprender a deixar o campo de entrada com mscaras, recurso bastante utilizado para entrada de dados que possui um padro como por exemplo: CPF possui valor fixo, nmero de telefone, CNPJ, titulo de eleitor e outros. Para desenvolver os exemplos vamos criar um projeto e desenhar uma tela igual Figura 42 - Tela Cadastro de Pessoas, nos campos que esto com nome de jFormattedTextField voc adiciona o componente Campo Formatado da Figura 43 - Paleta Campo Formatado.

Figura 42 - Tela Cadastro de Pessoas

Figura 43 - Paleta Campo Formatado

27

Para alterar o valor de entrada primeiramente selecione o campo jFormattedTextField1, e na aba de propriedades e selecione os trs pontinhos da propriedade formatterFactory, Figura 44 - Componente campo formatado incluindo mscara 1.

Figura 44 - Componente campo formatado - incluindo mscara 1

Logo aps selecione os trs pontinhos da propriedade formatterFactory, surgir tela Figura 45 - Componente campo formatado - incluindo mscara 2,

Figura 45 - Componente campo formatado - incluindo mscara 2

Nesta

janela

selecione

categoria

mscara,

formatar

escolha

personalizado agora teremos que definir o padro da mscara, pois o campo em questo de CPF, ento todo CPF tem uma mscara igual que : ###.###.###-##, onde # significa um nmero qualquer, conforme Figura 46 Componente campo formatado - incluindo mscara 3.

Figura 46 - Componente campo formatado - incluindo mscara 3

Depois de realizar este procedimento o campo CPF ficar travado e aceitar apenas no formato definido, que o padro para o CPF Figura 47 Tela final do campo formatado:

29

Figura 47 - Tela final do campo formatado

Depois faremos o mesmo processo para o campo formatado de CNPJ, tem formato um pouco diferente do CPF, ento temos que verificar o formato e adicionar nas propriedades.

Como j foi dito o componente Caixa de Seleo ele parecido com Boto de Rdio de selecionar as opes que so verdadeiras, mas com a diferena de poder selecionar vrias opes ao mesmo tempo, por exemplo, vamos desenvolver um aplicativo que verifica qual o gosto musical das pessoas, conforme Figura 48 - Tela Gosto Musical, repare que h vrias opes e que o usurio pode selecionar todas, nenhuma ou qualquer uma.

Figura 48 - Tela Gosto Musical

Para adicionar um componente Caixa de Seleo no projeto basta arrastar ele da Figura 49 - Paleta Caixa de Seleo para a Janela/JFrame do projeto.

Figura 49 - Paleta Caixa de Seleo

31

Na hora de programar temos que testar todas as Caixas de Seleo para ver se alguma caixa esta selecionada, Figura 50 - Cdigo boto OK do gosto musical, neste cdigo estamos verificando apenas duas caixas de seleo a de Rock e de Pagode, mas com esta demonstrao d para programar as outras caixas restantes

Figura 50 - Cdigo boto OK do gosto musical

Para codificar o boto limpar tem que informar que todas as caixas de seleo tero que assumir que no ficaram selecionadas, Figura 51 - Cdigo do boto Limpar do gosto musical.

Figura 51 - Cdigo do boto Limpar do gosto musical

Exerccio 5. Faa um programa que receba alguns dados da pessoa e mostre o resultado do que a pessoa selecionou ou digitou no programa. Figura 52 - Tela Ficha de Cadastro

Figura 52 - Tela Ficha de Cadastro

33

Obras Citadas
DEVMEDIA. (s.d.). DEVMEDIA. Acesso em 01 de 04 de 2013, disponvel em DEVMEDIA: http://www.devmedia.com.br/ Java Free. (s.d.). UOL. Acesso em 01 de 04 de 2013, disponvel em Java Free: http://javafree.uol.com.br/wiki/JFrame