Приложение б Руководство программиста

1. Назначение и условия применения

1.1. Назначение программы

Программный веб-компонент (далее компонент) предназначен для упрощения работы с событиями пользователям системы видеонаблюдения.

1.2. Функции, выполняемые программой

Компонент является частью веб-компонента видеоплеера и обладает следующими характеристиками:

- возможность просмотра событий системы видеонаблюдения в виде записей таблицы;

- возможность просмотра событий на временной шкале видеоплеера в виде сегментов, соответствующих событиям системы видеонаблюдения, согласно действующей цветовой схеме.

1.3. Условия, необходимые для выполнения программы

Наличие любого из перечисленных интернет-браузеров последних версий: Google Chrome, Yandex Browser, Mozilla Firefox, Safari, Спутник, Opera, Microsoft Edge.

2. Характеристики программы

2.1. Описание программы

Компонент является веб-компонентом Wasaby Framework и является частью веб-компонента видеоплеера.

Программа работает в интерактивном режиме, основанном на тесном взаимодействии с конечным пользователем. Для использования функциональных возможностей программы необходимо задействовать соответствующие элементы интерфейсной части программы.

2.2. Место в системе

Место компонента в системе демонстрирует концептуальная схема.

Рисунок А.1 – Концептуальная схема

2.3. Основной принцип работы

2.3.1. Введение

Программа написана в соответствии с паттерном MVVM.

MVVM состоит из трех компонентов: модели (Model), модели представления (ViewModel) и представления (View).

Модель описывает используемые в приложении данные. Модели могут содержать логику, непосредственно связанную этими данными, например, логику валидации свойств модели. В то же время модель не должна содержать никакой логики, связанной с отображением данных и взаимодействием с визуальными элементами управления.

View или представление определяет визуальный интерфейс, через который пользователь взаимодействует с приложением. Применительно к Wasaby представление — это код в wml, который определяет интерфейс в виде кнопок, текстовых полей и прочих визуальных элементов. Однако иногда в файле связанного кода все же может находиться некоторая логика, которую трудно реализовать в рамках паттерна MVVM во ViewModel.

ViewModel или модель представления связывает модель и представление через механизм привязки данных. Если в модели изменяются значения свойств, то автоматически идет изменение отображаемых данных в представлении, хотя напрямую модель и представление не связаны. ViewModel также содержит логику по получению данных из модели, которые потом передаются в представление. И также VewModel определяет логику по обновлению данных в модели.

Философия Wasaby определяет понятие компонента или же контрола, как слоя ViewModel в парадигме MVVM.

2.3.2. Компонент Wasaby

Контрол (компонент) — это изолированная часть функционала, которую можно использовать повторно при разработке интерфейса. В файловой структуре представляет собой минимум два файла: TypeScript-модуль, где описана логика, и WML-шаблон, где описано представление.

Контролы можно вкладывать друг в друга, образуя дерево, где есть родительские и дочерние элементы. Создать новый контрол можно через композицию других контролов.

Разработка контрола начинается с описания класса, который должен наследоваться от базового класса (UI/Base:Control). Описание класса помещается в отдельном TypeScript-модуле.

Неотъемлемой частью любого контрола является его визуальное отображение, которое описывают в шаблонах. В Wasaby для шаблонов создано собственное расширение файла — WML (Wasaby Markup Language). Для импорта шаблона используют директиву import, а импортированный шаблон передают в свойство _template. Для описания визуального отображения контрола применяется декларативный подход. Достаточно указать в каком месте шаблона следует вывести данные, а дальнейшую работу выполнит ядро Wasaby.

Выделяются три основных фазы жизненного цикла: создание, обновление и уничтожение. В рамках каждой фазы выполняются методы, называемые хуками жизненного цикла. Хуки можно определить в описании класса контрола.

Рисунок А.2 – Фазы жизненного цикла компонента Wasaby

Опции — это объект, в котором хранятся параметры, переданные при инициализации контрола. Опции доступны только на чтение, и менять их можно только через родительский контрол. Такое ограничение введено для того, чтобы избежать излишнего усложнения кода. Изменение объекта опций подобно изменению аргументов, переданных в функцию. Опции должны меняться только в том случае, если родитель изменил параметры контрола. Wasaby по умолчанию синхронизирует изменения опций в одном направлении — из родительского контрола к дочерним. Для создания двусторонней синхронизации используют директиву bind.

Каждый контрол хранит некоторое внутреннее состояние, представленное набором свойств. В каждый момент времени контрол может отличаться своим состоянием. Состояние контрола используется для работы контрола и организуется разработчиком. Свойство контрола становится реактивным, когда используется в шаблоне. Если значение свойства изменяется, Wasaby автоматически запрашивает его перерисовку в шаблоне.