January 15th, 2008Desenhando com Java e Netbeans
Criar um componente flexível, derivado do Swing, para fazer desenhos não é difícil. Você pode criar um componente gráfico para plotar funções, mostrar gráficos, jogos, etc.
Para ilustrar esse tutorial eu vou usar o Netbeans 6.0 (download), uma IDE livre, multiplataforma e multilinguagem. Provavelmente você poderá seguir todos esses passos em versões anteriores do Netbeans ou, com um pouco mais de dificuldade, sem usar o Netbeans.

Figura 1. Netbeans aberto e sem nenhum projeto.Passo 1 - Criando um novo projeto: Inicialize o seu Netbean e vá em File → New Project.

Figura 2. Janela New Project
Em Categories escolha Java, em Projects escolha Java Desktop Application. Em seguida clique no botão Next.

Figura 3. Janela New Desktop ApplicationFique a vontade para escolher o campo Project Name, eu chamei de Desenho. Os outros campos deixe como já estão por padrão. Clique em Finish.
Passo 2 - Criando a classe JDesenho:

Figura 4. Ambiente Netbeans com um projeto de Aplicação Desktop Java já inicializado.Agora já temos o esqueleto do projeto pronto, inclusive já compilável e executável.

Figura 5. New → Java Class.Com o botão direito do mouse vá na aba de projetos, na esquerda, e clique no pacote (um pacotinho amarelo dentro de Source Packages) e vá em New → Java Class.

Figura 6. Janela de Criação de classe Java
Em Class Name coloque JDesenho e o resto deixa com o padrão (Project Desenho e em Package desenho). Clique no botão Finish.
Com isso temos uma classe JDesenho vazia. Vamos faze-la ser uma subclasse da classe JPanel do Swing.
public class JDesenho extends JPanel{ }

Figura 7. Recurso da IDE para adicionar importação
Quando você escrever isso você verá um pequeno ícone de lâmpada com uma plaquinha vermelha no lado esquerdo da linha de código. Isso quer dizer que esse seu código não compila mas há uma dica de como resolver o problema. Selecione a opção Add import for javax.swing.JPanel.
O problema aí era que o nome JPanel não estava no espaço de nomes. Isso foi resolvido importando o pacote JPanel.
Passo 3 - Sobrescrevendo o método PaintComponent: coloque o cursor de edição dentro da classe JDesenho e aperte as teclas control e espaço.
Control+Espaço é o atalho para completação de código. Comece a escrever PaintComponent, nas primeiras letras você vai achar o método e o editor vai mostrar a documentação. Pressione enter para escolher sobrescrever o método PaintComponent.

Figura 8. Completação de código.
Nessa altura do campeonato o código-fonte da JDesenho estará mais ou menos assim:
package desenho; import java.awt.Graphics; import javax.swing.JPanel; public class JDesenho extends JPanel{ @Override protected void paintComponent(Graphics g) { super.paintComponent(g); } }
O Graphics é a classe abstrata base para qualquer classe que permita desenhos. É através dela que vamos fazer nossos desenhos.
Só para fazer um teste vamos escrever um código que pinta o Graphics de preto (na verdade pinta um retângulo preto no Graphics). O seu método paintComponent vai ficar assim:
protected void paintComponent(Graphics g) { g.setColor(Color.black); g.fillRect(0, 0, 500, 500); }
(lembre-se de adicionar os imports usando as dicas de código)
Passo 4 - Trocando um JPanel por um JDesenho: agora vamos testar nossa classe JDesenho.

Figura 9. Escolha Customize Code.
Vá na aba DesenhoView.java e clique no meio da janela. Um menu vai aparecer e você escolhe Customize Code.

Figura 10. Janela Code Customizer
Na primeira linha, mude a caixa do lado direito de default code para custom creation. Na caixa de texto troque o JPanel pelo nosso JDesenho:
mainPanel = new JDesenho();
Note que a variável mainPanel é do tipo JPanel. Como JDesenho herda JPanel então estamos usando polimorfismo.
Agora é só testar, apertando F6 ou clicando no ícone
.

Figura 11. Tá preto? Então funcionou.
Passo 5 - Desenhando: Para fazer mais desenho é só colocar código dentro do método paintComponent da classe JDesenho.
Por exemplo, com a classe JDesenho dessa forma:
package desenho; import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import javax.swing.JPanel; public class JDesenho extends JPanel{ @Override protected void paintComponent(Graphics g) { g.setColor(Color.white); g.fillRect(0, 0, 500, 500); g.setColor(Color.darkGray); g.fillOval(150, 200, 200, 40); g.setColor(Color.red); g.fillOval(100, 80, 150, 150); g.setColor(Color.pink); g.fillOval(120, 105, 30, 30); g.setColor(Color.blue); g.setFont(new Font("Arial Bold", Font.PLAIN, 36)); g.drawString("http://silveiraneto.net", 30, 50); } }
Você obtém esse desenho:

