Trabalho I

Componentes Gráficos do Java SE

Descrição

Nesta tarefa você irá criar uma aplicação gráfica em Java, utilizando componentes de software, para implementar uma ferramenta que permita buscar arquivos com uma determinada extensão (mp3, avi, divx e mkv). O usuário pode especificar a busca a partir da raiz ou de um diretório específico. 

A ferramenta também pode ser utilizada para buscar por arquivos iguais, com mesmo título ou parecido, ou tamanho similar.

Crie outras funcionalidades para essa ferramenta ! Quantos mais funcionalidades tiver maior será a nota do trabalho.


Componentes Gráficos

O Java oferece dois pacotes para criação de interfaces gráficas: AWT e Swing. O AWT acompanha o Java desde as primeiras versões, e o Swing trata-se de um pacote mais completo introduzido posteriormente. Estes pacotes oferecem contêineres (janelas, painéis e frames) nos quais podem ser inseridos componentes gráficos (botões, caixas de texto, etc.).

A figura abaixo (do livro Java Foundation Classes in a Nutshell, de David Flanagan, Ed. O´Reilly) mostra as principais classes do pacote javax.swing.

Os contêineres trabalham com o conceito de layout, que define como os componentes são dispostos dentro do contêiner. Os principais layouts definidos pelo Java são os seguintes:

  • Layot de Fluxo (Flow): os componentes são dispostos em seqüência no contêiner, da esquerda para a direita.
  • Layout de Borda (Border): os componentes podem ser colocados em 5 regiões - norte, sul, leste, oeste e centro.
  • Layout de Grade (Grid): cria uma "grade" de X linhas por Y colunas, com X*Y células nas quais os componentes são colocados.
  • Layout de Caixa (Box): empilha os componentes na horizontal ou na vertical.
  • Null Layout: sem um layout específico.

   

   


É possível colocar dentro de um contêiner outros contêineres com layouts diferentes. No exemplo abaixo foram criados três painéis (componente JPanel): o primeiro segue o layout Box, o central usa o layout Border e o último é um Grid 2x2.

 

Além dos layouts padrão, outros tipos de layout podem ser utilizados. O layout Desenho Livre (usado como layout default pelo NetBeans - o ambiente de desenvolvimento que iremos utilizar) dispõe os componentes na posição exata na qual eles são colocados no contêiner.

Usando Componentes Gráficos no NetBeans

NetBeans é um poderoso ambiente para desenvolvimento de aplicativos, com suporte a desenvolvimento de aplicações em várias linguagens e plataformas, incluindo Java em suas três edições: Micro Edition, Standard Edition e Enterprise Edition.

Através do NetBeans é possível desenvolver aplicações gráficas em Java utilizando componentes Swing e AWT, assim como aplicações que utilizem outros componentes desenvolvidos por terceiros.

NetBeans trabalha com o conceito de projetos de software. Um novo projeto é criado no NetBeans através do menu Arquivo à Novo Projeto. No assistente 'Novo Projeto' pode-se selecionar um entre os diversos tipos de projetos disponíveis. Por exemplo, o tipo de projeto 'Aplicação Java' da Categoria 'Java' corresponde a uma aplicação do Java Standard Edition. Em seguida é possível definir o nome do projeto e o diretório no qual o projeto será criado, além de outras opções.


O projeto criado será exibido na janela ‘Projetos’.

O projeto criado possui uma classe com o método main.

Agora crie a classe que implementa uma interface gráfica, na qual podem ser adicionados componentes contidos na paleta de componentes do NetBeans, conforme mostra a figura abaixo. Para isso, adicione em Novo->Form JFrame onde será desenhada uma das interface gráfica da aplicação.

Ao editar uma interface gráfica, será exibida a tela de edição ‘Projeto’ - o retângulo cinza à esquerda na figura abaixo, que representa a área de trabalho da janela que está sendo editada - na qual é possível inserir os componentes disponíveis na janela 'Paleta'. Para isso basta selecionar o componente a ser inserido e depois clicar no local onde se deseja inseri-lo.


Para visualizar a interface gráfica na forma como esta será exibida na tela, basta pressionar o botão .

Para que a classe principal JavaApplication4 mostre a interface gráfica insira o seguinte código:

   public class JavaApplication4 {
      public static void main(String[] args) {
         // TODO 
code application logic here
         new NewJFrame().setVisible(true);
      }
   }

