[Programação] [Tutorial] Modelo MVC

Olá, pessoal!

Hoje estou aqui para falar de um modelo de design de aplicações o MVC. Me deparei recentemente com ele e muitos materiais presentes na web não vão direto ao ponto e não explicam diretamente. Vou tentar demostrar como esse modelo é simples e facilita muito o desenvolvimento de aplicações. Primeiro vamos entender sua teoria.

M - MODELO
Representa o objetos. Classe de dados, comunicações com banco e retorno de informações e parâmetros.

V - VISÃO
A tela propriamente dita, com recursos gráficos para exibição aos usuários.

C - CONTROLE
Funciona como uma ponte, entre o MODELO e a VISÃO.

ESQUEMA DE FLUXO
A VISÃO solicita ou executa uma ação. O CONTROLE recuperá essa informação processa e solicita respostas do MODELO. O MODELO processa o resultado e retorna para o CONTROLE que por sua vez retorna à VISÃO.

Confuso? Vamos entender na prática. Desenvolvi um pequeno app em Java que solicita o e-mail para o usuário, e insere em uma lista. Teremos quatro classes: Principal, Visão, Modelo, Objeto e Controle. Coloquei estes nomes para facilitação de compreensão.

Crie um novo projeto com o nome MVC no Netbeans (ou outro editor JAVA de sua preferência). Crie a classe principal como br.com.mvc.Principal. Posteriormente crie as seguintes classes nos seguintes pacotes:

Classe - Pacote
Modelo - br.com.mvc.modelo
Objeto - br.com.mvc.modelo
Visao - br.com.mvc.visao
Controle - br.com.mvc.controle

Esse procedimento facilitará o nosso desenvolvimento.

CLASSE OBJETO

Uma classe simples, que somente representa os atributos e seus métodos GET/SET. É o modelo de dados do OBJETO.

package br.com.mvc.modelo;

/**
 *
 * @author Caique Monteiro Araujo
 * Classe: Objeto - Representa o objeto do nosso projeto, neste caso
 *         o e-mail do usuário.
 */
public class Objeto 
{
    // Definição do atributo e-mail
    private String email;
    
    // Método para obter o e-mail
    public String getEmail ()
    {
        return email;
    }

    // Método para setar o e-mail
    public void setEmail (String email)
    {
        this.email = email;
    }
}

CLASSE MODELO

O objetivo desta classe é manipular o OBJETO com operações que podem ser realizadas para ele. Neste caso, ele permite adicionar um e-mail e obter a lista de e-mails.

package br.com.mvc.modelo;

import java.util.ArrayList;

/**
 *
 * @author Caique Monteiro Araujo
 * Classe: Modelo, representa as operações de processamentos que podemos
 *         utilizar neste caso para a classe Objeto.
 */
public class Modelo 
{
    // Definição da lista de objetos do modelo
    private ArrayList<Objeto> objetos = new ArrayList<Objeto>();
    
    // Método para adicionar um objeto a lista
    public void adicionar (Objeto novo)
    {
        objetos.add(novo);
    }
    
    // Método para obter a lista
    public ArrayList<Objeto> obterLista ()
    {
        return objetos;
    }

}

CLASSE CONTROLE

A classe CONTROLE manipula as interações entre a VISÃO e o MODELO. Ela opera em construir os procedimentos e tratamentos de dados para enviar informações e receber respostas do MODELO e posteriormente enviar respostas à VISÃO.

package br.com.mvc.controle;

import br.com.mvc.modelo.*;
import br.com.mvc.visao.Visao;

import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;

import java.util.ArrayList;
import javax.swing.*;
import javax.swing.table.DefaultTableModel;

/**
 *
 * @author Caique Monteiro Araujo
 * Classe: Controle, realiza os processamentos, se comunica com o Modelo
 *         e responde à Visão
 */
public class Controle 
{
    // Definição do atributo da Visão
    private Visao gui = null;
    // Definição do atributo do Modelo
    Modelo m = new Modelo();
    
    // Método construtor para iniciar Visão e adicionar controle de botões
    public Controle ()
    {
        // Nova instância da Visão
        gui = new Visao();
        // Adicionando a classe de controle de botões
        gui.adicionarControle(new VisaoController());
    }
    
    // Processar os dados da lista recebida pelo Modelo
    public void exibirLista ()
    {
        // Recebendo a lista de dados do Modelo
        ArrayList<Objeto> tabela = m.obterLista();
        
        // Cria um modelo de tabela
        DefaultTableModel preencher = new DefaultTableModel();
        // Define as colunas da tabela
        preencher.setColumnIdentifiers(new String[] {"E-MAIL"});
            
        // Para cada objeto da linha de dados do Modelo adiciona uma nova linha
        // no modelo da tabela
        for (Objeto o : tabela)
        {
            preencher.addRow(new String[] {o.getEmail()});
        }
        
        // Manipula a tabela da Visão para exibir os resultados
        gui.tabela.setModel(preencher);
    }
    
