3.2. Опис клієнтської частини проекту

CommonController.js – спільний контролер від якого наслідуються інші

GroupController.js – контролер, відповідає за функціонал груп

StudentController.js – контролер, відповідає за функціонал студентів

AjaxController.js - контролер, відповідає за обмін AJAX повідомленнями

actions.js – опис спільного функціоналу.

Створення об’єктів контролерів:

GroupView.prototype = CommonView;

StudentView.prototype = CommonView;

GroupModel.prototype = CommonModel;

StudentModel.prototype = CommonModel;

GroupController.prototype.Validator = Validator;

StudentController.prototype.Validator = Validator;

var Group = new GroupController({GroupModel, StudentModel}, GroupView);

var Student = new StudentController({GroupModel, StudentModel}, StudentView);

Приклад реалізації створення групи:

1) Спрацьовує обробник події натискання на кнопку:

div id="addButtonBox">

<button onclick="Group.showCreateGroupBox()">+</button>

</div>

2) GroupController викликає метод View для відображення вікна створення групи:

this.showCreateGroupBox = () =>

{

this.View.renderCreateGroupBox();

};

3) Метод showCreateGroupBox класу View виводить вікно на екран.

4) Користувач заповнює необхідні поля та натискає на кнопку «Створити». Спрацьовує обробник натискання: onclick="Group.createGroup(this)"

5) Метод createGroup класу GroupController передає до моделі GroupModel:

• вхідні дані (ім’я групи, спеціальність, прізвище куратора) groupObj, попередньо перевіривши їх на валідність

• функцію зворотного виклику () => this.render(), яка буде виконана після отримання даних від серверу.

this.createGroup = () =>

{

Var inputsBox = document.getElementById('createGroup').querySelectorAll('input, select'),

allSpecialityKeys = this.GroupModel.getAllSpecialityKeysArr(),

groupInfo = {},

groupObj = {};

groupInfo = this.groupBoxGetInputParams(inputsBox, allSpecialityKeys);

groupObj = groupInfo.data;

If(!groupInfo.CheckError)

{

this.GroupModel.createGroup(

groupObj,

() => this.render()

);

}

};

6) Модель передає отримані параметри AjaxController для AJAX-запиту на сервер:

'createGroup' – назва методу

'groupController' - назва контролера, якому передаються дані

{name, curatorNameLast, speciality} – самі дані

({data: {group}}) => – функція зворотного виклику, аргументом якої є об’єкт групи, надісланого сервером у відповідь.

this.basicErrorHandler – функція-обробник у випадку невдалого запиту на сервер.

this.createGroup = ({name, curatorNameLast, speciality}, callbackFunc) =>

{

AjaxController('createGroup',

'groupController',

{name, curatorNameLast, speciality},

({data: {group}}) =>

{

If(checkNullUndefined(group))

{

this.addNewGroup(group);

callbackFunc();

}

},

this.basicErrorHandler

);

};

7) Об’єкт групи зберігається локально this.addNewGroup(group);. Викликається callbackFunc(), яка сповістить GroupController про успішність запиту. GroupController у свою чергу викличе () => this.render() для оновлення відображення даних у таблиці.