Uma introdução à arquitetura MVC: exemplos explicados

A arquitetura Model-View-Controller (MVC) é um dos padrões de desenvolvimento de software mais populares. A lógica por trás da arquitetura MVC utiliza o princípio de design de separação de interesses. Este princípio visa separar uma candidatura em secções distritais, onde cada secção aborda uma questão específica e separada.

A arquitetura MVC segue o princípio da separação de interesses ao pé da letra. Na verdade, cada letra na sigla MVC representa uma seção essencial do seu aplicativo. Este artigo explora cada seção da arquitetura MVC em detalhes e mostra como usá-los para desenvolver software.

Qual é o modelo?

O modelo de arquitetura MVC é um componente principal do padrão de projeto. Isso ocorre porque o modelo do seu aplicativo armazena a lógica de dados. O modelo determina como você armazena e recupera seus dados.

Para um aplicativo que usa a arquitetura do controlador MVC, os dados são um componente essencial de sua operação.

Qual é a vista?

A Visualização da arquitetura MVC é a interface do usuário (UI) do seu aplicativo. A interface do usuário é o que um usuário vê em seu dispositivo quando interage com seu programa. O estado da View depende dos dados armazenados usando o modelo.

O que é o Controlador?

Você pode pensar no Controller como uma ponte entre os componentes Model e View.

Quando um usuário fornece dados por meio de sua interface de usuário (a Visualização), a Visualização passa esses dados para o Controlador. O Controller usa esses dados para atualizar o banco de dados (através do Model). O Controller também extrai dados do banco de dados (através do Model) e os retorna para a View.

Além de ser um canal de dados, o Controller também é o cérebro da operação. Ele decide qual operação realizar em quais dados e quais dados retornar à interface do usuário.

Como tudo isso vem junto?

A arquitetura MVC cria um loop semifechado que depende de todos os componentes para funcionar adequadamente. A ilustração a seguir demonstra como a arquitetura MVC opera.

Como você pode ver na ilustração acima, o aplicativo MVC recebe uma entrada inicial de dados de um usuário por meio da interface do usuário. Em seguida, o aplicativo passa esses dados pelos diferentes componentes da arquitetura MVC e, em alguns casos, manipula esses dados no componente Controller.

Aplicando a arquitetura MVC

Digamos que você esteja desenvolvendo um aplicativo para um posto de gasolina que deseja criar um registro de toda a gasolina vendida no posto e ajudar os atendentes no cálculo do preço. Usando a arquitetura MVC, você começaria com o Modelo, depois passaria para o Controlador e, depois de descobrir toda a lógica do seu aplicativo, você poderia implementar o View.

Ao criar um modelo para seu aplicativo, você precisará saber que tipo de dados deseja armazenar, como deseja armazenar esses dados e quão acessível deseja que esses dados sejam.

Criando o modelo de aplicativo

//biblioteca Java
importar java.io. Serializável;
públicoclasse Gas PriceModelo implementa Serializável{
 //attributes
privadoestáticofinalgrandesserialVersionUID = 1L;
privado String driverName;
privadoflutuador gásQuantidade;
privado String gasType;
privadoflutuador custo;
// construtor padrão
público GasPriceModel() {
isto.driverName = "";
isto.gasAmount = 0,00f;
isto.gasType = "";
isto.custo = 0,00f;
 }
 //construtores primários
público GasPriceModel (String driverName, flutuador gasAmount, String gasType, flutuador custo) {
isto.driverName = driverName;
isto.gasAmount = gasAmount;
isto.gasType = gasType;
isto.custo = custo;
 }
 //getters e setters que recuperam e manipulam dados
público String getDriverName() {
Retorna nome do motorista;
 }
públicovazio setDriverName (String driverName) {
isto.driverName = driverName;
 }
públicoflutuador getGasAmount() {
Retorna gásQuantidade;
 }
públicovazio setGasAmount(flutuador quantidade de gás) {
isto.gasAmount = gasAmount;
 }
público String getGasType() {
Retorna tipo de gás;
 }
públicovazio setGasType (String gasType) {
isto.gasType = gasType;
 }
públicoflutuador getCusto() {
Retorna custo;
 }
públicovazio setCusto(flutuador custo) {
isto.custo = custo;
 }
}

