(INFORMAÇÕES PARA LABORATÓRIOS VIRTUAIS) Nome do laboratório: Laboratório de Programação (INFORMAÇÕES PARA FERRAMENTA)

Transcrição

1 (INFORMAÇÕES PARA LABORATÓRIOS VIRTUAIS) Nome do laboratório: Laboratório de Programação (INFORMAÇÕES PARA FERRAMENTA) Ferramenta 1 -NetBeans 8.1 GUI Elaborado por: Osmar de Oliveira Braz Junior Descrição Este tutorial tem como objetivo mostrar a construção de aplicações gráficas utilizando janelas, baseadas em JFrames, utilizando a IDE NetBeans 8.1. A instalação e configuração da ferramenta deve ser feita seguindo o tutorial de instalação do NetBeans 8.1. A IDE NetBeans não precisa de um plugin para construir Interfaces Gráficas com o Usuário (GUI - Graphics User Interface) pois isto já é nativo. As interfaces gráficas desenvolvidas na IDE NetBeans podem ser baseadas em java Swing ou AWT. A IDE NetBeans combina a exibição do código fonte com a visualização do design(desenho) e permite o design visual do layout e a visualização de componentes em um editor gráfico(desenho), bem como a edição direta parcial do código-fonte Java. 1 Autoria: Osmar de Oliveira Braz Junior Assistente Acadêmica: Eloisa Machado Seemann. 1

2 Tutorial Criando projeto GUI (passo a passo) Os passos a seguir se referem ao desenvolvimento de uma calculadora em um projeto GUI na IDE NetBeans utilizando Java Swing. Passo 1: Selecione Arquivo->Novo Projeto e depois a categoria Aplicação Java e clique no botão Próximo. Figura 1: Novo Projeto Categoria 2

3 Passo 2: De um nome para o projeto projeto1 e o nome da classe Principal e ao final clique no botão Finalizar. A classe Principal irá abrir a interface gráfica e executar o programa. Figura 2: Nome do Projeto Ao final o projeto é exibido o código fonte do programa Principal. Depois vamos modificar o programa para chamar a interface gráfica. 3

4 Figura 3: Programa Principal Passo 3: Selecione Arquivo->Novo arquivo e depois a categoria Formulários GUI Swing e o Tipo de Arquivo Formulário JFrame e clique no botão Próximo. Figura 4: Criando uma nova interface gráfica 4

5 Passo 4: Digite o nome do formulário FrmCalculadora no campo Nome da Classe: e depois clique no botão Finalizar Figura 5: Nome e localização do formulário Logo em seguida é apresentada a interface gráfica para o desenvolvimento. Onde é apresentada a área de desenho da interface e as paletas de componentes. 5

6 Figura 6: Interface da IDE para desenvolvimento de formulários Paleta de Componentes Alterna entre o Código Fonte e o Projeto Área de desenho Componentes da Janela Propriedades do Componente Passo 5: Como vamos posicionar individualmente cada componente, iremos definir como nulo o layout. Clique com o botão direito do mouse sobre a área do desenho e selecione na opção Definir Layout e depois clique no valor Layout Nulo. Se desejar pode escolher outros layouts, mas vamos posicionar individualmente cada componente. Figura 7: Alterando o layout do formulário 6

7 Passo 6: Adicione o rótulo que é um componente do tipo javax.swing.jlabel ao formulário da calculadora. Na Paleta Controles Swing clique para selecionar o componente Label. Figura 8: Selecionando o JLabel no Controle Swing Depois de localizar o componente arraste o componente Label para o canto superior esquerdo na área de desenho do formulário. Figura 9: Arrastando o rótulo 7

8 Agora vamos alterar a propriedade text do componente JLabel1. Para realizar a alteração clique em cima do componente JLabel1 na área de desenho e as propriedades serão exibidas na Janela propriedades. Inclua o texto Número 1: na propriedade text e pressione enter ao final da digitação. Figura 10: Alterando o JLabel1 Agora inclua os outros rótulos para a nossa calculadora, adicionando outros JLabel na área de desenho, conforme a figura abaixo. Um outro JLabel para o outro número e o último para o resultado da calculadora. 8

9 Figura 11: Outros rótulos Passo 7: Agora vamos adicionar o campo de texto do tipo javax.swing.jtextfield ao formulário. Na Paleta Controles Swing, selecione o componente TextField. Figura 12: Selecionando o JTextField no Controles Swing Depois de localizar o componente arraste-o para o lado direito do rótulo Número 1: na área de desenho do formulário. Neste campo iremos digitar o primeiro número. 9

