| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
| <!--Copyright (c) 2009, 2010, Oracle and/or its affiliates. All rights reserved. |
| --> |
| <html> |
| <head> |
| <meta http-equiv="content-type" content="text/html; charset=UTF-8"> |
| <meta name="description" content="Tutorial that shows how to handle images and |
| other resources when creating Swing applications in NetBeans IDE"> |
| <meta name="keywords" content="NetBeans, IDE, integrated development environmenttutorial, guide, user, documentation, open source"> |
| <link rel="stylesheet" type="text/css" href="../../../netbeans.css"> |
| <title>Tratando Imagens em uma Aplicação Java GUI - Tutorial do NetBeans IDE 7.1</title> |
| </head> |
| <body> |
| <h1>Tratando Imagens em uma Aplicação Java GUI</h1> |
| |
| |
| <p><b>Conteúdo</b></p> |
| <img alt="O conteúdo desta página se aplica ao NetBeans IDE 6.9 e versão mais recente" class="stamp" src="../../../images_www/articles/69/netbeans-stamp-69-70-71.png" title="O conteúdo desta página se aplica ao NetBeans IDE 6.9 e versão mais recente"> |
| <ul class="toc"> |
| <li><a href="#intro">Introdução</a></li> |
| <li><a href="#form">Criando o Form da Aplicação</a></li> |
| <li><a href="#package">Adicionando um Pacote na Imagem</a></li> |
| <li><a href="#displaying">Exibindo a Imagem no Label</a></li> |
| <li><a href="#building">Construindo e Executando a Aplicação</a></li> |
| <li><a href="#background">Exibindo a Imagem como Plano de Fundo no Quadro</a></li> |
| <li><a href="#custom">Criando Código Personalizado</a></li> |
| <li><a href="#summary">Resumo</a></li> |
| <li><a href="#seealso">Consulte Também</a></li> |
| </ul> |
| |
| |
| <p> |
| <b>Para concluir este tutorial, você precisa dos seguintes recursos e softwares.</b> |
| </p> |
| <table> |
| <tbody> |
| <tr> |
| <th class="tblheader" scope="col">Software ou Recurso</th> |
| <th class="tblheader" scope="col">Versão Necessária</th> |
| </tr> |
| <tr> |
| <td class="tbltd1"><a href="http://www.netbeans.org/downloads/index.html">NetBeans IDE</a></td> |
| <td class="tbltd1">Versão 6.9 ou posterior </td> |
| </tr> |
| <tr> |
| <td class="tbltd1"><a href="http://www.oracle.com/technetwork/java/javase/downloads/index.html">Java Development Kit (JDK)</a></td> |
| <td class="tbltd1">Versão 6 ou 7</td> |
| </tr> |
| </tbody> |
| </table> |
| |
| |
| <a name="intro"></a><h2>Introdução</h2> |
| <p>O tratamento de imagens em uma aplicação é um problema comum para muitos programadores iniciantes em Java. A forma padrão de acessar as imagens em uma aplicação Java é por meio do método <code><a href="http://download.oracle.com/javase/6/docs/api/java/lang/ClassLoader.html#getResource(java.lang.String)" target="_blank">getResource()</a></code>. Este tutorial mostra como usar o GUI Builder do IDE para gerar o código a fim de que inclua imagens (e outros recursos) em sua aplicação. Além disso, você aprenderá como personalizar a forma na qual o IDE gera o código de tratamento de imagens.</p> |
| <p>A aplicação resultante deste tutorial será um JFrame simples que contém um JLabel que exibe uma única imagem.</p> |
| <h2>Criando a Aplicação</h2> |
| <ol> |
| <li>Escolha Arquivo > Novo Projeto.</li> |
| <li>No assistente Novo Projeto, selecione Java > Aplicação Java e clique em Próximo.</li> |
| <li>Em Nome do Projeto, digite <code>ImageDisplayApp</code>.</li> |
| <li>Desmarque a caixa de seleção Criar Classe Principal.</li> |
| <li>Certifique-se de que a caixa de seleção Definir como Projeto Principal esteja selecionada.<br> <a href="../../../images_www/articles/70/java/gui-image-display/newproj.png" rel="lytebox" title="Assistente Novo Projeto - Clique para Aumentar"> <img alt="Assistente Novo Projeto" class="margin-around" height="320" src="../../../images_www/articles/70/java/gui-image-display/newproj-reduced.png" width="517"></a></li> |
| <li>Clique em Finalizar.</li> |
| </ol> |
| |
| <a name="form"></a><h2>Criando o Form da Aplicação</h2> |
| |
| <p>Nesta seção, você cria o form JFrame e adiciona um JLabel ao form.</p> |
| <p><b>Para criar o form JFrame:</b></p> |
| <ol> |
| <li>Na janela Projetos, expanda o nó ImageDisplayApp.</li> |
| <li>Clique com o botão direito do mouse no nó Pacotes de Código-fonte e escolha Novo > Form JFrame.</li> |
| <li>Em Nome da Classe, digite <code>ImageDisplay</code>.</li> |
| <li>Em Nome do Pacote, digite <code>org.me.myimageapp</code>.</li> |
| <li>Clique em Finalizar.</li> |
| </ol> |
| |
| <p><b>Para adicionar o JLabel:</b></p> |
| <ul> |
| <li>Na Paleta, selecione o componente Label e arraste-o para o JFrame.</li> |
| </ul> |
| <p>Até este momento, o form deve ser semelhante à seguinte imagem:</p> |
| <img alt="Gerado form com o label adicionado" class="margin-around" height="309" src="../../../images_www/articles/70/java/gui-image-display/form.png" width="409"> <a name="package"></a><h2>Adicionando um Pacote na Imagem</h2> |
| <p>Ao usar imagens ou outros recursos em uma aplicação, normalmente você cria um pacote Java separado para os recursos. No seu sistema de arquivos local, um pacote corresponde a uma pasta.</p> |
| |
| <p><b>Para criar um pacote para a imagem:</b></p> |
| <ol> |
| <li>Na janela Projetos, clique com o botão direito do mouse no nó <code>org.me.myimageapp</code> e escolha Novo > Pacote Java.<br> <img alt="Adicionando um novo pacote Java" class="margin-around" height="106" src="../../../images_www/articles/70/java/gui-image-display/package.png" width="497"></li> |
| |
| <li>No Assistente Novo Pacote, adicione <code>.resources</code> a <code>org.me.myimageapp</code> para que o novo pacote seja denominado <code>org.me.myimageapp.resources</code>.</li> |
| <li>Clique em Finalizar.</li> |
| </ol> |
| <p>Na janela Projetos, você deve ver a imagem dentro do pacote <code>org.me.myimageapp.resources</code>.</p> |
| <img alt="Janela Projetos" class="margin-around" height="90" src="../../../images_www/articles/70/java/gui-image-display/project-with-imagepack.png" width="233"> <a name="displaying"></a><h2>Exibindo a Imagem no Label</h2> |
| |
| <p>Nesta aplicação, a imagem será incorporada em um componente JLabel.</p> |
| |
| <p><b>Para adicionar a imagem ao label:</b></p> |
| <ol> |
| <li>No Designer de GUI, selecione o label que adicionou ao seu form.</li> |
| <li>Na janela Propriedades, clique na categoria Propriedades e role até a propriedade do ícone.</li> |
| <li>Clique no botão de reticências (...).</li> |
| <li>Na caixa de diálogo da propriedade do ícone, clique em Importar para o Projeto.<br> <img alt="editor de propriedade do ícone" class="margin-around" height="396" src="../../../images_www/articles/70/java/gui-image-display/importimage.png" width="480"></li> |
| <li>Na seletor de arquivos, vá até qualquer imagem que esteja em seu sistema que você queira usar. Em seguida, clique em Próximo.</li> |
| <li>Na página Selecionar Pasta de Destino do assistente, selecione a pasta <code>recursos</code> e clique em Finalizar.<br> <img alt="Selecione Pasta de Destino página do assistente Importar Imagens para Projeto" class="margin-around" height="364" src="../../../images_www/articles/70/java/gui-image-display/targetfolder.png" width="534"></li> |
| </ol> |
| |
| <p>Após clicar em Finalizar, o IDE faz o seguinte:</p> |
| <ul> |
| <li>Copia a imagem para seu projeto. Portanto, quando você constrói e distribui a aplicação, a imagem é incluída no arquivo JAR distribuível.</li> |
| <li>Gera o código na classe ImageDisplay para acessar a imagem.</li> |
| <li>Exibe a sua imagem no label na view Design do seu form.</li> |
| </ul> |
| |
| <p>Neste momento, você pode realizar alguns procedimentos simples para melhorar a aparência do form, como:</p> |
| <ul> |
| <li>Na janela Propriedades, selecione a propriedade <code>text</code> e delete <code>jLabel1</code>. Tal valor foi gerado pelo GUI Builder para exibir o texto do label. No entanto, você está usando o label para exibir uma imagem em vez do texto, de modo que o texto não seja necessário.</li> |
| <li>Arraste o botão para centralizá-lo no form.</li> |
| </ul> |
| |
| <img alt="Tela mostrando a view Design da classe ImageDisplay com a imagem centralizada." class="margin-around" height="266" src="../../../images_www/articles/70/java/gui-image-display/centered.png" width="386"> |
| |
| |
| <p><b>Para exibir o código gerado:</b></p> |
| <ol> |
| <li>No Designer de GUI, clique na guia Código-fonte.</li> |
| <li>Role até linha que diz Código Gerado.</li> |
| <li>Clique no sinal de mais (+) à esquerda da linha Código Gerado para exibir o código que o Designer de GUI gerou.</li> |
| </ol> |
| <p>A linha-chave é a seguinte:</p> |
| |
| <pre class="examplecode">jLabel1.setIcon(new javax.swing.ImageIcon(getClass().getResource("/org/me/myimageapp/resources/park-sculpture.jpg"))); // NOI18N</pre> |
| |
| <p>Visto que você usou o editor de propriedades da propriedade do <code>Ícone</code> do <code>jLabel1</code>, o IDE gerou o método <code>setIcon</code>. O parâmetro de tal método contém uma chamada ao método <code><a href="http://download.oracle.com/javase/6/docs/api/java/lang/ClassLoader.html#getResource(java.lang.String)" target="_blank">getResource()</a></code> em uma classe anônima interna de <code>ImageIcon</code>. Observe que o caminho gerado da imagem correspondente à sua localização na estrutura de pacote da aplicação.</p> |
| |
| <p><b>Observações: </b></p> |
| <ul> |
| <li class="notes">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 a aplicação no sistema, mas possivelmente não seria exibida ao executar a aplicação em outro sistema.</li> |
| <li class="notes">O método <code>getResource</code> também é útil para acessar outros tipos de recursos, como arquivos de texto que contêm dados que a aplicação talvez precise usar.</li> |
| </ul> |
| <p><b>Para registrar handlers de evento para eventos do mouse no JLabel:</b></p> |
| <p> |
| Clique com o botão direito do mouse no JLabel e escolha Eventos > Mouse > mouseClicado/mousePressionado/mouseSolto no menu pop-up.<br>Um handler de evento é gerado para o evento correspondente.</p> |
| <p class="notes"><b>Observação:</b> você pode obter coordenadas do mouse (por exemplo, a localização de um clique do mouse) no handler de evento usando os métodos <code>event.getPoint()</code>, <code>event.getX()</code> ou <code>event.getY()</code>. Consulte <a href="http://docs.oracle.com/javase/1.4.2/docs/api/java/awt/event/MouseEvent.html">Classe MouseEvent</a> para obter detalhes.</p> |
| |
| <a name="background"></a> |
| <h2>Exibindo a imagem como Plano de Fundo no Quadro</h2> |
| |
| <p> Não há nenhum suporte direto para uma imagem de segundo plano do JFrame no GUI Builder, já que não há nenhum suporte direto para uma imagem de segundo plano do JFrame no Swing.<br> De qualquer forma, há diversas formas indiretas de atingir tal objetivo. Nesta aplicação, o JLabel com a imagem será embutido dentro do componente JFrame, enquanto que um JPanel transparente será colocado sobre o JLabel e usado como o principal de todos os componentes.</p> |
| |
| <p><b>Para adicionar um JPanel transparente na JFrame com a imagem:</b></p> |
| <ol> |
| <li>Escolha Arquivo > Novo Projeto.</li> |
| <li>No assistente Novo Projeto, selecione Java > Aplicação Java e clique em Próximo.</li> |
| <li>Em Nome do Projeto, digite <code>BackgroundImageApp</code>.</li> |
| <li>Desmarque a caixa de seleção Criar Classe Principal.</li> |
| <li>Certifique-se de que a caixa de seleção Definir como Projeto Principal esteja selecionada.</li> |
| <li>Na janela Projetos, expanda o nó <code>BackgroundImageApp</code>.</li> |
| <li>Clique com o botão direito do mouse no nó Pacotes de Código-fonte e escolha Novo > Form JFrame.</li> |
| <li>Em Nome da Classe, digite <code>ImageDisplay</code>.</li> |
| <li>Em Nome do Pacote, digite <code>org.me.mybackgroundapp</code>.</li> |
| <li>Clique em Finalizar.</li> |
| <li>Na view Design, clique com o botão direito do mouse em JFrame e selecione Definir Layout > Layout de Conjunto de Grades no menu pop-up. </li> |
| <li>Clique com o botão direito do mouse em JFrame e selecione Adicionar da Paleta > Contêineres Swing > Painel no menu pop-up. </li> |
| <li>Na janela Propriedades, desmarque a propriedade <code>opaque</code> do jPanel.</li> |
| <li>Clique com o botão direito do mouse em JFrame e selecione Adicionar da Paleta > Contêineres Swing > Label no menu pop-up.</li> |
| <li>Na janela Projetos, clique com o botão direito do mouse no nó <code>org.me.mybackgroundapp</code> e escolha Novo > Pacote Java.</li> |
| |
| <li>No assistente Novo Pacote, adicione <code>.resources</code> a <code>org.me.mybackgroundapp</code> para que o novo pacote seja denominado <code>org.me.mybackgroundapp.resources</code>.</li> |
| <li>Clique em Finalizar.</li> |
| <li>No Designer de GUI, selecione o label que adicionou ao seu form.</li> |
| <li>Na janela Propriedades, clique na categoria Propriedades e role até a propriedade do ícone.</li> |
| <li>Clique no botão de reticências (...). </li> |
| <li>Na caixa de diálogo da propriedade do ícone, clique em Importar para o Projeto.</li> |
| <li>Na seletor de arquivos, vá até qualquer imagem que esteja em seu sistema que você queira usar. Em seguida, clique em Próximo.</li> |
| <li>Na página Selecionar Pasta de Destino do assistente, selecione a pasta Recursos e clique em Finalizar.</li> |
| <li>No navegador, clique com o botão direito do mouse em jPanel e escolha Propriedades no menu pop-up. </li> |
| <li>Na caixa de dialogo Propriedades, defina as propriedades <code>Grid X</code>, <code>Grid Y</code>, <code>Weight X</code> e <code>Weight Y</code> como <code>1</code> e a propriedade <code>Fill</code> como <code>Both</code>. Clique em Fechar. </li> |
| <li>Repita as etapas 24 e 25 para o jLabel.<br>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.<br> <img alt="Tela mostrando a view Design da classe Segundo Plano." class="margin-around" src="../../../images_www/articles/71/java/gui-image-display/background.png"></li> |
| </ol> |
| <p>A vantagem da solução descrita é que a imagem de segundo plano é mostrada no período do projeto e no runtime.</p> |
| |
| <a name="building"></a><h2>Construindo e Executando a Aplicação</h2> |
| <p>Agora que gerou o código para acessar e exibir a imagem, você pode construir e executar a aplicação para certificar-se de que a imagem está sendo acessada.</p> |
| <p>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 <code>Main-Class</code> no arquivo JAR do projeto seja gerado quando você construir a aplicação.</p> |
| <p><b>Para definir a classe principal do projeto:</b></p> |
| <ol> |
| <li>Clique com o botão direito do mouse no nó do projeto ImageDisplayApp e escolha Propriedades.</li> |
| <li>Na caixa de diálogo Propriedades do projeto, selecione a categoria Executar.</li> |
| <li>Clique no botão Procurar ao lado do campo Classe Principal. Em seguida, selecione a classe <code>org.me.myimageapp.ImageDisplay</code> e clique no botão Selecionar Classe Principal.</li> |
| </ol> |
| <p><b>Para construir o projeto:</b></p> |
| <ul> |
| <li>Escolha Executar > Limpar e Construir Projeto Principal.</li> |
| </ul> |
| <p>Você pode exibir os produtos construídos da aplicação na janela Arquivos. A pasta <code>build</code> contém a classe compilada. A pasta <code>dist</code> contém um arquivo JAR executável que contém a classe compilada e a imagem.</p> |
| |
| <img alt="Tela que mostra a janela Arquivos com a pasta de distribuição expandida mostrando a classe compilada e o arquivo de imagem." class="margin-around" height="316" src="../../../images_www/articles/70/java/gui-image-display/dist.png" width="268"> |
| |
| <p><b>Para executar o projeto:</b></p> |
| <ul> |
| <li>Escolha Executar > Executar Projeto Principal (F6).</li> |
| </ul> |
| |
| <a name="custom"></a><h2>Criando Código Personalizado</h2> |
| |
| <p>Em muitas aplicações, a imagem exibida não é determinada estaticamente como neste exemplo. Por exemplo, a imagem a ser exibida pode ser determinada por algo no qual o usuário clica. </p> |
| <p>Se precisar 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 view Código-fonte que contém o código gerado pelo GUI Builder. No entanto, você pode inserir o código nos blocos protegidos usando os editores de propriedades que podem ser acessados na 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 GUI Builder.</p> |
| <p><b>Por exemplo, para escrever o código personalizado de uma propriedade <code>icon</code> do JLabel:</b></p> |
| <ol> |
| <li>Selecione JLabel na view Design ou na janela Inspetor.</li> |
| <li>Na janela Propriedades, clique no botão de reticências (...) ao lado da propriedade Icon.</li> |
| <li>Na lista drop-down da parte superior da caixa de diálogo, selecione a opção Código Personalizado.</li> |
| </ol> |
| |
| <img alt="O editor de propriedades Icon com o código personalizado opção está sendo selecionado na lista dropdown, mas com a view Seletor de Imagens ainda mostrada." class="margin-around" height="115" src="../../../images_www/articles/70/java/gui-image-display/custom-code.png" width="419"> |
| <p>A opção Código Personalizado deste editor de propriedades permite que você mesmo preencha o parâmetro do método <code>setIcon</code>. 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.</p> |
| <img alt="O editor de propriedades Icon com a opção Código Personalizado selecionada na lista dropdown e uma área de texto aberta, em que é possível inserir o parâmetro setIcon." class="margin-around" height="143" src="../../../images_www/articles/70/java/gui-image-display/custom-code-view.png" width="452"> <a name="summary"></a><h2>Resumo</h2> |
| <p>Este tutorial mostrou como acessar imagens de uma aplicação que você criou no NetBeans IDE. O tratamento de imagens é abordado posteriormente no Tutorial do Java. </p> |
| <p class="notes"><b>Observação: </b>o exemplo oferecido neste tutorial é muito semelhante ao primeiro exemplo na <a href="http://java.sun.com/docs/books/tutorial/uiswing/components/icon.html" target="_blank">seção Como Usar Ícones</a> do Tutorial do Java. A diferença é que o código gerado neste tutorial usa o método <code><a href="http://download.oracle.com/javase/6/docs/api/javax/swing/JLabel.html#setIcon(javax.swing.Icon)" target="_blank">setIcon</a></code> do <code><a href="http://download.oracle.com/javase/6/docs/api/javax/swing/JLabel.html" target="_blank">JLabel</a></code> para aplicar o ícone no label. No exemplo do Tutorial do Java, o ícone é aplicado no label ao ser passado pelo seu construtor.</p> |
| |
| |
| <div class="feedback-box"> |
| <a href="/about/contact_form.html?to=3&subject=Feedback:%20Handling%20Images%20in%20a%20GUI%20Application">Envie-nos Seu Feedback</a> |
| </div> |
| <br style="clear:both;" > |
| |
| |
| <a name="seealso"></a><h2>Consulte Também</h2> |
| <ul> |
| <li><a href="gui-functionality.html">Introdução à Construção de GUIs</a></li> |
| <li><a href="quickstart-gui.html">Projetando uma GUI Swing no NetBeans IDE</a></li> |
| <li><a href="../../trails/matisse.html">Trilha de Aprendizado das Aplicações Java GUI</a></li> |
| <li><a href="../../trails/java-se.html">Trilha de Aprendizado do Desenvolvimento Geral em Java</a></li> |
| <li><a href="http://wiki.netbeans.org/NetBeansUserFAQ#GUI_Editor_.28Matisse.29" target="_blank">GUI Builder - Perguntas Frequentes</a></li> |
| </ul> |
| |
| </body> |
| </html> |
