МІНІСТЕРСТВО ОСВІТИ ТА НАУКИ УКРАЇНИ

НАЦІОНАЛЬНИЙ УНІВЕРСИТЕТ “ЛЬВІВСЬКА ПОЛІТЕХНІКА”

«Шаблон проектування MVC»

Методичні вказівки
до контрольної роботи №?
з курсу “???”
для студентів напрямку
8.05010103, 7.05010103 “Системне проектування”

ЗАТВЕРДЖЕНО
на засіданні кафедри
“Системи автоматизованого проектування” Протокол № ?
від ??.??.2013

ЛЬВІВ 2011
«Шаблон проектування MVC». Методичні вказівки до виконання контрольної
роботи №? з курсу “??? ”. ” для 8.05010103, 7.05010103 “Системне проектування”.

Укладачі: Денисюк П.Ю., канд.техн.наук, доц.

Відповідальний за випуск: Денисюк П.Ю., канд.техн.наук, доц.

Рецензенти: ???????
 1. МЕТА РОБОТИ
Ознайомитися із шаблоном проектування MVC (Model-view-controller) та
способами його застосування у розробці програмного забезпечення, а також навчитись
використовувати даний шаблон на практиці.

2.КОРОТКІ ТЕОРЕТИЧНІ ВІДОМОСТІ

2.1 Патерни - шаблони проектування
Шаблон проектування або патерн (англ. design pattern ) у розробці програмного
забезпечення - повторювальна архітектурна конструкція, що представляє собою рішення
проблеми проектування в рамках деякого часто виникаючого контексту.
Зазвичай шаблон не є закінченим зразком, який може бути прямо перетворений в код;
це лише приклад вирішення задачі, який можна використовувати в різних ситуаціях.
Об'єктно -орієнтовані шаблони показують відносини і взаємодії між класами або
об'єктами, без визначення того, які кінцеві класи чи об'єкти додатка будуть
використовуватися.
«Низькорівневі» шаблони, що враховують специфіку конкретної мови програмування,
називаються ідіомами . Це гарні рішення проектування, характерні для конкретної мови
або програмної платформи, і тому не універсальні .
На найвищому рівні існують архітектурні шаблони, вони охоплюють собою
архітектуру всієї програмної системи .
Алгоритми за своєю суттю також є шаблонами, але не проектування, а обчислення,
так як вирішують обчислювальні завдання .
Усі дизайн патерни поділені на три великі групи, а саме: породжуючі, структурні та
поведінкові. Нижче наведено список стандартних шаблонів проектування:
Породжуючі патерни
1. Абстрактна Фабрика
2. Будівельник
3. Фабричний Метод
4. Прототип
5. Одинак (Синглтон)
Структурні патерни
6. Адаптер
7. Міст
 8. Компонувальник
9. Декоратор
10. Фасад
11. Легковаговик (Флайвейт)
12. Проксі
Патерни поведінки
13. Ланцюжок Відповідальностей
14. Команда
15. Інтерпретер
16. Ітератор
17. Медіатор
18. Хранитель (Мементо)
19. Спостерігач
20. Стан
21. Стратегія
22. Шаблонний метод
23. Відвідувач

2.2 Шаблони проектування Модель-вид-контролер (MVC)

Модель-вид-контролер (або Модель-вигляд-контролер, англ. Model-view-
controller, MVC) — архітектурний шаблон, який використовується під час проектування
та розробки програмного забезпечення.
Цей шаблон поділяє систему на три частини: модель даних, вигляд даних та
керування. Застосовується для відокремлення даних (модель) від інтерфейсу користувача
(вигляду) так, щоб зміни інтерфейсу користувача мінімально впливали на роботу з
даними, а зміни в моделі даних могли здійснюватися без змін інтерфейсу користувача.
Історія
Концепція MVC була описана в 1979 році Трюгве, тоді працюючим над мовою
програмування Smalltalk в Xerox PARC. Оригінальна реалізація описана в статті
«Applications Programming in Smalltalk - 80 : How to use Model -View - Controller » . Потім
Джим Алтофф з командою розробників реалізували версію MVC для бібліотеки класів
Smalltalk -80.
 В оригінальній концепції була описана сама ідея і роль кожного з елементів: моделі,
