Un'introduzione all'architettura MVC: esempi spiegati

L'architettura Model-View-Controller (MVC) è uno dei modelli di sviluppo software più diffusi. La logica alla base dell'architettura MVC utilizza il principio di progettazione della separazione delle preoccupazioni. Questo principio mira a separare un'applicazione in sezioni distrettuali, in cui ciascuna sezione affronta una questione specifica e separata.

L'architettura MVC segue alla lettera il principio della separazione delle preoccupazioni. In effetti, ogni lettera nell'acronimo MVC rappresenta una sezione essenziale della tua applicazione. Questo articolo esplora in dettaglio ogni sezione dell'architettura MVC e mostra come usarle per sviluppare software.

Qual è il modello?

Il modello dell'architettura MVC è una componente principale del design pattern. Questo perché il modello della tua applicazione archivia la logica dei dati. Il modello determina come archiviare e recuperare i dati.

Per un'applicazione che utilizza l'architettura del controller MVC, i dati sono una componente essenziale del suo funzionamento.

Qual è la vista?

La vista dell'architettura MVC è l'interfaccia utente (UI) dell'applicazione. L'interfaccia utente è ciò che un utente vede sul proprio dispositivo quando interagisce con il tuo programma. Lo stato della vista si basa sui dati archiviati utilizzando il modello.

Qual è il controllore?

Puoi pensare al Controller come a un ponte tra i componenti Modello e Vista.

Quando un utente fornisce dati attraverso la tua interfaccia utente (la Vista), la Vista passa quei dati al Controller. Il Titolare utilizza tali dati per aggiornare il database (attraverso il Modello). Il Controller estrae anche i dati dal database (attraverso il Modello) e li restituisce alla View.

Oltre ad essere un canale dati, il Controller è anche il cervello dell'operazione. Decide quale operazione eseguire su quali dati e quali dati restituire all'interfaccia utente.

Come si unisce tutto?

L'architettura MVC crea un circuito semichiuso che si basa su tutti i componenti per funzionare adeguatamente. L'illustrazione seguente mostra come funziona l'architettura MVC.

Come puoi vedere dall'illustrazione sopra, l'applicazione MVC riceve un input iniziale di dati da un utente attraverso l'interfaccia utente. Quindi l'applicazione passa quei dati attraverso i diversi componenti dell'architettura MVC e, in alcuni casi, li manipola nel componente Controller.

Applicazione dell'architettura MVC

Supponiamo che tu stia sviluppando un'applicazione per una stazione di servizio che vuole creare un record di tutto il gas venduto alla stazione e aiutare gli addetti al servizio con il calcolo del prezzo. Utilizzando l'architettura MVC, inizieresti con il modello, quindi passerai al controller e, dopo aver capito tutta la logica della tua applicazione, puoi implementare la vista.

Quando crei un modello per la tua applicazione, devi sapere che tipo di dati vuoi archiviare, come vuoi archiviarli e quanto vuoi che siano accessibili.

Creazione del modello applicativo

//Libreria Java
importare java.io. serializzabile;
pubblicoclasse Modello Prezzo Gas implementa serializzabile{
 //attributes
privatostaticofinalelungoserialVersionUID = 1 litro;
privato Stringa driverName;
privatogalleggiante quantità di gas;
privato Tipo di gas a stringa;
privatogalleggiante costo;
// costruttore predefinito
pubblico ModelloPrezzo Gas() {
questo.driverName = "";
questo.gasAmount = 0.00f;
questo.gasType = "";
questo.costo = 0.00f;
 }
 //costruttori primari
pubblico GasPriceModel (String driverName, galleggiante gasAmount, String gasType, galleggiante costo) {
questo.driverName = driverName;
questo.Importogas = Importogas;
questo.gasType = gasType;
questo.costo = costo;
 }
 //getter e setter che recuperano e manipolano i dati
pubblico Stringa getDriverName() {
Restituzione nomedriver;
 }
pubblicovuoto setDriverName (stringa driverName) {
questo.driverName = driverName;
 }
pubblicogalleggiante getGasAmount() {
Restituzione quantità di gas;
 }
pubblicovuoto setGasAmount(galleggiante importo gas) {
questo.Importogas = Importogas;
 }
pubblico Stringa getGasType() {
Restituzione tipo di gas;
 }
pubblicovuoto setGasType (String gasType) {
questo.gasType = gasType;
 }
pubblicogalleggiante getCosto() {
Restituzione costo;
 }
pubblicovuoto setCosto(galleggiante costo) {
questo.costo = costo;
 }
}

