4.5.10.1. Использование сторонних компонентов Vaadin

В веб клиенте приложения можно использовать сторонние компоненты Vaadin, распространяемые в виде дополнений (add-ons). На данный момент в репозитории https://vaadin.com/directory находится около 200 визуальных компонентов, совместимых с CUBA. Основное условие совместимости - компонент должен поддерживать Vaadin версии 7 и выше.

Для подключения стороннего компонента в проекте необходимо выполнить следующее:

  1. Добавить в проект модуль web-toolkit, выполняющий интеграцию с клиентской (браузерной) частью Vaadin-компонентов. Проще всего это сделать в CUBA Studio, выполнив команду Create web toolkit module секции Project properties навигатора.

  2. В build.gradle проекта добавить зависимость модуля web от нужного add-on, например: 

    configure(webModule) {
  ...
  dependencies {
      ...
      compile("org.vaadin.addons:some-addon:1.2.3")
  }

  3. В созданный на шаге 1 файл AppWidgetSet.gwt.xml подключить набор виджетов add-on: 

    <module>
  ...
  <inherits name="org.vaadin.someaddon.widgetset.SomeAddonWidgetset" />

  4. В экране модуля web (либо в соответствующем компаньоне) получить ссылку на контейнер Vaadin с помощью класса WebComponentsHelper, создать экземпляр нового компонента, и добавить его в контейнер.

  5. Для изменения внешнего вида подключенного компонента можно создать в проекте расширение темы и внести в файл <theme>-ext.scss нужные изменения. Файлы темы проще всего создать в Studio командой Create theme extension секции Project properties навигатора.

В Раздел 5.8.6.1, «Пример использования стороннего компонента Vaadin » рассмотрен процесс подключения и использования Vaadin-дополнения Stepper, содержащего визуальный компонент для пошагового изменения значения.

Пред.  Наверх  След.
  Начало