top of page
hjava logo.jpg
Orientação a Objetos, parte III: Herança e Polimorfismo
a
a
a
a
a
a
a
a
a
a
a
a
JFrame e JPanel

Programação Gráfica em Java, pt II: desenhos, fontes e figuras geométricas em 2D​

JFrame e JPanel: como criar uma aplicação gráfica em Java

No artigo passado, de Introdução ao estudo de GUI, demos uma explicação teórica e bem simples de entender sobre JFrame e JPanel. Agora vamos, de fato, usar JFrame e JPanel. A partir deste ponto de nossa apostila de Java, iremos criar nossa própria 'janela', ou seja, não vamos usar as janelas já feitas, como nas caixas de diálogo.

JFrame: Como criar Janelas em Java

JFrame nada mais é que uma classe, como outra qualquer que estudamos e criamos ao longo de nosso curso.
Porém, essa classe é que será responsável por criar a tela em que iremos desenhar, colocar botões, menus, caixas de texto e tudo mais que existem nas janelas de aplicativos.

Para fazer uso do JFrame, temos que importar essa classe do pacote swing, que contém diversas funcionalidades para programação gráfica:
import javax.swing.JFrame;

Cada objeto que criamos é um frame, ou janela, diferente. Uma aplicação normal tem dezenas ou centenas de frames.

Nessa seção vamos criar alguns objetos da classe JFrame passando uma String argumento para o construtor padrão,

essa string será o título de nossa aplicação.
Esses JFrames, porém, possuem dezenas de funcionalidades e opções, usaremos as funcionalidades:

o que ocorre quando clicamos no 'x' de close, adicionar panels, definir o tamanho do frame e se ele será visível ou não.

Como dissemos, o JFrame é uma Classe. E para criar uma classe, criamos um objeto. Assim, nossa janela será um objeto chamado "janela".
Vamos passar uma string para o construtor dessa classe, que servirá como título de nosso frame/janela.

Porém, para vermos nosso frame, precisamos definir uma funcionalidade: que ele seja visível!
Pode parecer óbvio, mas um programa pode ter muitos, mas muitos frames, e obviamente não podemos exibir todos, senão nossa tela ficaria uma bagunça.

Assim, para exibir esse frame, usamos o método setVisible, que recebe true ou false.
Portanto, um simples programa em Java que cria e exibe um frame será:
 

import javax.swing.JFrame;

public class framesPanels {

public static void main(String[] args) {

JFrame janela = new JFrame("Meu primeiro frame em Java");

janela.setVisible(true);

}

}


Note que vai ser criado uma janela, mas provavelmente você nem vai notar. Isso porque não fornecemos o tamanho da janela, então ela foi criado com 0 pixel de largura e 0 de altura.
Vamos usar o método setVisible, que recebe um tipo boolean. Como queremos a janela visível, colocamos true.

Caso queira definir um tamanho pré-definido, use o método setSize(), que recebe dois parâmetros com os pixels da janela (horizontal e vertical):
 

import javax.swing.JFrame; public class framesPanels { public static void main(String[] args) { JFrame janela = new JFrame("Meu primeiro frame em Java"); janela.setSize(300,200); janela.setVisible(true); } }


Para saber mais funcionalidades da classe JFrame, veja a documentação em:
http://docs.oracle.com/javase/6/docs/api/javax/swing/JFrame.html
 

JPanel: Inserido elementos em um JFrame

Como vimos, nosso frame está vazio. Só definimos o tamanho da 'moldura' e o título.
Vamos adicionar alguns elementos ao nosso frame, e faremos isso inserindo um JPanel, onde nele podemos colocar uma infinidade de elementos, chamados JComponents:

 

http://www.apl.jhu.edu/~hall/java/Swing-Tutorial/Swing-Tutorial-JPanel.html


Para usar o JPanel, importamos essa classe da package swing:
import javax.swing.JPanel;

Vamos criar uma classe que será nosso painel, vamos chamar de "Painel".
Para isso, basta fazer com que ela extends a JPanel, como aprendemos em Herança, para que herdemos todas as propriedades do JPanel.
 

import javax.swing.JPanel;

public class Painel extends JPanel

{ }


Na nossa classe principal, vamos criar um objeto do tipo "Painel" e chamar de "meuPainel".
Para adicionar esse JPanel em nosso JFrame, usamos o método add que recebe como argumento um JPanel:
 

