Une introduction à l'architecture MVC: exemples expliqués

L'architecture Model-View-Controller (MVC) est l'un des modèles de développement logiciel les plus populaires. La logique derrière l'architecture MVC utilise le principe de conception de la séparation des préoccupations. Ce principe vise à séparer une demande en sections de district, où chaque section traite d'une question spécifique et distincte.

L'architecture MVC suit à la lettre le principe de séparation des préoccupations. En fait, chaque lettre de l'acronyme MVC représente une section essentielle de votre application. Cet article explore en détail chaque section de l'architecture MVC et vous montre comment les utiliser pour développer des logiciels.

Quel est le modèle ?

Le modèle d'architecture MVC est un composant principal du modèle de conception. En effet, le modèle de votre application stocke la logique des données. Le modèle dicte la façon dont vous stockez et récupérez vos données.

Pour une application qui utilise l'architecture du contrôleur MVC, les données sont une composante essentielle de son fonctionnement.

Quelle est la vue ?

La vue de l'architecture MVC est l'interface utilisateur (UI) de votre application. L'interface utilisateur est ce qu'un utilisateur voit sur son appareil lorsqu'il interagit avec votre programme. L'état de la vue repose sur les données stockées à l'aide du modèle.

Qu'est-ce que le contrôleur ?

Vous pouvez considérer le contrôleur comme un pont entre les composants Modèle et Vue.

Lorsqu'un utilisateur fournit des données via votre interface utilisateur (la vue), la vue transmet ces données au contrôleur. Le contrôleur utilise ces données pour mettre à jour la base de données (via le modèle). Le contrôleur extrait également les données de la base de données (via le modèle) et les renvoie à la vue.

En plus d'être un canal de données, le contrôleur est également le cerveau de l'opération. Il décide quelle opération effectuer sur quelles données et quelles données renvoyer à l'interface utilisateur.

Comment tout cela s'assemble-t-il ?

L'architecture MVC crée une boucle semi-fermée qui s'appuie sur tous les composants pour fonctionner correctement. L'illustration suivante montre le fonctionnement de l'architecture MVC.

Comme vous pouvez le voir sur l'illustration ci-dessus, l'application MVC reçoit une entrée initiale de données d'un utilisateur via l'interface utilisateur. Ensuite, l'application transmet ces données à travers les différents composants de l'architecture MVC et, dans certains cas, manipule ces données dans le composant Controller.

Application de l'architecture MVC

Supposons que vous développiez une application pour une station-service qui souhaite créer un enregistrement de tout le gaz vendu à la station et aider les préposés au gaz dans le calcul du prix. En utilisant l'architecture MVC, vous commencerez par le modèle, puis passerez au contrôleur, et après avoir compris toute la logique de votre application, vous pourrez implémenter la vue.

Lors de la création d'un modèle pour votre application, vous devez savoir quel type de données vous souhaitez stocker, comment vous souhaitez stocker ces données et dans quelle mesure vous souhaitez que ces données soient accessibles.

Création du modèle d'application

//Bibliothèque Java
importer java.io. Sérialisable ;
Publiqueclasser Modèle de prix du gaz met en oeuvre Sérialisable{
 //attributes
privéstatiquefinallongserialVersionUID = 1L ;
privé Chaîne driverName ;
privéflotter quantité de gaz ;
privé String gasType ;
privéflotter Coût;
// constructeur par défaut
Publique GasPriceModel() {
cette.driverName = "" ;
cette.gasAmount = 0.00f ;
cette.gasType="" ;
cette.coût = 0.00f ;
 }
 // constructeurs primaires
Publique GasPriceModel (chaîne driverName, flotter gasAmount, Chaîne gasType, flotter Coût) {
cette.driverName = driverName ;
cette.gasAmount = gazAmount ;
cette.gasType = gasType;
cette.coût = coût ;
 }
 // getters et setters qui récupèrent et manipulent les données
Publique Chaîne getDriverName() {
retourner nom du conducteur;
 }
Publiqueannuler setDriverName (Chaîne driverName) {
cette.driverName = driverName ;
 }
Publiqueflotter getGasAmount() {
retourner quantité de gaz ;
 }
Publiqueannuler setGasAmount(flotter quantité de gaz) {
cette.gasAmount = gazAmount ;
 }
Publique Chaîne getGasType() {
retourner type de gaz ;
 }
Publiqueannuler setGasType (chaîne gasType) {
cette.gasType = gasType;
 }
Publiqueflotter getCost() {
retourner Coût;
 }
Publiqueannuler setCost(flotter Coût) {
cette.coût = coût ;
 }
}

