Imagens em projetos Java com Maven e NetBeans

1. Visão geral

Neste material, veremos como exibir imagens de diferentes formas num projeto criado com o NetBeans, gerenciado pelo Maven e que utiliza classes do pacote javax.swing.

O que você vai aprender

• Onde guardar imagens (recursos) em um projeto Maven
• Exibir uma figura em um JLabel pela propriedade icon
• Conferir se a figura é referenciada a partir do projeto
• Exibir uma imagem de fundo em um JFrame com um JPanel personalizado

O que você vai precisar

• NetBeans com JDK instalado
• Uma figura (por exemplo, figura.jpg)

2. Projeto e pasta de recursos

Novo projeto

No NetBeans, clique File >> New Project para criar um projeto. Na tela a seguir, escolha Java with Maven >> Java Application. A seguir, escolha um nome para o seu projeto e o diretório em que ele ficará localizado. Os demais campos você pode manter com seu valor padrão. Clique em Finish.

Pasta para recursos

Os recursos (como imagens) num projeto gerenciado pelo Maven devem ser armazenados numa pasta chamada resources. Ela deve ser subpasta de src/main. No NetBeans, clique na aba Files, no canto superior esquerdo. A seguir, crie a pasta resources como descrito. Veja a Figura 2.2.1.

Figura 2.2.1 – Criando a pasta resources dentro de src/main.

Como subpasta de resources, crie uma pasta chamada images. A Figura 2.2.2 mostra o resultado esperado.

Figura 2.2.2 – A pasta images dentro de resources.

Arraste a sua figura para dentro da pasta images. Veja a Figura 2.2.3.

Figura 2.2.3 – A figura dentro da pasta images.

3. Exibindo uma figura em um JLabel

Agora vamos criar uma tela adicionando um JFrame ao projeto. Para tal, primeiro volte à aba Projects do NetBeans no canto superior esquerdo. Depois, clique com o direito no pacote principal do projeto (caixinha amarela) e escolha New >> JFrame Form. Veja a Figura 2.3.1.

Figura 2.3.1 – Criando um JFrame Form.

A seguir, da aba Palette à direita, arraste um Label e solte no JFrame. Ajuste seu tamanho como desejar, talvez como na Figura 2.3.2.

Figura 2.3.2 – O JLabel que exibirá a figura.

Clique com o direito sobre o JLabel criado e escolha Edit Text. Apague todo o texto. Clique novamente com o direito sobre o JLabel e escolha Change Variable Name. Escolha o nome imagemLabel.

Como mostra a Figura 2.3.3, mantenha o JLabel selecionado e, no canto inferior direito, encontre a sua propriedade chamada icon. Clique em ... do lado desta opção.

Figura 2.3.3 – A propriedade icon do JLabel.

Na tela a seguir, exibida pela Figura 2.3.4, mantenha a opção package configurada como images e clique Import to Project.

Figura 2.3.4 – Importando a figura para o projeto.

A seguir, escolha a figura desejada. Como ilustra a Figura 2.3.5, certifique-se de selecionar a figura que se encontra na pasta images de seu projeto.

Figura 2.3.5 – Selecionando a figura na pasta images.

A seguir, expanda as pastas até encontrar seu pacote principal. Clique em Finish. Veja a Figura 2.3.6.

Figura 2.3.6 – Escolhendo a pasta de destino.

Depois disso, veja um resultado parecido com aquele que a Figura 2.3.7 exibe. Clique em OK a seguir.

Figura 2.3.7 – A figura escolhida, com prévia.

4. Referenciando a figura a partir do projeto

A seguir, clique uma vez mais em ... do lado de icon nas propriedades do JLabel (deixe-o selecionado para isso). Depois disso, clique em ... do lado de File (nome da figura) mantendo a opção Image Within Project selecionada. Você deverá ver a pasta src/main/resources também como opção para obter a imagem. Expanda e selecione a figura. Clique Ok e Ok a seguir. Veja a Figura 2.3.8.

Figura 2.3.8 – Selecionando a figura em src/main/resources.

Se desejar certificar-se de que a figura está sendo referenciada a partir do projeto (e não de um diretório externo), clique em Source, encontre o método initComponents e "descubra" seu código clicando no botão + do lado do número da linha. A seguir, encontre a chamada ao método setIcon do JLabel. Veja a Figura 2.3.9.