Painel meuPainel = new Painel(); janela.add(meuPainel);


Embora tenha adicionado um Panel ao seu Frame, você não vai ver nada quando rodar, pois não adicionou nenhum elemento ao seu Panel.
Nos próximos tutoriais desta seção de GUI, vamos aprender como adicionar elementos no Panel.

Mas para não deixar você 'na mão', vamos mostrar um código da Panel que vai fazer um desenho bem bacana no seu JPanel/JFrame, o código completo é:

framesPanels.java

import javax.swing.JFrame; public class framesPanels { public static void main(String[] args) { JFrame janela = new JFrame("Meu primeiro frame em Java"); Painel meuPainel = new Painel(); janela.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE ); janela.add(meuPainel); janela.setSize(600,400); janela.setVisible(true); } }

 

Painel.java

import java.awt.Graphics; import javax.swing.JPanel; public class Painel extends JPanel{ public void paintComponent( Graphics g ){ super.paintComponent( g ); int pixel=0; for(pixel=0 ; pixel <= getHeight() ; pixel += 10){ g.drawLine(0, pixel, pixel, getHeight()); } for(pixel=getHeight() ; pixel >=0 ; pixel -= 10){ g.drawLine(0, pixel, getHeight() - pixel, 0); } for(pixel=0 ; pixel <= getHeight() ; pixel +=10){ g.drawLine(getWidth(), pixel, getWidth() - pixel, getHeight()); } for(pixel=getHeight() ; pixel >=0 ; pixel -= 10){ g.drawLine(getWidth(), pixel, getWidth() - (getHeight() - pixel), 0); } } }

linhas

Desenhando Linhas


Vamos começar esta seção de programação gráfica com um conceito muito importante: as coordenadas da tela.

A origem é no canto superior esquerdo da tela.
O eixo x (horizontal) começa na esquerda e cresce em direção a direita.
O eixo y (vertical) começa de cima e cresce para baixo.
​​​
Desenhando Linhas em Java

Caso você não se lembre bem de suas aulas de geometria, para definir uma linha precisamos apenas de dois pontos.

Ou seja, definindo dois pontos, temos automaticamente uma linha.

Para desenhar uma linha em Java, as coisas serão levemente diferentes.
Iremos fornecer um ponto, que é o ponto de origem, ou seja, dois números: primeiro o do eixo x, depois o número do eixo y.
Guarde bem essa ordem, ela é universal: primeiro a largura (eixo horizontal x), depois a altura (eixo vertical y).
Depois, vamos fornecer mais dois números: a largura e a altura.
Vamos usar esses nomes em inglês: width e height.

Pronto, para desenhar uma linha em Java devemos fornecer 4 números:

dois números que caracterizam a origem da linha, e dois que vão dizer até onde ela 'vai', que é o width e height.

O método que vamos usar é o drawLine, que recebe 4 argumentos, que são os 4 números para criar a linha.
Esse método se encontra na classe Graphics, da package awt. Logo, temos que importar tal classe:
import java.awt.Graphics;

Para mais informações dessa importante classe, acesse a documentação:
http://docs.oracle.com/javase/1.4.2/docs/api/java/awt/Graphics.html
 

Exemplo de código:

Desenhando uma linha em Java criando o JPanel


Primeiro de tudo, vamos criar nosso panel. Ele será uma classe chamada DrawLines.

Para ser um JPanel basta fazer um extends nessa classe DrawLines.​

Como vamos fazer um desenho, usaremos sempre um método chamado paintComponent, que recebe um objeto do tipo Graphics. 

Costuma se chamar esse objeto de 'g', e é ele que realmente fará os desenhos, através de seus métodos.

Antes, disso porém, precisamos invocar um método da superclasse e passar o objeto que vamos usar para fazer os desenhos, no caso é o objeto 'g', para tal basta fazer isso:

super.paintComponent(g);

 

Agora, vamos de fato, desenhar a bendita linha.

Para fazer isso, usamos o método drawLine, que é um nome bem sugestivo e óbvio, se você sabe inglês.

Como já dissemos, é um método que vai receber 4 números. Os dois primeiros são o ponto de origem e os dois últimos o fim da linha.

 

Criando o JFrame

De panel criado, vamos criar o frame. Vamos fazer isso na classe principal.

Vamos criar um objeto de nome frame, e passar uma string para o construtor.

Esse string ("Desenhando Linhas - Curso Java Progressivo") ficará no título, veja:
 

