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

Дизайнер экранов представляет собой ряд панелей и окон инструментов, которые позволяют разрабатывать макет экрана и задавать свойства компонентов пользовательского интерфейса в стиле 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

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

screen properties

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

Атрибуты по умолчанию упорядочены по имени. В первой колонке перечислены имена атрибутов для выбранного компонента. Во второй колонке на вкладке Properties отображаются значения свойств следующим образом:

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

    text values

  • Если значение представляет собой список, при выборе свойства появляется кнопка Move down выпадающего списка.

    list values

  • Если значение является логическим, его можно изменить с помощью флажка:

    boolean values

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

    message values

  • Нажмите кнопку Plus для свойства the stylename, чтобы открыть диалоговое окно Style Name Editor:

    style name editor

    По умолчанию имена стилей упорядочены по имени компонента или контейнера.

  • Нажмите кнопку Edit для свойства icon, чтобы открыть диалоговое окно Choose icon:

    choose icon dialog

    • Вкладка JMIX ICONS содержит значки из набора значков JmixIcon по умолчанию. Он включает в себя почти полный набор значков FontAwesome и значки, специфичные для Jmix.

    • Вкладка FONT AWESOME содержит значки из набора значков шрифтов FontAwesome.

    • Вкладка ICON SET содержит значки из пользовательских наборов значков.

    • Вкладка APPLICATION ICONS содержит значки из источников темы.

Вкладка Handlers

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

screen handlers

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

screen handlers

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

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

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

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

screen top panel

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