представлення і контролера. Але зв'язки між ними були описані без конкретизації. Крім
того, розрізняли дві основні модифікації:
Пасивна модель - модель не має жодних способів впливати на представлення або
контролер, і використовується ними як джерело даних для відображення. Всі зміни
моделі відслідковуються контролером і він же відповідає за перемальовування
представлення, якщо це необхідно. Така модель частіше використовується в
структурному програмуванні, так як в цьому випадку модель представляє просто
структуру даних, без методів їх обробних.
Активна модель - модель оповіщає представлення про те, що в ній відбулися зміни, а
представлення, які зацікавлені в оповіщенні, підписуються на ці повідомлення. Це
дозволяє зберегти незалежність моделі як від контролера, так і від уявлення.
Класичною реалізацією концепції MVC прийнято вважати версію саме з активною
моделлю .
З розвитком об'єктно-орієнтованого програмування та поняття про шаблони
проектування був створений ряд модифікацій концепції MVC , які при реалізації у різних
авторів можуть відрізнятися від оригінальної. Так, наприклад, Еріан Верми в 2004 році
описав приклад узагальненого MVC.
Мета шаблону — гнучкий дизайн програмного забезпечення, який повинен
полегшувати подальші зміни чи розширення програм, а також надавати можливість
повторного використання окремих компонент програми. Крім того використання цього
шаблону у великих системах призводить до певної впорядкованості їх структури і робить
їх зрозумілішими завдяки зменшенню складності.
Компоненти
Архітектурний шаблон Модель-Вид-Контролер (MVC) поділяє програму на три
частини. У тріаді до обов'язків компоненту Модель (Model) входить зберігання даних і
забезпечення інтерфейсу до них. Вигляд (View) відповідальний за представлення цих
даних користувачеві. Контролер (Controller) керує компонентами, отримує сигнали у
вигляді реакції на дії користувача, і повідомляє про зміни компоненту Модель. Така
внутрішня структура в цілому поділяє систему на самостійні частини і розподіляє
відповідальність між різними компонентами. Цей шаблон поділяє роботу додатка на три
окремі функціональні ролі. Таким чином, зміни, що вносяться в один з компонентів,
надають мінімально можливий вплив на інші компоненти. У даному патерні модель не
залежить від подання або керуючої логіки, що робить можливим проектування моделі як
незалежного компонента і, наприклад, створювати кілька подань для однієї моделі .
MVC поділяє цю частину системи на три самостійні частини: введення даних,
компонент обробки даних і виведення інформації. Модель, як вже було відмічено,
інкапсулює ядро даних і основний функціонал з їх обробки. Також компонент Модель не
залежить від процесу введення або виведення даних. Компонент виводу Вигляд може
мати декілька взаємопов'язаних областей, наприклад, різні таблиці і поля форм, в яких
відображається інформація. У функції Контролера входить моніторинг за подіями, що
виникають в результаті дій користувача (зміна положення курсора миші, натиснення
кнопки або введення даних в текстове поле).
Зареєстровані події транслюються в різні запити, що спрямовуються компонентам
Моделі або об'єктам, відповідальним за відображення даних. Відокремлення моделі від
вигляду даних дозволяє незалежно використовувати різні компоненти для відображення
інформації. Таким чином, якщо користувач через Контролер внесе зміни до Моделі
даних, то інформація, подана одним або декількома візуальними компонентами, буде
автоматично відкоригована відповідно до змін, що відбулися.

Рис 1. Концепція Model-View-Controller

Отже, основна мета застосування цієї концепції полягає в поділі бізнес-логіки
(моделі) від її візуалізації (представлення, виду). За рахунок такого поділу підвищується
можливість повторного використання. Найбільш корисне застосування даної концепції в
тих випадках, коли користувач повинен бачити ті ж самі дані одночасно в різних
контекстах та / або з різних точок зору. Зокрема , виконуються наступні завдання:
1. До однієї моделі можна приєднати кілька видів, при цьому не зачіпаючи
реалізацію моделі . Наприклад, деякі дані можуть бути одночасно представлені у вигляді
електронної таблиці, гістограми і кругової діаграми .
 2. Не торкаючись реалізації представлення, можна змінити реакції на дії