10 Figura 13: Arrastando o campo de texto Agora inclua os outros campos de texto adicionando outros JTextField na área de desenho, conforme a figura abaixo. Um para o outro número e o último para o resultado. Figura 14: Outros campos de texto 10

11 Passo 8: Vamos adicionar o botão um componente do tipo javax.swing. JButton ao formulário da calculadora para realizar a ação de somar os valores do campo Número 1 e Número 2. Na Paleta Controles Swing, selecione o componente Botão. Figura 15: Selecionando o JButton no Controle Swing Depois de localizar o componente arraste-o para a lateral direita na área de desenho do formulário, sendo que este componente vai receber o texto JButton1. Vamos colocar todos os botões deste lado. 11

12 Figura 16: Arrastando o botão Agora vamos alterar a propriedade text do componente JButton1. Clique em cima do componente JButton1 na área de desenho e as propriedades deste componente serão exibidas na Janela propriedades. Inclua o texto Somar na propriedade text e pressione enter ao final. Figura 17: Alterando JButton1 Agora incluía os outros botões adicionando novos Botões na área de desenho, conforme a figura abaixo. Estes botões serão para realizar as operações de subtrair, 12

13 multiplicar e dividir os números. Adicione também os botões limpar para limpar os campos de texto e o botão fechar para fechar a janela. Figura 18: Outros botões Você pode visualizar a interface gráfica, ela irá ficar em tempo de execução clicando no botão Visualizar Design. 13

14 Passo 9: Tratando os eventos dos botões. Agora vamos adicionar os eventos aos botões para que eles executem ações com os valores dos campos de texto. Vamos adicionar a ação de soma aos dois números e apresentar o resultado ao botão Somar. Selecione o botão somar, e depois clique com o botão direito na opção Eventos, depois selecione em Action a opção actionperformed. A IDE vai automaticamente adicionar o tratamento de evento ao botão. Figura 19: Adicionando ação somar Logo depois de clicar no evento o editor de código fonte abre para ser inserido o código para a ação. Percebam que somente pode ser alterado dentro da operação JButton1ActionPerformed, pois todo o restante está bloqueado. A IDE bloqueia para poder conseguir exibir a IDE em tempo de desenvolvimento. 14

15 Figura 20: Adicionando código fonte Agora vamos insirar o código para recuperar os textos dos campos de texto. Como os campos de texto são literais precisamos converter para números reais. E depois realizar a operação de soma e colocar o valor na caixa de texto de resultado. Novamente precisamos converter o valor da soma, pois o campo de texto aceita somente literal. Figura 21: Código fonte incluído 15

16 Agora inclua as outras ações para as outras operações. Conforme a figura abaixo. Figura 22: Código fonte de todas as operações Passo 10: Adicionando o evento para o botão limpar esvaziar os campos de texto dos números. Clique no botão limpar e depois clique com o botão direito e em eventos selecione ActionPerformed em Action. Figura 23: Evento do botão limpar 16

17 Agora inclua o código para limpar as caixas de texto na ação do botão limpar, conforme a figura abaixo. Figura 24: Código fonte do botão limpar Passo 11: Adicione o evento para o botão com o texto fechar. Clique no botão fechar para seleciona-lo e depois clique com o botão direito e em eventos selecione ActionPerformed em Action. 17

18 Figura 25: Evento do botão fechar Agora inclua o código para fechar a interface gráfica na ação do botão fechar, conforme a figura abaixo. Figura 26: Código fonte do botão fechar 18

19 Passo 12: Agora vamos fazer com que o programa Principal crie uma instância do formulário da calculadora e torne ele visível. Clique no arquivo Principal.java na janela do projeto1 para realizar a sua edição. E inclua o código fonte apresentado na figura abaixo. Figura 27: Abrindo a Janela 19

20 Passo 13: Com tudo pronto vamos à execução do projeto. Clique no botão executar ou pressione a tecla F6. Figura 28: Executando o projeto Pode ser que a IDE pergunte para você quem é a classe principal do projeto. Se não estiver definido a IDE irá abrir a janela abaixo para que você selecione a classe principal.. Figura 29: Selecionando a classe principal 20

21 Logo após selecionar a classe principal do projeto a IDE apresenta o formulário construído. Figura 30: Projeto em execução Para depurar e empacotar o projeto consulte o tutorial inicial do NetBeans. 21