Увод у МВЦ архитектуру: објашњени примери

Архитектура Модел-Виев-Цонтроллер (МВЦ) је један од најпопуларнијих образаца развоја софтвера. Логика која стоји иза МВЦ архитектуре користи принцип дизајна раздвајања брига. Овај принцип има за циљ да одвоји апликацију у окружне одељке, где се сваки одељак бави специфичним и посебним питањем.

МВЦ архитектура прати принцип раздвајања забринутости до слова. У ствари, свако слово у МВЦ акрониму представља суштински део ваше апликације. Овај чланак детаљно истражује сваки одељак МВЦ архитектуре и показује вам како да их користите за развој софтвера.

Шта је модел?

Модел МВЦ архитектуре је главна компонента обрасца дизајна. То је зато што модел ваше апликације складишти логику података. Модел диктира како чувате и преузимате своје податке.

За апликацију која користи архитектуру МВЦ контролера, подаци су суштинска компонента њеног рада.

Шта је поглед?

Поглед МВЦ архитектуре је кориснички интерфејс (УИ) ваше апликације. УИ је оно што корисник види на свом уређају када ступи у интеракцију са вашим програмом. Стање Виев се ослања на податке ускладиштене коришћењем модела.

Шта је контролор?

Контролер можете замислити као мост између компоненти модела и приказа.

Када корисник достави податке преко вашег корисничког интерфејса (Приказ), Поглед прослеђује те податке контролору. Контролор користи те податке за ажурирање базе података (преко модела). Контролор такође извлачи податке из базе података (кроз модел) и враћа их у приказ.

Осим што је канал података, контролер је и мозак операције. Одлучује коју операцију ће извршити на којим подацима и које податке вратити корисничком интерфејсу.

Како се све то спаја?

МВЦ архитектура ствара полу-затворену петљу која се ослања на све компоненте да би адекватно функционисале. Следећа илустрација показује како функционише МВЦ архитектура.

Као што можете видети из горње илустрације, МВЦ апликација прима почетни унос података од корисника преко корисничког интерфејса. Затим апликација прослеђује те податке кроз различите компоненте МВЦ архитектуре и у неким случајевима манипулише тим подацима у компоненти Цонтроллер.

Примена МВЦ архитектуре

Рецимо да развијате апликацију за бензинску станицу која жели да направи евиденцију о свом продатом гасу на станици и да помогне сервисерима да израчунају цену. Користећи МВЦ архитектуру, започели бисте са моделом, затим прешли на контролер, а након што схватите сву логику ваше апликације, можете имплементирати Виев.

Када креирате модел за своју апликацију, мораћете да знате коју врсту података желите да ускладиштите, како желите да ускладиштите те податке и колико желите да ти подаци буду доступни.

Креирање модела апликације

//Јава библиотека
увоз јава.ио. Сериализабле;
јавностикласа ГасПрицеМодел имплементира сериализабле{
 //attributes
приватностатичнеконачнидугачаксериалВерсионУИД = 1Л;
приватно Стринг дриверНаме;
приватнопловак гасАмоунт;
приватно Стринг гасТипе;
приватнопловак трошак;
// подразумевани конструктор
јавности ГасПрицеМодел() {
ово.дриверНаме = "";
ово.гасАмоунт = 0.00ф;
ово.гасТипе = "";
ово.цост = 0.00ф;
 }
 //примарни конструктори
јавности ГасПрицеМодел (стринг драјверНаме, пловак гасАмоунт, Стринг гасТипе, пловак цена) {
ово.дриверНаме = дриверНаме;
ово.гасАмоунт = гасАмоунт;
ово.гасТипе = гасТипе;
ово.цост = трошак;
 }
 //гетери и сеттери који преузимају и манипулишу подацима
јавности Стринг гетДриверНаме() {
повратак дриверНаме;
 }
јавностипразнина сетДриверНаме (стринг драјверНаме) {
ово.дриверНаме = дриверНаме;
 }
јавностипловак гетГасАмоунт() {
повратак гасАмоунт;
 }
јавностипразнина сетГасАмоунт(пловак гасАмоунт) {
ово.гасАмоунт = гасАмоунт;
 }
јавности Стринг гетГасТипе() {
повратак гасТипе;
 }
јавностипразнина сетГасТипе (Стринг гасТипе) {
ово.гасТипе = гасТипе;
 }
јавностипловак гетЦост() {
повратак трошак;
 }
јавностипразнина сетЦост(пловак цена) {
ово.цост = трошак;
 }
}