Figura 2.3.9 – A chamada a setIcon usa o caminho /images/figura.jpg, dentro do projeto.

5. Imagem de fundo em um JFrame

Vejamos como exibir uma imagem de fundo em um JFrame. Comece clicando com o direito no pacote principal do projeto e escolha New >> JFrame Form. Seu nome pode ser algo como TelaComImagemDeFundo. Veja a Figura 2.4.1.

Figura 2.4.1 – Criando a tela TelaComImagemDeFundo.

A seguir, clique com o direito no nome do pacote e escolha New >> Java Class. Escolha o nome ImagePanel. Veja a sua definição no Código 2.4.1. Esta classe será responsável por definir um painel que toma a tela inteira e exibe a imagem desejada.

ImagePanel.java · Código 2.4.1

import javax.swing.*;
import java.awt.*;
import java.io.IOException;
import javax.imageio.ImageIO;
import java.net.URL;

public class ImagePanel extends JPanel {
    //armazenará uma referência à imagem
    private Image backgroundImage;

    public ImagePanel(URL url) {
        //leitura da imagem a partir de um objeto URL
        //URL é o tipo de retorno de getResource
        //deve ser utilizado em projetos Maven
        try {
            backgroundImage = ImageIO.read(url);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    //aqui dizemos que, depois de o componente ser desenhado, desenhamos também a imagem sobre ele
    //a partir das coordenadas x = 0 e y = 0
    @Override
    public void paintComponent(Graphics g) {
        super.paintComponent(g);
        g.drawImage(backgroundImage, 0, 0, this);
    }
}

De volta ao arquivo TelaComImagemDeFundo.java, em modo Design, arraste e solte um Panel ao frame principal. A seguir, expanda-o fazendo com que tome o frame inteiro. Veja a Figura 2.4.2.

Figura 2.4.2 – O Panel ocupando o frame inteiro.

Agora em modo Source, ainda no arquivo TelaComImagemDeFundo.java, encontre o construtor padrão da classe e ajuste-o como no Código 2.4.3. Observe que o Panel que arrastamos será responsável por abrigar os componentes que desejamos que a tela possua (botões, campos textuais etc). Por outro lado, o ImagePanel abrigará o Panel que foi arrastado.

TelaComImagemDeFundo.java · Código 2.4.3

...
import java.awt.BorderLayout;

public class TelaComImagemDeFundo extends javax.swing.JFrame {

    public TelaComImagemDeFundo() {
        initComponents();
        ImagePanel imagePanel = new ImagePanel(getClass().getResource("/images/figura.jpg"));
        this.setContentPane(imagePanel);
        this.setLayout(new BorderLayout());
        // Certifique-se de que todos os componentes são adicionados ao painel da imagem
        imagePanel.add(jPanel1);
        // Certifique-se de que a janela está corretamente dimensionada
        this.pack();
    }
...

De volta ao modo Design, ainda no arquivo TelaComImagemDeFundo.java, arraste e solte os componentes que desejar. Neste exemplo, arrastamos apenas dois botões para fins de ilustração. Veja a Figura 2.4.3.

Figura 2.4.3 – Componentes sobre o Panel.

6. Painel transparente e janelas do NetBeans

Ainda precisamos ajustar um detalhe: tornar o Panel que abriga os componentes da tela transparente. Assim, o Panel que o abriga — e contém a imagem — poderá aparecer. Para tal, clique com o direito no Panel — aba Navigator, que geralmente fica no canto inferior esquerdo — escolha Properties e encontre a propriedade opaque. Desmarque a caixa e clique Close. Veja a Figura 2.4.4.

Figura 2.4.4 – Desmarcando a propriedade opaque do Panel.

Figura 2.4.5 – Window >> Navigator.

Também é possível ajustar o NetBeans para que ele se apresente como na forma original. Geralmente isso é útil para os casos em que você alterou algumas janelas ou fechou algumas sem querer. Se desejar, faça isso com a opção Window >> Reset Windows, como na Figura 2.4.6.

Figura 2.4.6 – Window >> Reset Windows.

7. Encerramento

Você guardou figuras em src/main/resources/images, exibiu uma delas em um JLabel pela propriedade icon e criou um ImagePanel para desenhar uma imagem de fundo em um JFrame, sobre a qual ficam os demais componentes.