3.3.3. Интерфейс Synergy IDE

Мы кардинально переработали внешний вид и механику работы с объектами Synergy.

В частности, интерфейс Конфигуратора напоминает некоторые популярные системы IDE, работа с которыми привычна разработчикам:

Рисунок 3.7. В одной из вкладок открыт редактор реестра

В одной из вкладок открыт редактор реестра

Рисунок 3.8. Панель меню - добавление нового объекта

Панель меню - добавление нового объекта

Рассмотрим элементы интерфейса подробнее.

3.3.3.1. Панель меню и навигатор

Верхняя панель содержит:

  • пункты меню, позволяющие управлять приложением и его объектами:

    • «Приложение»:

      • «Создать» - создание нового приложения, доступно только Synergy Developer

      • «Открыть» - переход к выбранному приложению, содержит список доступных пользователю приложений

      • «Свойства» - просмотр свойств и атрибутов текущего приложения

      • «Импорт» - импорт архива с объектами приложения

      • «Экспорт» - экспорт всех объектов текущего приложения в архив

      • «Поиск по заголовку» - поиск объекта в приложении по его наименованию или коду; также выполняется по нажатию клавиш Ctrl+H

      • «Поиск по содержимому» - поиск объекта в приложении по его описанию json или по содержимому его скриптов; также выполняется по нажатию клавиш Ctrl+J

      • «Выход» - завершение сессии Synergy, выход из учетной записи.

    • «Объект»:

      • «Добавить» - добавление нового объекта в выделенную папку; сущности сгруппированы по пунктам

      • «Сохранить» - сохранение объекта, открытого в активной вкладке; также выполняется по нажатию клавиш Ctrl+S

      • «Сохранить версию» - сохранение новой версии формы, доступно только в случае, когда в активной вкладке открыт конструктор форм

      • «Сбросить изменения» - отмена всех несохраненных изменений объекта, открытого в активной вкладке; в результате состояние объекта откатывается до последнего сохраненного состояния

      • «Запустить скрипт» - выполнение пробного запуска скрипта интерпретатора, доступно только в случае, когда активной является вкладка с кодом интерпретатора; также может быть выполнено по нажатию клавиши F8

  • область пути, отображающая путь к выделенному объекту; путь актуализируется при переключении вкладок и при выделении ноды дерева приложения в навигаторе

  • если у пользователя есть роль «Разработчик Synergy», то в верхнем правом углу экрана отображается кнопка перехода к настройкам платформы.

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

Папки в дереве и объекты внутри папок отсортированы по их наименованию в алфавитном порядке, изменить способ сортировки нельзя.

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

Отображение скрытых объектов также регулируется в навигаторе с помощью кнопки «Показать скрытые». Если эта кнопка нажата, то скрытые объекты выделены в навигаторе более светлым цветом текста. Сортируются они при этом вместе с активными объектами.

Для того, чтобы выделить ноду в навигаторе, используется одинарный клик ЛКМ, чтобы открыть объект или развернуть папку - двойной.

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

Через контекстное меню папки можно добавить новый объект в приложение (пункт «Добавить» у папок дублирует пункт «Объект - Добавить» верхней панели меню) и импортировать архив с формой. Поддерживается импорт архива с формой из версий tengri и wilkes.

3.3.3.2. Рабочая область и вкладки

Остальное пространство занимает рабочая область, состоящая из панели вкладок (сверху) и области активной вкладки.

Одно из нововведений Synergy IDE - возможность одновременной работы со множеством объектов, открытых во вкладках, в том числе - не применяя изменений в них.

В заголовке вкладки находятся:

  • иконка сущности

  • если объект во вкладке был изменен, то отображается *

  • название объекта в текущей локали

  • иконка, закрывающая вкладку

У заголовков вкладки также есть тултипы, отображающиеся при наведении. В тултипе отображается полное название объекта и его сущность:

Рисунок 3.9. Пример рабочей области с вкладками и отображенным тултипом

Пример рабочей области с вкладками и отображенным тултипом

Некоторые объекты Synergy могут содержать в себе пользовательские скрипты - например, у пользовательского компонента, помимо его свойств, есть еще описание шаблона html и кода js, у формы - код ее компонентов, а у скрипта интерпрератора - настройки скрипта и собственно js-код. Ранее редактор кода для таких объектов занимал лишь часть рабочей области, что затрудняло работу с этим кодом.

Мы изменили подход к отображению таких редакторов: теперь вкладки с пользовательскими объектами, формами и скриптами интерпрератора содержат так называемые внутренние вкладки: в этих вкладках размещаются дополнительные настройки объекта - скрипты или условные действия:

