Дизайнер экранов

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

Для этой функции требуется подписка RAD или Enterprise. Если у вас нет подписки, см. как получить пробную версию.

Панели Иерархия компонентов, Палитра компонентов и Инспектор компонентов реализованы как независимые окна инструментов IDE и отображаются автоматически при открытии дескриптора экрана в редакторе.

screen designer

  1. Component Inspector Инспектор компонентов

  2. Component Hierarchy Иерархия компонентов

  3. Component Palette Палитра компонентов

  4. Top Actions Panel Верхняя панель действий

  5. Layout Preview Panel Панель предварительного просмотра компоновки

  6. Layout Preview Предварительный просмотр компоновка

Панель предварительного просмотра компоновки

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

screen views

Используйте кнопки в правом верхнем углу редактора компоновки экрана.

  1. Editor only – в редакторе отображается только исходный код.

  2. Editor and Preview – пространство редактора разделено так, чтобы отображать и исходный код, и предварительный просмотр.

  3. Preview only – в редакторе отображается только предварительный просмотр.

  4. Preview in Window – исходный код отображается в редакторе, а предварительный просмотр отображается в отдельном окне.

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

screen view panel

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

  • Кнопка Refresh перезагружает содержимое страницы предварительного просмотра.

  • Кнопки Zoom In, Zoom Out и Zoom Reset изменяют масштаб страницы предварительного просмотра.

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

screen expand

Палитра компонентов

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

screen palette

Используйте поле поиска, чтобы найти необходимый компонент.

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

screen charts

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

screen move

Щелкните правой кнопкой мыши по компоненту в палитре, чтобы открыть контекстное меню со следующими действиями:

  • Add to Design – добавляет выбранный компонент на экран внутри выбранного элемента в иерархии.

  • Jmix Documentation – открывает страницу документации компонента.

Иерархия компонентов

В окне инструментов Component Hierarchy отображается дерево компонентов, добавленных в компоновку.

Вы можете перемещать элементы из окна Component Palette или изменять порядок элементов в дереве. Когда элемент выбран, в окне Component Inspector отображаются его свойства.

Щелкните правой кнопкой мыши по элементу, чтобы открыть его контекстное меню со следующими действиями:

screen hierarchy

  • Convert – преобразует компонент в один из аналогичных альтернативных компонентов.

  • Wrap – оборачивает компонент в один из предложенных контейнеров.

  • Go to XML – позволяет перейти к тегу XML в исходном коде.

  • Inject – инжектирует элемент в контроллер экрана или переходит к существующему объявлению инжектирования.

  • Delete, Copy, Cut или Paste – удаляет, копирует, вырезает или вставляет элемент.

  • Jmix Documentation – открывает страницу документации выбранного компонента.

Инспектор компонентов

В окне инструментов Component Inspector отображаются вкладки Properties и Handlers.

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

Properties Tab

Вкладка Properties показывает атрибуты выбранного элемента экрана и позволяет их редактировать.

screen properties

Используйте поле поиска, чтобы найти необходимый атрибут.

Attributes come by default arranged by name. The first column lists the names of the attributes for the selected component. The second column on the Properties tab displays the property values as follows:

  • When the property is selected, the value changes to an edit field where you can type a new value.

    text values

  • If the value is a list, a Move down drop-down button appears when the property is selected.

    list values

  • If the value is boolean, you can change it using the checkbox:

    boolean values

  • Click the Plus button for the stylename property to open the Style Name Editor dialog:

    style name editor

    Style names come by default arranged by the component or container name.

  • Click the Edit button for the icon property to open the Choose icon dialog:

    choose icon dialog

    • The JMIX ICONS tab contains icons from the default JmixIcon icon set. It includes an almost full FontAwesome icon set and Jmix-specific icons.

    • The FONT AWESOME tab contains icons from the FontAwesome set of font icons.

    • The ICON SET tab contains icons from the custom icon sets.

    • The APPLICATION ICONS tab contains icons from the theme sources.

Handlers Tab

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

screen handlers

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

screen handlers

Верхняя панель действий

Панель действий расположена в верхней части редактора исходного кода. Она предоставляет доступ к следующим действиям:

  • Controller – переходит к контроллеру экрана.

  • <entity class name> – отображается, если экран представляет собой браузер или редактор сущности и позволяет перейти к сущности, связанной с текущим экраном.

screen top panel

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