Manipulando imagens em um aplicativo GUI

Conteúdo

• Introdução
• Criando o formulário do aplicativo
• Adicionando um pacote na imagem
• Exibindo a imagem no rótulo
• Construindo e executando o aplicativo
• Exibindo a imagem como plano de fundo na moldura
• Criando código personalizado
• Resumo
• Consulte também

Para concluir este tutorial, você precisa dos seguintes recursos e softwares.

Software ou recurso	Versão necessária
NetBeans IDE	Versão 6.9 ou posterior
Java Development Kit (JDK)	Versão 6 ou 7

Introdução

A manipulação de imagens em um aplicativo é um problema comum para muitos programadores iniciantes em Java. A forma padrão de acessar as imagens em um aplicativo Java é através do método getResource(). Este tutorial mostra como usar o construtor de GUI do IDE para gerar o código a fim de que inclua imagens (e outros recursos) em seu aplicativo. Além disso, você aprenderá como personalizar a forma na qual o IDE gera o código de manipulação de imagens.

O aplicativo resultante deste tutorial será um JFrame simples que contém um JLabel que exibe uma única imagem.

Criando a do aplicativo

1. Escolha Arquivo > Novo projeto.
2. No Assistente de novo projeto, selecione Java > Aplicativo Java e clique em Próximo.
3. Em Nome do projeto, digite ImageDisplayApp.
4. Desmarque a caixa de verificação Criar classe principal.
5. Certifique-se de que a caixa de verificação Definir como projeto principal esteja selecionada.
   
6. Clique em Terminar.

Criando o formulário do aplicativo

Nesta seção, você cria o formulário JFrame e adiciona um JLabel ao formulário.

Para criar o formulário JFrame:

1. Na janela Projetos, expanda o nó ImageDisplayApp.
2. Clique com o botão direito do mouse no nó Pacotes de código-fonte e escolha Novo> Formulário JFrame.
3. Em Nome da classe, digite ImageDisplay.
4. Em Nome do pacote, digite org.me.myimageapp.
5. Clique em Concluir.

Para adicionar o JLabel:

• Na Paleta, selecione o componente Rótulo e arraste-o para o JFrame.

Até este momento, o formulário deveria ser semelhante a imagem seguinte:

Adicionando um pacote na imagem

Ao usar imagens ou outros recursos em um aplicativo, você normalmente cria um pacote Java separado para os recursos. No seu sistema de arquivos local, um pacote corresponde a uma pasta.

Para criar um pacote para a imagem:

1. Na janela Projetos, clique com o botão direito do mouse no nó org.me.myimageapp e escolha Novo > Pacote Java.
   
2. No Assistente de novo pacote, adicione .resources a org.me.myimageapp para que o novo pacote seja denominado org.me.myimageapp.resources.
3. Clique em Concluir.

Na janela Projetos, você deveria ver a imagem dentro do pacote org.me.myimageapp.resources.

Exibindo a imagem no rótulo

Neste aplicativo, a imagem será incorporada em um componente JLabel.

Para adicionar a imagem ao rótulo:

1. No Designer de GUI, selecione o rótulo que adicionou ao seu formulário.
2. Na janela Propriedades, clique na categoria Propriedades e role até a propriedade icon.
3. Clique no botão de reticências.
4. Na caixa de diálogo da propriedade icon, clique em Importar ao projeto.
   
5. Na seletor de arquivos, vá até qualquer imagem que esteja em seu sistema que deseje usar. Em seguida, clique em Próximo.
6. Na página Selecionar pasta de destino do assistente, selecione a pasta resources e clique em Terminar.
   

Após clicar em Terminar, o IDE faz o seguinte:

• Copia a imagem no seu projeto. Portanto, quando você constrói e distribui o aplicativo, a imagem está incluída no arquivo JAR distribuível.
• Gera o código na classe ImageDisplay para acessar a imagem.
• Exibe a sua imagem no rótulo na visualização Desenho do seu formulário.

Neste momento, você pode realizar alguns procedimentos simples para melhorar a aparência do formulário, como:

• Na janela Propriedades, selecione a propriedade text e exclua jLabel1. Tal valor foi gerado pelo construtor de GUI para exibir o texto do rótulo. No entanto, você está usando o rótulo para exibir uma imagem em vez do texto, de modo que o texto não é necessário.
• Arraste o botão para centralizá-lo no formulário.