Ci sono diverse cose importanti da identificare nel codice del modello sopra. Il primo è che implementa l'interfaccia Serializable. Questa interfaccia consente di salvare lo stato di ogni oggetto creato utilizzando il file Modello Prezzo Gas classe convertendolo in un flusso di byte. L'implementazione dell'interfaccia Serializable significa che devi anche creare un ID versione, che è ciò che fa il primo attributo nella classe sopra.

Imparentato: Scopri come creare classi in Java Gli altri quattro attributi nel Modello Prezzo Gas classe sono ugualmente importanti perché ti dicono chi accederà ai dati che questo modello creerà. Ti dice anche che tipo di dati memorizzerà il modello (stringhe e float).

Creazione del controller dell'applicazione

//Librerie Java
importare java.io. File;
importare java.io. FileNotFoundException;
importare java.io. FileOutputStream;
importare java.io. IOException;
importare java.io. ObjectOutputStream;
pubblicoclasse GasPriceController {
 //calcola il costo del gas di un cliente e lo restituisce
pubblicogalleggiante calcolaCosto(galleggiante importo, String gasType){
galleggiante costo = 0.00f;
finalegalleggiante prezzo diesel = 4.925f;
finalegalleggiante premiumPrezzo = 5.002f;
finalegalleggiante prezzo regolare = 4.680f;
Se (Tipogas == "Diesel")
 costo = importo * prezzo diesel;
Se (Tipogas == "Premio")
 costo = importo * premioPrezzo;
Se (gasType == "Normale")
 costo = importo * prezzo regolare;
Restituzione costo;
 }
//salva i dati di ogni vendita in un file utilizzando il modello
pubblicobooleano saveEntry (dati GasPriceModel){
Tentativo {
FileOutputStream fs = nuovo FileOutputStream(nuovo File("data.dat"), vero);
 ObjectOutputStream sistema operativo = nuovo ObjectOutputStream (fs);
 os.writeObject (dati);
 os.flush();
 os.close();
Restituzionevero;
 } prendere (FileNotFoundException e) {
 e.printStackTrace();
 } prendere (IOException e) {
 e.printStackTrace();
 }
Restituzionefalso;
 }
}

Il Controller di cui sopra fa due cose, esegue un calcolo sui dati ricevuti dalla vista e decide quali dati restituire. Il Controller di cui sopra utilizza anche il modello dell'applicazione per memorizzare gli oggetti creati dall'input della vista, utilizzando il file saveEntry() metodo.

Creazione della visualizzazione dell'applicazione