користувача (натискання мишею на кнопці, введення даних), для цього досить
використовувати інший контролер .
3. Ряд розробників спеціалізується тільки в одній з областей: або розробляють
графічний інтерфейс, або розробляють бізнес - логіку. Тому можливо добитися того, що
програмісти, що займаються розробкою бізнес-логіки (моделі), взагалі не будуть
інформовані про те, яке представлення буде використовуватися.
Концепція
Підсумовуючи вище сказане, ще раз узагальнимо призначення шаблону в цілому і
кожного з його компонентів.
Концепція MVC дозволяє розділити дані, подання та обробку дій користувача на три
окремих компонента :
Модель (англ. Model). Модель надає знання: дані і методи роботи з цими даними,
реагує на запити, змінюючи свій стан. Не містить інформації, як ці знання можна
візуалізувати.
Представлення, вид (англ. View). Відповідає за відображення інформації
(візуалізацію) . Часто як представлення виступає форма (вікно) з графічними елементами.
Контролер (англ. Controller). Забезпечує зв'язок між користувачем і системою:
контролює введення даних користувачем і використовує модель та подання для реалізації
необхідної реакції.
Важливо відзначити, що як представлення, так і контролер залежать від моделі.
Однак модель не залежить ні від уявлення, ні від контролера. Тим самим досягається
призначення такого поділу: він дозволяє будувати модель незалежно від візуального
представлення, а також створювати кілька різних видів для однієї моделі .
Для реалізації схеми Model -View - Controller використовується досить велика
кількість шаблонів проектування (залежно від складності архітектурного рішення),
основні з яких «спостерігач» , «стратегія» , «компонувальник».
Найбільш типова реалізація відокремлює вид від моделі шляхом встановлення між
ними протоколу взаємодії, використовуючи апарат подій (підписка / сповіщення) . При
кожній зміні внутрішніх даних в моделі вона оповіщає всі залежні від неї представлення,
і подання оновлюється. Для цього використовується шаблон «спостерігач». При обробці
реакції користувача вид вибирає, залежно від потрібної реакції, потрібний контролер,
який забезпечить той чи інший зв'язок з моделлю. Для цього використовується шаблон
«стратегія», або замість цього може бути модифікація з використанням шаблону
«команда». А для можливості однотипного поводження з підоб’єктами складного
ієрархічного виду може використовуватися шаблон «компонувальник». Крім того ,
можуть використовуватися й інші шаблони проектування, наприклад, « фабричний
метод» , який дозволить задати за замовчуванням тип контролера для відповідного виду .
Реалізації
Концепція MVC вперше застосувалася при проектуванні мови програмування
Smalltalk наприкінці 1970-х років як модель для інтерфейсу користувача. З цього моменту
він відіграє основну роль у більшості фреймворків з призначеним для користувача
інтерфейсом. Він докорінно змінив погляд на проектування додатків. Також в область
застосування концепції входить реалізація каркаса Документ-Вид (Document-View) в
рамках бібліотеки MFC для мови Visual C++. У сучасних технологіях концепція MVC
представлена схемою JSP Model 1/2 для динамічної обробки Web-змісту на основі Java
Server Pages (JSP). Більшість фреймворків для веб- програмування зараз в основі своїй
містять саме MVC . До найбільш вдалих прикладів застосування цього патерну для мови
PHP можна віднести Zend Framework і cakePHP.
У мові програмування Java концепція MVC підтримується на рівні стандартних
класів-бібліотек. В результаті використання парадигми MVC програміст отримує в своє
розпорядження могутню структуру об'єктів-компонентів, функції яких чітко розмежовані,
що гарантує надійність і розширюваність системи, що розробляється.
Веб-каркаси: Struts, WebWork/Struts 2, Spring MVC, JavaServer Faces (JSF),
Tapestry
Десктоп-каркаси: Swing, JFace
2009 року Microsoft випустив каркас ASP.NET MVC з відкритими кодами.
Найбільш часті помилки
Початківці програмісти (особливо у веб- програмуванні, де абревіатура MVC стала
популярна) дуже часто трактують архітектурну модель MVC як пасивну модель MVC. У
цьому випадку модель виступає виключно сукупністю функцій для доступу до даних, а
контролер містить бізнес- логіку. У результаті код моделей за фактом є засобом
отримання даних з СУБД, а контролер являє собою типовий модуль, наповнений бізнес -
логікою, або скрипт в термінології веб-програмування. У результаті такого розуміння
MVC розробники стали писати код, який Pádraic Brady, відомий в колах спільноти Zend
Framework, охарактеризував як ТТПК - «Товсті тупі потворні контролери» ( Fat Stupid
Ugly Controllers ):

