Aplicação de Interface Gráfica

Prévia do material em texto

<p>Técnicas de</p><p>Programação</p><p>Material Teórico</p><p>Responsável pelo Conteúdo:</p><p>Profª Esp. Margarete Eliane da Silva Almendro</p><p>Revisão Técnica:</p><p>Prof. Me. Douglas Almendro</p><p>Revisão Textual:</p><p>Prof.a Me. Selma Aparecida Cesarin</p><p>Aplicação de Interface Gráfica</p><p>5</p><p>• Aplicação de Interface Gráfica</p><p>· Nesta Unidade, o aluno terá uma visão do que vem a ser interface gráfica e aprenderá</p><p>a criar um programa com os recursos gráficos de linguagem de programação.</p><p>Olá, alunos(as)!</p><p>Hoje, veremos alguns assuntos introdutórios na nossa Disciplina e aproveito para apresentar</p><p>alguns conceitos que utilizaremos na estrutura de todas as nossas Unidades.</p><p>Lembramos a você a importância de realizar todas as atividades propostas dentro do prazo</p><p>estabelecido para cada Unidade. Dessa forma, você evitará que o conteúdo se acumule e que</p><p>você tenha problemas ao final do semestre.</p><p>Uma última recomendação: caso tenha problemas para acessar algum item da disciplina</p><p>ou dúvidas com relação ao conteúdo, não deixe de entrar em contato com seu professor tutor</p><p>pelo botão mensagens ou nos fóruns.</p><p>Aplicação de Interface Gráfica</p><p>6</p><p>Unidade: Aplicação de Interface Gráfica</p><p>Contextualização</p><p>A utilização da interface gráfica ou ambiente visual é uma forma de interagirmos com os</p><p>recursos dos sistemas. Por trás dos elementos, existe uma vasta ou até mesma o mínimo de</p><p>instruções de computadores que irão executar determinada tarefa.</p><p>Sem essas facilidades, os usuários deveriam possuir uma habilidade igual à de um programador</p><p>para que as tarefas ou eventos fossem executados.</p><p>Graças aos componentes de interação, os códigos ficam por trás da interface, oferecendo</p><p>maior praticidade ao usuário.</p><p>7</p><p>Aplicação de Interface Gráfi ca</p><p>Nesta aula, aprenderemos a montar uma interface gráfica mais amigável e, para tanto,</p><p>utilizaremos a versão 8.0 do NetBeans (mas qualquer outra versão do NetBeans também</p><p>poderá ser utilizada).</p><p>Vamos falar um pouco sobre as aplicações gráficas:</p><p>• Há muito tempo era de difícil criação, principalmente em outras linguagens: Clipper,</p><p>C++, C, Pascal etc.;</p><p>• As linguagens atuais facilitam o seu desenvolvimento, principalmente o Java e o .NET;</p><p>• Existe uma infinidade de funcionalidades disponíveis nas bibliotecas de classes Java,</p><p>destinadas a promover a interação entre usuário e máquina de forma gráfica.</p><p>Como desenvolver interfaces gráficas em Java?</p><p>Bem, temos alguns aspectos interessantes sobre a interface gráfica em Java. Para a criação</p><p>dela, temos:</p><p>AWT</p><p>(Abstract Window Toolkit)</p><p>· Foi a primeira API para interfaces gráficas a surgir no Java;</p><p>· Usa o modo nativo do sistema operacional;</p><p>· Resolução de 72 dpi;</p><p>· java.awt.*.</p><p>Figura Estrutura do AWT.</p><p>Component Button</p><p>Canvas</p><p>Checkbox</p><p>Choice</p><p>Label</p><p>List</p><p>Scrollbar</p><p>TextComponent</p><p>Container</p><p>Panel Window</p><p>Dialog Frame</p><p>TextArea TextField</p><p>8</p><p>Unidade: Aplicação de Interface Gráfica</p><p>Como podemos ver, esta estrutura oferece:</p><p>• Pacotes com diversos componentes gráficos;</p><p>• Componentes que têm aparência dependente de plataforma;</p><p>• Métodos obsoletos.</p><p>SWING</p><p>√ A partir do Java 1.2;</p><p>√ Mais rica que a AWT;</p><p>√ Componentes 100% Java;</p><p>√ Executado em qualquer S.O. mantendo o visual, fonte, cores e geometria (look-and-feel);</p><p>√ Resolução de 300 dpi;</p><p>√ javax.swing.*;</p><p>√ Hierarquia usada.</p><p>• JComponent;</p><p>• Super classe do pacote javax.swing;</p><p>• JFrame, JLabel, JList, JMenuBar, JPanel, JButton, JMenu, JTextArea são alguns</p><p>exemplos de classes direta ou indiretamente herdadas;</p><p>• Extensão do pacote AWT;</p><p>• Programação mais simples.</p><p>AWT+SWING</p><p>∙ União perfeita;</p><p>∙ Aproveitamento das características de ambos os pacotes.</p><p>Tipos de aplicações</p><p>√ Standalone</p><p>∙ Aplicativos criados para rodar via SO.</p><p>√ Applets</p><p>∙ Aplicativos criados para rodar via Browser;</p><p>∙ O Browser é quem controla seu ciclo de vida (início, fim etc.);</p><p>∙ Geralmente ocupam parte da janela do browser, mas podem abrir janelas extras;</p><p>∙ Possuem restrições de segurança.</p><p>9</p><p>Vamos colocar a mão na massa?</p><p>Agora, começaremos a criação de um novo projeto. Vamos aos passos principais:</p><p>• Menu file ou arquivos</p><p>Na opção categorias, vamos escolher Java.</p><p>• Projetos, aplicação Java</p><p>• E Clicar no botão próximo. Deverá aparecer esta janela:</p><p>10</p><p>Unidade: Aplicação de Interface Gráfica</p><p>Até aqui, só criamos um projeto que poderá conter diversos arquivos de apoio para o</p><p>nosso projeto.</p><p>Importante!</p><p>Di cas:</p><p>• Saber o nome do projeto. Pode ser qualquer nome:</p><p>• Sugestão: o nome deve ter algum sentido para o projeto que esteja criando;</p><p>• Onde estará salvando este projeto “diretório pasta…”;</p><p>• Deixar habilitado o item criar classe principal.</p><p>50% dos desenvolvedores iniciais comentem o erro de não saber o nome muito</p><p>menos onde salvaram seu projeto.</p><p>• Já podemos clicar no botão finalizar.</p><p>Sua janela deverá ficar parecida com esta:</p><p>Vamos observar melhor a guia de projetos:</p><p>Podemos observar que a nossa ferramenta já cria uma estrutura de diretórios para este</p><p>projeto, “o que facilita bastante a organização dele”.</p><p>11</p><p>O próximo passo será criar a janela na qual criaremos a interface gráfica. Para isto, vamos</p><p>clicar com o botão direito do mouse sobre a pasta de pacote:</p><p>• Vamos seguir os caminhos acima e terminar clicando em FormJFrame.</p><p>A seguinte tela deverá aparecer:</p><p>Onde há a opção nome da Classe, podemos colocar o nome da tela que deverá ser criada.</p><p>Com as demais opções, não precisamos nos preocupar, pois em nosso projeto já definimos o</p><p>local de criação.</p><p>12</p><p>Unidade: Aplicação de Interface Gráfica</p><p>• Agora, já podemos clicar no botão finalizar.</p><p>A próxima etapa já deverá aparecer na nossa janela a ser customizada.</p><p>À nossa direita, temos a paleta de controles e ou componentes que poderão ser inseridos</p><p>em nossa janela. E no centro, nossa interface, ainda sem atrativo algum.</p><p>Vamos começar a moldar nossa janela, mas, primeiro, vamos definir o gerenciador de</p><p>layout que iremos trabalhar. Para tanto, devemos clicar com o botão direito do mouse sobre</p><p>a nossa janela.</p><p>Podemos observar que existem diversos gerenciadores de layout que podemos escolher,</p><p>neste caso, para facilitar a criação da janela ou design livre ou layout nulo. Os demais são mais</p><p>limitados com relação à criação de layouts, mas você pode se aprofundar mais na comunidade</p><p>GUJ na internet, nas quais existe um fórum somente sobre Java.</p><p>13</p><p>Vamos criar um container dentro de nossa janela e para isto vamos selecionar na paleta</p><p>contêineres Swing, painel.</p><p>O conceito é o mesmo de um container de navio e deveremos criar um para em seguida</p><p>acomodar os itens de nosso layout.</p><p>Vamos, então, clicar neste painel e colocá-lo em nossa janela.</p><p>A partir de agora, poderemos mudar a cor, borda etc.</p><p>14</p><p>Unidade: Aplicação de Interface Gráfica</p><p>Vamos mudar a cor deste painel?</p><p>Então, selecione a paleta de propriedades e escolha a opção background.</p><p>• Escolha a cor desejada e clique em ok.</p><p>Vamos agora selecionar um componente para colocarmos neste container. O escolhido</p><p>para nosso aplicativo é o componente JLabel.</p><p>15</p><p>Veja que a parte cinza apenas representa as coordenadas do nosso JLabel. Vamos agora</p><p>mudar este JLabel, que na verdade representa uma etiqueta fixa.</p><p>Mudamos a propriedade text dele para FIRE e vamos mudar também o tamanho, a cor e a</p><p>fonte deste componente.</p><p>Mudamos a propriedade foreground para amarelo.</p><p>16</p><p>Unidade: Aplicação de Interface Gráfica</p><p>Agora, na propriedade font, mudaremos para fonte arial e tamanho 36.</p><p>Pronto! Temos uma interface gráfica pronta; porém, sem interação inteligente do usuário.</p><p>• Vamos fazer esta aplicação “rodar” ou simplesmente executar!</p><p>Para isso, lembra-se do início da criação de nosso projeto? Pois bem! Agora deveremos</p><p>informar para a classe principal o que ela deverá fazer: “mostrar a nossa interface gráfica</p><p>criada agora”.</p><p>Vamos clicar no arquivo criado pelo projeto. Deverá aparecer uma tela com uma programação</p><p>simples; porém, deveremos colocar o seguinte código: o nome da nossa janela de interface</p><p>gráfica para o qual, no caso deste exemplo, foi dado o nome de</p><p>Tela:</p><p>Atenção</p><p>Tela x = new Tela(); // “estamos criando um objeto e dando vida para ele”</p><p>X.show(true); // este comando estará fazendo com que a janela apareça</p><p>17</p><p>• Próximo passo: executar o projeto.</p><p>Para isso, basta clicar no botão de play verde, como mostra a figura a seguir.</p><p>O resultado deverá ser:</p><p>Como já vimos os passos de como criar uma interface, vamos criar uma interface como a</p><p>identificada a seguir.</p><p>Ou seja, acrescentar dois botões e escrever as palavras Acende e Apaga.</p><p>18</p><p>Unidade: Aplicação de Interface Gráfica</p><p>Até aqui, nada que seja uma novidade além do que aprendemos até agora. Porém, temos</p><p>de mostrar que nossa interface tem dinamismo “interação” com o usuário.</p><p>Então, agora vamos aprender um pouco sobre eventos.</p><p>Em uma aplicação com interface, existe a necessidade de capturar eventos na janela para</p><p>que uma ação seja executada (clicar, abrir, passar o mouse, fechar etc.), tudo isto para que</p><p>exista uma interação do usuário com a nossa GUI.</p><p>Cada evento está associado a um objeto (componente da GUI);</p><p>• O evento gera outro objeto (ActionEvent);</p><p>• O evento é passado para um listener (escutador de eventos);</p><p>Para criar um listener, devemos implementar uma interface listener (java.awt.event.*)</p><p>Para facilitar, montaremos nossa interface para que quando o usuário clicar em um botão,</p><p>ele execute alguma sequência de comandos já definidos em um algoritmo.</p><p>19</p><p>Primeiramente, devemos selecionar o botão que receberá o evento e escolher o evento por</p><p>meio da guia de eventos.</p><p>Neste caso, escolheremos mouseCliked e no lugar de nenhum estaremos selecionando</p><p>jButton1MouseClicked.</p><p>Logo na sequência, aparecerá a parte programável de nossa interface.</p><p>20</p><p>Unidade: Aplicação de Interface Gráfica</p><p>Onde está escrito “// TODO add your handling code here:” iremos digitar o seguinte código:</p><p>• JOptionPane.showMessageDialog(null, “Fogo Aceso”);</p><p>Perceba que aparece uma linha sublinhada de vermelho e uma lâmpada ao lado. Isto indica</p><p>que temos um erro de compilação ou sintaxe da linguagem. Este erro é simples de resolver:</p><p>basta clicarmos na lâmpada e escolher a opção de importar o javax.swing.JOptionPane.</p><p>Este erro acontece devido ao fato de que para usarmos o JOptionPane ele faz parte do</p><p>pacote swing do Java e devemos importá-lo para a nossa interface.</p><p>Repita para o outro botão e coloque outra mensagem: JOptionPane.showMessageDialog(null,</p><p>“Fogo Apagado”);</p><p>Vamos alterar o código a seguir.</p><p>O que irá acontecer?</p><p>Nesse caso, além de mostrar a mensagem, ele também irá alterar o texto do jLabel 1 que</p><p>criamos na nossa interface.</p><p>21</p><p>Vamos criar agora uma interface simples para calcular o seno coseno tangente de um</p><p>ângulo. Como sugestão, veja a interface a seguir.</p><p>Nesta interface, o que temos de diferente seria a caixa de texto para que o usuário possa</p><p>digitar o ângulo e depois escolher se prefere exibir uma das opções a seguir.</p><p>Note que qualquer usuário em “sã ignorância” não entenderia esta palavra de jTextField, não é?</p><p>Então, para a arrumarmos na propriedade textr do nosso jTextField1 eliminaremos essa palavra.</p><p>Pronto!</p><p>Agora é só programarmos os botões para calcular o Seno, Coseno e Tangente.</p><p>Simples, não? Pois é!</p><p>22</p><p>Unidade: Aplicação de Interface Gráfica</p><p>Agora, temos o problema do algoritmo, não é? Fique calmo(a)!</p><p>No Java, temos a opção de efetuar cálculos usando funções da biblioteca nativa do Java,</p><p>chamada Math. Vamos aplicá-la?</p><p>No botão do Seno, escolheremos o evento de MouseClicked e, em seguida, a</p><p>seguinte programação:</p><p>• Lembre-se de que a programação a ser digitada é apenas:</p><p>double seno;</p><p>seno=Double.parseDouble(jTextField1.getText());</p><p>//estamos transformando o valor digitado em um número</p><p>//do tipo double.</p><p>JOptionPane.showMessageDialog(null,”O seno de:“+</p><p>jTextField1.getText()+ “ é “+Math.sin(seno));</p><p>//Math.sin() é uma função para calcular o seno</p><p>Vamos agora para o Coseno.</p><p>double coseno;</p><p>coseno=Double.parseDouble(jTextField1.getText());</p><p>//estamos transformando o valor digitado em um número</p><p>//do tipo double.</p><p>JOptionPane.showMessageDialog(null,”O Coseno de: “+</p><p>jTextField1.getText()+ “ é “+Math.cos(coseno));</p><p>//Math.cos() é uma função para calcular o coseno</p><p>23</p><p>Vamos, por último, para a Tangente.</p><p>double tangente;</p><p>tangente=Double.parseDouble(jTextField1.getText());</p><p>//estamos transformando o valor digitado em um número</p><p>//do tipo double.</p><p>JOptionPane.showMessageDialog(null,”A Tangente de: “+</p><p>jTextField1.getText()+ “ é “+Math.tan(tangente));</p><p>//Math.tan() é uma função para calcular a tangente</p><p>Tome muito cuidado se por acaso for copiar e colar o código, pois, geralmente, ocorrem</p><p>erros nas aspas, haja vista que, em alguns casos, gera o que chamamos de aspas francesas. Se</p><p>isso acontecer, basta substituí-las por aspas normais novamente.</p><p>Poderíamos melhorar esta interface fazendo com que os valores se apresentem em uma</p><p>nova caixa de texto, não é?</p><p>Vamos lá!</p><p>Já a programação de cada botão seria modificada para:</p><p>24</p><p>Unidade: Aplicação de Interface Gráfica</p><p>double seno;</p><p>seno=Double.parseDouble(jTextField1.getText());</p><p>jTextField2.setText(String.valueOf(Math.sin(seno)));</p><p>//neste caso a variável numérica não pode ser exibida diretamente</p><p>//na caixa de texto portanto colocamos o String.valueOf!</p><p>double coseno;</p><p>coseno=Double.parseDouble(jTextField1.getText());</p><p>jTextField2.setText(String.valueOf(Math.cos(coseno)));</p><p>//neste caso a variável numérica não pode ser exibida diretamente</p><p>//na caixa de texto portanto colocamos o String.valueOf!</p><p>double tangente;</p><p>tangente=Double.parseDouble(jTextField1.getText());</p><p>jTextField2.setText(String.valueOf(Math.tan(tangente)));</p><p>//neste caso a variável numérica não pode ser exibida diretamente</p><p>//na caixa de texto, portanto, colocamos o String.valueOf!</p><p>25</p><p>Material Complementar</p><p>Para aprofundar seus conhecimentos, consulte:</p><p>Livros:</p><p>DEITEL, H. M. e DEITEL, P. J. Livro Estudo Dirigido de Algoritmos. São Paulo:</p><p>Editora Pearson, 2012.</p><p>________. Java: Como Programar. 4º Edição. Porto Alegre: Bookman Editora, 2003.</p><p>26</p><p>Unidade: Aplicação de Interface Gráfica</p><p>Referências</p><p>ASCENCIO, A. F. G.; CAMPOS, E. A. V. Fundamentos da programação de</p><p>computadores: algoritmos, Pascal, C/C e Java. 2.ed. São Paulo: Pearson. 2010. (e-book).</p><p>CHRISTOS, P. UMESH, V. Algoritmos. Porto Alegre: Grupo A, 2011. (e-book).</p><p>EDELWEISS, N.; GALANTE, R. Estruturas de dados. Porto Alegre: Grupo A, 2011. (e-book)</p><p>FORBELLONE, A. L. V.; EBERSPACHER, H. F. Lógica de Programação: A Construção</p><p>de Algoritmos e Estrutura de Dados. 3.ed. São Paulo: Makron Books do Brasil, 2005.</p><p>GOODRICH M. T., TAMASSIA R. Estruturas de dados e algoritmos em Java. Porto</p><p>Alegre: Grupo A, 2011. (e-book)</p><p>HORSTMANN, C. Conceitos de computação com Java. 5.ed. Porto Alegre: Grupo A,</p><p>2009. (e-book)</p><p>MANZANO, J. A. N. G. Algoritmos: Lógica para Desenvolvimento de Programação. 20.ed.</p><p>São Paulo: Eriça, 2007.</p><p>VILARIM, G. O. Algoritmos: Programação para Iniciantes. Rio de Janeiro: Ciência</p><p>Moderna, 2004.</p><p>27</p><p>Anotações</p>