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

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

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

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

Панель Jmix UI состоит из панели иерархии и панели инспектора.

screen designer
  1. Source Code Editor - редактор исходного кода

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

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

  4. Jmix UI Hierarchy Panel - панель иерархии компонентов Jmix UI

  5. Jmix UI Inspector Panel - панель инспектора Jmix UI

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

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

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

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

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

  • Нажмите на кнопку Add component на верхней панели действий:

    add component method1
  • Щелкните правой кнопкой мыши на пункте Add Component в контекстном меню панели иерархии Jmix UI:

    add component method2
  • Используя ⌘N на MacOS или Alt+Insert на Windows и Linux, откройте меню Generate:

    add component method3

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

screen palette

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

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

screen charts

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

screen move

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

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

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

Панель иерархии Jmix UI

На панели иерархии Jmix UI отображается дерево компонентов, добавленных в компоновку.

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

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

screen hierarchy
  • Add Component открывает палитру компонентов.

  • Generate handler используется для генерации обработчика для компонента.

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

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

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

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

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

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

Панель инспектора Jmix UI

На панели инспектора Jmix UI отображаются вкладки Properties и Handlers.

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

  • Чтобы добавить действие поля выбора, выберите компонент выбора (EntityComboBox, EntityPicker, EntitySuggestionField, ValuePicker) в XML-дескрипторе экрана или на панели иерархии Jmix UI и нажмите Add → Action в панели инспектора Jmix UI. Появится диалоговое окно Add Action:

    add picker action dialog

    Выберите какое-нибудь стандартное действие из списка.

    Чтобы добавить пользовательское декларативное действие, выберите New Custom Action и нажмите OK. Появится диалоговое окно Enter Action Id:

    action id dialog

    Затем реализуйте пользовательскую логику в контроллере экрана, подписавшись на Action.ActionPerformedEvent.

  • Чтобы добавить действие с коллекцией, выберите компонент table или dataGrid в XML-дескрипторе экрана или на панели иерархии Jmix UI и нажмите Add → Action в панели инспектора Jmix UI. Появится диалоговое окно Add Action:

    add action dialog

    Если флажок Create Button for selected actions установлен, Jmix Studio создаст кнопку в контейнере buttonsPanel, связанную с добавляемым действием.

  • Чтобы добавить column, выберите элемент columns в XML-дескрипторе экрана или на панели иерархии Jmix UI и нажмите Add → Column на панели инспектора Jmix UI. Появится диалоговое окно Add Column:

    add column dialog

    Этот список содержит свойства, которые включены в фетч-план, но еще не отображены компонентом table.

    Чтобы добавить генерируемую колонку, выберите New Custom Column и нажмите OK. Появится диалоговое окно Column generator:

    column generator

    Выберите генерируемый тип из списка, предложенного Studio, и соответствующий тип рендерера.

    Studio добавит сгенерированную колонку в таблицу в XML-дескриптор и метод-обработчик в контроллер экрана.

Вкладка 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

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

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

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

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

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

  • Add Component - открывает палитру компонентов:

screen top panel

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