Figura 12. Desenho de 3 figuras ovais, um retângulo e uma String.
Você também pode carregar imagens de vários formatos e há muitas formas de se fazer isso. Nesse exemplo eu vou abrir um arquivo chamado silveira.jpg que está na pasta “/tmp”, em seguida vou desenhar ele no Graphics e fazer alguns outros desenhos por cima dele.
package desenho; import java.awt.Color; import java.awt.Graphics; import java.awt.Image; import java.awt.Image; import java.awt.Toolkit; import javax.swing.JPanel; public class JDesenho extends JPanel{ @Override protected void paintComponent(Graphics g) { g.setColor(Color.white); g.fillRect(0, 0, 500, 500); Image img = Toolkit.getDefaultToolkit().getImage("/tmp/silveira.jpg"); g.drawImage(img, 50, 55, this); g.setColor(Color.black); g.drawLine(75, 100, 75, 150); g.drawLine(75, 100, 25, 70); g.drawLine(75, 100, 125, 70); g.drawLine(75, 150, 100, 200); g.drawLine(75, 150, 50, 200); g.drawLine(75, 150, 100, 200); g.setColor(Color.yellow); g.fillArc(200, 50, 150, 150, 140, -270); } }
E vai ficar assim:

Figura 13. Corre, corre, corre!
Eu recomendo que você olhe a documentação do Graphics e do Graphics2D. Veja também pode fazer animações fazendo sua classe JDesenho implementar a interface Runnable.