Há várias coisas importantes a serem identificadas no código do modelo acima. A primeira é que implementa a interface Serializable. Esta interface permite que você salve o estado de cada objeto criado usando o Gas PriceModelo class convertendo-o em um fluxo de bytes. Implementar a interface Serializable significa que você também precisa criar um ID de versão, que é o que o primeiro atributo da classe acima faz.

Relacionado: Aprenda a criar classes em Java Os outros quatro atributos do Gas PriceModelo class são igualmente importantes porque informam quem acessará os dados que esse modelo criará. Ele também informa que tipo de dados o modelo armazenará (strings e floats).

Criando o controlador de aplicativos

//Bibliotecas Java
importar java.io. Arquivo;
importar java.io. FileNotFoundException;
importar java.io. FileOutputStream;
importar java.io. IOException;
importar java.io. ObjectOutputStream;
públicoclasse GasPriceController {
 //calcula o custo do gás de um cliente e o devolve
públicoflutuador calcularCusto(flutuador quantidade, String gasType){
flutuador custo = 0,00f;
finalflutuador dieselPreço = 4,925f;
finalflutuador premiumPreço = 5.002f;
finalflutuador Preço normal = 4.680f;
E se (gasType == "Diesel")
 custo = valor * dieselPreço;
E se (gasType == "Premium")
 custo = valor * prêmioPreço;
E se (tipo de gás == "Regular")
 custo = valor * preço normal;
Retorna custo;
 }
//salva os dados de cada venda em um arquivo usando o modelo
públicoboleano saveEntry (dados GasPriceModel){
experimentar {
FileOutputStream fs = novo FileOutputStream(novo File("dados.dat"), verdadeiro);
 ObjectOutputStream os = novo ObjectOutputStream (fs);
 os.writeObject (dados);
 os.flush();
 os.close();
Retornaverdadeiro;
 } pegar (FileNotFoundException e) {
 e.printStackTrace();
 } pegar (IOException e) {
 e.printStackTrace();
 }
Retornafalso;
 }
}

O Controlador acima faz duas coisas, executa um cálculo nos dados recebidos da visualização e decide quais dados retornar. O Controller acima também utiliza o modelo de aplicação para armazenar os objetos criados a partir da entrada da view, usando o salvarEntrada() método.

Criando a visualização do aplicativo