Vamos definir algumas coisas em nosso frame:
 

  •         frame.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE ) : define o que acontece no frame quando tentamos fechar (o frame se encerra)

  •         frame.setSize( 250, 250 ) : define o tamanho do frame, 250 de largura por 250 de altura

  •         frame.setVisible( true ) : define se o frame será, naquele instante, visível

  •         frame.add( panel ) : finalmente vamos adicionar nesse frame o panel que criamos

 

Por fim, nosso código que cria uma linha que sai da origem do frame até o ponto (250,250) é:

-->Lines.java

import javax.swing.JFrame; public class Lines { public static void main(String[] args) { DrawLines panel = new DrawLines(); JFrame frame= new JFrame("Desenhando Linhas - Curso Java Progressivo"); frame.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE ); frame.setSize( 250, 250 ); frame.setVisible( true ); frame.add( panel ); } }

-->DrawLines.java

import java.awt.Graphics; import javax.swing.JPanel; public class DrawLines extends JPanel{ public void paintComponent( Graphics g ){ super.paintComponent( g ); g.drawLine( 0, 0, 250, 250 ); } }

Anchor 1

O que são e como usar os métodos getWidth() e getHeight()

No artigo anterior de nossa apostila de Java, mostramos como criar um frame, adicionar um panel nele e criar uma linha nesse panel.
Porém, aplicações gráficas não são estáticas. Ao minimar, maximizar, mover de lugar, colocar a janela de outro programa por cima de nossa janela e uma infinidade de outros fatores fazem com que nosso aplicativo mude durante sua execução.

Altura e Largura

Note que no exemplo do código de nosso último artigo, criamos uma linha que vai do ponto (0,0) e vai até o ponto onde a largura (width) é 250 e a altura (height) é 250.
Ou seja, aquela linha liga os pontos (0,0) até o (250,250), e só.
Tente maximizar a tela e veja o que ocorre: a linha só existe de (0,0) até o (250,250).
E se você quiser sempre uma linha que ligue a extremidade superior esquerda até a extremidade inferior direita?
Você precisará das atuais informações de tamanho da tela do aplicativo, mas o Java armazena essas informações e podemos obter esses dados através dos métodos getWidth() e getHeight().
 

Os métodos getWidth() e getHeight()

Usamos os métodos getWidth() e getHeigth() para pegar as informações atuais da largura e altura da janela que o usuário está visualizando.

Agora, em vez de criar um desenho que liga o ponto (0,0) até o (250,250), vamos ligar a origem ao ponto (getWidth(), getHeight()).
Ou seja, sempre a linha sai da origem e termina na extremidade inferior direita, criando uma diagonal
Veja como ficou quando alongamos a tela:
Usando getWidth() e getHeight(), a linha sempre toca a ponta inferior direita

 

Exemplo de código:

Desenhando duas linhas em Java, usando getWidth() e getHeight()

 

Vamos agora, finalmente, desenhar algo em nosso frame/panel.
Vamos criar uma linha que saia da origem e termine no canto inferior direito.
As coordenadas dessa linha serão: origem(0,0), fim(getWidth() , getHeight() )

E outra que vai ligar a outra diagonal.
Ou seja a origem é no (0, getHeight()) e o término da linha em (getWidth(), 0).
Concorda?

Caso tenha dúvidas no código, ele foi inteiramente explicado no artigo passado.

Nosso código para desenhar essa linha será:

-->Lines.java
import javax.swing.JFrame; public class Lines { public static void main(String[] args) { DrawLines panel = new DrawLines(); JFrame frame= new JFrame("Desenhando Linhas - Curso Java Progressivo"); frame.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE ); frame.setSize( 250, 250 ); frame.setVisible( true );

frame.add( panel );

} }

 

-->DrawLines.java
import java.awt.Graphics; import javax.swing.JPanel; public class DrawLines extends JPanel{ public void paintComponent( Graphics g ){ super.paintComponent( g ); g.drawLine( 0, 0, getWidth(), getHeight() ); g.drawLine( 0, getHeight(), getWidth(), 0 ); } }

quadrado

Como desenhar retângulos e quadrados

Agora que você já aprendeu o básico de JFrame e JPanel, bem como desenhar linhas em Java (usando os importantes métodos getWidth() e getHeight() ) e fez belos desenhos somente usando as linhas.
Agora vamos prosseguir em nosso curso de programação gráfica e desenhar retângulos e quadrados.
Para tal, usaremos o método drawRect, de draw (desenhar) e Rect de retângulo.
 