Рисунок 3.10. В основной вкладке (сверху) открыт пользовательский компонент, во внутренней (снизу) - его html-шаблон

В основной вкладке (сверху) открыт пользовательский компонент, во внутренней (снизу) - его html-шаблон

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

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

Рисунок 3.11. Редактор маршрута, рабочая область стандартного размера

Редактор маршрута, рабочая область стандартного размера

Рисунок 3.12. Рабочая область развернута

Рабочая область развернута

Также для диалога редактирования условного перехода было реализовано открытие в рамках вкладки соответствующего объекта. Теперь этот диалог не перекрывает всю рабочую область, и разработчик Synergy может переходить между вкладками при настройке условного перехода, например, чтобы скопировать ID компонента из формы:

Рисунок 3.13. Диалог редактирования условного перехода

Диалог редактирования условного перехода

3.3.3.3. Навигация по объектам приложения

Существует несколько способов найти нужный объект приложения:

  1. Зная путь к нему, в навигаторе открывать нужные папки приложения. Этот способ удобно использовать в хорошо структурированных приложениях, когда в каждой папке находится не более 15-20 вложенных элементов (так, чтобы все содержимое одной папки можно было увидеть, не прокручивая вертикальный скролл навигатора).

  2. Найти объект по его наименованию (в текущей локали) или коду, используя поиск по заголовку.

  3. Найти объект по контенту - структуре в формате json или по части скрипта - используя поиск по содержимому.

Механизм работы с разными видами поиска - как по заголовку, так и по содержимому - в целом одинаковый. Поисковая строка для них может быть вызвана как из панели меню, так и с помощью «горячих клавиш»: Ctrl+H для поиска по заголовку (header) и Ctrl+J для поиска по содержимому (json).

Внешне строки поиска отличаются друг от друга только заголовком и плейсхолдером в строке ввода:

Рисунок 3.14. Поиск по заголовку

Поиск по заголовку

Рисунок 3.15. Поиск по содержимому

Поиск по содержимому

В правой части расположены:

  • иконка фильтра сущностей, по которым будет осуществляться поиск. По умолчанию выделены все доступные сущности. Если приложение содержит большое количество объектов, можно ускорить поиск, отключив некоторые сущности, среди которых искомого объекта гарантированно нет.

  • иконка очистки результатов поиска. Текст в строке поиска и найденные результаты не сбрасываются, если закрыть поиск, для того, чтобы иметь возможность просмотреть все найденные результаты, не выполняя поиск повторно. Для того, чтобы выполнить новый поиск, нужно очистить строку поиска и ввести новый запрос.

  • флаг Aa, регулирующий, должен ли поиск зависеть от регистра: если флаг включен, то поиск выполняется с учетом регистра. Эта настройка доступна только для поиска по содержимому, поскольку поиск по заголовку не зависит от регистра.

Поиск выполняется сразу по мере ввода запроса. В качестве результата поиска выводятся:

  • иконка сущности, к которой относится найденный объект

  • название объекта в текущей локали

  • код объекта

  • по правому краю - путь к объекту

  • для поиска по содержимому ниже списка найденных объектов отображается часть контента объекта - его описания в формате json или скрипта - где подсвечено первое найденное вхождение.

Объект из результатов поиска можно открыть либо двойным кликом ЛКМ по соответствующей строке, либо выделив строку с помощью стрелок клавиатуры и нажав на Enter.

Поиск сворачивается, если открыть один из найденных объектов, кликнуть ЛКМ вне его диалога или нажать на клавишу Esc.

Пример использования поиска по содержимому

На форме «Инцидент» есть компонент с кодом itsm_form_incident_status. Нужно найти, в каких объектах Synergy и как именно используется значение этого компонента.

Для этого нужно в поиске по содержимому выполнить поиск по коду компонента:

Рисунок 3.16. Результат 1: форма «Инцидент», подсвечен код компонента в json формы

Результат 1: форма «Инцидент», подсвечен код компонента в json формы

Рисунок 3.17. Результат 2: реестр «Инциденты», подсвечен код компонента, использующийся в условном переходе

Результат 2: реестр «Инциденты», подсвечен код компонента, использующийся в условном переходе

Рисунок 3.18. Результат 3: скрипт компонента в форме «Инцидент», подсвечено вхождение идентификатора компонента в скрипте

Результат 3: скрипт компонента в форме «Инцидент», подсвечено вхождение идентификатора компонента в скрипте