//Bibliotecas Java
importe java.awt. BorderLayout;
importe java.awt. GridLayout;
importe java.awt.event. AçãoEvento;
importe java.awt.event. ActionListener;
importe javax.swing. JButton;
importe javax.swing. JComboBox;
importe javax.swing. JFrame;
importe javax.swing. JLabel;
importe javax.swing. JOptionPane;
importe javax.swing. JPanel;
importe javax.swing. JTextField;
public class GasPriceView estende JFrame implementa ActionListener {
//attributes
 privado estático final longo serialVersionUID = 1L;
 controlador privado GasPriceController;
 private JLabel driverName;
 private JTextField nameField;
 private JLabel gasAmount;
 private JTextField quantidadeField;
 private JLabel gasType;
 JComboBox privado typeCombo;
 JButton privado btnClear;
 JButton privado btnSave;
 private estático final String[] tipo =
 {"Diesel", "Premium", "Regular"};
//construtor padrão
 public GasPriceView() {
 this (novo GasPriceController());
 }
//construtor primário que causa a interface do usuário
 public GasPriceView (controlador GasPriceController) {
super("Aplicativo de Venda de Gás");
 setDefaultCloseOperation (JFrame. EXIT_ON_CLOSE);
 setSize (400.500);
 setVisível (verdadeiro);
this.controller = controlador;
configureVisualizar();
 }
// gera a interface do usuário para o aplicativo
 private void configureView() {
setLayout (novo BorderLayout());
 JPanel pnl = novo JPanel (novo GridLayout (4,2,2,2));
driverName = new JLabel("Nome do Driver:");
 pnl.add (driverName);
 nomeCampo = new JTextField();
 pnl.add (nomeCampo);
 gasAmount = new JLabel("Quantidade de Gas (Gallon):");
 pnl.add (gasAmount);
 quantidadeCampo = new JTextField();
 pnl.add (quantidadeCampo);
 gasType = new JLabel("Tipo de Gás:");
 pnl.add (gasType);
 typeCombo = new JComboBox(modelo);
 pnl.add (typeCombo);
 btnClear = new JButton("Limpar");
 pnl.add (btnClear);
 btnSalvar = new JButton("Salvar");
 pnl.add (btnSalvar);
adicionar (pnl, BorderLayout. CENTRO);
ActionListener();
}
 //ouve o clique de um dos dois botões
 public void ActionListener() {
 btnClear.addActionListener (este);
btnSave.addActionListener (este);
 }
//realiza uma ação se um botão específico for clicado
 @Sobrepor
 public void actionPerformed (ActionEvent ev) {
if (ev.getSource().equals (btnClear)) {
 nomeCampo.setText("");
 quantidadeCampo.setText("");
 }
if (ev.getSource().equals (btnSave)){
String gasType = (String) typeCombo.getSelectedItem();
 float gasAmount = Float.parseFloat (amountField.getText());
 float driverTotal = controller.calculateCost (gasAmount, gasType);
 String driverName = nameField.getText();
 JOptionPane.showMessageDialog (null, driverName +" deve pagar $" + driverTotal );
GasPriceModel cliente = novo GasPriceModel (driverName, gasAmount, gasType, driverTotal);
controller.saveEntry (cliente);
 }
}
}

A exibição acima cria uma interface de usuário usando o configureView() método. Em seguida, ele coleta dados após a ocorrência de um evento (por meio de um ouvinte de ação). A View acima então envia os dados coletados para o Controller, que então realiza alguns cálculos e retorna os dados para a View.

Executando o aplicativo MVC

importar java.awt. EventQueue;
públicoclasse Aplicativo {
públicoestáticovazio main (String args[]) {
 EventQueue.invocarMais tarde(
novo Executável() {
@Sobrepor
públicovazio corre() { 
 Controlador GasPriceController = novo GasPriceController(); 
novo GasPriceView (controlador); 
 }
 });
 }
}

Executando o Aplicativo classe acima irá gerar a seguinte UI:

Preencher a IU com os dados relevantes gerará a seguinte IU pop-up:

Se você olhar para a esquerda da imagem acima, verá que o aplicativo também criou um novo arquivo chamado “dados.dat.” Assim, esta aplicação MVC coleta dados de um usuário através de uma UI (View), que envia esses dados para o Controlador. O controlador manipula os dados realizando alguns cálculos e, em seguida, armazena esses dados em um arquivo usando o modelo. Relacionado: Entrada e saída Java: um guia para iniciantes

Entrada e saída Java: um guia para iniciantes

Se você observar atentamente o aplicativo criado neste artigo, verá vários benefícios aparentes. Alguns desses benefícios incluem:

• Escalabilidade
• Teste de código mais fácil
• A criação de código mais conciso

Mas a arquitetura MVC não é o único padrão de design útil que pode aprimorar seu processo de desenvolvimento.

Como criar código reutilizável em JavaScript usando padrões de design

Entender como usar padrões de design permitirá que você use código reutilizável em JavaScript. Aqui está o que você precisa saber.

Leia a seguir

Sobre o autor