«Середньостатистичний ТТПК отримував дані з БД (використовуючи рівень

абстракції бази даних, роблячи вигляд, що це модель) або маніпулював, перевіряв,
записував , а також передавав дані в вид . Такий підхід став дуже популярний тому, що
використання таких контролерів схоже на класичну практику використання окремого
php - файлу для кожної сторінки програми.»

Але в об'єктно - орієнтованому програмуванні використовується активна модель

MVC, де модель - це не тільки сукупність коду доступу до даних і СУБД, а вся бізнес-
логіка. У свою чергу, контролери являють собою лише елементи системи , в чиї
безпосередні обов'язки входить прийом даних із запиту і передача їх іншим елементам
системи. Лише в цьому випадку контролер стає "тонким" і виконує виключно функцію
сполучної ланки (glue layer) між окремими компонентами системи.

2.3 MVC в Java

Одним з найпопулярніших MVC фреймворків в Java є Spring MVC.
Spring Framework це відкрите середовище розробки застосунків джерела та
контейнера з підтримкою інверсії управління для платформи Java.
Основні особливості Spring Framework можуть бути використані будь-яким
застосунком Java, але є розширення для створення веб-застосунків на платформі Java EE.
Незважаючи на те, Spring Framework не нав'язує будь-якої конкретної моделі
програмування, Spring Framework став популярним в співтоваристві Java в якості
альтернативи, заміна Enterprise JavaBean (EJB) моделі.
Фреймворк MVC: каркас, заснований на HTTP і сервлетах, що надає безліч
можливостей для розширення та налаштування (customization).
 Рис 2. Реалізація Model-View-Controller в Spring MVC

Одним з модулів Spring Framework є Spring MVC. Spring MVC - фреймворк

орієнтований на запити і надає розробнику наступні можливості:
Ясний і прозорий поділ між шарами в MVC і запитах.
Стратегія інтерфейсів - кожен інтерфейс робить тільки свою частину роботи.
Інтерфейс завжди може бути замінений альтернативною реалізацією.
Інтерфейси тісно пов'язані з Servlet API.
Високий рівень абстракції для веб-додатків.
У веб-додатках можна використовувати різні частини Spring Framework, а не тільки
Spring MVC.
2.4 Приклад використання MVC на Java
Приклад – це програма яка реалізує простий калькулятор з одною дією – додавання
двох чисел.

CalculatorModel.java
// The Model performs all the calculations needed
// and that is it. It doesn't know the View
// exists

public class CalculatorModel {

// Holds the value of the sum of the numbers

// entered in the view

private int calculationValue;

