Tutorial do aplicativo Paint para a Plataforma NetBeans

Criando o esqueleto do aplicativo

O modelo "Aplicativo da plataforma NetBeans" gerará criar o esqueleto do aplicativo. O esqueleto consistirá em um conjunto de módulos que funcionam juntos para formar a base do aplicativo. Você utilizará a caixa de diálogo Propriedades do projeto para atribuir a tela inicial do aplicativo, o nome do aplicativo e o tipo e o número de módulos NetBeans que deseja utilizar. Também é possível se beneficiar de ações como a criação de uma distribuição ZIP e a construção de um aplicativo JNLP (Java WebStart), que são ferramentas importantes para tornar seu aplicativo disponível para os outros usuários.

1. Escolha Arquivo > Novo projeto. Em Categorias, selecione Módulos do NetBeans. Em Projetos, selecione Aplicativo da plataforma NetBeans:

   

   Clique em Próximo.

2. No painel Nome e local, digite PaintApp em Nome do projeto. Altere Local de projeto para qualquer diretório no computador. Deixe marcada a caixa de verificação Definir como projeto principal. Clique em Terminar.

O novo esqueleto do aplicativo é aberto no IDE. Ele contém dois nós na janela Projetos. O primeiro nó, o nó "Módulos", é para adição manual de módulos e módulos de wrapper de bibliotecas no aplicativo. Além disso, ao utilizar o assistente para Módulo ou o assistente para Módulo de wrapper de bibliotecas, o módulo que você criar poderá ser adicionado automaticamente ao aplicativo.

Criando o módulo de wrapper de bibliotecas

Um módulo de wrapper de biblioteca é um módulo cujo arquivo JAR não contém código, ele apenas aponta para uma biblioteca. Ele transforma a biblioteca em um módulo do NetBeans, para que todas as proteções do sistema carregador de classes do NetBeans sejam aplicadas nele, sem modificar o arquivo JAR original. O aplicativo poderá, então, depender da biblioteca simplesmente como se ela fosse outro módulo do NetBeans. E, se novas versões da biblioteca se tornarem disponíveis, é possível distribuí-las sem precisar distribuir nada além de um simples arquivo NBM (NetBeans Module) para o wrapper de bibliotecas.

Nota: um dos benefícios da construção na Plataforma NetBeans é que a interface do usuário é baseada em Swing: o kit de ferramentas padrão de interface do usuário para Java. Como o Swing tem sido utilizado há bastante tempo, há muitos componentes Swing que podem ser reutilizados no aplicativo. Neste tutorial, reutilize um JavaBean de seletor de cores existente (é possível encontrar o código-fonte para tal no NetBeans CVS em contrib/coloreditor). O arquivo JAR é nomeado ColorChooser.jar. É possível fazer o download da biblioteca aqui. Salve-a em qualquer lugar no sistema de arquivos.

Para criar um módulo de wrapper de bibliotecas para o arquivo ColorChooser.jar faça o seguinte:

1. Escolha Arquivo > Novo projeto. Em Categorias, selecione Módulos do NetBeans. Em Projetos, selecione Módulo de wrapper de bibliotecas e clique em Próximo.
2. No painel Selecionar biblioteca, para a caixa de texto Biblioteca, digite o caminho para ColorChooser.jar ou navegue até sua localização.
3. Deixe o campo de texto Licença vazio. Se você pretender distribuir o produto completo, deverá incluir o arquivo de licença da biblioteca externa. Clique em Próximo.
4. No painel Nome e localização, preencha o nome do projeto, defina o local do projeto e certifique-se de que a lista suspensa Adicionar à suíte de módulos mostra que o módulo será adicionado ao aplicativo. Clique em Próximo.
5. No painel Configuração básica de módulos, digite um nome exclusivo no nome base do código, especifique um nome de exibição para o módulo e o local do pacote de localização do módulo:

   

   Clique em Terminar.

O módulo que empacota o colorchooser.jar selecionado é criado pelo IDE. A estrutura do novo módulo é mostrada na janela Projetos. O nó "Módulos" na estrutura do aplicativo mostra que o módulo faz parte do aplicativo.