//Librerie Java
importa java.awt. disposizione dei bordi;
importa java.awt. Layout della griglia;
import java.awt.event. AzioneEvento;
import java.awt.event. Ascoltatore d'azione;
importa javax.swing. JPulsante;
importa javax.swing. JComboBox;
importa javax.swing. JFrame;
importa javax.swing. etichetta J;
importa javax.swing. JOptionPane;
importa javax.swing. pannello J;
importa javax.swing. JTextField;
la classe pubblica GasPriceView estende JFrame implementa ActionListener {
//attributes
 private static final long serialVersionUID = 1L;
 controller privato GasPriceController;
 nome driver JLabel privato;
 nome campo JText privatoField;
 private JLabel gasAmount;
 private JTextField amountField;
 private JLabel gasType;
 JComboBox privato tipoCombo;
 privato JButton btnClear;
 privato JButton btnSave;
 private static final String[] type =
 {"Diesel", "Premium", "Normale"};
//costruttore predefinito
 public GasPriceView() {
 questo (nuovo GasPriceController());
 }
//costruttore principale che causa l'interfaccia utente
 public GasPriceView (controllore GasPriceController) {
super("Applicazione per la vendita di gas");
 setDefaultCloseOperation (JFrame. EXIT_ON_CLOSE);
 setSize (400.500);
 setVisible (vero);
this.controller = controller;
configureView();
 }
//genera l'interfaccia utente per l'applicazione
 privato vuoto configureView() {
setLayout (nuovo BorderLayout());
 JPanel pnl = nuovo JPanel (nuovo GridLayout (4,2,2,2));
driverName = new JLabel("Nome del driver:");
 pnl.add (driverName);
 nameField = nuovo JTextField();
 pnl.add (nomeCampo);
 gasAmount = new JLabel("GasAmount (Gallon):");
 pnl.add (importogas);
 mountField = nuovo JTextField();
 pnl.add (amountField);
 gasType = new JLabel("Tipo di gas:");
 pnl.add (gasType);
 typeCombo = nuovo JComboBox(genere);
 pnl.add (tipoCombo);
 btnClear = new JButton("Cancella");
 pnl.add (btnClear);
 btnSave = new JButton("Salva");
 pnl.add (btnSave );
aggiungi (pnl, BorderLayout. CENTRO);
AzioneListener();
}
 //ascolta il clic di uno dei due pulsanti
 public void ActionListener() {
 btnClear.addActionListener (questo);
btnSave.addActionListener (questo);
 }
//esegue un'azione se si fa clic su un pulsante specifico
 @Oltrepassare
 public void actionPerformed (ActionEvent ev) {
if (ev.getSource().equals (btnClear)) {
 nameField.setText("");
 mountField.setText("");
 }
if (ev.getSource().equals (btnSave)){
Stringa gasType = (Stringa) typeCombo.getSelectedItem();
 float gasAmount = Float.parseFloat (amountField.getText());
 float driverTotal = controller.calculateCost (gasAmount, gasType);
 Stringa driverName = nameField.getText();
 JOptionPane.showMessageDialog (null, driverName +" dovrebbe pagare $" + driverTotal );
Cliente GasPriceModel = nuovo GasPriceModel (driverName, gasAmount, gasType, driverTotal);
controller.saveEntry (cliente);
 }
}
}

La vista sopra crea un'interfaccia utente utilizzando il configureView() metodo. Raccoglie quindi i dati dopo che si è verificato un evento (tramite un listener di azioni). La View sopra invia quindi i dati raccolti al Controller, che quindi esegue alcuni calcoli e restituisce i dati alla View.

Esecuzione dell'applicazione MVC

importare java.awt. EventQueue;
pubblicoclasse App {
pubblicostaticovuoto main (String args[]) {
 EventQueue.invocareLater(
nuovo eseguibile() {
@Oltrepassare
pubblicovuoto correre() { 
 Regolatore GasPriceController = nuovo GasPrezzoController(); 
nuovo GasPriceView (controllore); 
 }
 });
 }
}

Esecuzione del App la classe precedente genererà la seguente interfaccia utente:

Popolando l'interfaccia utente con i dati rilevanti verrà generata la seguente interfaccia utente popup:

Se guardi a sinistra dell'immagine sopra, vedrai che l'applicazione ha anche creato un nuovo file chiamato "data.dat." Quindi, questa applicazione MVC raccoglie i dati da un utente tramite un'interfaccia utente (Visualizza), che invia tali dati a Controllore. Il controller manipola i dati eseguendo alcuni calcoli, quindi archivia i dati in un file utilizzando il modello. Imparentato: Input e output Java: una guida per principianti

Input e output Java: una guida per principianti

Se osservi da vicino l'applicazione creata in questo articolo, ci sono diversi vantaggi apparenti. Alcuni di questi vantaggi includono:

• Scalabilità
• Test del codice più semplice
• La creazione di codice più conciso

Ma l'architettura MVC non è l'unico modello di progettazione utile in grado di migliorare il processo di sviluppo.

Come creare codice riutilizzabile in JavaScript utilizzando i modelli di progettazione

Comprendere come utilizzare i modelli di progettazione ti consentirà di utilizzare codice riutilizzabile in JavaScript. Ecco cosa devi sapere.

Leggi Avanti

Circa l'autore