O método drawRect: como desenhar retângulos e quadrados em Java


Assim como método drawLine, o método drawRect pertence ao objeto da classe Graphics, no nosso caso ele se chamará 'g'.
Também como o o drawLine, o drawRect recebe 4 argumentos, mas não são todos coordenadas.

Os dois primeiros números são as coordenadas da origem (distância horizontal e distância vertical).
Os dois últimos são a largura e a altura do retângulo em relação ao ponto de origem.

Ou seja, para desenhar um retângulo que tem origem em (0,0) e largura 50 e altura 100, fazemos:
g.drawRec(0,0,50,100);

Para desenhar um retângulo que tem sua orgem no centro do frame com largura 50 e altura 100 (em relação a origem), fazemos:
g.drawRect( getWidth()/2 , getHeight()/2, 50, 100);

Note que é a largura que é 50, e a altura é 100.
50 e 100 NÃO SÃO AS COORDENADAS DE UM PONTO! 50 é a largura do retângulo, a partir da origem, e 100 é a altura do retângulo, em relação a origem.

Veja quando colocamos os dois códigos juntos:

g.drawRec(0,0,50,100);

g.drawRect( getWidth()/2 , getHeight()/2, 50, 100);

 

Desenhando um Cubo

Se você não se lembra bem, um cubo nada mais é que 6 quadrados. E se realmente não é bom em geometria, um quadrado é um retângulo de lados iguais.


Trazendo para nosso conceito de programação gráfica em Java, quadrado é desenhado pelo método drawRect com largura igual a altura.

 

Vamos iniciar nosso cubo então.

Primeiro, vamos desenhar dois quadrados, de lado 100. Criamos um, e o segundo criamos de modo que  sua origem esteja dentro do primeiro quadrado.

A origem do primeiro será em:

(t(getWidth()/10 , getHeight()/10)

 

Vamos colocar a origem do segundo no centro do primeiro quadrado.

As coordenadas do centro do primeiro quadrado são:

Eixo x: larguraOrigem + 50

Eixo y: alturaOrigem + 50

 

Então, desenhamos o segundo quadrado da seguinte maneira:

g.drawRect( (getWidth()/10) + 50, (getHeight()/10) + 50, 100, 100);

 

Temos a seguinte figura:

 

A próxima parte é criar 4 linhas, que ligarão os vértices.

 

A linha que liga os vértices (cantos) superiores esquerdo:

g.drawLine(getWidth()/10, getHeight()/10, (getWidth()/10) + 50, (getHeight()/10) + 50);

 

A linha que liga os vértices inferiores esquerdo:

g.drawLine(getWidth()/10, (getHeight()/10) + 50, (getWidth()/10) + 100, (getHeight()/10) + 50 + 100);

 

A linha que liga os vértices superiores direitos:

g.drawLine( (getWidth()/10) + 100, getHeight()/10, (getWidth()/10) + 50 + 100, (getHeight()/10) + 50);

 

A linha que liga os vértices inferiores direto:

g.drawLine(  (getWidth()/10) + 100, (getHeight()/10) + 100, (getWidth()/10) + 100 + 50, (getHeight()/10) + 100 + 50);

 

Obtemos, portanto, a figura do seguinte cubo:

 

O código do nosso método paintComponent que desenha esse cubo, fica:

 

public void paintComponent( Graphics g ){ super.paintComponent( g ); g.drawRect(getWidth()/10 , getHeight()/10,100,100); g.drawRect( (getWidth()/10) + 50, (getHeight()/10) + 50, 100, 100); g.drawLine(getWidth()/10, getHeight()/10, (getWidth()/10) + 50, (getHeight()/10) + 50); g.drawLine(getWidth()/10, (getHeight()/10) + 100, (getWidth()/10) + 50, (getHeight()/10) + 50 + 100); g.drawLine( (getWidth()/10) + 100, getHeight()/10, (getWidth()/10) + 50 + 100, (getHeight()/10) + 50); g.drawLine( (getWidth()/10) + 100, (getHeight()/10) + 100, (getWidth()/10) + 100 + 50, (getHeight()/10) + 100 + 50);

}

© 2019 - 2024 by FMK. Updated Oct 2024.  Proudly created with Wix.com

bottom of page