Também é possível inserir no projeto diversos tipos de classes Java através do menu Arquivo à Novo Arquivo. Selecionando a categoria ‘Formulários GUI Swing’, pode-se criar quadros (Formulário JFrame), painéis (Formulário JPanel) e janelas de diálogo (Formulário JDialog), por exemplo. Esses elementos corresponderão a uma nova classe Java da aplicação, e servirão como contêineres para outros componentes gráficos.


A forma como o componente se ajusta à tela depende do layout utilizado. O layout default usado pelo NetBeans é o ‘Desenho Livre’, que mantém a posição original na qual o componente foi inserido. O layout utilizado pode ser alterado clicando o com o botão da direita do mouse sobre o contêiner na janela 'Inspetor’.


Na janela 'Propriedades' é possível definir as propriedades dos componentes. Por exemplo, após adicionar um item de menu (JMenuItem) a um dos menus da barra de menus da interface gráfica, ao selecioná-lo, é possível editar o texto mostrado no item de menu alterando a propriedade 'text' na janela de propriedades doNetBeans.

Cada componente possui um conjunto diferente de propriedades. As propriedades podem ser acessadas também no código da aplicação, através dos métodossetPropriedade e getPropriedade (por exemplo, setText(String s) e getText() para a propriedade text do item de menu).

Note que, à medida que você for editando a interface gráfica, o código correspondente a essas alterações será gerado no arquivo Java. Clique no botão 'Código-Fonte' na tela de edição pra visualizar o código da classe, e em seguida expanda (clicando no sinal '+') a linha marcada como 'Generated Code' para exibir o código gerado pelo NetBeans. O NetBeans protege este código, marcado em azul, impedindo sua edição. Note que os componentes adicionados à interface gráfica são criados automaticamente como atributos da classe que representa a interface gráfica da aplicação.


Tarefa 1: A Interface Gráfica da Aplicação

Comece a implementar a interface gráfica da ferramenta. Crie um novo projeto do tipo ‘Aplicativo de área de trabalho Java’. Na seqüência, edite os componentes da janela principal da aplicação. Caso necessário, adicione novos frames e janelas de diálogo ao projeto. Teste a disposição dos componentes dentro da janela, para que seu aplicativo se comporte de maneira adequada quando for redimensionado ou maximizado. Durante este processo, pode ser necessário modificar os layouts e a disposição dos componentes até atingir um resultado satisfatório.

A ferramenta pode ser usado por um certo número de vezes. Após isso, fica bloqueado e será necessário a realização da compra. Crie um formulário eletrônico em uma outra janela (JFrame) para que o usuário possa cadastrar seus dados pessoais (nome, data de nascimento, sexo, cpf, login e senha, cartão de crédito, etc) para a realização da compra.

Use a janela de propriedades dos componentes para modificar as propriedades que julgar necessárias, como por exemplo o texto, o tipo de fonte, a cor, ou ícone dos botões.

Tente compilar e rodar a interface gráfica da aplicação (Shift+F6). 

Agora que a interface gráfica está pronta, comece a implementar a lógica de funcionamento do programa seguindo os passos a seguir.

Eventos

O Java permite que eventos gerados pelo usuário sejam tratados pelos programas utilizando tratadores de eventos. Eventos produzidos pelo mouse e pelo teclado - das classes MouseEvent e KeyEvent respectivamente - podem ser tratados criando objetos que implementem as interfaces MouseListener e KeyListener. A API do Java define classes auxiliares para implementação dos tratadores de eventos, chamadas MouseAdapter e KeyAdapter, que são classes abstratas (com implementações vazias para os métodos da interface correspondente) usadas como superclasses para tratadores de eventos do mouse e do teclado, respectivamente.

Suponha que queremos tratar os eventos gerados pelo mouse. Um consumidor do evento MouseEvent gerado pelo componente meuComponente (um botão, por exemplo) deve se registrar para receber os eventos com o método addMouseListener, e criar um objeto do tipo MouseAdapter. Isto pode ser feito criando uma classe anônima, na qual deve ser definido o código para tratar o evento correspondente. No exemplo abaixo foi definido o código do método mouseClicked, que é chamado toda vez que o componente é clicado com o mouse:

meuComponente.addMouseListener(new java.awt.event.MouseAdapter() {
   public void mouseClicked(java.awt.event.MouseEvent evt) {
      // trata o evento de click do mouse
   }
} );

Outra forma de fazê-lo seria criar uma classe que implemente a interface MouseListener, definir seus métodos e chamar addMouseListener passando um objeto desta classe como parâmetro.

Outros tipos de eventos também possuem suas classes ListenerAdapter e Event, que são utilizadas de maneira semelhante.

Tratamento de Eventos no NetBeans

A partir da janela de edição do NetBeans é possível criar tratadores de eventos gerados por componentes. Isso pode ser feito de duas formas: usando o modo de conexão ou definindo os tratadores de eventos.

Para ativar o ‘Modo de conexão’, clique o botão  na janela de edição da interface gráfica. Em seguida, você deve selecionar o componente de origem e o componente de destino da ação. No exemplo abaixo, selecionamos na janela de projeto da interface gráfica o item de menu ‘File -> New’ da aplicação, e logo depois a área de texto da aplicação.

No ‘Assistente de conexão’, que será aberto automaticamente, selecione o evento de origem – no caso, o evento ‘actionPerformed’, que inclui a ativação do menu pelo mouse ou pelo teclado.


Logo depois, selecione a operação a ser executada quando o evento ocorrer – nesse caso, limpar a área de texto, selecionando a propriedade ‘text’ e alterando seu valor para um texto vazio.


Ao finalizar o assistente, o seguinte método tratador de eventos será gerado:

Outra forma possível de tratar eventos é associar um tratador de evento a um componente. Ao clicarmos um componente o botão da direita do mouse, é possível criar um tratador para um evento gerado pelo componente. 


Feito isso, pode-se editar o código que será executado quando o evento selecionado ocorrer. A edição de código é facilitada pelo recurso auto-completar do NetBeans, ativado teclando Ctrl+Espaço. Assim é possível ter acesso aos atributos e método da classe que está sendo editada. Lembre-se que os componentes adicionados à interface gráfica são atributos da classe, e seus métodos e atributos também podem ser visualizados utilizando o recurso auto-completar.

 

Tarefa 2: A Lógica de Funcionamento na Aplicação

Você deve criar tratadores para os eventos da interface gráfica do aplicativo. Estes tratadores de eventos devem chamar os métodos de uma classe de controle, que implementarão a lógica de funcionamento da aplicação. Essa classe, por sua vez, deve interagir com as entidades utilizadas pela aplicação. As classes de entidade serão também JavaBeans, com propriedades acessadas através de métodos de acesso.

Com isso, será possível separar o código da aplicação segundo o padrão de projeto MVC, ou seja:

  • classes para interfaceamento gráfico - a visão (desenvolvidas na Tarefa 1);
  • classes para representar o modelo, com os dados internos da aplicação e os métodos para manipulá-los;
  • uma classe controladora, responsável pelo fluxo de execução da aplicação.

O uso do padrão MVC torna mais fácil a manutenção do código.

Para fazer a busca de arquivos busque no Google exemplos de código, tal como nesse link.

Avaliação

A atividade deve ser desenvolvida em duplas. A apresentação deve ser feita até o dia 14/09. Trabalhos entregues com atraso terão desconto automático de 2 pontos. Após a segunda semana (14 dias após o fim do prazo original), o trabalho não mais será aceito, ou seja, terá nota zero. Os dois alunos devem estar presentes no momento da apresentação. Será verificado o funcionamento do programa e em seguida os alunos devem responder oralmente a questões formuladas pelo professor sobre o código fonte do programa. Podem ser atribuídas notas diferentes aos alunos de um grupo, dependendo das respostas às perguntas sobre o código do programa efetuadas pelo professor. Caso um dos alunos não esteja presente ou demonstre não conhecer o código do programa, este ficará com nota zero na atividade. Em caso de cópia do código de outro grupo, ambos terão nota igual a zero. 

Dúvidas

Material para Consulta

Atendimento aos Alunos

  • Horário: Quartas-feiras das 17:00 às 18:30.
  • Local: Prédio do INE - piso térreo - Sala 305

E-Mail

l a u @ i n f . u f s c . b r

Mantida por Lau Cheuk Lung. Atualizada em 31/08/2015.

© Lau Cheuk Lung 2014