Il y a plusieurs choses importantes à identifier dans le code du modèle ci-dessus. Le premier est qu'il implémente l'interface Serializable. Cette interface vous permet de sauvegarder l'état de chaque objet créé à l'aide de la Modèle de prix du gaz classe en la convertissant en un flux d'octets. L'implémentation de l'interface Serializable signifie que vous devez également créer un ID de version, ce que fait le premier attribut de la classe ci-dessus.

En rapport: Apprenez à créer des classes en Java Les quatre autres attributs du Modèle de prix du gaz class sont tout aussi importantes car elles vous indiquent qui va accéder aux données que ce modèle va créer. Il vous indique également quel type de données le modèle stockera (chaînes et flottants).

Création du contrôleur d'application

// Bibliothèques Java
importer java.io. Déposer;
importer java.io. FileNotFoundException ;
importer java.io. FileOutputStream ;
importer java.io. IOException ;
importer java.io. ObjectOutputStream ;
Publiqueclasser GasPriceController {
 // calcule le coût du gaz d'un client et le restitue
Publiqueflotter calculCoût(flotter quantité, String gasType){
flotter coût = 0.00f ;
finalflotter dieselPrix = 4.925f;
finalflotter prix premium = 5.002f ;
finalflotter Prix ​​régulier = 4.680f ;
si (type de gaz == "Diesel")
 coût = montant * prix du diesel ;
si (type de gaz == "Premium")
 coût = montant * prix premium ;
si (gasType == "Regular")
 coût = montant * prix régulier ;
retourner Coût;
 }
// enregistre les données de chaque vente dans un fichier utilisant le modèle
Publiquebooléen saveEntry (données GasPriceModel){
essayer {
FileOutputStream fs = Nouveau FileOutputStream(Nouveau Fichier("data.dat"), vrai);
 ObjectOutputStream os = Nouveau ObjectOutputStream (fs);
 os.writeObject (données);
 os.flush();
 os.close();
retournervrai;
 } prise (FileNotFoundException e) {
 e.printStackTrace();
 } prise (IOException e) {
 e.printStackTrace();
 }
retournerfaux;
 }
}

Le contrôleur ci-dessus fait deux choses, il effectue un calcul sur les données reçues de la vue et décide quelles données renvoyer. Le contrôleur ci-dessus utilise également le modèle d'application pour stocker les objets créés à partir de l'entrée de vue, en utilisant le saveEntry() méthode.

Création de la vue d'application