    // Extra-classa para definir controles de botões
    class VisaoController implements ActionListener 
    {
        
        // Reescreve o método actionPerformed do ActionListener
        public void actionPerformed (ActionEvent e) 
        {
            // Recebe a fonte/origem de chamada do evento
            JButton fonte = (JButton) e.getSource();

            // Se a fonte for o botão da Visão para adionar e-mails
            if (fonte == gui.botao) 
            {
                // Valida o email para constar presença do @
                if (!gui.text.getText().contains("@"))
                {
                    // Exibe mensagem de e-mail inválido
                    JOptionPane.showMessageDialog(null, "E-mail inválido!");
                }
                else
                {
                    // Cria um novo objeto
                    Objeto email = new Objeto();

                    // Seta o e-mail do objeto
                    email.setEmail(gui.text.getText());
                    
                    // Envia o objeto manipulado para o Modelo
                    m.adicionar(email);

                    // Chama o método para exibir resposta na tela
                    exibirLista();

                    // Limpa a tela
                    gui.limparCampos();
                    
                    // Informa que o e-mail foi cadastrado
                    JOptionPane.showMessageDialog(null, "E-mail cadastrado!");
                }
            }

        }
   }

}

CLASSE VISÃO

Está classe será a exibida para o usuário, nela só serão montados os elementos gráficos e nada mais além disso.

package br.com.mvc.visao;

import javax.swing.*;

import java.awt.*;
import java.awt.event.ActionListener;

import javax.swing.table.DefaultTableModel;

/**
 *
 * @author Caique Monteiro Araujo
 * Classe: Visão, cria o ambiente a ser exibido pelo usuário
 */
public class Visao extends JFrame
{
    // Definição de objetos gráficos a serem utilizados
    public JPanel painel_form;
    public JButton botao;
    public JTextField text;
    public JLabel label;
    
    public JPanel painel_tabela;
    public JTable tabela;
    
    public JScrollPane tabela_view;
    
    // Método construtor inicializa a Visão
    public Visao ()
    {
        this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        this.setSize(350, 300);
        
        this.setTitle("MVC Exemplo");
        
        Toolkit toolkit = Toolkit.getDefaultToolkit();  
        Dimension tamanho = toolkit.getScreenSize();  
        
        this.setLocation((tamanho.width/2) - 175, (tamanho.height/2) - 150);
        this.setResizable(false);
                
        montarLayout();
        
        this.setVisible(true);
    }
    
    // Método para inicializar e montar os objetos gráficos a serem utilizados
    public void montarLayout()
    {
        this.setLayout(new BorderLayout());
        
        painel_form = new JPanel();
        botao = new JButton("Adicionar");
        label = new JLabel("E-mail: ");
        text = new JTextField();
        
        painel_tabela = new JPanel();
        tabela = new JTable();
        tabela_view = new JScrollPane();
        
        text.setPreferredSize(new Dimension(150, 25));
        
        painel_form.setLayout(new FlowLayout());
        
        painel_form.add(label);
        painel_form.add(text);
        painel_form.add(botao);
        
        painel_tabela.setLayout(new FlowLayout());
        
        DefaultTableModel preencher = new DefaultTableModel();
        preencher.setColumnIdentifiers(new String[] {"E-MAIL"});
        tabela.setModel(preencher);
        
        tabela_view.setViewportView(tabela);
        tabela_view.setPreferredSize(new Dimension(330, 200));
        
        painel_tabela.add(tabela_view);
        
        this.add("North", painel_form);
        this.add("South", painel_tabela);
    }
    
    // Método para limpar campos
    public void limparCampos ()
    {
        text.setText("");
    }
    
    // Método para setar o Controle à Visão
    public void adicionarControle (ActionListener controle) 
    {
        this.botao.addActionListener(controle);
    }

}

CLASSE PRINCIPAL

A classe fará a chamada para o CONTROLE que manipulará a VISÃO a partir de sua construção.

package br.com.mvc;

import br.com.mvc.controle.Controle;

/**
 *
 * @author Caique Monteiro Araujo
 * Classe: Princial, inicia a aplicação a partir do CONTROLE principal
 */
public class Principal 
{

    public static void main(String[] args)
    {
        new Controle();
    }

}

CONCLUSÕES

Ao observar esses códigos, vocês observaram o quanto ficou mais fácil o desenvolvimento e até para uma possível futura manutenção? Resumindo: a VISÃO manipula somente os gráficos, o CONTROLE manipula as ações do usuário, o MODELO manipula os dados da aplicação. Esperam que tenham gostado, até a próxima pessoal!