Постоји неколико важних ствари које треба идентификовати у коду модела изнад. Први је да имплементира интерфејс који се може серијализирати. Овај интерфејс вам омогућава да сачувате стање сваког објекта креираног помоћу ГасПрицеМодел класе претварањем у ток бајтова. Имплементација интерфејса који се може сериализовати значи да такође треба да креирате ИД верзије, што ради први атрибут у класи изнад.

Повезан: Научите како да креирате класе у Јави Остала четири атрибута у ГасПрицеМодел класе су подједнако важне јер вам говоре ко ће приступити подацима које ће овај модел креирати. Такође вам говори који тип података ће модел складиштити (низове и плутајуће).

Креирање контролера апликација

//Јава библиотеке
увоз јава.ио. Филе;
увоз јава.ио. ФилеНотФоундЕкцептион;
увоз јава.ио. ФилеОутпутСтреам;
увоз јава.ио. ИОЕкцептион;
увоз јава.ио. ОбјецтОутпутСтреам;
јавностикласа ГасПрицеЦонтроллер {
 //израчунава цену гаса купца и враћа га
јавностипловак израчунај цену(пловак количина, Стринг гасТипе){
пловак цена = 0,00ф;
коначнипловак дизелПрице = 4.925ф;
коначнипловак премиумПрице = 5.002ф;
коначнипловак регуларПрице = 4.680ф;
ако (гасТипе == "Дизел")
 цена = количина * цена дизела;
ако (гасТипе == "Премијум")
 цена = износ * премиумПрице;
ако (гасТипе == "Редовно")
 цена = износ * редовна цена;
повратак трошак;
 }
// чува податке из сваке продаје у датотеку користећи модел
јавностибоолеан савеЕнтри (ГасПрицеМодел подаци){
покушати {
ФилеОутпутСтреам фс = Нова ФилеОутпутСтреам(Нова Фајл("дата.дат"), истина);
 ОбјецтОутпутСтреам ос = Нова ОбјецтОутпутСтреам (фс);
 ос.вритеОбјецт (подаци);
 ос.флусх();
 ос.цлосе();
повратакистина;
 } улов (ФилеНотФоундЕкцептион е) {
 е.принтСтацкТраце();
 } улов (ИОЕкцептион е) {
 е.принтСтацкТраце();
 }
повратаклажно;
 }
}

Контролор изнад ради две ствари, врши прорачун на основу података примљених из приказа и одлучује које податке да врати. Контролер изнад такође користи модел апликације за складиштење објеката креираних из уноса погледа, користећи савеЕнтри() методом.

Креирање приказа апликације

