Técnicas de Programação

Técnicas de Programação

Material Teórico Aplicação de Interface Gráfica Responsável pelo Conteúdo: Profª Esp. Margarete Eliane da Silva Almendro Revisão Técnica: Prof. Me. Douglas Almendro Revisão Textual: Prof. a Me. Selma Aparecida Cesarin

Aplicação de Interface Gráfica Aplicação de Interface Gráfica Nesta Unidade, o aluno terá uma visão do que vem a ser interface gráfica e aprenderá a criar um programa com os recursos gráficos de linguagem de programação. Olá, alunos(as)! Hoje, veremos alguns assuntos introdutórios na nossa Disciplina e aproveito para apresentar alguns conceitos que utilizaremos na estrutura de todas as nossas Unidades. Lembramos a você a importância de realizar todas as atividades propostas dentro do prazo estabelecido para cada Unidade. Dessa forma, você evitará que o conteúdo se acumule e que você tenha problemas ao final do semestre. Uma última recomendação: caso tenha problemas para acessar algum item da disciplina ou dúvidas com relação ao conteúdo, não deixe de entrar em contato com seu professor tutor pelo botão mensagens ou nos fóruns. 5

Unidade: Aplicação de Interface Gráfica Contextualização A utilização da interface gráfica ou ambiente visual é uma forma de interagirmos com os recursos dos sistemas. Por trás dos elementos, existe uma vasta ou até mesma o mínimo de instruções de computadores que irão executar determinada tarefa. Sem essas facilidades, os usuários deveriam possuir uma habilidade igual à de um programador para que as tarefas ou eventos fossem executados. Graças aos componentes de interação, os códigos ficam por trás da interface, oferecendo maior praticidade ao usuário. 6

Aplicação de Interface Gráfica Nesta aula, aprenderemos a montar uma interface gráfica mais amigável e, para tanto, utilizaremos a versão 8.0 do NetBeans (mas qualquer outra versão do NetBeans também poderá ser utilizada). Vamos falar um pouco sobre as aplicações gráficas: Há muito tempo era de difícil criação, principalmente em outras linguagens: Clipper, C++, C, Pascal etc.; As linguagens atuais facilitam o seu desenvolvimento, principalmente o Java e o.net; Existe uma infinidade de funcionalidades disponíveis nas bibliotecas de classes Java, destinadas a promover a interação entre usuário e máquina de forma gráfica. Como desenvolver interfaces gráficas em Java? Bem, temos alguns aspectos interessantes sobre a interface gráfica em Java. Para a criação dela, temos: AWT (Abstract Window Toolkit) Foi a primeira API para interfaces gráficas a surgir no Java; Usa o modo nativo do sistema operacional; Resolução de 72 dpi; java.awt.*. Figura Estrutura do AWT. Component Button Canvas Container Checkbox Panel Window Choice Label List Dialog Frame Scrollbar TextComponent TextArea TextField 7

Unidade: Aplicação de Interface Gráfica Como podemos ver, esta estrutura oferece: Pacotes com diversos componentes gráficos; Componentes que têm aparência dependente de plataforma; Métodos obsoletos. SWING A partir do Java 1.2; Mais rica que a AWT; Componentes 100% Java; Executado em qualquer S.O. mantendo o visual, fonte, cores e geometria (look-and-feel); Resolução de 300 dpi; javax.swing.*; Hierarquia usada. JComponent; Super classe do pacote javax.swing; JFrame, JLabel, JList, JMenuBar, JPanel, JButton, JMenu, JTextArea são alguns exemplos de classes direta ou indiretamente herdadas; Extensão do pacote AWT; Programação mais simples. AWT+SWING União perfeita; Aproveitamento das características de ambos os pacotes. Tipos de aplicações Standalone Aplicativos criados para rodar via SO. Applets Aplicativos criados para rodar via Browser; O Browser é quem controla seu ciclo de vida (início, fim etc.); Geralmente ocupam parte da janela do browser, mas podem abrir janelas extras; Possuem restrições de segurança. 8