Criando o módulo

Agora, é preciso um módulo para receber o código real que você vai escrever.

1. Escolha Arquivo > Novo projeto. Em Categorias, selecione Módulos do NetBeans. Em Projetos, selecione Módulo e clique em Próximo.
2. No painel Nome e local, digite Paint em Nome do projeto. Altere Local do projeto para qualquer diretório no computador. Certifique-se de que o botão de opção Adicionar à suíte de módulos esteja selecionado e de que o aplicativo PaintApp esteja selecionado na lista suspensa Suíte de módulos. Selecione a caixa de verificação Definir como projeto principal. Clique em Próximo.
3. No painel Configuração básica de módulos, digite org.netbeans.paint. Deixe Paint como o Nome de exibição do módulo. Deixe o local do pacote de localização. Clique em Gerar camada XML e não altere o local sugerido, para que o pacote de localização e o arquivo de camada XML sejam armazenados em um pacote com o nome org.netbeans.paint.

   Esses destinos fazem o seguinte:

   • Pacote de localização. Especifica as strings de linguagem específica para internacionalização.
   • Camada XML. Registra itens como menus e botões da barra de ferramentas no aplicativo da plataforma NetBeans.

   Clique em Terminar.

O IDE cria o projeto Paint. O projeto contém todos os metadados de projeto e códigos-fonte, como o script de construção Ant do projeto. O projeto se abre no IDE. É possível ver a estrutura lógica na janela Projetos (Ctrl-1) e a estrutura de arquivos na janela Arquivos (Ctrl+2). Por exemplo, a janela Projetos deve ter esta aparência:

Além do pacote de localização e da camada XML, o projeto também inclui os seguintes arquivos importantes:

• Manifesto do módulo. Declara que o projeto é um módulo. Além disso, define algumas configurações específicas do módulo, tais como a localização da camada XML, a localização do pacote de bundle e a versão do módulo.
• Script de construção. Fornece um local onde é possível criar seus próprios destinos Ant e substituir aqueles que são especificados em nbproject/build-impl.xml.
• Metadados do projeto. Contém informações como o tipo do projeto, conteúdo, plataforma, classpath, dependências e mapeamentos entre os comandos do projeto e os destinos em scripts Ant.

Não será preciso modificar qualquer um desses arquivos durante este tutorial.

Especificando as dependências do módulo

É preciso criar subclasses de várias classes que pertencem às APIs do NetBeans. Além disso, o projeto depende do arquivo ColorChooser.jar. Todas as APIs do NetBeans são implementadas por módulos, portanto, concluir ambas essas tarefas realmente significa adicionar alguns módulos à lista de módulos de que nosso módulo precisa para ser executado.

1. Na janela Projetos, clique com o botão direito do mouse no nó do projeto Paint e escolha Propriedades. A caixa de diálogo Propriedades do projeto é aberta. Em Categorias, clique em Bibliotecas.
2. Para cada uma das APIs listadas na tabela abaixo, clique em "Adicionar dependência..." e, em seguida, na caixa de texto Filtro, comece digitando o nome da classe cuja subclasse deseja criar.

   Classe	API	Finalidade
   Seletor de cores	Seletor de cores	O módulo do wrapper de biblioteca do componente seletor de cores criado
   DataObject	API de sistemas de dados	O módulo do NetBeans que contém a classe DataObject
   DialogDisplayer	API de caixas de diálogo	Isso permite a criação da notificação do usuário, uma descrição da caixa de diálogo e permite que ela seja exibida
   AbstractFile	API do sistema de arquivos	Isso fornece uma API comum para acessar os arquivos de uma maneira uniforme
   AbstractNode	API de nós	Isso serve como o aparato principal para a visualização de objetos no NetBeans
   StatusDisplayer	API de utilitários para UI	A classe StatusDisplayer utilizada para criar a barra de status na janela principal
   WeakListeners	API de utilitários	Isso contém a classe WeakListeners
   TopComponent	API do sistema de janelas	Isso contém a classe JPanel TopComponent

   A primeira coluna na tabela acima, lista todas as classes cuja subclasse será criada neste tutorial. Em cada caso, comece a digitar o nome da classe no filtro e veja a lista Módulo diminuir. Utilize a segunda coluna da tabela para selecionar a API apropriada (ou, no caso de ColorChooser, a biblioteca) na lista Módulo diminuída e clique em OK para confirmar a escolha:

   

