Создание и использование дополнения с виджетами

Дополнение с виджетами предоставляет настраиваемые компоненты UI для их повторного использования в разных приложениях.

Должны быть соблюдены следующие условия:

  • JAR-файл содержит DemoaddonWidgets.gwt.xml.

  • В манифесте JAR указан путь к *.gwt.xml:

    jar {
    // pack client Java sources
    with copySpec {
        from sourceSets.main.allJava
        include "com/company/demoaddon/**"
        duplicatesStrategy = DuplicatesStrategy.WARN
    }
    // register exported widgetset
    manifest {
        attributes(['Vaadin-Widgetsets': 'com.company.demoaddon.DemoaddonWidgets',
                    'Vaadin-Stylesheets': 'VAADIN/addons/demoaddon/demoaddon.scss'])
    }
}

Набор виджетов будет сгенерирован автоматически на основе всех JAR-файлов с ключом Vaadin-Widgetsets в манифесте. Это обеспечивает удобство использования дополнений Vaadin.

Компилировать виджеты в дополнениях не нужно.

Создание дополнения с виджетами с помощью Studio

Следуйте данной инструкции, чтобы создать дополнение с виджетами с помощью Studio:

  1. Создайте новый проект. Выберите шаблон UI Widgets Add-On. Введите название проекта, например, "demoaddon". Это будет простой Java-проект со следующей структурой:

    widgets add on prj structure

    Jmix Studio предоставляет пример дополнения с виджетами на основе GWT-компонента ColorButton. Вы можете создать свой собственный компонент вместо него.

  2. Откройте файл demoaddon.scss и определите модификации стиля темы.

  3. Создайте и опубликуйте дополнение в локальном репозитории maven, используя следующую команду:

    ./gradlew clean publishToMavenLocal

Использование дополнения с виджетами

  1. Откройте проект, к которому вы хотите применить дополнение с виджетами.

  2. Создайте новую тему, названную, например, helium-extended.

  3. Откройте файл build.gradle и внесите следующие изменения:

    • Добавить mavenLocal() в репозитории.

    • Удалите зависимость implementation 'io.jmix.ui:jmix-ui-widgets-compiled'.

    • Добавьте зависимость дополнения к implementation проекта и конфигурациям widgets, например:

      implementation 'com.company:demoaddon:0.0.1-SNAPSHOT'
widgets 'com.company:demoaddon:0.0.1-SNAPSHOT'
implementation 'io.jmix.ui:jmix-ui-widgets'
widgets 'io.jmix.ui:jmix-ui-widgets'

    • Добавьте задачу compileWidgets (измените пути в соответствии с базовым пакетом вашего приложения):

      compileWidgets {
    generate "com.company.sample.widget.CustomWidgetSet"
    includePaths('**/io/jmix/**/widget/**', '**/com/company/sample/widget/**')
}

  4. Добавьте свойство jmix.ui.widget-set в файл application.properties (настройте местоположение в соответствии с задачей compileWidgets выше):

    jmix.ui.widget-set=com.company.sample.widget.CustomWidgetSet

  5. Перезагрузите проект.

  6. Для демонстрации работы компонента создадим новый color-button-screen.

    Откройте контроллер экрана ColorButtonScreen.java и добавьте код размещения компонента на экране:

    ColorButtonScreen.java
    @UiController("sample_ColorButtonScreen")
@UiDescriptor("color-button-screen.xml")
public class ColorButtonScreen extends Screen {
    @Subscribe
    protected void onInit(InitEvent event) {
        ColorButton button = new ColorButton(); (1)
        button.setCaption("Button");
        button.setColor("#AFEEEE");
        getWindow().unwrap(Layout.class).addComponent(button); (2)
    }
}
    1 Инициализирует экземпляр компонента ColorButton.
    2 Получает ссылку на контейнер Vaadin с помощью метода unwrap() и добавляет в него новый компонент.

  7. Запустите приложение и посмотрите результат:

    color button