Vamos colocar a mão na massa? Agora, começaremos a criação de um novo projeto. Vamos aos passos principais: Menu file ou arquivos Na opção categorias, vamos escolher Java. Projetos, aplicação Java E Clicar no botão próximo. Deverá aparecer esta janela: 9

Unidade: Aplicação de Interface Gráfica Até aqui, só criamos um projeto que poderá conter diversos arquivos de apoio para o nosso projeto. Importante! Dicas: Saber o nome do projeto. Pode ser qualquer nome: Sugestão: o nome deve ter algum sentido para o projeto que esteja criando; Onde estará salvando este projeto diretório pasta ; Deixar habilitado o item criar classe principal. 50% dos desenvolvedores iniciais comentem o erro de não saber o nome muito menos onde salvaram seu projeto. Já podemos clicar no botão finalizar. Sua janela deverá ficar parecida com esta: Vamos observar melhor a guia de projetos: 10 Podemos observar que a nossa ferramenta já cria uma estrutura de diretórios para este projeto, o que facilita bastante a organização dele.

O próximo passo será criar a janela na qual criaremos a interface gráfica. Para isto, vamos clicar com o botão direito do mouse sobre a pasta de pacote: Vamos seguir os caminhos acima e terminar clicando em FormJFrame. A seguinte tela deverá aparecer: Onde há a opção nome da Classe, podemos colocar o nome da tela que deverá ser criada. Com as demais opções, não precisamos nos preocupar, pois em nosso projeto já definimos o local de criação. 11

Unidade: Aplicação de Interface Gráfica Agora, já podemos clicar no botão finalizar. A próxima etapa já deverá aparecer na nossa janela a ser customizada. À nossa direita, temos a paleta de controles e ou componentes que poderão ser inseridos em nossa janela. E no centro, nossa interface, ainda sem atrativo algum. Vamos começar a moldar nossa janela, mas, primeiro, vamos definir o gerenciador de layout que iremos trabalhar. Para tanto, devemos clicar com o botão direito do mouse sobre a nossa janela. Podemos observar que existem diversos gerenciadores de layout que podemos escolher, neste caso, para facilitar a criação da janela ou design livre ou layout nulo. Os demais são mais limitados com relação à criação de layouts, mas você pode se aprofundar mais na comunidade GUJ na internet, nas quais existe um fórum somente sobre Java. 12

Vamos criar um container dentro de nossa janela e para isto vamos selecionar na paleta contêineres Swing, painel. O conceito é o mesmo de um container de navio e deveremos criar um para em seguida acomodar os itens de nosso layout. Vamos, então, clicar neste painel e colocá-lo em nossa janela. A partir de agora, poderemos mudar a cor, borda etc. 13

Unidade: Aplicação de Interface Gráfica Vamos mudar a cor deste painel? Então, selecione a paleta de propriedades e escolha a opção background. Escolha a cor desejada e clique em ok. Vamos agora selecionar um componente para colocarmos neste container. O escolhido para nosso aplicativo é o componente JLabel. 14

Veja que a parte cinza apenas representa as coordenadas do nosso JLabel. Vamos agora mudar este JLabel, que na verdade representa uma etiqueta fixa. Mudamos a propriedade text dele para FIRE e vamos mudar também o tamanho, a cor e a fonte deste componente. Mudamos a propriedade foreground para amarelo. 15

Unidade: Aplicação de Interface Gráfica Agora, na propriedade font, mudaremos para fonte arial e tamanho 36. Pronto! Temos uma interface gráfica pronta; porém, sem interação inteligente do usuário. Vamos fazer esta aplicação rodar ou simplesmente executar! Para isso, lembra-se do início da criação de nosso projeto? Pois bem! Agora deveremos informar para a classe principal o que ela deverá fazer: mostrar a nossa interface gráfica criada agora. Vamos clicar no arquivo criado pelo projeto. Deverá aparecer uma tela com uma programação simples; porém, deveremos colocar o seguinte código: o nome da nossa janela de interface gráfica para o qual, no caso deste exemplo, foi dado o nome de Tela: Atenção Tela x = new Tela(); // estamos criando um objeto e dando vida para ele X.show(true); // este comando estará fazendo com que a janela apareça 16