3. Clique em OK para sair da caixa de diálogo Propriedades do projeto.
4. Na janela Projetos, expanda o nó do projeto do módulo do Paint se ele ainda não estiver expandido. Em seguida, expanda o nó Arquivos importantes e clique duas vezes no nó Metadados do projeto. Observe que as APIs selecionadas foram declaradas como dependências de módulo.

Criando a tela

A próxima etapa é criar o componente real que o usuário pode pintar. Aqui, um componente Swing puro é utilizado: portanto, vamos ignorar os detalhes de sua implementação e fornecer apenas a versão final. O bean do seletor de cores, para o qual o wrapper de biblioteca foi criado, é utilizado no código-fonte desse painel: quando você executar o aplicativo concluído, gerará vê-lo na barra de ferramentas do painel para edição de imagens.

1. Na janela Projetos, expanda o nó Painte, em seguida, expanda o nó Pacotes de códigos-fonte e clique com o botão direito do mouse no nó org.netbeans.paint. Escolha Nova > Classe Java.
2. Insira PaintCanvas como o Nome da classe. Garanta que org.netbeans.paint esteja listado como o pacote. Clique em Terminar. PaintCanvas.java se abre no editor de código-fonte.
3. Substitua o conteúdo padrão do arquivo pelo conteúdo encontrado aqui. Se você chamou o pacote de algo diferente de org.netbeans.paint, corrija o nome do pacote no editor de código-fonte.

Preparando a classe TopComponent

Agora sua primeira classe que utiliza as APIs do NetBeans será escrita. Trata-se de uma classe TopComponent. Uma classe TopComponent é apenas uma classe JPanel com a qual o sistema de janelas do NetBeans sabe se comunicar: portanto, ela pode ser colocada dentro de um contêiner com guias dentro da janela principal.