Para visualizar o código gerado:

1. No Designer de GUI, clique na aba Código-fonte.
2. Role até linha que diz Código gerado.
3. Clique no sinal de mais (+) à esquerda da linha Código gerado para exibir o código que o Designer de GUI gerou.

A linha-chave é a seguinte:

jLabel1.setIcon(new javax.swing.ImageIcon(getClass().getResource("/org/me/myimageapp/resources/park-sculpture.jpg"))); // NOI18N

Visto que você usou o Editor de propriedades da propriedade icon do jLabel1, o IDE gerou o método setIcon. O parâmetro de tal método contém uma chamada ao método getResource() em uma classe anônima interna de ImageIcon. Observe que o caminho gerado da imagem correspondente com sua localização na estrutura de pacote do aplicativo.

Observações:

• Se você usar a opção Imagem externa no editor de propriedades do ícone, o IDE gerará um caminho absoluto para a imagem em vez de copiar a imagem no seu projeto. Portanto, a imagem seria exibida ao executar o aplicativo no sistema, mas possivelmente não seria exibida ao executar o aplicativo em outro sistema.
• O método getResource também é útil para acessar outros tipos de recursos, como arquivos de texto que contêm dados que o aplicativo pode precisar usar.

Para registrar manipuladores de evento para eventos do mouse no JLabel:

Clique com o botão direito do mouse no JLabel e escolha Eventos > Mouse > mouseClicado/mousePressionado/mouseSolto no menu suspenso.
Um manuseador de evento é gerado para o evento correspondente.

Observação: você pode obter coordenadas do mouse (por exemplo, a localização de um clique do mouse) no manipulador de evento usando os métodos event.getPoint(), event.getX() ou event.getY(). Consulte Classe MouseEvent para obter detalhes.

Exibindo a imagem como plano de fundo na moldura

Não há nenhum suporte direto para uma imagem de segundo plano do JFrame no Construtor GUI, já que não há nenhum suporte direto para uma imagem de segundo plano do JFrame no Swing.
De qualquer forma, há diversas formas indiretas de atingir tal objetivo. Neste aplicativo, a JLabel com a imagem será embutida dentro do componente JFrame, enquanto que um JPanel transparente será colocado sobre a JLabel e usado como o principal de todos os componentes.

Para adicionar um JPanel transparente na JFrame com a imagem:

1. escolha Arquivo > Novo projeto.
2. No Assistente de novo projeto, selecione Java > Aplicativo Java e clique em Próximo.
3. Em Nome do projeto, digite BackgroundImageApp.
4. Desmarque a caixa de verificação Criar classe principal.
5. Certifique-se de que a caixa de verificação Definir como projeto principal esteja selecionada.
6. Na janela Projetos, expanda o nó BackgroundImageApp.
7. Clique com o botão direito do mouse no nó Pacotes de código-fonte e escolha Novo> Formulário JFrame.
8. Em Nome da classe, digite ImageDisplay.
9. Em Nome do pacote, digite org.me.mybackgroundapp.
10. Clique em Terminar.
11. Na visualização Desenho, clique com o botão direito do mouse na JFrame e selecione Definir layout > Layout da borda no menu pop-up.
12. Clique com o botão direito do mouse na JFrame e selecione Adicionar da paleta > Contêineres Swing > Painel no menu pop-up.
13. Na janela Propriedades, desmarque a propriedade opaque do jPanel.
14. Clique com o botão direito do mouse na JFrame e selecione Adicionar da paleta > Contêineres Swing > Rótulo no menu pop-up.
15. Na janela Projetos, clique com o botão direito do mouse no nó org.me.mybackgroundapp e escolha Novo > Pacote Java.
16. No Assistente de novo pacote, adicione .resources a org.me.mybackgroundapp para que o novo pacote seja denominado org.me.mybackgroundapp.resources.
17. Clique em Terminar.
18. No Designer de GUI, selecione o rótulo que adicionou ao seu formulário.
19. Na janela Propriedades, clique na categoria Propriedades e role até a propriedade icon.
20. Clique no botão de reticências.
21. Na caixa de diálogo da propriedade icon, clique em Importar ao projeto.
22. Na seletor de arquivos, vá até qualquer imagem que esteja em seu sistema que deseje usar. Em seguida, clique em Próximo.
23. Na página Selecionar pasta de destino do assistente, selecione a pasta resources e clique em Terminar.
24. No navegador, clique com o botão direito do mouse no jPanel e escolha Propriedades no menu pop-up.
25. Na caixa de dialogo Propriedades, defina as propriedades Grid X, Grid Y, Weight X e Weight Y como 1 e a propriedade Fill como Both. Clique em Fechar.
26. Repita as etapas 24 e 25 para o jLabel.
    O segundo plano está pronto. Agora, você pode arrastar um jLabel e um jTextField ao jPanel a partir da Paleta, por exemplo. Ambos serão exibidos sobre a imagem de segundo plano.
    .