Próximo passo: executar o projeto. Para isso, basta clicar no botão de play verde, como mostra a figura a seguir. O resultado deverá ser: Como já vimos os passos de como criar uma interface, vamos criar uma interface como a identificada a seguir. Ou seja, acrescentar dois botões e escrever as palavras Acende e Apaga. 17

Unidade: Aplicação de Interface Gráfica Até aqui, nada que seja uma novidade além do que aprendemos até agora. Porém, temos de mostrar que nossa interface tem dinamismo interação com o usuário. Então, agora vamos aprender um pouco sobre eventos. Em uma aplicação com interface, existe a necessidade de capturar eventos na janela para que uma ação seja executada (clicar, abrir, passar o mouse, fechar etc.), tudo isto para que exista uma interação do usuário com a nossa GUI. Cada evento está associado a um objeto (componente da GUI); O evento gera outro objeto (ActionEvent); O evento é passado para um listener (escutador de eventos); Para criar um listener, devemos implementar uma interface listener (java.awt.event.*) Para facilitar, montaremos nossa interface para que quando o usuário clicar em um botão, ele execute alguma sequência de comandos já definidos em um algoritmo. 18

Primeiramente, devemos selecionar o botão que receberá o evento e escolher o evento por meio da guia de eventos. Neste caso, escolheremos mousecliked e no lugar de nenhum estaremos selecionando jbutton1mouseclicked. Logo na sequência, aparecerá a parte programável de nossa interface. 19

Unidade: Aplicação de Interface Gráfica Onde está escrito // TODO add your handling code here: iremos digitar o seguinte código: JOptionPane.showMessageDialog(null, Fogo Aceso ); Perceba que aparece uma linha sublinhada de vermelho e uma lâmpada ao lado. Isto indica que temos um erro de compilação ou sintaxe da linguagem. Este erro é simples de resolver: basta clicarmos na lâmpada e escolher a opção de importar o javax.swing.joptionpane. Este erro acontece devido ao fato de que para usarmos o JOptionPane ele faz parte do pacote swing do Java e devemos importá-lo para a nossa interface. Repita para o outro botão e coloque outra mensagem: JOptionPane.showMessageDialog(null, Fogo Apagado ); Vamos alterar o código a seguir. O que irá acontecer? Nesse caso, além de mostrar a mensagem, ele também irá alterar o texto do jlabel 1 que criamos na nossa interface. 20

Vamos criar agora uma interface simples para calcular o seno coseno tangente de um ângulo. Como sugestão, veja a interface a seguir. Nesta interface, o que temos de diferente seria a caixa de texto para que o usuário possa digitar o ângulo e depois escolher se prefere exibir uma das opções a seguir. Note que qualquer usuário em sã ignorância não entenderia esta palavra de jtextfield, não é? Então, para a arrumarmos na propriedade textr do nosso jtextfield1 eliminaremos essa palavra. Pronto! Agora é só programarmos os botões para calcular o Seno, Coseno e Tangente. Simples, não? Pois é! 21