// Bibliothèques Java
importer java.awt. BorderLayout ;
importer java.awt. Disposition de la grille;
importer java.awt.event. ActionEvent ;
importer java.awt.event. ActionListener ;
importer javax.swing. JButton ;
importer javax.swing. JComboBox ;
importer javax.swing. JFrame ;
importer javax.swing. JLabel ;
importer javax.swing. JOptionPane ;
importer javax.swing. JPanel ;
importer javax.swing. JTextField ;
la classe publique GasPriceView étend JFrame implémente ActionListener {
//attributes
 private static final long serialVersionUID = 1L ;
 contrôleur privé GasPriceController ;
 nom_pilote JLabel privé ;
 nomField JTextField privé ;
 quantité de gaz JLabel privée ;
 champ de quantité JTextField privé ;
 type de gaz JLabel privé ;
 JComboBox privé typeCombo ;
 JButton privé btnClear ;
 privé JButton btnSave ;
 chaîne finale statique privée [] type =
 {"Diesel", "Premium", "Normal"} ;
// constructeur par défaut
 public GasPriceView() {
 this (nouveau GasPriceController());
 }
// constructeur principal qui cause l'interface utilisateur
 public GasPriceView (contrôleur GasPriceController) {
super("Demande de vente d'essence");
 setDefaultCloseOperation (JFrame. EXIT_ON_CLOSE );
 setSize (400 500);
 setVisible (vrai);
this.controller = contrôleur ;
configureView();
 }
// génère l'UI pour l'application
 privé void configureView() {
setLayout (nouveau BorderLayout());
 JPanel pnl = nouveau JPanel (nouveau GridLayout (4,2,2,2));
driverName = new JLabel("Nom du pilote :");
 pnl.add (driverName);
 nameField = new JTextField();
 pnl.add (nomChamp);
 gasAmount = new JLabel("Gas Amount (Gallon):");
 pnl.add (gasAmount);
 montantField = new JTextField();
 pnl.add (amountField);
 gasType = new JLabel("Type de gaz :");
 pnl.add (gasType);
 typeCombo = nouveau JComboBox(taper);
 pnl.add (typeCombo);
 btnClear = new JButton("Effacer");
 pnl.add (btnClear);
 btnSave = new JButton("Enregistrer");
 pnl.add (btnSave );
ajouter (pnl, BorderLayout. CENTRE);
ActionÉcouteur();
}
 // écoute le clic d'un des deux boutons
 public void ActionListener() {
 btnClear.addActionListener (ceci);
btnSave.addActionListener (ceci);
 }
// effectue une action si un bouton spécifique est cliqué
 @Passer outre
 public void actionPerformed (ActionEvent ev) {
if (ev.getSource().equals (btnClear)) {
 nameField.setText("");
 montantField.setText("");
 }
if (ev.getSource().equals (btnSave)){
Chaîne gasType = (chaîne) typeCombo.getSelectedItem();
 float gasAmount = Float.parseFloat (amountField.getText());
 float driverTotal = controller.calculateCost (gasAmount, gasType);
 Chaîne driverName = nameField.getText();
 JOptionPane.showMessageDialog (null, driverName +" devrait payer $" + driverTotal );
client GasPriceModel = nouveau GasPriceModel (driverName, gasAmount, gasType, driverTotal);
controller.saveEntry (client);
 }
}
}

La vue ci-dessus crée une interface utilisateur à l'aide de la configureView() méthode. Il collecte ensuite des données après qu'un événement se soit produit (via un écouteur d'action). La vue ci-dessus envoie ensuite les données collectées au contrôleur, qui effectue ensuite certains calculs et renvoie les données à la vue.

Exécution de l'application MVC

importer java.awt. EventQueue ;
Publiqueclasser Application {
Publiquestatiqueannuler principal (String args[]) {
 EventQueue.invoquer plus tard(
Nouveau Exécutable() {
@Passer outre
Publiqueannuler Cours() { 
 Contrôleur GasPriceController = Nouveau GasPriceController(); 
Nouveau GasPriceView (contrôleur); 
 }
 });
 }
}

Exécution de la Application class ci-dessus générera l'interface utilisateur suivante :

Remplir l'interface utilisateur avec les données pertinentes générera l'interface utilisateur contextuelle suivante :

Si vous regardez à gauche de l'image ci-dessus, vous verrez que l'application a également créé un nouveau fichier appelé "données.dat." Ainsi, cette application MVC collecte les données d'un utilisateur via une interface utilisateur (View), qui envoie ces données au Manette. Le contrôleur manipule les données en effectuant des calculs, puis il stocke ces données dans un fichier à l'aide du modèle. En rapport: Entrée et sortie Java: guide du débutant

Entrée et sortie Java: guide du débutant

Si vous regardez de près l'application créée dans cet article, il y a plusieurs avantages apparents. Certains de ces avantages incluent :

• Évolutivité
• Test de code simplifié
• La création de code plus concis

Mais l'architecture MVC n'est pas le seul modèle de conception utile qui peut améliorer votre processus de développement.

Comment créer du code réutilisable en JavaScript à l'aide de modèles de conception

Comprendre comment utiliser les modèles de conception vous permettra d'utiliser du code réutilisable en JavaScript. Voici ce que vous devez savoir.

Lire la suite

A propos de l'auteur