January 15th, 2008 at 7:38 am
Cara,
Impressionante. Você é o primeiro cara que (gosta de opensource) && (gosta de java). Todas as pessoas com quem convivo e trabalham e usam opensource não gostam, ou pelo menos não simpatizam por Java.
[]’s e até o Campus Party.
January 15th, 2008 at 7:54 am
Eduardo, isso porque o já teve uma posição diferente da que tem hoje. Hoje a coisa tá muito mais GêPêeLada. O Java já está quase todo livre, faltando só 4% que está sendo reescrito porque não pode ser aberto por se tratar de códigos de terceiros. O Netbeans você já instala até por apt-get!
O Jonathan Schwartz (presidente internacional da Sun) tem uma visão muito de vanguarda sobre o Software Livre e isso começa já está se propagando dentro da estrutura inteira da Sun.
January 15th, 2008 at 11:11 am
Olá Silveira, ótimo post.
January 15th, 2008 at 4:37 pm
Vou guardar este post para brincar qualquer dia desses com isso. Interessante!
January 15th, 2008 at 5:30 pm
Silveira, muito divertido o post ^^
Na questão do software livre, já existe uma implementação completamente livre, o IcedTea, desenvolvido pela Red Hat (que tem aliança com a Sun no desenvolvimento do Java livre). Não tive absolutamente nenhum problema com ele até agora.
http://en.wikipedia.org/wiki/IcedTea
off-topic: qual o tema do seu desktop?
January 15th, 2008 at 9:24 pm
Muito legal teu artigo, sou um admirador da plataforma Java muito antes de terem inventado .NET, mas até aquela época eu não era apto a conseguir utilizá-la.
Eduardo Otubo, não é nenhuma crítica o que vou dizer, mas se tu estivesse aqui no RS no ano passado, no FISL 8, tu verias muita gente “faceira” defendendo Java e FSOS (Free Software and Open Source). Inclusive meu TCC, que relato no meu blog, foi desenvolver um cluster e utilizei Java para produzir as ferramentas de medição de performance. Muito legal.
Um grande abraço a todos
January 16th, 2008 at 9:00 am
Interesting. Nevertheless, an English translation would be appreciated.
January 16th, 2008 at 9:44 am
Cara, isso foi muito legal, vou deixar nos meus favoritos…
parebens pelo post
abracao
January 16th, 2008 at 2:15 pm
Ola pessoal , tudo bom?
Bom tutorial.
Mas na minha modesta opiniao, duas coisas que nao combinam:
Codigo primitivo (basico, baixo nivel entendeu né
e graficos e/ou interfaces graficas.
Veja o quanto se escreve para alcançar um resultado simples.
O ideal é que um artista grafico e um profissional de programação trabalhem juntos (nunca vi os dois *profissionais* numa mesma pessoa :-).
Dai cada um usa suas ferramentas preferidas, obtendo um melhor resultado.
Agora para coisas “simples” como luzes piscantes p/ indicar que email chegou ou conexao falhou esse caminho é viavel.Melhor ainda se usar JavaFX
Um abraço.
Marco
January 17th, 2008 at 10:59 pm
Muito interessante.
Estou me aventurando no mundo louco da bolsa de valores e tenho tido dificuldade em encontrar uma boa ferramenta free ou pelo menos com um preço acessível e boas features.
Nesse pique comecei a pensar em desenvolver algo em java para criar os gráficos com base nos dados disponibilizados pelas operadoras.
Seu artigo veio a calhar e, apesar de eu não poder desenvolver essa ferramenta agora, já sei onde encontrar uma boa referência para quando for começar.
Parabéns e continue com os dois blogs
March 4th, 2008 at 12:21 am
Cara, eu queria mudar o Variavel Declaration Code, pq no meu caso preciso usar uma biblioteca que extend JTable, ai precisava colocar algo como private AdvancedJTable Tabela ao inves do tradicional private javax.swing.JTable tabela, sacou ? Mas nao consigo alterar …….vc conseguio algo assim ? Vlw
March 4th, 2008 at 5:55 am
Imoliveira, se você quer usar uma classe que é uma subclasse da JTable então você faz o mesmo truque que eu fiz com o polimorfismo da classe JDesenho.
Você vai em “Customize Code” e coloca a sua AdvancedJTable no lugar da JTable que você colocou com o Matisse.
Qualquer dúvida é só falar.
March 21st, 2008 at 7:10 pm
Muito bom o post
porem eu gostaria de um codigo no Jframe
que possui dois botoes um CIRCULO e outro RETANGULO. E quando vc clicar no botao circulo aparecer somente um circulo na tela, e o mesmo para o retangulo se puder me ajudar
grato
March 22nd, 2008 at 7:03 am
Cara eu pude ler seu tutorial “Desenhando no NetBeans” e tive um problema em um programinha que eu estava fazendo.
O código:
package GUI;
import java.awt.Color;
import java.awt.Graphics;
import java.util.Timer;
import java.util.TimerTask;
import javax.swing.JPanel;
public class Grafico extends javax.swing.JFrame {
Repeticao r1;
private int x_grade = 0;
private int x_line = 240;
private int y_line_esquerdo = 85;
private int y_line_direito = 85;
public Grafico() {
initComponents();
r1 = new Repeticao();
}
//————Classes internas—————–
public class Meu_Desenho extends JPanel{
@Override
protected void paintComponent(Graphics g) {
//g.setColor(Color.black);
//g.fillRect(0, 0, this.getWidth(), this.getHeight());
linha_movel(g, Color.red);
}
public void linha_movel(Graphics g, Color cor){
g.setColor(cor);
g.drawLine(x_line, 85, x_line, 85);
}
}
public class Repeticao extends TimerTask{
public Repeticao(){
Timer t1 = new Timer();
t1.schedule(this,0, 1000);
}
@Override
public void run() {
x_line–;
jPanel1.repaint();
}
}
//———————————————–
//
private void initComponents() {
jPanel1 = new Meu_Desenho();
setDefaultCloseOperation(javax.swing.WindowConstants.DISPOSE_ON_CLOSE);
setTitle(”Gráfico”);
setResizable(false);
jPanel1.setBackground(new java.awt.Color(255, 255, 255));
jPanel1.setForeground(new java.awt.Color(255, 255, 255));
jPanel1.setLayout(new org.netbeans.lib.awtextra.AbsoluteLayout());
javax.swing.GroupLayout layout = new javax.swing.GroupLayout(getContentPane());
getContentPane().setLayout(layout);
layout.setHorizontalGroup(
layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
.addComponent(jPanel1, javax.swing.GroupLayout.DEFAULT_SIZE, 237, Short.MAX_VALUE)
);
layout.setVerticalGroup(
layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
.addComponent(jPanel1, javax.swing.GroupLayout.DEFAULT_SIZE, 92, Short.MAX_VALUE)
);
setBounds(0, 500, 245, 125);
}//
// Variables declaration - do not modify
private javax.swing.JPanel jPanel1;
// End of variables declaration
public static void main(String args[]) {
java.awt.EventQueue.invokeLater(new Runnable() {
public void run() {
new Grafico().setVisible(true);
}
});
}
}
A dúvida:
Esse código vai escrevendo uma linha na tela, ponto a ponto a cada 1 segundo. Porém não estou conseguindo colocar um fundo preto de forma que todo linha seja toda visível. Quando coloco o fundo preto, o rastro da linha é apagado.
March 22nd, 2008 at 7:13 am
Cara também tentei colocando um figura preta no fundo, mas o resultado foi o mesmo. Ao passar sobre a figura preta a seta fica por trás da mesma e não sobre ela.
March 22nd, 2008 at 8:32 am
Tive uma ideia!
Como faço para pintar um pixel, ou seja, um ponto no JPanel?
March 22nd, 2008 at 7:04 pm
Julierme, para criar qualquer tipo de gráficos, é só usar métodos da Graphics. Dê uma olhada na documentação aqui:
http://java.sun.com/j2se/1.4.2/docs/api/java/awt/Graphics.html
Uma dica, um retângulo bem pequeno.
April 13th, 2008 at 6:29 pm
Silvera, segui seu exemplo para montar um programa mas estou com dúvida em como colocar uma JList ,usando esse mesmo código, sigo alguns passos de criação de JList mas ela numca aparece no meu painel.
Obrigado
May 25th, 2008 at 7:26 pm
Onde encontro o package org.netbeans.lib.awtextra.AbsoluteLayout()?
Obrigada
vambsilva
November 17th, 2008 at 9:08 am
como que eu faço para minimizar o jFrame e os desenhos tipo drawArcs não sumir quando restaurar o jFrame?