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

-
Component Inspector Инспектор компонентов
-
Component Hierarchy Иерархия компонентов
-
Component Palette Палитра компонентов
-
Top Actions Panel Верхняя панель действий
-
Layout Preview Panel Панель предварительного просмотра компоновки
-
Layout Preview Предварительный просмотр компоновка
Панель предварительного просмотра компоновки
Панель предварительного просмотра компоновки используется для отображения интерактивного схематического представления компоновки экрана. Оно разделяет пространство редактора вместе с исходным кодом дескриптора экрана.

Используйте кнопки в правом верхнем углу редактора компоновки экрана.
-
Editor only – в редакторе отображается только исходный код.
-
Editor and Preview – пространство редактора разделено так, чтобы отображать и исходный код, и предварительный просмотр.
-
Preview only – в редакторе отображается только предварительный просмотр.
-
Preview in Window – исходный код отображается в редакторе, а предварительный просмотр отображается в отдельном окне.
Панель имеет несколько элементов управления, расположенных в правом верхнем углу:

-
Выпадающий список 100% x 100% позволяет выбрать фиксированный размер холста. Размер холста может быть больше размера панели предварительного просмотра, в этом случае добавляются дополнительные полосы прокрутки. Например, если вы разрабатываете сложный экран, содержащий множество элементов управления, и хотите открыть предварительный просмотр, вы можете выбрать размер холста 1920 x 1080 и посмотреть, как макет выглядит на большом экране.
-
Кнопка Refresh перезагружает содержимое страницы предварительного просмотра.
-
Кнопки Zoom In, Zoom Out и Zoom Reset изменяют масштаб страницы предварительного просмотра.
Кроме того, вы можете использовать элементы управления для изменения размера и выравнивания компонентов в компоновке:

Палитра компонентов
Окно инструментов Component Palette отображает набор доступных элементов экрана: визуальные компоненты, контейнеры, компоненты данных – контейнеры и загрузчики, фасеты, в том числе действия и настройки диалоговых окон.

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

Чтобы добавить компонент в макет, перетащите его из палитры в соответствующее место в исходном коде XML или на панель Иерархии компонентов.

Щелкните правой кнопкой мыши по компоненту в палитре, чтобы открыть контекстное меню со следующими действиями:
-
Add to Design – добавляет выбранный компонент на экран внутри выбранного элемента в иерархии.
-
Jmix Documentation – открывает страницу документации компонента.
Иерархия компонентов
В окне инструментов Component Hierarchy отображается дерево компонентов, добавленных в компоновку.
Вы можете перемещать элементы из окна Component Palette или изменять порядок элементов в дереве. Когда элемент выбран, в окне Component Inspector отображаются его свойства.
Щелкните правой кнопкой мыши по элементу, чтобы открыть его контекстное меню со следующими действиями:

-
Convert – преобразует компонент в один из аналогичных альтернативных компонентов.
-
Wrap – оборачивает компонент в один из предложенных контейнеров.
-
Go to XML – позволяет перейти к тегу XML в исходном коде.
-
Inject – инжектирует элемент в контроллер экрана или переходит к существующему объявлению инжектирования.
-
Delete, Copy, Cut или Paste – удаляет, копирует, вырезает или вставляет элемент.
-
Jmix Documentation – открывает страницу документации выбранного компонента.
Инспектор компонентов
В окне инструментов Component Inspector отображаются вкладки Properties и Handlers.
Для некоторых типов выбранных элементов отображается кнопка + Add, которая позволяет добавить соответствующий подэлемент, например действие таблицы, колонку, форматер, валидатор и т.д.
Вкладка Properties
Вкладка Properties показывает атрибуты выбранного элемента экрана и позволяет их редактировать.

Используйте поле поиска, чтобы найти необходимый атрибут.
Атрибуты по умолчанию упорядочены по имени. В первой колонке перечислены имена атрибутов для выбранного компонента. Во второй колонке на вкладке Properties отображаются значения свойств следующим образом:
-
Когда свойство выбрано, значение сменяется полем редактирования, в котором можно ввести новое значение.
-
Если значение представляет собой список, при выборе свойства появляется кнопка
выпадающего списка.
-
Если значение является логическим, его можно изменить с помощью флажка:
-
Такие свойства, как caption, description, contextHelpText, имеют возможность задавать локализованные имена. Нажмите кнопку
, чтобы открыть диалоговое окно, в котором можно задать локализованное сообщение для атрибута.
-
Нажмите кнопку
для свойства the stylename, чтобы открыть диалоговое окно Style Name Editor:
По умолчанию имена стилей упорядочены по имени компонента или контейнера.
-
Нажмите кнопку
для свойства icon, чтобы открыть диалоговое окно Choose icon:
-
Вкладка JMIX ICONS содержит значки из набора значков
JmixIcon
по умолчанию. Он включает в себя почти полный набор значковFontAwesome
и значки, специфичные для Jmix. -
Вкладка FONT AWESOME содержит значки из набора значков шрифтов
FontAwesome
. -
Вкладка ICON SET содержит значки из пользовательских наборов значков.
-
Вкладка APPLICATION ICONS содержит значки из источников темы.
-
Вкладка Handlers
На вкладке Handlers отображаются слушатели событий и делегаты компонентов, которые могут быть связаны с выбранным компонентом. Чтобы сгенерировать необходимый метод слушателя, просто дважды щелкните соответствующую строку.

Вы будете перенаправлены на контроллер экрана с фрагментом кода.

Верхняя панель действий
Панель действий расположена в верхней части редактора исходного кода. Она предоставляет доступ к следующим действиям:
-
Controller – переходит к контроллеру экрана.
-
<entity class name>
– отображается, если экран представляет собой браузер или редактор сущности и позволяет перейти к сущности, связанной с текущим экраном.

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