A vantagem da solução descrita é que a imagem de segundo plano é mostrada no momento do desenho e no tempo de execução.

Construindo e executando o aplicativo

Agora que gerou o código para acessar e exibir a imagem, você pode construir e executar o aplicativo para certificar-se de que a imagem esteja sendo acessada.

Você precisa, primeiro, definir a classe principal do projeto. Quando você define a classe principal, o IDE sabe quais classes executar quando o projeto é executado. Além disso, isso garante que o elemento Main-Class no arquivo JAR do projeto seja gerado quando você construir o aplicativo.

Para definir a classe principal do projeto:

1. Clique com o botão direito do mouse no nó do projeto ImageDisplayApp e escolha Propriedades.
2. Na caixa de diálogo Propriedades do projeto, selecione a categoria Executar.
3. Clique no botão Procurar ao lado do campo Classe principal. Em seguida, selecione a classe org.me.myimageapp.ImageDisplay e clique no botão Selecionar classe principal.

Para construir o projeto :

• Escolha Executar > Limpar e construir projeto principal.

Você pode ver os produtos construídos do aplicativo na janela Arquivos. A pasta build contém a classe compilada. A pasta dist contém um arquivo JAR executável que contém a classe compilada e a imagem.

Para executar o projeto:

• Escolha Executar > Executar projeto principal (F6).

Criando código personalizado

Em muitos aplicativos, a imagem exibida não é determinada estaticamente como neste exemplo. Por exemplo, a imagem a ser exibida pode ser determinada por algo em que o usuário clica.

Se tiver que ser capaz de escolher a imagem a ser exibida programaticamente, você pode escrever seu próprio código personalizado para acessar e exibir recursos. O IDE impede que você escreva o código diretamente nos "blocos protegidos" da visualização Código-fonte que contém o código gerado pelo construtor de GUI. No entanto, você pode inserir o código nos blocos protegidos através dos editores de propriedades que podem ser acessados através da janela Propriedades. Ao usar os editores de propriedades desta forma, você garante que o código personalizado não se perda ao fazer alterações de design no construtor de GUI.

Por exemplo, para escrever o código personalizado de uma propriedade icon do JLabel:

1. Selecione JLabel na visualização Desenho ou na janela Inspetor.
2. Na janela Propriedades, clique no botão de reticências (...) ao lado da propriedade icon.
3. Na lista suspensa da parte superior da caixa de diálogo, selecione a opção Código personalizado.

A opção Código personalizado deste editor de propriedades permite que você mesmo preencha o parâmetro do método setIcon. Você pode preencher este parâmetro com a lógica necessária ou com uma chamada a um método diferente que você escreveu em outro lugar na classe.

Resumo

Este tutorial mostrou como acessar imagens a partir de um aplicativo que você criou no NetBeans IDE. A manipulação de imagens é abordada mais adiante no Tutorial do Java.

Observação: o exemplo oferecido neste tutorial é muito semelhante ao primeiro exemplo de Como usar a seção Ícones do Tutorial do Java. A diferença é que o código gerado neste tutorial usa o método setIcon do JLabel para aplicar o ícone no rótulo. No exemplo do Tutorial do Java, o ícone é aplicado no rótulo ao ser passado através do seu construtor.

Consulte também

• Introdução à construção de GUIs
• Criando um GUI Swing no NetBeans IDE
• Trilha de aprendizado dos aplicativos Java GUI
• Trilha do aprendizado do desenvolvimento geral em Java
• Construtor de GUIs - Perguntas freqüentes