1. Na janela Projetos, expanda o nó Painte, em seguida, expanda o nó Pacotes de códigos-fonte e clique com o botão direito do mouse no nó org.netbeans.paint. Escolha Nova > Classe Java. Indique PaintTopComponent como o Nome da classe. Garanta que org.netbeans.paint esteja listado como o pacote. Clique em Terminar. PaintTopComponent.java se abre no editor de código-fonte.
2. Próximo à parte superior do arquivo, altere a declaração da classe para o seguinte:

   public class PaintTopComponent extends TopComponent implements ActionListener, ChangeListener {

3. Pressione Ctrl-Shift-I para corrigir as importações e clique em OK na caixa de diálogo. O IDE faz as declarações de pacote de importação necessárias na parte superior do arquivo.

   Observe a linha vermelha sob a declaração da classe que você acabou de indicar. Posicione o cursor na linha e observe que uma lâmpada aparece na margem esquerda. Clique na lâmpada (ou pressione Alt-Enter), como mostrado abaixo:

   

   Selecione Implementar todos os métodos abstratos. O IDE gera dois esqueletos de método: actionPerformed() e stateChanged(). Você os experimentará neste tutorial.
4. Adicione as três declarações de variável seguintes no início da classe PaintTopComponent e corrija as instruções de importação (Ctrl-Shift-I).

       private PaintCanvas canvas = new PaintCanvas(); //The component the user draws on
       private JComponent preview; //A component in the toolbar that shows the paintbrush size
       private static int ct = 0; //A counter you use to provide names for new images

5. Agora é preciso implementar dois métodos padronizados. O primeiro diz ao sistema de janelas para ignorar as janelas abertas quando o aplicativo é encerrado; o segundo fornece uma string base de um ID de string único do nosso componente. Cada TopComponent possui um ID de string único que é utilizado ao salvar o TopComponent. Insira os dois métodos seguintes na classe PaintTopComponent:

       @Override
       public int getPersistenceType() {
           return PERSISTENCE_NEVER;
       }
   
       @Override
       public String preferredID() {
           return "Image";
       }

A classe agora deve ter esta aparência:

public class PaintTopComponent extends TopComponent implements ActionListener, ChangeListener {
    
    private PaintCanvas canvas = new PaintCanvas(); //The component the user draws on
    private JComponent preview; //A component in the toolbar that shows the paintbrush size
    private static int ct = 0; //A counter you use to provide names for new images
    
    public PaintTopComponent() {
    }
    
    @Override
    public void actionPerformed(ActionEvent arg0) {
        throw new UnsupportedOperationException("Not supported yet.");
    }
    
    @Override
    public void stateChanged(ChangeEvent arg0) {
        throw new UnsupportedOperationException("Not supported yet.");
    }
    
    @Override
    public int getPersistenceType() {
        return PERSISTENCE_NEVER;
    }
    
    @Override
    public String preferredID() {
        return "Image";
    }
    
}

Inicializando a classe TopComponent

Nesta seção, adicionamos o código que inicializa a interface do usuário.

1. Defina o construtor e depois corrija as sentenças import (Ctrl-Shift-I):

       public PaintTopComponent() {
   
           initComponents();
   
           String displayName = NbBundle.getMessage(
                   PaintTopComponent.class,
                   "UnsavedImageNameFormat",
                   new Object[] { new Integer(ct++) }
           );
   
           setDisplayName(displayName);
   
       }

   O código aqui é muito simples. A primeira chamada a um método que você ainda não escreveu, initComponents(), que adicionará uma barra de ferramentas e um PaintCanvas ao seu TopComponent. Como o método ainda não foi escrito, uma linha vermelha aparece abaixo dele. Como antes, clique na lâmpada (ou pressione Alt-Enter) e aceite a sugestão:

   

   O esqueleto do método initComponents() é gerado para você.

2. Expanda o pacote org.netbeans.paint na janela Projetos. Clique duas vezes no arquivo Bundle.properties para abrí-lo no editor de código-fonte. Adicionando a linha seguinte no fim:

       UnsavedImageNameFormat=Image {0}

   Isso especifica o texto que será utilizado para identificar um novo arquivo de imagem no aplicativo antes de ser salvo pelo usuário. Por exemplo, quando um usuário clicar em Nova tela pela primeira vez em seu aplicativo concluído, aparecerá uma aba acima do editor de código-fonte com o rótulo, 'Image 0'. Salve o arquivo antes de continuar.

Preenchendo os métodos do esqueleto

Nesta seção, codificamos a interface do usuário do nosso aplicativo. Também poderíamos utilizar o Construtor de GUIs do IDE para criar visualmente o layout.

1. O método initComponents() instala os componentes em seu painel, de forma que o usuário tenha algo com que interagir. O método de esqueleto foi gerado durante a seção anterior na classe PaintTopComponent.java. Preencha da seguinte forma:

       private void initComponents() {
   
           setLayout(new BorderLayout());
           JToolBar bar = new JToolBar();
   
           ColorChooser fg = new ColorChooser();
           preview = canvas.createBrushSizeView();
   
           //Now build our toolbar:
   
           //Make sure components don't get squished:
           Dimension min = new Dimension(32, 32);
           preview.setMaximumSize(min);
           fg.setPreferredSize(new Dimension(16, 16));
           fg.setMinimumSize(min);
           fg.setMaximumSize(min);
   
           JButton clear = new JButton(
             	    NbBundle.getMessage(PaintTopComponent.class, "LBL_Clear"));
   
           JLabel fore = new JLabel(
            	    NbBundle.getMessage(PaintTopComponent.class, "LBL_Foreground"));
   
           fg.addActionListener(this);
           clear.addActionListener(this);
   
           JSlider js = new JSlider();
           js.setMinimum(1);
           js.setMaximum(24);
           js.setValue(canvas.getDiam());
           js.addChangeListener(this);
   
           fg.setColor(canvas.getColor());
   
           bar.add(clear);
           bar.add(fore);
           bar.add(fg);
           JLabel bsize = new JLabel(
        	    NbBundle.getMessage(PaintTopComponent.class, "LBL_BrushSize"));
   
           bar.add(bsize);
           bar.add(js);
           bar.add(preview);
   
           JLabel spacer = new JLabel("   "); //Just a spacer so the brush preview
           //isn't stretched to the end of the
           //toolbar
   
           spacer.setPreferredSize(new Dimension(400, 24));
           bar.add(spacer);
   
           //And install the toolbar and the painting component:
           add(bar, BorderLayout.NORTH);
           add(canvas, BorderLayout.CENTER);
           
       }

   Pressione Ctrl-Shift-I para gerar as instruções de importação necessárias.

2. Preencha os outros dois métodos gerados. Eles são utilizados para ouvir a classe PaintTopComponent:

       public void actionPerformed(ActionEvent e) {
   
           if (e.getSource() instanceof JButton) {
              canvas.clear();
           } else if (e.getSource() instanceof ColorChooser) {
              ColorChooser cc = (ColorChooser) e.getSource();
              canvas.setPaint (cc.getColor());
           }
           
           preview.paintImmediately(0, 0, preview.getWidth(), preview.getHeight());
           
       }

       public void stateChanged(ChangeEvent e) {
   
           JSlider js = (JSlider) e.getSource();
           canvas.setDiam (js.getValue());
           preview.paintImmediately(0, 0, preview.getWidth(), preview.getHeight());
           
       }

3. No arquivo Bundle.properties, adicione os pares chave-valor seguintes ao fim do arquivo:

       LBL_Clear = Clear
       LBL_Foreground = Foreground 
       LBL_BrushSize = Brush Size
   

   Salve o arquivo antes de continuar.

Salvando a imagem em disco

Em seu novo aplicativo, seria uma boa idéia permitir aos usuários salvar as imagens que eles criam. Incluindo o código seguinte na classe PaintTopComponent, essa funcionalidade será ativada.

1. Insira o código seguinte na classe PaintTopComponent:

       public void save() throws IOException {
   
           if (getDisplayName().endsWith(".png")) {
   	    doSave(new File(getDisplayName()));
           } else {
   	    saveAs();
           }
           
       }
   
       public void saveAs() throws IOException {
   
           JFileChooser ch = new JFileChooser();
           if (ch.showSaveDialog(this) == JFileChooser.APPROVE_OPTION && ch.getSelectedFile() != null) {
   
   	    File f = ch.getSelectedFile();
               
   	    if (!f.getPath().endsWith(".png")) {
   	        f = new File(f.getPath() + ".png");
   	    }
               
   	    if (!f.exists()) {
               
   	        if (!f.createNewFile()) {
   		    String failMsg = NbBundle.getMessage(
   		             PaintTopComponent.class,
   			    "MSG_SaveFailed", new Object[] { f.getPath() }
   	            );
   		    JOptionPane.showMessageDialog(this, failMsg);
   		    return;
   	        }
                   
   	    } else {
   	        String overwriteMsg = NbBundle.getMessage(
   		    PaintTopComponent.class,
                       "MSG_Overwrite", new Object[] { f.getPath() }
   	        );
                   
   	        if (JOptionPane.showConfirmDialog(this, overwriteMsg)
   	        != JOptionPane.OK_OPTION) {
   		    return;
   	        }
                   
   	    }
               
   	    doSave(f);
               
           }
           
       }
   
       private void doSave(File f) throws IOException {
   
           BufferedImage img = canvas.getImage();
           ImageIO.write(img, "png", f);
           String statusMsg = NbBundle.getMessage(PaintTopComponent.class,
               "MSG_Saved", new Object[] { f.getPath() });
           StatusDisplayer.getDefault().setStatusText(statusMsg);
           setDisplayName(f.getName());
           
       }

2. Adicione as linhas seguintes ao arquivo Bundle.properties:

       MSG_SaveFailed = Could not write to file {0}
       MSG_Overwrite = {0} exists.  Sobrescrever?    MSG_Saved = Saved image to {0}

   Salve o arquivo antes de continuar.

3. Clique em Ctrl-Shift-I para corrigir as instruções de importação. Você observará que haverá dois nomes totalmente classificados para a classe File. Escolha a opção java.io.File.