//Јава библиотеке
импорт јава.авт. БордерЛаиоут;
импорт јава.авт. ГридЛаиоут;
импорт јава.авт.евент. АцтионЕвент;
импорт јава.авт.евент. АцтионЛистенер;
импорт јавак.свинг. ЈБуттон;
импорт јавак.свинг. ЈЦомбоБок;
импорт јавак.свинг. ЈФраме;
импорт јавак.свинг. ЈЛабел;
импорт јавак.свинг. ЈОптионПане;
импорт јавак.свинг. ЈПанел;
импорт јавак.свинг. ЈТектФиелд;
јавна класа ГасПрицеВиев проширује ЈФраме имплементира АцтионЛистенер {
//attributes
 привате статиц финал лонг сериалВерсионУИД = 1Л;
 приватни контролер ГасПрицеЦонтроллер;
 привате ЈЛабел дриверНаме;
 приватно ЈТектФиелд намеФиелд;
 приватни ЈЛабел гасАмоунт;
 приватно ЈТектФиелд амоунтФиелд;
 приватни ЈЛабел гасТипе;
 приватни ЈЦомбоБок типеЦомбо;
 приватно ЈБуттон бтнЦлеар;
 приватно ЈБуттон бтнСаве;
 приватни статички коначни Стринг[] тип =
 {"Диесел", "Премиум", "Регулар"};
//подразумевани конструктор
 јавни ГасПрицеВиев() {
 ово (нови ГасПрицеЦонтроллер());
 }
// примарни конструктор који узрокује кориснички интерфејс
 јавни ГасПрицеВиев (ГасПрицеЦонтроллер контролер) {
супер("Пријава за продају гаса");
 сетДефаултЦлосеОператион (ЈФраме. ЕКСИТ_ОН_ЦЛОСЕ);
 сетСизе (400,500);
 сетВисибле (труе);
тхис.цонтроллер = контролер;
цонфигуреВиев();
 }
//генерисање корисничког интерфејса за апликацију
 приватни воид цонфигуреВиев() {
сетЛаиоут (нови БордерЛаиоут());
 ЈПанел пнл = нови ЈПанел (нови ГридЛаиоут (4,2,2,2));
дриверНаме = нев ЈЛабел("Име возача:");
 пнл.адд (дриверНаме);
 намеФиелд = ново ЈТектФиелд();
 пнл.адд (намеФиелд);
 гасАмоунт = нев ЈЛабел("Количина гаса (галон):");
 пнл.адд (гасАмоунт);
 амоунтФиелд = ново ЈТектФиелд();
 пнл.адд (амоунтФиелд);
 гасТипе = нев ЈЛабел("Тип гаса:");
 пнл.адд (гасТипе);
 типеЦомбо = нови ЈЦомбоБок(тип);
 пнл.адд (типеЦомбо);
 бтнЦлеар = нев ЈБуттон("Обриши");
 пнл.адд (бтнЦлеар);
 бтнСаве = нев ЈБуттон("Сачувај");
 пнл.адд (бтнСаве );
додај (пнл, БордерЛаиоут. ЦЕНТАР);
АцтионЛистенер();
}
 //слуша клик на једно од два дугмета
 публиц воид АцтионЛистенер() {
 бтнЦлеар.аддАцтионЛистенер (ово);
бтнСаве.аддАцтионЛистенер (ово);
 }
//изводи радњу ако се кликне на одређено дугме
 @Прегазити
 публиц воид ацтионПерформед (АцтионЕвент ев) {
иф (ев.гетСоурце().екуалс (бтнЦлеар)) {
 намеФиелд.сетТект("");
 амоунтФиелд.сетТект("");
 }
иф (ев.гетСоурце().екуалс (бтнСаве)){
Стринг гасТипе = (Стринг) типеЦомбо.гетСелецтедИтем();
 флоат гасАмоунт = Флоат.парсеФлоат (амоунтФиелд.гетТект());
 флоат дриверТотал = цонтроллер.цалцулатеЦост (гасАмоунт, гасТипе);
 Стринг драјверНаме = намеФиелд.гетТект();
 ЈОптионПане.сховМессагеДиалог (нулл, дриверНаме +" би требало да плати $" + дриверТотал );
ГасПрицеМодел купац = нови ГасПрицеМодел (дриверНаме, гасАмоунт, гасТипе, дриверТотал);
цонтроллер.савеЕнтри (купац);
 }
}
}

Приказ изнад креира кориснички интерфејс користећи цонфигуреВиев() методом. Затим прикупља податке након што се догађај деси (преко слушаоца акције). Приказ изнад затим шаље прикупљене податке контролору, који затим обавља неке прорачуне и враћа податке у приказ.

Извршавање МВЦ апликације

увоз јава.авт. ЕвентКуеуе;
јавностикласа Апликација {
јавностистатичнепразнина маин (Стринг аргс[]) {
 ЕвентКуеуе.инвокеЛатер(
Нова Руннабле() {
@Прегазити
јавностипразнина трцати() { 
 ГасПрицеЦонтроллер контролер = Нова ГасПрицеЦонтроллер(); 
Нова ГасПрицеВиев (контролер); 
 }
 });
 }
}

Извршавање Апликација класа изнад ће генерисати следећи кориснички интерфејс:

Попуњавање корисничког интерфејса релевантним подацима ће генерисати следећи искачући кориснички интерфејс:

Ако погледате леву страну горње слике, видећете да је апликација такође креирала нову датотеку под називом „подаци.дат.” Дакле, ова МВЦ апликација прикупља податке од корисника преко корисничког интерфејса (Виев), који те податке шаље Контролор. Контролер манипулише подацима изводећи неке прорачуне, а затим те податке чува у датотеци користећи Модел. Повезан: Јава улаз и излаз: водич за почетнике

Јава улаз и излаз: водич за почетнике

Ако пажљиво погледате апликацију креирану у овом чланку, постоји неколико очигледних предности. Неке од ових предности укључују:

• Прилагодљивост
• Лакше тестирање кода
• Стварање сажетијег кода

Али МВЦ архитектура није једини корисни образац дизајна који може побољшати ваш развојни процес.

Како направити код за вишекратну употребу у ЈаваСцрипт-у користећи обрасце дизајна

Разумевање како да користите обрасце дизајна омогућиће вам да користите код за вишекратну употребу у ЈаваСцрипт-у. Ево шта треба да знате.

Реад Нект

О аутору