[[oktatas:programozás|< Programozás]]
====== MVC ======

  * **Szerző:** Sallai András
  * Copyright (c) Sallai András, 2013, 2014, 2015, 2025
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
  * Web: https://szit.hu

===== Történet =====


Az első leírást 1979-ben **Trygve Reenskaug** készítette 
amikor a Xerox PARC-nál dolgozott Smalltalkon.

Az első MVC Smalltalk-80 nyelven lett implementálva 1980-ban.

===== Előny =====

{{:oktatas:programozás:felhasznaloifeluletek.png|}}
===== Az MVC =====

A **Model View Controller** szavakból alkotott betűszó.
A szoftverfejlesztésben használatos [[wp>Architectural_pattern|szerkezeti minta]].
Azt jelenti, szétválasztjuk a megjelenésérét felelős kódrészeket, 
az adatokért és a vezérlésért felelős kódrészektől. 

Az ilyen módon több részre osztott alkalmazásokat, kliens-szerver
megvalósításban hívjuk **többrétegű alkalmazásnak**.


{{:oktatas:programozás:java:mvc_felepitese.png|}}


  * Model - üzleti logika, tárolás
  * View - megjelenés, Swing komponensek
  * Controller - vezérlés, eseménykezelés

{{:oktatas:programozas:user_and_mvc.png?400|}}

===== Skálázhatóság =====

Az MVC skálázható ha az egyes részeket újabb részekre bontjuk.


===== MVC alkalmazása weben =====


A web erősen támaszkodik a HTTP protokollra, amely
állapotmentes. Ez azt jelenti, hogy nincs folytonos
kapcsolat a böngésző és a webszerver között. 
Minden kérés egy újabb kapcsolatot hoz létre. 
Ha böngésző megkapta a választ, zárja a kapcsolatot. 
Ez egy olyan helyzet, amelyre nem gondoltak
eredeti MVC fejlesztői.

===== MVC konkrét nyelveken =====

  * [[oktatas:programozás:php:php_mvc|PHP MVC]]
  * [[oktatas:programozás:java:java_mvc|Java MVC]]

===== JavaScript MVC példa =====

A példa elérhető itt is:
  * https://github.com/oktat/mvcexamplejs.git


<code>
app01/
  |-controller.js
  |-index.js
  |-model.js
  |-package.json
  `-view.js
</code>


<code javascript controllers.js>
// controller.js
class WalletController {
  constructor(model, view) {
    this.model = model;
    this.view = view;
  }

  async start() {
    let running = true;
    while (running) {
      this.view.displayBalance(this.model.getBalance());
      this.view.displayMenu();

      const choice = await this.view.getChoice();
      switch (choice) {
        case '1':
          const addAmount = await this.view.getAmount();
          this.model.addMoney(addAmount);
          break;
        case '2':
          const subtractAmount = await this.view.getAmount();
          this.model.subtractMoney(subtractAmount);
          break;
        case '3':
          running = false;
          this.view.close();
          break;
        default:
          console.log('Érvénytelen választás, próbálja újra.');
          break;
      }
    }
    console.log('Viszlát!');
  }
}

module.exports = WalletController;

</code>


<code javascript index.js>
// index.js (a fő program)
const Wallet = require('./model');
const WalletView = require('./view');
const WalletController = require('./controller');

const wallet = new Wallet(1000); // Kezdeti egyenleg
const view = new WalletView();
const controller = new WalletController(wallet, view);

controller.start();
</code>


<code javascript model.js>
// model.js
class Wallet {
  constructor(initialBalance) {
    this.balance = initialBalance;
  }

  addMoney(amount) {
    if (amount > 0) {
      this.balance += amount;
    }
  }

  subtractMoney(amount) {
    if (amount > 0 && this.balance >= amount) {
      this.balance -= amount;
    }
  }

  getBalance() {
    return this.balance;
  }
}

module.exports = Wallet;

</code>


<code javascript view.js>
// view.js
const readline = require('readline');

class WalletView {
  constructor() {
    this.rl = readline.createInterface({
      input: process.stdin,
      output: process.stdout,
    });
  }

  displayBalance(balance) {
    console.log(`\nJelenlegi egyenleg: ${balance.toFixed(2)} Ft`);
  }

  displayMenu() {
    console.log('\nKérem válasszon egy műveletet:');
    console.log('1. Pénz hozzáadása');
    console.log('2. Pénz levonása');
    console.log('3. Kilépés');
  }

  getChoice() {
    return new Promise(resolve => {
      this.rl.question('Válasszon: ', choice => {
        resolve(choice);
      });
    });
  }

  getAmount() {
    return new Promise(resolve => {
      const askAmount = () => {
        this.rl.question('Adja meg az összeget: ', amount => {
          const parsedAmount = parseFloat(amount);
          if (isNaN(parsedAmount) || parsedAmount <= 0) {
            console.log('Érvénytelen összeg, próbálja újra.');
            askAmount();
          } else {
            resolve(parsedAmount);
          }
        });
      };
      askAmount();
    });
  }

  close() {
    this.rl.close();
  }
}

module.exports = WalletView;

</code>


<code javascript package.json>
{
  "name": "app01",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "type": "commonjs"
}

</code>



===== Linkek =====

  * http://www.newthinktank.com/2013/02/mvc-java-tutorial/
  * http://www.austintek.com/mvc/
  * https://github.com/kasperisager/swing-mvc
  * https://www.link-intersystems.com/blog/2013/07/20/the-mvc-pattern-implemented-with-java-swing/
  * http://www.cs.wcupa.edu/rkline/java/mvc-design.html