Рекомендация: всегда начинайте разработку приложения с рисования прототипа, выделяя структуру страниц и переходы между ними. Такой подход позволяет существенно сэкономить время на реализацию.
Для иллюстрации метода каждый пример ниже будет сопровождаться таким прототипом задействованных страниц.
Кабинет ITSM (подача заявок на обслуживание)
Для того, чтобы получить доступ к подсистеме конструктор, необходимо
1. В подсистеме http://ip:8080/SynergyAdmin предоставить пользователю доступ (раздел "Управление пользователями" - карточка пользователя) **"Конструктор web-клиента"**
2. Перейти по адресу http://ip:8080/constructor и авторизоватья в подсистеме Конструктор
Рабочее место пользователя
--------------------------------
В примере будут рассмотрены:
создание страниц приложения
добавление компонентов на страницу
панели, их свойства
позиционирование компонентов на странице
компоненты “Надпись”, “Кнопка”, “Поле ввода”, “Представление реестра”, “Проигрыватель форм”, их свойства
понятие кейса компонента, события компонентов и действия над ними
выполнение переходов между страницами
передача параметров события между компонентами
Интерфейс подсистемы Конструктор представлен четырься основными панелями:
Особенности личного кабинета ITSM:
одна форма заявки
внутренний сервис: все потенциальные пользователи портала должны быть заранее авторизованы в системе, гостевой доступ не предполагается.
1. Верхняя панель
1.1 Кнопка "Меню"
1.2 Название открытого приложения
1.3 Кнопки отмены и повтора действий
1.4 Переключатель режима конструктора: при включенной опции отображается режим редактирования, в противном случае - режим просмотра
2. Левая панель - "Навигатор"
2.1 Страницы
2.2 Компоненты
2.2.1 Стандартные
2.2.2 Пользовательские
2.3 Ресурсы
2.4 Дерево компонентов
3. Основная рабочая области
3.1 Панель навигации между открытыми объектами: страницами/ресурсами/пользовательскими компонентами
3.2 Панель действий над страницами: (кнопка сохранения, кнопки перемещения компонентов "выше"/"ниже" отонсительно других компонентов в рамках той же панели)
3.3 Область редактирования объекта: страницы, ресурса, пользовательского компонента
4. Правая панель - Панель "Свойств"
4.1 Свойства
4.2 Кейсы
4.3 Параметры
Структура страниц приложения:
Конструктор приложений всегда использует объекты Synergy. В нашем примере такими объектами будут как минимум:
форма “Заявка”
реестр заявок, с настроенным фильтром “Мои заявки”, содержащим заявки текущего пользователя, и его дочерними фильтрами по статусам заявки:
“В работе”
“Требующие доработки”
“Завершенные”
Приложение Synergy IDE, используемое в примере, приложено здесь.
Создание приложения
В верхнем меню Конструктора выбираем пункт “Клиент” - “Создать”. В открывшемся диалоге указываем название нового приложения, его код и URL:
Название клиента будет отображено в общем списке созданных приложений в Конструкторе.
Код используется для внутренней идентификации приложения в системе.
По указанному URL будет выполняться переход к запущенному приложению в формате: ``<host>:<port>/<URL>``. В нашем случае Личный кабинет будет расположен по адресу ``/itsm``.
Флаг “Требуется авторизация” оставляем включенным: он означает, что все приложение целиком не будет доступно пользователям, не выполнившим авторизацию в приложении.
Создание страниц
Наше приложение будет состоять всего из четырех страниц:
Список заявок
Просмотр заявки
Создание заявки
Страница авторизации
Создадим эти страницы. В блоке “Страницы” нужно нажать на кнопку “Добавить страницу”. Откроется диалог создания новой страницы приложения:
Название страницы отображается в общем дереве страниц
Код страницы используется для настройки переходов между страницами приложения, а также для указания страницы в скриптах приложения
Флаг “Требуется авторизация” регулирует, может ли пользователь видеть текущую страницу, не будучи авторизованным. В нашем случае все страницы приложения являются строго внутренними, и для их просмотра требуется авторизация.
Свойства URL и Путь в текущей версии не используются, но обязательны для заполнения. В качестве временного решения предлагаем копировать в эти поля код страницы.
Таблицу “Принимаемые параметры” для этой страницы не заполняем.
Таким же образом создадим остальные страницы приложения:
После создания страниц Конструктор выглядит так:
В левой части расположены блоки:
“Страницы” - отображает дерево страниц текущего представления приложения, а также кнопки управления страницами и их кейсами.
“Компоненты” - отображает названия всех типов компонентов, которые можно использовать на странице.
“Ресурсы” - содержит файлы скриптов и стилей, используемых в приложении.
Верхняя панель содержит:
пункты меню “Клиент” и “Представления”
путь к выбранной странице
переключатель между режимами конструктора и просмотра клиента
кнопка экспорта клиента
кнопка скачивания ``war`` клиента для последующего деплоя на сервере
кнопка сохранения клиента
Предварительные настройки авторизации
Сейчас мы для каждой страницы и для приложения в целом указали, что для их просмотра необходима авторизация пользователя. Однако такая настройка не позволит нам как разработчикам приложения предварительно посмотреть состояние результирующего клиента в Конструкторе до тех пор, пока не будет настроена страница авторизации.
Поэтому временно, на этапе первичной разработки, в свойствах страниц отключим флаг “Требуется авторизация”. В свойствах клиента (меню “Клиент” - “Свойства”) этот флаг тоже нужно отключить, а в качестве логина и пароля пользователя по умолчанию ввести данные одного из пользователей, входящих в группу клиентов ITSM:
Страница “Список заявок”
Настроим вид страницы, на которой будут располагаться заявки, поданные текущим пользователем.
Страница открывается кликом по кнопке в блоке “Страницы”. Страница открывается в основной рабочей области экрана:
По умолчанию каждая страница содержит компонент ``root-panel`` - панель, в которой будут содержаться все остальные компоненты страницы.
Перед тем, как добавлять на страницу новый компонент, необходимо выделить панель, на которой он будет расположен, кликом левой кнопкой мыши. После этого справа отобразится блок свойств выделенной панели, а в верхней части (выше панели вкладок) будут расположены кнопки управления компонентами:
Панель управления компонентом содержит иконки:
кнопки вставки, вырезания и копирования выделенного компонента;
кнопку (удалить выделенный компонент);
кнопки и перемещения компонента вверх/вниз и влево/вправо в рамках его панели.
Здесь и далее будем использовать два основных термина:
Компонент - любой элемент, расположенный на странице клиента, характеризующийся своим кодом и типом.
Панель - специальный тип компонента, который может содержать в себе вложенные компоненты, в том числе и другие панели.
Рассмотрим подробнее блок “Свойства”. Он содержит:
код выделенного компонента, который должен быть уникальным в пределах текущей страницы;
блок свойств, специфичных для типа выбранного компонента - он будет рассмотрен позже;
“CSS класс” - имя класса, создаваемого для выделенного компонента, по умолчанию заполняется классом для типа этого компонента; указанное имя может быть использовано в ресурсах клиента в CSS;
“Стили” - поле ввода стилей CSS, если необходимо точечно настроить внешний вид для выделенного компонента.
размеры компонента - его ширину и высоту, которые могут быть указаны как в процентах, так и в пикселях.
Добавление компонентов
Добавим на страницу новые компоненты. Согласно прототипу, на странице “Список заявок” должны располагаться:
лейбл-заголовок страницы
фильтры реестра заявок
таблица реестра заявок
кнопка создания новой заявки
Сначала рекомендуется в корневую панель добавить вложенную панель, и все остальные компоненты добавлять уже в нее. Это даст больше свободы для управления этими компонентами. Сама корневая панель при этом будет служить только для настройки выравнивания всех компонентов страницы.
Кроме того, необходимо сразу настроить стартовую страницу приложения - ту страницу, которая будет отображена в приложении сразу после его открытия. Для этого нужно выделить страницу в разделе “Страницы”, потом нажать на кнопку . В нашем случае стартовой будет страница “Список заявок”:
Далее действия по шагам:
Выделить корневую панель страницы, в разделе “Свойства” в поле “Выравнивать по горизонтали” выбрать вариант “По центру”. Таким образом мы настроили выравнивание для всех компонентов, которые будут расположены внутри выделенной панели.
Оставив корневую панель выделенной, в списке компонентов слева выбрать компонент “Панель”. Результат:
Выделить новую панель ``panel-1``, в разделе “Свойства” указать ширину - 80%. Таким образом мы указали, что все компоненты должны располагаться по центру экрана, границы справа и слева будут составлять по 10%. Результат:
Оставив панель выделенной, в списке типов компонентов слева выбрать компонент “Надпись”. Результат:
Выделить добавленный компонент “Надпись”. В блоке “Свойства” отобразились свойства, характерные для этого типа компонента - текст с переводами, стиль, начертание, выравнивание и т.д.:
В свойствах компонента “Надпись” указать текст “Мои заявки”, размер - “Большой”. Результат:
Выделить панель ``panel-1``, добавить в нее новый компонент “Кнопка”. Результат:
Выделить компонент “Кнопка”, в панели ее свойств указать текст “Создать”. Результат:
Выделить панель ``panel-1``, добавить в нее новый компонент “Представление реестра”, который будет отображать записи реестра заявок. Первоначально этот компонент выглядит как текст “Нет прав на реестр”, поскольку в компоненте еще не выбран реестр. Результат:
Выделить компонент “Представление реестра”, в его свойствах указать код реестра заявок (из свойств этого объекта приложения в Synergy IDE) и код фильтра, содержащего заявки текущего пользователя. В результате компонент на странице отображает заголовки полей указанного реестра:
Примечание: реестр, указанный в свойствах компонента, должен быть доступен пользователю, авторизованному в Конструкторе (разработчику приложения). В противном случае не будут отображены поля этого реестра.
Режим просмотра приложения
В процессе разработки важно иметь возможность регулярно проверять промежуточный результат, чтобы устранить возможные ошибки как можно раньше. Конструктор приложений позволяет моментально переключаться между режимами просмотра и конструктора с помощью специального переключателя, расположенного на верхней панели:
По умолчанию используется “режим конструктора”, в котором выполняется разработка клиента. Для просмотра текущего результата нужно переключить его в “выключенное” состояние:
Проверим, что получилось, перейдя в режим просмотра приложения:
Примечание: предварительно убедитесь, что в указанном фильтре реестра действительно есть записи, и они доступны пользователю-разработчику клиента. При необходимости создайте подходящие записи вручную в клиентской части Synergy.
В режиме просмотра не отображаются или заблокированы большинство элементов управления. Обратите внимание на расположение компонентов: все содержимое страницы клиента располагается на всю доступную ширину браузера - именно поэтому представление реестра, которое в режиме конструктора располагалось ниже заголовка страницы и кнопки, теперь отображено в одну строку с ними.
Согласно прототипу кнопка “Создать” должна быть расположена в верхнем правом углу экрана. Настроим такое расположение с помощью вложенных панелей.
Расположение и выравнивание компонентов на странице: свойства панелей
В Конструкторе приложений расположение и выравнивание всех компонентов регулируется свойствами панели, на которой расположены эти компоненты. При настройке расположения необходимо учитывать, что указанное выравнивание содержимого будет применено ко всем компонентам внутри панели.
Рассмотрим на примере выравнивания кнопки “Создать”. Выделим панель, на которой расположена эта кнопка, и изучим ее свойства:
Нас интересует свойство “Выравнивание по горизонтали”. По умолчанию в этом свойстве выбрано значение “С начала панели” - для обычной панели это означает выравнивание у левого края. Это свойство может принимать значение “С пространством между содержимым” - все компоненты панели будут растянуты по горизонтали (по вертикали, если используется вертикальная панель). Применим это значение и посмотрим, что получилось:
Не совсем то, что нам было нужно: кнопка “Создать” оказалась расположена по центру, а не у правого края. Исправим это, переместив надпись “Мои заявки” и кнопку на собственную панель. Сделать это можно с помощью вырезания и вставки компонентов:
Выделить панель ``panel-1``, добавить в нее новую панель. Новая панель будет добавлена в конец родительской:
Выделить новую панель ``panel-2``, с помощью кнопки на панели свойств переместить ее в начало родительской панели:
Выделить надпись “Мои заявки”, на верхней панели нажать на кнопку “Вырезать” .
Выделить панель ``panel-1``, нажать на кнопку “Вставить” . Результат:
Повторить шаги 3-4 для кнопки “Создать”. Результат:
Для того, чтобы новая панель занимала всю доступную ей ширину родительской панели, указать у нее ширину 100%. Результат:
Настроить расположение содержимого для новой панели: в ее свойствах указать “Выравнивание по горизонтали” - “С пространством между содержимым”. Теперь результат соответствует ожидаемому:
Осталось указать компоненту “Представление реестра”, что он тоже должен занимать 100% доступной ему ширины:
Снова переключимся в режим просмотра приложения и убедимся, что компоненты расположены правильно:
На этом этапе временно оставим страницу “Список заявок” и перейдем к настройке создания и просмотра заявки.
Страница “Создание заявки”
Страница “Создание заявки” предназначена отображения формы заявки с возможностью ввода данных и создания новой записи в реестре заявок.
С помощью дерева страниц откроем страницу “Создание заявки”, кликнув по иконке . Страница откроется во вкладке:
По аналогии со страницей “Список заявок” сразу добавим в корневую панель вложенную, расположим ее по центру и укажем ее ширину 80%. Результат:
Компонент “Проигрыватель форм”
Для отображения форм Synergy в Конструкторе используется специальный компонент “Проигрыватель форм”. Он служит контейнером, отображающим форму Synergy “как есть” - ровно так же, как она выглядит в клиентском приложении Synergy. Добавим этот компонент на панель и рассмотрим его свойства:
В свойстве “Код формы” нужно указать код формы как объекта приложения Synergy.
Свойство “Код представления” позволяет выбрать одно из представлений формы для отображения в конструкторе.
Примечание: свойство “Код представления” используется только вместе с версией Synergy 4.1 и выше.
“Идентификатор данных по форме” может содержать ``UUID`` данных конкретной записи по форме.
Флаг “Открывать в режиме редактирования” регулирует режим отображения формы - будет она отображаться пользователю в режиме чтения или заполнения.
Далее следует группа свойств, регулирующая создание записи реестра для указанной формы:
флаг “Создать запись реестра” - создавать ли новую запись реестра с данными, введенными в проигрывателе форм;
флаг “Активировать запись реестра” - запускать ли маршрут активации созданной записи реестра;
свойство “Код реестра”, в котором необходимо указать код реестра как объекта приложения Synergy.
В нашем случае необходимо создавать новую запись реестра ``example_itsm_requests``, используя форму ``example_itsm_request``. Созданную заявку нужно отправлять на активацию, чтобы она была обработана оператором.
В соответствии с этим настроим свойства компонента “Проигрыватель форм”:
Здесь для проигрывателя форм заполнены свойства:
код формы - ``example_itsm_request``
включены флаги:
“Открывать в режиме редактирования”
“Создать запись реестра”
“Активировать запись реестра”
код реестра - ``example_itsm_requests``
ширина компонента - 100%
Кейсы компонентов
Одного отображения формы недостаточно для выполнения создания новой записи реестра. Необходима “ручка”, нажав на которую, пользователь отправит на сервер форму с текущими данными, а потом другая “ручка” обработает ответ сервера - успешное или неуспешное создание записи. Реализовать такие обработчики позволяет механизм кейсов.
В Конструкторе приложений кейс - это действие, выполняемое при наступлении некоторого события в случае, когда истинны заданные условия.
Кейсы могут быть созданы для любого компонента приложения. Каждому компоненту соответствует собственный набор возможных событий, которые могут в нем возникать, и собственный набор действий, которые можно над ним произвести.
Например, у компонента “Кнопка” есть только одно возможное событие - выполненный клик по ней, а у компонента “Проигрыватель форм” есть такие события, как “данные стали валидными”, “данные стали невалидными”, “запись создана успешно”, “запись не создана” и так далее.
Кейсы позволяют реализовать большую часть логики приложения без использования скриптинга.
Вернемся к примеру. Будем считать, что создание заявки будет выполняться по клику на кнопку “Создать”. Добавим эту кнопку ниже проигрывателя форм:
Теперь настроим кейс для этой кнопки. Панель “Кейсы” расположена в правой части экрана, ниже панели свойств:
Для добавления кейса нужно нажать на иконку . Откроется диалог “Редактирование кейса”:
Укажем здесь код нашего кейса - он должен содержать в себе только буквы латиницы, цифры и знак ``_``, и не должен начинаться с цифры. Пусть наш кейс называется ``create_data``:
Далее в диалоге расположен блок “Условия”, в данном случае он нам не нужен - создание записи будет выполняться по клику вне зависимости от каких-либо условий.
Ниже следует поле “Событие” - в нем требуется выбрать событие текущего компонента, которое и будет обрабатываться в этом кейсе. В нашем случае у текущего компонента “Кнопка” есть только одно возможное событие - “Клик”`.
Справа от этого поля расположена кнопка добавления действий, которые должны быть выполнены при наступлении указанного события:
В поле “Действия” необходимо выбрать то действие, которое будет выполнено в кейсе:
Каждое действие имеет собственный набор параметров. Вот некоторые возможные действия:
“Перейти на страницу” - выполнить переход на указанную страницу приложения;
“Выполнить на странице” - изменить свойства или выполнить некое действие с одним из компонентов на текущей странице;
“Открыть URL” - открыть указанную ссылку в новой вкладке браузера;
“Показать сообщение” - вывести пользователю сообщение с указанным текстом.
В нашем случае кнопка должна выполнить создание данных в проигрывателе форм. Это настраивается с помощью действия “Выполнить на странице”.
Для этого действия нужно в первую очередь указать тот компонент текущей страницы, в котором нужно выполнить что-либо. В зависимости от типа указанного компонента изменяется список возможных действий.
Выберем в списке компонентов проигрыватель форм с кодом ``formPlayer-1``:
Для компонента “Проигрыватель форм” доступно несколько действий, которые позволяют изменять свойства этого компонента:
Описание этих действий:
“Изменить форму” - указать новый код формы, которая будет отображена в компоненте;
“Изменить запись” - указать новый идентификатор записи, которую будет отображать проигрыватель;
“Выбрать представление формы” - изменить код представления для текущей формы;
“Изменить режим отображения” - указать режим, в котором будет отображена форма: просмотр или заполнение;
“Сохранить форму” - выполнить сохранение новой версии данных по форме;
“Создать запись по форме” - создать новую запись по форме;
“Скрыть/показать” - изменить отображение компонента на странице.
Для создания новой записи мы используем действие “Создать запись по форме”:
После сохранения кейс отображен в разделе “Кейсы” кнопки:
Cледует позаботиться о том, чтобы у пользователя не было возможности много раз подряд нажимать на кнопку “Создать” - может, кому-то из клиентов покажется, что количеством кликов он выражает крайне высокий приоритет обработки своей заявки.
Добавим в кейс кнопки ``create_data`` еще одно действие. Для этого нужно выделить кейс ``create_data`` и нажать на кнопку его редактирования :
Нажав на справа от события, добавим еще одно действие в кейс:
Новое действие должно будет выключать доступность кнопки сохранения:
Таким образом при клике по кнопке сохранения будет выполняться создание новой записи реестра, а сама кнопка будет блокироваться для предотвращения создания дубликатов записей.
“Правило хорошего тона” при разработке приложений - обязательно давать пользователю визуальный отклик как обратную связь на его действие. Сейчас кнопка “молча” отправит данные серверу, но пользователь никак не узнает, что произошло.
Установим обработку ответа сервера. Для Конструктора приложений ответ сервера - это тоже событие, которое относится к определенному компоненту и может быть обработано кейсом на этот компонент. Результат создания или сохранения формы - это событие компонента “Проигрыватель форм”.
Создадим новый кейс для проигрывателя:
Рассмотрим этот кейс:
код кейса: ``create_success`` - “говорящее” название, при взгляде на которое в целом понятна цель кейса;
событие: ``created_form_data`` - данные по форме успешно созданы;
действие : “Показать сообщение” - уведомляем пользователя о том, что у него все получилось. Параметры сообщения:
“локализованный текст” - отображение в сообщении фиксированного текста;
“Ваша заявка принята!” - текст сообщения. Сообщение может быть указано на нескольких языках;
“Успешное сообщение” - стиль отображения сообщения;
“Время отображения” = 5 секунд (по умолчанию).
Однако просто вывести сообщение мало, нужно еще избежать ситуации, когда пользователь, не меняя данные, снова нажмет на кнопку “Создать”, и будет получен дубликат заявки. Мы в случае успешного создания заявки отправим пользователя к списку всех его заявок, добавив к кейсу еще одно действие:
Здесь выполняется переход на страницу ``list_requests`` - это код страницы “Список заявок”.
Примечание: при разработке приложения на Конструкторе можно считать, что все действия в рамках одного кейса будут выполнены одновременно.
Сохраненный кейс отображен в разделе “Кейсы” проигрывателя форм:
Кейс ``create_success`` обрабатывает только успешное создание записи реестра. Однако не всегда создание выполняется успешно, и ошибочную ситуацию тоже нужно обработать.
Добавим для этого же проигрывателя форм еще один кейс, который будет выполняться при наступлении события ``not_created_form_data``:
Здесь в качестве стиля отображения сообщения выбран вариант “Ошибка” - сообщение об ошибке будет визуально отличаться от успешного сообщения.
Вторым действием в этом кейсе разблокируем кнопку создания записи, чтобы у пользователя была возможность повторить отправку:
Теперь в разделе “Кейсы” проигрывателя форм отображены оба его кейса:
Результат можно проверить в режиме просмотра приложения:
Как видно, внутренняя логика компонентов форм - автозаполнение текущих даты и времени, заполнение текущего пользователя - полностью поддерживается компонентом “Проигрыватель форм” конструктора.
Навигация по страницам
Все приложения, собранные в Конструкторе, имеют одностраничную структуру (SPA), поэтому следует всегда самостоятельно реализовывать навигацию пользователя между страницами приложения: браузерная кнопка “Назад” полностью уведет пользователя из вашего приложения.
Поэтому на же странице имеет смысл предусмотреть возможность вернуться к списку заявок. Для этого добавим кнопку “Назад”:
По клику на эту кнопку необходимо выполнять переход на страницу “Список заявок”:
Еще немного доработаем страницу создания заявки, добавив ей заголовок и изменив расположение кнопок с помощью новой панели с настроенным расположением содержимого:
Последний штрих: кнопка “Создать” должна визуально выделяться на странице, чтобы пользователю было проще ее увидеть, и он не перепутал ее с кнопкой возврата без сохранения. Для изменения внешнего вида кнопок используется свойство “Цвет” - по умолчанию, Primary или Secondary.
Далее цвета Primary и Secondary можно централизованно изменить в соответствии с общей темой приложения с помощью стилей CSS.
Укажем кнопке “Создать” цвет Primary:
Итоговый вид страницы:
Теперь вернемся к странице со списком заявок и настроим на ней переход к созданию новой заявки. Для этого кнопке “Создать” настроим кейс перехода на страницу создания заявки:
Восстановление версий страниц
Все изменения, которые вы выполняете в приложении, сохраняются автоматически. При этом может возникнуть ситуация, когда необходимо отменить изменение, внесенное ошибочно - например, случайно был удален компонент со страницы. В этом случае поможет возможность восстановления версий - вы всегда можете вернуться к любой из предыдущих версий страницы, где еще не был удален компонент.
Над панелью вкладок страницы расположены надписи “Версия” и “Пользователи”: “Пользователи” отображают список пользователей, которые на данный момент одновременно с вами работают над текущей страницей.
“Версия” позволяет просмотреть список версий, созданных для текущей страницы.
Версии создаются автоматически:
при создании новой страницы (первая версия - пустая);
при отсутствии действий на странице в течение 1 минуты (например, вы некоторое время работали на странице, потом прекратили - через минуту после последнего изменения будет создана новая версия страницы);
при закрытии вкладки страницы.
Мастер-версии
Для каждой страницы есть так называемая мастер-версия, или текущая, куда применяются все изменения. Эта версия не отображается в общем списке. В момент, когда происходит создание очередной версии - при закрытии вкладки или при бездействии в течение минуты - текущий мастер становится именованной версией (которая отображается в общем списке версий), а для страницы создается новая мастер-версия, и все новые изменения будут применяться именно к ней.
Рассмотрим версии на примере страницы “Создание заявки”. Сначала просмотрим версии этой страницы:
По нажатию на “Версии” справа отображается панель, где перечислены версии текущей страницы. Для каждой из них указаны номер, дата создания и автор.
Самая новая версия отображается сверху.
Теперь вернемся к странице и изменим ее - например, удалим кнопку “Создать”:
Если после удаления компонента прошло достаточное время (или была переоткрыта вкладка страницы), то в списке версий можно увидеть новую версию:
Здесь версия 4 была создана до удаления кнопки, версия 5 - после него (это можно понять по времени создания версии). Для того, чтобы вернуть удаленную кнопку, нам нужно выбрать версию 4 и подтвердить восстановление этой версии:
После подтверждения восстановления на странице снова появилась удаленная кнопка:
Если обратиться к версиям этой страницы, то можно заменить добавление новой версии:
Мы восстановили версию 4, и в момент восстановления для страницы была создана копия этой версии, и именно эта копия стала актуальной.
Если же после удаления компонента еще не успела создаться новая версия, то фактически изменение было применено к мастер-версии (не отображающейся в общем списке версий). Для отмены таких изменений можно выполнить восстановление самой верхней из списка версий.
Страница “Просмотр заявки”
Страница “Просмотр заявки” должна позволять пользователю просматривать данные заявки, выбранной в общем списке. При необходимости пользователь может отредактировать заявку.
По своей структуре страница, служащая для просмотра заявки, похожа на страницу создания заявки - тоже используется проигрыватель форм и кнопки. Для ускорения работы воспользуемся возможностью копирования компонентов между страницами: скопируем содержимое страницы “Создание заявки” и вставим копию на страницу “Просмотр заявки”:
На странице “Создание заявки” выделить панель с компонентами, на панели управления компонентами нажать на кнопку копирования . Выделенная панель:
На странице “Просмотр заявки” выделить корневую панель, нажать на кнопку вставки . Результат:
Компоненты вставляются на страницу с сохранением всех их свойств и кейсов.
Теперь настроим расположение элементов на корневой панели, изменим тексты надписи и кнопок:
Параметры страницы, параметры компонентов
Основное отличие страницы просмотра заявки состоит в том, что необходимо сообщить проигрывателю форм на ней о том, какая запись была выбрана в реестре на другой странице.
Реализовать такое поведение Конструктор позволяет с помощью передачи параметров события, возникшего в компоненте исходной страницы, другой странице - целевой. В таком случае целевая страница служит интерфейсом, который, принимая параметры от других страниц, передает их своим компонентам.
Рассмотрим этот механизм на нашем примере, когда необходимо передать запись, выбранную в компоненте “Представление реестра”, компоненту “Проигрыватель форм” на другой странице. Далее действия по шагам:
В дереве страниц выбрать страницу “Просмотр заявки”, потом нажать на кнопку изменения свойств страницы :
В открывшемся диалоге, в разделе “Принимаемые параметры” добавить новый параметр ``dataUUID``, тип “Строковый”:
Далее на странице “Список заявок” в компоненте “Представление реестра” нужно настроить кейс для события выбора записи - по событию “Выбор записи реестра” перейти на страницу “Просмотр заявки”:
В этом кейсе добавить новое сопоставление - в параметр целевой страницы ``dataUUID`` нужно передать параметр события ``dataUUID`` - идентификатор выбранной записи:
Сохранив этот кейс, перейти на страницу “Просмотр заявки”, выбрать компонент “Проигрыватель форм”. Справа будет отображен раздел “Параметры” (ниже раздела “Кейсы”). Этот раздел позволяет настроить сопоставление свойств текущего компонента параметрам его страницы:
В разделе “Параметры” нажать на кнопку редактирования . Откроется диалог настройки сопоставления:
Нажать на кнопку “Добавить”. В таблице будет добавлена новая строка:
В столбце “Свойства компонента” выбрать свойство ``dataId`` - это идентификатор отображаемой записи. В столбце “Параметры страницы” оставить выбранным единственный параметр текущей страницы - ``dataUUID``:
Таким образом компонент “Проигрыватель форм” теперь будет динамически получать идентификатор записи для отображения, в зависимости от той записи реестра, на которую кликнул пользователь.
Теперь настроим основные свойства этого компонента, убрав у него возможность создания и активации новой записи, а также изменив режим отображения по умолчанию:
На этом этапе уже можно проверить работу настроенной связки компонентов через параметры страницы. Для этого нужно перейти на страницу “Список заявок”, в ней включить режим просмотра приложения, а потом выбрать одну из записей реестра:
Теперь настроим возможность редактирования данных заявки. Поскольку заявка по умолчанию открывается в режиме чтения, необходимо реализовать две кнопки:
кнопка перехода в режим редактирования данных формы
кнопка сохранения изменений
Пусть кнопка “Редактировать” будет изменять режим отображения формы в проигрывателе. Удалим кейс ``create_data``, оставшийся после копирования компонентов с другой страницы, и настроим для нее новый кейс:
Далее добавим на страницу новую кнопку, которая позволит сохранить внесенные изменения. Для того, чтобы в кнопках на странице было легче ориентироваться, укажем для новой кнопки код ``button_save``:
Для кнопок “Назад” и “Редактировать” в свою очередь укажем коды ``button_back`` и ``button_edit``.
В случаях, когда на одной странице содержится больше двух компонентов одного типа (например, три кнопки или три надписи), рекомендуем присваивать этим компонентам легко понимаемые коды. Так вам будет проще ориентироваться в компонентах, настраивая для них кейсы.
Для этой кнопки также необходимо настроить кейс: по клику выполнять сохранение формы в проигрывателе форм:
В проигрывателе форм также настроим оповещение для пользователя о том, что сохранение прошло успешно, создав кейс для события ``saved_form_data``:
В качестве примера мы в случае успешного сохранения изменим режим отображения формы на “Просмотр” и отобразим сообщение об успехе.
Последняя деталь для страницы просмотра заявки: имеет смысл отображать кнопку сохранения только в том случае, если была нажата кнопка “Редактировать”. При этом, поскольку дважды перевести форму в режим редактирования нельзя, кнопку “Редактировать” можно скрывать после клика, заменяя ее на кнопку сохранения.
Для этого сначала скроем кнопку “Сохранить”, чтобы она не была отображена пользователю сразу при загрузке страницы - для этого достаточно включить у компонента флаг “Скрытый”:
Дополним кейс кнопки “Редактировать” таким образом, чтобы по клику на нее отображалась кнопка “Сохранить”, а сама кнопка “Редактировать” скрывалась:
Теперь можно убедиться в том, что пользователю не будут одновременно доступны кнопки редактирования и сохранения изменений:
Не забудьте снова показать кнопку редактирования и скрыть кнопку сохранения в случае успешного сохранения данных формы (в кейсе проигрывателя форм):
Страница авторизации
Последний этап создания приложения - настройка страницы авторизации. Наше приложение будет доступно только тем пользователям, которые созданы в Synergy.
Необходимо предоставить пользователям возможность ввода логина и пароля, настроить передачу введенных данных на сервер и обработать ответ сервера.
Сначала нужно страницу приложения пометить как страницу авторизации. Делается это в навигаторе страниц:
В навигаторе выделить нужную страницу.
В верхней части навигатора нажать на кнопку . Результат:
Теперь страницу авторизации и, как и в остальных страницах приложения, настроим на ней основное позиционирование компонентов и добавим заголовок:
Здесь для компонента “Надпись” указана ширина 100%, при этом в свойстве “Выравнивание текста” выбран вариант “По центру”. Поэтому компонент занимает всю доступную ширину родительской панели, но текст отображен ровно по центру.
Ввод авторизационных данных
Для ввода логина и пароля пользователя мы будем использовать компоненты “Поле ввода”. Добавим два таких компонента на страницу:
Как видно, компоненты на панели располагаются последовательно друг за другом. Нас такой вариант не устраивает: необходимо, чтобы надпись и поля ввода были расположены сверху вниз. Для этого обратимся к свойству той панели, где они расположены, и изменим ее тип с “Обычная” на “Вертикальная”, а также изменим настройки расположения и выравнивания ее содержимого. Результат:
Вернемся к полям ввода, и снова обратимся к “правилам хорошего тона”: все поля ввода, требующие от пользователя какой-то информации, должны сопровождаться заголовками. Заголовки, а также плейсхолдеры для полей ввода настраиваются в их свойствах:
Для поля пароля помимо его заголовка нужно включить скрытие вводимых символов:
Если присмотреться, то заметно, что после ввода заголовков поля ввода стали иметь разную ширину. Исправим это, зафиксировав у обоих компонентов ширину ``60%``:
Проверим, как выглядит страница в режиме просмотра:
Часто для полей ввода логина и пароля добавляют иконки, упрощающие пользовательский опыт взаимодействия с полями. Добавим и мы.
Конструктор приложений использует компоненты, основанные на UI Kit. У компонента “Поле ввода” есть специальное свойство “Иконка”, в котором может быть указан код иконки из библиотеки UI Kit. Для логина мы возьмем иконку с кодом ``user``, а для пароля - с кодом ``lock``:
Поля ввода готовы, теперь добавим кнопку “Войти”:
Теперь настроим для этой кнопки кейс, используя специальное действие “Логин”:
Параметрами этого действия являются коды компонентов - полей ввода, содержащие логин и пароль пользователя. Укажем эти компоненты:
Кейсы страницы
Действие “Логин” отправляет введенные данные на сервер для авторизации. Сервер возвращает ответ: удалось ли авторизовать пользователя, или возникла ошибка. Ответ сервера - это тоже событие, которое может быть обработано кейсами. Однако ввиду специфичности события успешной или неуспешной авторизации не относятся ни к одному из компонентов страницы - они относятся к странице целиком.
Конструктор поддерживает обработку специальных событий, относящихся к странице в целом. Для этого используются кейсы страницы.
Для настройки кейсов страницы нужно выбрать страницу в навигаторе, а потом кликнуть на кнопку . Откроется диалог кейсов:
В левой части диалога перечислены компоненты этой страницы, для которых были настроены кейсы - в нашем случае это кнопка “Войти”. Здесь же можно добавить новый кейс для страницы или любого из ее компонентов, нажав на кнопку :
По умолчанию в поле “Источник” указана “Страница”, но в нем можно выбрать любой компонент страницы.
У страницы, как и остальных компонентов, есть собственный набор событий, которые могут в ней произойти:
``page_load`` - событие, генерируемое в момент загрузки страницы;
Нам необходимо событие успешной авторизации. В этом случае необходимо выполнить специальное действие - возврат со страницы логина:
Немного о процессе авторизации
Пользователь может попасть на страницу авторизации несколькими способами:
явно, кликнув по кнопке перехода к авторизации (например, кнопка “Войти” на главной странице приложения) и выполнив кейс перехода на страницу;
не будучи авторизованным, попытаться перейти на страницу, требующую авторизации - в этом случае Конструктор выполнит автоматическую переадресацию пользователя на страницу авторизации.
Действие возврата со страницы логина позволяет пользователю, авторизовавшись, вернуться ровно на ту страницу, на которой он был или на которую пытался перейти перед тем, как выполнил авторизацию.
В нашем случае “путешествие” пользователя будет таким:
пользователь, открывая приложение, пытается открыть главную страницу приложения;
поскольку главная страница, как и все приложение в целом, требуют авторизации (что настроено в свойствах клиента), будет выполнена автоматическая переадресация пользователя на страницу авторизации;
пользователь указывает логин и пароль, нажимает на кнопку “Войти”;
выполняется кейс кнопки, логин и пароль передаются на сервер;
сервер возвращает ответ об успешной авторизации - выполняется кейс страницы;
выполняется возврат уже авторизованного пользователя со страницы логина на целевую главную страницу приложения.
После сохранения кейса страницы в левой части появился компонент “Страница”:
Добавим для этой страницы еще один кейс - для случая неуспешной авторизации:
Теперь, когда у нас в приложении настроена авторизация пользователя, вернемся к свойствам клиента, удалим оттуда логин и пароль пользователя по умолчанию (которые мы использовали на первых этапах) и включим необходимость авторизации:
Приложение готово!
Сборка приложения
Когда приложение собрано и проверено средствами Конструктора, можно его размещать на сервере. Сделать это можно двумя способами: вручную скачать ``war`` приложения и разместив его на сервере, либо воспользовавшись функцией автодеплоя.
Ручное размещение приложения:
Скачать ``war`` приложения, нажав на кнопку WAR в верхней части экрана. Результат - файл ``<url_приложения>.war``, скачанный на компьютер.
Разместить этот файл на том же сервере, где и выполнялась разработка приложения, в папке ``/opt/synergy/jboss/standalone/deployments``
Автоматические размещение:
Выбрать пункт меню “Клиент - Деплой”.
Если ``war`` приложения с таким URL уже есть на сервере, то необходимо подтвердить действие.
Всегда внимательно проверяйте имя приложения, которое перезаписывается при автодеплое, чтобы избежать непреднамеренного удаления приложений продуктов.
Приложение собрано и готово к работе!
Оно доступно по адресу ``http[s]://<host>:<port>/<URL_приложения>``
Напоминание: URL приложения настраивается в свойствах клиента:
Перенос приложения
При разработке приложений может возникнуть потребность копирования или переноса экземпляра приложения на другой сервер.
Конструктор приложений предоставляет возможность экспорта описания приложения в формате JSON и импорта этого файла JSON на этот же или на другой стенд.
Однако следует помнить, что при этом выполняется перенос только приложения, собранного в Конструкторе. Используемые в компонентах приложения объекты конфигурации Synergy IDE - формы, реестры, группы пользователей - автоматически не будут скопированы на новый стенд.
Копирование приложения на новый стенд Synergy
Рассмотрим процедуру переноса на примере собранного Личного кабинета:
экспортируем приложение Synergy IDE (см. инструкцию); результат - архив 7zip:
экспортируем приложение Конструктора, нажав на кнопку “Экспорт” на верхней панели; результат - скачанный на компьютер файл JSON:
на целевом стенде выполнить импорт архива приложения в Synergy IDE (см. инструкцию); в результате на стенде будут созданы объекты конфигурации с теми же кодами, которые ожидают получить компоненты приложения Конструктора:
при необходимости: создать тестовые записи в импортированных реестрах, папки в Хранилище, добавить пользователей в группы и настроить права доступа;
на целевом стенде выполнить импорт JSON приложения в Конструкторе с помощью пункта меню “Клиент” - “Импорт”:
После этих действий в Конструкторе на целевом стенде будет доступно приложение, компоненты которого связаны с объектами конфигурации Synergy. Логика работы приложения будет полностью сохранена.
Импорт приложений в рамках одного стенда
При импорте приложения Конструктора на стенд выполняется проверка наличия приложения с таким же кодом, как у импортируемого. Если приложение уже существует, то при импорте будет создано новое приложение с кодом вида ``<код_приложения>_IMPORTED``.
Например, если мы будем импортировать приложение с кодом``itsm`` на стенд, где уже существует такое приложение, то результатом импорта будет новое приложение ``itsm_IMPORTED``. При этом старое приложение ``itsm`` не будет изменено.
способ отображения данных формы и реестра в произвольном виде
гостевой доступ к приложению (просмотр данных без авторизации в приложении)
Витрина услуг предназначена для отображения перечня услуг, оказываемых компанией, и подробного описания для каждой из них. Любой пользователь должен иметь возможность подать заявку на услугу. В нашем случае рассмотрим простой вариант: все услуги имеют единую форму заказа, а все заявки попадают в один общий реестр.
Особенности Витрины услуг:
оказываемые организацией услуги должны быть доступны пользователю извне, не имеющему учетной записи в Synergy;
список услуг должен быть отображен в виде плашек с картинками, кратким описанием услуги и кнопкой для перехода к ее подробному описанию (то есть не просто в виде таблицы со списком записей реестра);
на странице паспорта услуги должны содержаться ее название, краткое и подробное описание, изображение и сопутствующие документы;
подписи кнопок, используемых в списке услуг и в паспорте услуги, должны быть получены из данных записи реестра;
заказ услуги должен оформляться в диалоговом окне.
Структура приложения:
Для простоты оставим за кадром внутренние бизнес-процессы, связанные с обработкой принятой заявки и с уведомлением клиента о статусе его заявки.
Для реализации витрины нам потребуется приложение Synergy, содержащее как минимум такие компоненты:
форма “Услуга”
реестр “Каталог услуг”
форма “Заявка на услугу”
реестр “Заявки на услуги”
группа пользователей “Клиенты”, у которой есть как минимум права:
просмотр списка и просмотр данных реестра “Каталог услуг”
создание и редактирование для реестра “Заявки на услугу”
Приложение Synergy IDE, используемое в примере, приложено здесь.
Настройка Хранилища
Кроме приложения, в Synergy IDE должна быть настроена папка Хранилища, в которой будут размещены папки с документами на каждую услугу. У группы пользователей “Клиенты” должна быть роль для доступа к этой папке, позволяющая просмотр и загрузку файла документа:
Настройка Хранилища выполняется в разделе “Настройки платформы” и требует наличия у пользователя роли “Разработчик Synergy”.
Гостевой пользователь
Для обеспечения просмотра данных в приложении без предварительной авторизации нам потребуется специальный гостевой пользователь - его нужно предварительно создать в SynergyAdmin и включить в группу “Клиенты”.
Зачем нужен гостевой пользователь?
В нашем приложении будут отображены данные реестра, будет использовано создание новых записей. Для этого приложение выполняет методы API Synergy, и эти методы обязательно должны быть вызваны от имени определенного пользователя.
При этом мы поставили себе задачу избавить посетителя нашей витрины самостоятельной от авторизации в приложении. Следовательно, приложение должно автоматически авторизовывать посетителя. Такая автоматическая авторизация выполняется под специальным “гостевым” пользователем.
При создании гостевого пользователя нужно обязательно предоставлять ему права на все объекты конфигурации Synergy, которые потребуются ему в приложении.
Создание приложения
В Конструкторе приложений создадим новый клиент:
Далее укажем гостевого пользователя, от имени которого будет выполняться запрос данных для портала. Для этого нужно отключить флаг “Требуется авторизация”, а далее заполнить логин и пароль пользователя:
Сохраним новый клиент.
Создание страниц
Наша витрина услуг будет состоять всего из двух страниц: стартовой с перечнем услуг и паспорта выбранной услуги.
Обе страницы не требуют авторизации.
Сразу укажем, что страница “Главная” должна быть стартовой - то есть при переходе к приложению пользователю должна отображаться именно эта страница:
Страница “Главная”
На главной странице будут расположены два основных элемента - заголовок страницы и набор плашек. Добавим компонент “Надпись” на страницу (во вложенную панель) и разместим его по центру:
Здесь:
В корневую панель страницы добавлена вложенная панель ``panel-1`` с шириной 80%, расположение содержимого - по центру. Эта панель отвечает за позиционирование всех остальных компонентов на странице таким образом, чтобы обеспечивать поля слева и справа.
В панель ``panel-1`` добавлена панель ``panel-2`` с шириной 100%. Эта панель предназначена для размещения на ней заголовка страницы.
В панель ``panel-2`` добавлен компонент “Надпись”. Для компонента указаны свойства:
тип - “Заголовок”;
размер - “Small”;
включен флаг “Divider” - он добавляет разделитель-линию под компонентом, визуально отделяя его от остального контента страницы;
выравнивание текста - “По центру”;
ширина - 100%.
Примечание: в этом примере мы не рассматриваем пошагово процесс добавления и настройки свойств компонентов - он был подробно описан в примере “Кабинет ITSM”.
Компонент “Итератор”: создание плашек
В нашем приложении набор услуг динамический, формируется в специальном реестре “Каталог услуг”. Конструктор позволяет вывести список записей реестра, но этот список представляет собой просто таблицу с теми же полями, которые отмечены как “Отображаемые” в реестре. Нам же необходимо вывести список записей реестра в специальном виде - как плашки, содержащие изображение, загруженное в записи реестра, надписи и кнопку перехода к подробному описанию выбранного элемента.
Для отображения набора однотипных элементов - записей реестра или фильтра реестра, блоков динамической таблицы или просто любого внешнего JSON-файла - используется итератор.
Итератор - это специальный тип панели. Он получает описание элементов и их параметров из некоторого источника данных и распределяет значения параметров среди своих вложенных компонентов. При проигрывании приложения панель-итератор отображается столько раз, сколько элементов содержит источник итератора.
Источниками итератора могут быть:
записи реестра Synergy, при этом параметрами элемента являются компоненты формы реестра;
динамическая таблица, расположенная в определенной записи по форме Synergy, параметрами элемента являются компоненты в этой таблице;
внешняя ссылка на произвольный файл в формате JSON. Это может быть как результат выполнения API, так и, например, перечень публикаций с внешнего сайта. Здесь параметрами итератора будут элементы этого JSON.
Мы будем использовать итератор, отображающий записи реестра “Каталог услуг”.
Перед началом работы убедитесь, что реестр на текущем стенде Synergy содержит записи с заполненными полями:
Пример заполнения услуги в каталоге:
Добавим на страницу новую панель, в ее свойстве “Тип панели” выберем вариант “Итератор”:
Изменим источник итератора на “Записи реестра”. При этом отображены дополнительные свойства для этого источника: “Код реестра” и “Код фильтра реестра”:
Укажем код реестра “Каталог услуг” ``showcase_example_items`` из приложения Synergy IDE:
Теперь добавим в итератор компоненты, которые будут отображать содержимое записи реестра. Нам нужны компоненты:
“Изображение”
“Надпись” для названия услуги
“Надпись” для краткого описания услуги
“Кнопка” для перехода к паспорту услуги
Сначала настроем компоненты “Надпись” и “Кнопка: для них необходимо указать ширину 100%, чтобы они занимали всю ширину итератора, и отредактировать внешний вид. Сразу же присвоим компонентам-надписям понимаемые коды, например, ``label_head`` и ``label_description`` - нам это пригодится позже, чтобы избежать путаницы. Результат:
Теперь необходимо настроить передачу данных из записей указанного реестра в компоненты на итераторе. Для этого у итератора есть специальный диалог “Сопоставление”, доступный из свойств компонента:
