Interface gráfica na prática: eventos

Aula de Laboratório

Objetivos:

1. Interface

Na última aula, vimos como implementar uma classe simples para desenho na tela. Se quiser, você pode utilizá-la para desenhar a tartaruga. Mas não faça a classe Tartaruga ser parte da área de desenho!

Vamos pensar de forma orientada a objetos: a classe Tartaruga é que é responsável pelo seu próprio desenho, certo ? Bem, o problema então é descobrir uma forma de relacioná-la com a classe TelaDesenho (que é quem realmente desenha coisas na tela).

Não podemos esquecer que tudo que é desenhado na tela deve ser realizado dentro do método paintComponent(Graphics g) da classe TelaDesenho, pois é esse método que o sistema operacional chama quando quer atualizar a tela (repaint).

Então, o ideal é criar um relacionamento entre a Tartaruga e a TelaDesenho, de forma que seja possível chamar métodos da primeira dentro da segunda. Como fazer isso ? Composição: A classe TelaDesenho deverá ter um atributo tartaruga, que é um objeto da classe Tartaruga, ou seja, a nossa tartaruga em si.

Portanto, o seu construtor deverá receber, além das dimensões da tela, uma referência para Tartaruga. Veja abaixo:

import java.awt.*;
import javax.swing.*;

class TelaDesenho extends JPanel
{
	Tartaruga tartaruga;

	// Construtor: cria uma Tela com tamanho w (largura) x h (altura)
	public TelaDesenho(int w,int h,Tartaruga tart)
	{
		super();
		// O método abaixo seta o tamanho desejado da tela (largura, altura)
		setPreferredSize(new Dimension(w,h));
		tartaruga = tart;

	}

	public void paintComponent(Graphics g)
	{
		super.paintComponent(g); // pinta o fundo
		...
		tartaruga.desenha(g);	// desenha a tartaruga
	...

Repare que na classe Tartaruga deverá ter sido implementado o método desenha(Graphics g), que será responsável por desenhar a tartaruga. Por enquanto, crie esse método, mas deixe o código em branco.

Agora, finalmente podemos fazer as primeiras experiências com a interface gráfica em si...

Exercício:

  • Implemente, da forma mais simples possível, uma interface gráfica funcional para a aplicação. Imagine que componentes seriam úteis e onde colocá-los. Dica: deve haver pelo menos uma área para visualização do desenho e outra para entrada de um texto (programa na linguagem)
  • Não perca tempo deixando a interface "bonitinha", mas apenas funcional. "Embelezamento" é a última coisa que se faz.

Se você chegou até aqui, já deve ter em mente mais ou menos como será a "cara" da sua aplicação. Essa forma inicial pode mudar bastante, e você mesmo irá se dar conta, à medida em que for adicionando mais funcionalidades a ela.

2. Desenho e movimentação da tartaruga

Para não ficarmos só com uma interface que não faz muita coisa, podemos pelo menos fazer o desenho da tartaruga.

Como desenhá-la ? Bem, a qualidade do desenho depende da sua habilidade/vontade/criatividade de desenhá-la...

O problema não é desenhar uma tartaruga, o problema é desenhar uma tartaruga na direção correta! Se você não chegou à conclusão de como movimentá-la em qualquer direção, aí vai uma dica: usando o seno e o cosseno do ângulo desejado, você conseguirá o deslocamento necessário para x e y. Repare que esse deslocamento é normalizado, isto é, entre 0 e 1. Veja a figura abaixo.

Uma outra dica importante é que em Java, assim como na maior parte das linguagens de programação, os ângulos devem ser especificados em radianos, não em graus. Na figura acima, são os valores entre 0 e 2π. Para converter um ângulo de graus para radianos, multiplique-o por π e divida o resultado por 180. Use os métodos Math.sin e Math.cos

Agora sim, você está pronto para...

Exercício:

  • Implemente o método desenha(Graphics g) na classe Tartaruga. Isso vai implicar em usar os senos e cossenos vistos antes...
  • Sugestão: comece com uma linha, que aponta na direção para onde a tartaruga está direcionada
  • Se você conseguiu fazer com uma linha, agora tente fazer um triângulo, onde a ponta indica a direção atual da tartaruga.
  • Para testar o desenho, você pode fazer chamadas aos métodos de rotação, avanço, etc, dentro do paintComponent(...) em TelaDesenho. Só não esqueça de desenhar a tartaruga no final, senão você não enxergará nada...

Se tudo correu da maneira prevista, você já tem uma Tartaruga implementada, que inclusive se auto-desenha!. O próximo passo é fazer o interpretador da linguagem e fazer a tartaruga rabiscar na tela (você percebeu que por enquanto ela só anda ?)

Mas isso, só no próximo capítulo...

Você chegou ao final desta importante etapa. Revise os conceitos e prepare-se: faremos a tartaruga passear pela tela!