 public void addTwoNumbers(int firstNumber, int secondNumber){

calculationValue = firstNumber + secondNumber;

public int getCalculationValue(){

return calculationValue;

CalculatorView.java
// This is the View
// Its only job is to display what the user sees
// It performs no calculations, but instead passes
// information entered by the user to whomever needs
// it.

import java.awt.event.ActionListener;

import javax.swing.*;

public class CalculatorView extends JFrame{

private JTextField firstNumber = new JTextField(10);

private JLabel additionLabel = new JLabel("+");
private JTextField secondNumber = new JTextField(10);
private JButton calculateButton = new JButton("Calculate");
private JTextField calcSolution = new JTextField(10);

CalculatorView(){

// Sets up the view and adds the components

JPanel calcPanel = new JPanel();

this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
this.setSize(600, 200);

calcPanel.add(firstNumber);
calcPanel.add(additionLabel);
calcPanel.add(secondNumber);
calcPanel.add(calculateButton);
calcPanel.add(calcSolution);

this.add(calcPanel);

// End of setting up the components --------

public int getFirstNumber(){

return Integer.parseInt(firstNumber.getText());

public int getSecondNumber(){

return Integer.parseInt(secondNumber.getText());

}
 public int getCalcSolution(){

return Integer.parseInt(calcSolution.getText());

public void setCalcSolution(int solution){

calcSolution.setText(Integer.toString(solution));

// If the calculateButton is clicked execute a method

// in the Controller named actionPerformed

void addCalculateListener(ActionListener listenForCalcButton){

calculateButton.addActionListener(listenForCalcButton);

// Open a popup that contains the error message passed

void displayErrorMessage(String errorMessage){

JOptionPane.showMessageDialog(this, errorMessage);

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

// The Controller coordinates interactions

// between the View and Model

public class CalculatorController {

private CalculatorView theView;

private CalculatorModel theModel;

public CalculatorController(CalculatorView theView, CalculatorModel theModel) {

this.theView = theView;
this.theModel = theModel;

// Tell the View that when ever the calculate button

// is clicked to execute the actionPerformed method
// in the CalculateListener inner class

this.theView.addCalculateListener(new CalculateListener());
}

class CalculateListener implements ActionListener{

public void actionPerformed(ActionEvent e) {

int firstNumber, secondNumber = 0;

// Surround interactions with the view with

// a try block in case numbers weren't
// properly entered

try{
 firstNumber = theView.getFirstNumber();
secondNumber = theView.getSecondNumber();

theModel.addTwoNumbers(firstNumber, secondNumber);

theView.setCalcSolution(theModel.getCalculationValue());

catch(NumberFormatException ex){

System.out.println(ex);

theView.displayErrorMessage("You Need to Enter 2 Integers");

MVCCalculator.java
public class MVCCalculator {
public static void main(String[] args) {

CalculatorView theView = new CalculatorView();

CalculatorModel theModel = new CalculatorModel();

CalculatorController theController = new

CalculatorController(theView,theModel);

theView.setVisible(true);

}
}
3.ЛАБОРАТОРНЕ ЗАВДАННЯ
Використовуючи шаблон проектування MVC написати:
1. Калькулятор з графічним інтерфейсом користувача для виконання чотирьох
арифметичних дій: додавання, віднімання, множення, ділення.
2. Програму для показу слайдів (3-5 зображень, які читаються з файлів формату bmp,
jpeg або png) у графічному вікні. Зміна слайду повинна відбуватися по кліку
мишки.
3. Програму для малювання прямих ліній різної товщини і кольору. Реалізувати
інтерфейс для завдання атрибутів ліній.
4. Програму для перегляду тексту із текстового файлу. Текст відображати сторінками
по 25 лінійок. Забезпечити можливість навігації по сторінках.
5. Програму, яка відображає зображення, яке завантажується з файлу через головне
меню. По кліку миші на зображенні, виконувати інвертацію кольорів.
6. Програму, яка відображає статичне зображення і при клацаннях мишею по ньому в
графічному вікні воно стрибкоподібно збільшує свої розміри до певної межі, а
потім також стрибкоподібно зменшує свої розміри до первинного розміру.
 7. Програму, яка виконує частотний аналіз тексту: визначає усі слова, які
зустрічаються в ньому і кількість їх входження. Результати виводить у вікно
графічного інтерфейсу.
8. Програму для перетягування тексту (написи) в графічному вікні. При натисненні
кнопки миші на написі і переміщенні миші напис переміщається услід за мишею.
При відпуску кнопки миші позиція напису фіксується.
9. Програму для малювання прямокутників різного розміру і кольору заповнення.
Реалізувати інтерфейс для завдання атрибутів прямокутників.
10. Калькулятор з графічним інтерфейсом користувача для виконання
тригонометричних операцій: sin, cos, tg, ctg, arcsin, arccos, arctg, arcctg.

4.ЗМІСТ ЗВІТУ
1. Мета роботи.
2. Короткі теоретичні відомості.
3. Файли проекту.
4. Результати роботи програми
5. Аналіз результатів та висновки.

5.СПИСОК РЕКОМЕНДОВАНОЇ ЛІТЕРАТУРИ

1. ASP.NET MVC Framework / Гайдар Магдануров, Владимир Юнев; БХВ-
Петербург, 2010 р.
2. Приёмы объектно-ориентированного проектирования. Паттерны
проектирования / Эрих Гамма, Ричард Хелм, Ральф Джонсон, Джон Влиссидс;
Питер, Санкт-Петербург, 2001 р.