Unidade: Aplicação de Interface Gráfica Agora, temos o problema do algoritmo, não é? Fique calmo(a)! No Java, temos a opção de efetuar cálculos usando funções da biblioteca nativa do Java, chamada Math. Vamos aplicá-la? No botão do Seno, escolheremos o evento de MouseClicked e, em seguida, a seguinte programação: Lembre-se de que a programação a ser digitada é apenas: double seno; seno=double.parsedouble(jtextfield1.gettext()); //estamos transformando o valor digitado em um número //do tipo double. JOptionPane.showMessageDialog(null, O seno de: + jtextfield1.gettext()+ é +Math.sin(seno)); //Math.sin() é uma função para calcular o seno Vamos agora para o Coseno. double coseno; coseno=double.parsedouble(jtextfield1.gettext()); //estamos transformando o valor digitado em um número //do tipo double. JOptionPane.showMessageDialog(null, O Coseno de: + jtextfield1.gettext()+ é +Math.cos(coseno)); //Math.cos() é uma função para calcular o coseno 22

Vamos, por último, para a Tangente. double tangente; tangente=double.parsedouble(jtextfield1.gettext()); //estamos transformando o valor digitado em um número //do tipo double. JOptionPane.showMessageDialog(null, A Tangente de: + jtextfield1.gettext()+ é +Math.tan(tangente)); //Math.tan() é uma função para calcular a tangente Tome muito cuidado se por acaso for copiar e colar o código, pois, geralmente, ocorrem erros nas aspas, haja vista que, em alguns casos, gera o que chamamos de aspas francesas. Se isso acontecer, basta substituí-las por aspas normais novamente. Poderíamos melhorar esta interface fazendo com que os valores se apresentem em uma nova caixa de texto, não é? Vamos lá! Já a programação de cada botão seria modificada para: 23

Unidade: Aplicação de Interface Gráfica double seno; seno=double.parsedouble(jtextfield1.gettext()); jtextfield2.settext(string.valueof(math.sin(seno))); //neste caso a variável numérica não pode ser exibida diretamente //na caixa de texto portanto colocamos o String.valueOf! double coseno; coseno=double.parsedouble(jtextfield1.gettext()); jtextfield2.settext(string.valueof(math.cos(coseno))); //neste caso a variável numérica não pode ser exibida diretamente //na caixa de texto portanto colocamos o String.valueOf! double tangente; tangente=double.parsedouble(jtextfield1.gettext()); jtextfield2.settext(string.valueof(math.tan(tangente))); //neste caso a variável numérica não pode ser exibida diretamente //na caixa de texto, portanto, colocamos o String.valueOf! 24

Material Complementar Para aprofundar seus conhecimentos, consulte: Vídeos: Livros: Interface Gráfica em Java - Aula 01 https://youtu.be/zmlysbyed8q DEITEL, H. M. e DEITEL, P. J. Livro Estudo Dirigido de Algoritmos. São Paulo: Editora Pearson, 2012.. Java: Como Programar. 4º Edição. Porto Alegre: Bookman Editora, 2003. 25

Unidade: Aplicação de Interface Gráfica Referências ASCENCIO, A. F. G.; CAMPOS, E. A. V. Fundamentos da programação de computadores: algoritmos, Pascal, C/C e Java. 2.ed. São Paulo: Pearson. 2010. (e-book). CHRISTOS, P. UMESH, V. Algoritmos. Porto Alegre: Grupo A, 2011. (e-book). EDELWEISS, N.; GALANTE, R. Estruturas de dados. Porto Alegre: Grupo A, 2011. (e-book) FORBELLONE, A. L. V.; EBERSPACHER, H. F. Lógica de Programação: A Construção de Algoritmos e Estrutura de Dados. 3.ed. São Paulo: Makron Books do Brasil, 2005. GOODRICH M. T., TAMASSIA R. Estruturas de dados e algoritmos em Java. Porto Alegre: Grupo A, 2011. (e-book) HORSTMANN, C. Conceitos de computação com Java. 5.ed. Porto Alegre: Grupo A, 2009. (e-book) MANZANO, J. A. N. G. Algoritmos: Lógica para Desenvolvimento de Programação. 20.ed. São Paulo: Eriça, 2007. VILARIM, G. O. Algoritmos: Programação para Iniciantes. Rio de Janeiro: Ciência Moderna, 2004. 26

Anotações 27