И так, приступим к формированию нашего приложения. Как упоминалось раннее наше приложение будет состоять из двух частей графического интерфейса: контейнера с перемещающимися строками в верхней части и нижней частью, где будут располагаться элементы редактирования конфигурации приложения.
Для начала создадим шаблон с именем moving-containers и директорию templates/blocks, в которой разместим шаблон.
Выполним вывод нашего шаблона на главной странице приложения.
Файл :templates/pages/main-page.tmpl:
Теперь подключим CSS файл с подготовленными стилями к шаблону :templates/blocks/moving-containers.tmpl. Скачайте CSS файл moving-containers.css и разместите его в директории :templates/blocks и добавьте запись в шаблон.
Файл moving-containers.tmpl:
И так, в шаблоне moving-containers мы разместим хранение массива строк в аргументе _strings, которое будем считывать на стороне сервера из системной переменной. Соответственно, шаблон moving-containers должен будет рендерится на стороне сервера и опция шаблона clientRendering должна быть равна false. Начиная с этого примера аргументы шаблона, которые относятся к внутренним переменным и не должны изменяться внешним кодом, мы будем именовать с нижнего подчеркивания.
Объявим программный аргумент _strings в файле :templates/blocks/moving-containers.tmpl и запишем его заполнение в хуке шаблона hooksProgrammableArgument.
Файл :templates/blocks/moving-containers.tmpl
Файл :templates/blocks/moving-containers.hooks.js
Выведем в шаблон контейнер с нашими строками. Каждая строка будет отдельным подшаблоном view-item со своим таймером, который будет смещать их положение, а при смещении за границы вложенного контейнера менять вектор движения.
Файл :templates/blocks/moving-containers.tmpl
И так, разберем, что мы записали в шаблоне. Мы имеем основной шаблон, в котором происходит вывод подшаблонов view-item, содержащих сами строки.
В коде основного шаблона мы выводим все строки, используя ссылочный аргумент. Как видно из кода, используется 2-х уровневый адрес ссылки на аргумент. Путь к ссылочному аргументу должен быть указан в нотации Javascript, используя точки, как разделители полей или квадратные скобки []. Мы использовали передачу значения через ссылочный аргумент, для того чтобы при редактировании строки автоматически было обновление в подшаблоне view-item.
Так же отметим настройки подшаблона view-item. Опция autoUpdate установлена в значение true, для автоматического обновления шаблона при редактировании. Опция clientRendering равна true, так как основной шаблон выполняет свой рендеринг на стороне сервера и все вложенные шаблоны, так же наследуют этот параметр. Но для данного шаблона в этом нет необходимости.
Так как шаблон у нас выводит только одну строку мы устанавливаем CSS класс оберточного DOM элемента, используя системный аргумент fcfClassInner.
Теперь давайте запишем код реализации враппера для подшаблона view-item. Для начала создадим файл враппера.
И запишем в созданный файл логику перемещения строк внутри родительского DOM элемента. Шаблон view-item перемещается в направлении определенной радианой, при пересечении границ внешнего контейнера меняет направление движения. И еще, для красоты будем раскрашивать наши строки в разные цвета, за это будет отвечать функция setColor().
Файл :templates/blocks/moving-containers+view-item.wrapper.js
Код враппера выполняет перемещение, которое выполняется методом setPosition(), вызываемое таймером (метод timer()) каждые 30 миллисекунд. Таймер запускается при инициализации враппера и завершает свое выполнение после вызова метода
Так как мы выполняем перемещение подшаблона и изменение цвета, изменяя свойство style для DOM элемента, нам необходимо выполнить его позиционирование при повторном рендеринге. Это выполняется перегрузкой метода
Также рекомендуется самостоятельно ознакомится с вспомогательными функциями, используемыми в коде
Теперь можно запустить приложение и посмотреть результат