Принимая участие в конференциях, мы всегда встречаемся с высококвалифицированными лицами, принимающими решения, которые часто задают один и тот же вопрос: « Насколько расширяема ваша структура и что, если мне нужно больше, чем вы предлагаете из коробки? ». Вопрос очень разумный, поскольку они просто не хотят застрять прямо в середине кривой развития, а затем понимают, что фреймворк просто не позволяет реализовать некоторые функции или, вероятно, если вы используете продукт с открытым исходным кодом, он требуется непредсказуемо долгое время, чтобы копать глубже в плохо документированных частях фреймворка.
Значительное внимание обычно уделяется части пользовательского интерфейса: сколько компонентов имеет фреймворк? Есть ли возможность интегрировать сторонние виджеты? Наконец, насколько легко они могут быть интегрированы в ваши приложения.
Даже если инфраструктура предоставляет вам огромное количество готовых компонентов, иногда вам может понадобиться что-то очень специфическое, обычно не используемое, следовательно, не реализованное в платформе.
В этой статье я покажу, как можно интегрировать визуальные компоненты сторонних производителей в платформу CUBA .
Универсальный пользовательский интерфейс на платформе CUBA
Чтобы дать вам краткое представление о том, какие визуальные компоненты у вас есть в комплекте с платформой CUBA, взгляните на рисунки ниже:
Как видите, имеется готовый обширный набор компонентов, но все компоненты очень универсальны и широко используются для корпоративных приложений. Давайте теперь предположим, что нам нужно интегрировать что-то более конкретное.
Начиная с версии 2.1 CUBA Studio, этот процесс был значительно упрощен для компонентов Vaadin, JavaScript и GWT, потому что Studio очищает заглушки и добавляет все необходимые определения для нового компонента. Существует три уровня интеграции нового компонента в платформу:
- Поскольку универсальный пользовательский интерфейс платформы построен на Vaadin, новый компонент становится доступным как собственный компонент Vaadin. Разработчики уже могут использовать этот компонент в приложениях CUBA, добавляя его в развернутый контейнер CUBA.
- Новый компонент интегрирован в общий интерфейс CUBA. В этом случае, с точки зрения разработчика приложения, он выглядит так же, как стандартный компонент из библиотеки визуальных компонентов. Разработчик может определить компонент в дескрипторе XML экрана или создать его через ComponentsFactory в контроллере.
- Новый компонент доступен в палитре компонентов Studio и может использоваться в редакторе макетов WYSIWYG, как показано на рисунке ниже.
В этой статье мы рассмотрим интеграцию первого уровня для компонента Vaadin и создадим пример приложения, чтобы увидеть, как его можно использовать в вашем приложении CUBA на этом этапе.
Интеграция компонентов Vaadin
Как я уже упоминал ранее, универсальный пользовательский интерфейс в платформе CUBA построен на платформе Vaadin, его компоненты очень легко интегрировать в ваше приложение CUBA:
- Добавьте зависимость к стороннему дополнению Vaadin.
- Создайте модуль web-toolkit в своем проекте. Этот модуль содержит файл набора виджетов GWT и позволяет создавать клиентские части визуальных компонентов. Просто включите дополнительный набор виджетов в набор виджетов вашего проекта.
- Если внешний вид компонента не соответствует теме приложения, создайте расширение темы и определите CSS для нового компонента.
Давайте возьмем компонент Stepper в качестве примера и посмотрим, как он работает в CUBA Studio:
В качестве первого шага мы нажимаем « Создать модуль веб-инструментария» , чтобы иметь возможность интегрировать компоненты Vaadin, затем нажимаем « Создать новый компонент пользовательского интерфейса» :
Теперь у нас около 10 минут, чтобы получить новый компонент Vaadin в CUBA:
- Выберите надстройку Vaadin в групповом поле Тип компонента .
- Чтобы определить значение зависимости Add-on Maven, перейдите на страницу надстройки Stepper , нажмите зеленую кнопку Install , скопируйте ее из появившегося текстового поля и вставьте в поле зависимостей Add-on Maven в CUBA Studio.
- Самая сложная и запутанная часть, особенно для тех, кто впервые использует Vaadin, — это Inherited widgetset (вы можете узнать больше о Vagetin WidgetSets здесь , но вам не нужно иметь глубокое понимание этого, чтобы продолжать проходить через это статья). В разделе « Связанные ссылки » на странице дополнения Stepper есть ссылка « Исходный код» , щелкните по ней. Ссылка приведет вас к GitHub-репозиторию компонента. Чтобы определить набор виджетов компонента Vaadin, вам нужно найти файл * .gwt.xml в источниках. Перейдите в папку addon / src / main / resources . Здесь вы видите org / vaadin / risto / stepper / widgetset, содержащий файл StepperWidgetset.gwt.xml . Этого достаточно, чтобы создать значение Inherited widgetset : org.vaadin.risto.stepper.widgetset.StepperWidgetset . Проще говоря, это путь к файлу * .gwt.xml, написанному как класс импорта в Java.
- Снимите флажок « Интегрировать в общий интерфейс» и скажите « ОК» .
- Studio покажет уведомление « Компонент создан » и перестроит проект, потому что ему нужно добавить новую зависимость в скрипт сборки gradle, загрузить необходимую библиотеку и перекомпилировать набор виджетов. Итак, мы просто подождем пару минут, пока процесс не закончится.
- Как последний штрих, мы подгоняем компонент в соответствии с темой нашего приложения.
Если мы посмотрим на исходный код , то увидим, что этот компонент имеет стиль SCSS , поэтому нам нужно добавить его стиль в зависимости проекта. Для этого перейдите в раздел « Свойства проекта », нажмите « IDE» . В среде IDE будет показан файл build.gradle , в который необходимо добавить строку тем («org.vaadin.addons: stepper: 2.3.0») в предложение зависимостей задачи configure (webModule), как показано на рисунке ниже.
Теперь мы можем применить стиль, который мы хотим. Перейдите в раздел « Свойства проекта » и нажмите « Создать расширение темы» . Выберите Halo , как значение по умолчанию, и нажмите Create . Studio добавит файл themes / halo / halo-ext.scss в веб- модуль вашего приложения, где вы можете указать стили для новых компонентов или изменить существующие. Он также внесет необходимые изменения в скрипт сборки и заново создаст файлы проекта для вашей IDE.
Откройте файл halo-ext.scss в вашей IDE и вставьте следующий CSS, как показано на рисунке ниже:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
|
…@import "../VAADIN/addons/stepper/stepper";…@include stepper; /* Basic styles for stepper inner textbox */ .stepper input[type="text"] { @include box-defaults; @include valo-textfield-style; &:focus { @include valo-textfield-focus-style; } }… |
Это оно! Теперь мы уже можем использовать компонент в нашем приложении CUBA!
Использование стороннего компонента Vaadin в приложении CUBA
Давайте наконец создадим экран со степпером. Поскольку мы завершили только первый уровень интеграции, он все еще не является частью универсального пользовательского интерфейса CUBA, поэтому его нельзя использовать непосредственно из экранного дескриптора xml, но он уже может быть создан программно.
Давайте начнем:
- Загрузите CUBA Studio с нашего веб-сайта, установите его, запустите сервер CUBA Studio и откройте студию в своем браузере. Если у вас возникли какие-либо сложности на этом этапе, просто следуйте видеоинструкции (часть 1 со страницы «Быстрый старт»).
- Создайте проект с именем vaadin-component . Studio автоматически называет пространство имен проекта и корневой пакет.
- Следуйте инструкциям Интегрирования компонентов Vaadin
- После завершения шага 3 перейдите в раздел « Экраны » на левой панели Studio, сфокусируйтесь на элементе Web Module и нажмите « New» . Studio предложит вам выбрать, хотите ли вы создать новый экран с нуля или расширить существующий экран (например, редактор пользователя или диалог загрузки файлов). Мы пойдем на новый экран с нуля .
- Теперь перейдем прямо к вкладке Layout , где мы можем визуально оформить наш экран. Нам нужно использовать какой-нибудь контейнер, который будет действовать как заполнитель для степпера. Введите « hbox » в поле поиска компонентов, студия будет фильтровать компоненты пользовательского интерфейса по имени. Перетащите компонент HBox в форму или иерархию.
- Щелкните правой кнопкой мыши на представлении компонента, расположенном в макете визуальной формы; или выберите компонент в разделе Иерархия и перейдите на вкладку Свойства (рядом с палитрой ).
Нам нужно будет использовать наш Hbox с контроллера экрана, чтобы иметь возможность получить доступ к компоненту CUBA с контроллера, нам нужно будет определить его идентификатор . Просто нажмите правую кнопку в поле id, и Studio автоматически сгенерирует идентификатор.
Также мы хотели бы, чтобы наш шагер имел ширину 250 пикселей, поэтому мы указываем этот размер для его контейнера.
Примените все изменения, которые мы сделали.
- Запустите вашу IDE, перейдите на вкладку « Контроллер » дизайнера экрана и нажмите IDE . Studio создаст файлы проекта и откроет контроллер экрана в вашей IDE.
- Перейдите в IDE, где у нас уже есть наш экранный контроллер, созданный Studio. Давайте немного кодировать. Все строки, которые нужно добавить, снабжены подробными комментариями:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
package com.company.vaadincomponent.web.screens;import com.haulmont.cuba.gui.vaadincomponent.AbstractWindow;import com.haulmont.cuba.gui.vaadincomponent.HBoxLayout;import com.vaadin.ui.Layout;import org.vaadin.risto.stepper.DateStepper;import javax.inject.Inject;import java.util.Map;public class Screen extends AbstractWindow { /* Getting access to the hbox component, using CUBA mechanism for UI components injection */ @Inject private HBoxLayout hbox; /* Create stepper to be placed into the prepared hbox container */ private DateStepper stepper = new DateStepper(); /* Overriding init method, which will be called by the framework after creation of all components and before showing the screen */ @Override public void init(Map<String, Object> params) { super.init(params); /* Unwrapping hbox to get access to the native Vaadin layout to place stepper */ Layout box = hbox.unwrap(Layout.class); /* Placing stepper component into the unwrapped hbox container */ box.addComponent(stepper); /* Defining stepper size to fit 100% of the parent hbox component width */ stepper.setWidth("100%"); /* Adding listener to show notification when stepper value is changed */ stepper.addValueChangeListener(event -> showNotification("Value has been changed to " + stepper.getValue(), NotificationType.HUMANIZED) ); }} |
- Чтобы получить доступ к нашему экрану из главного меню приложения, перейдите в раздел « Главное меню » правой панели Studio, нажмите «Редактировать», сфокусируйтесь на элементе приложения и нажмите « Создать» . По умолчанию мы оставили наш идентификатор пошагового экрана, поэтому найдите значение экрана в выпадающем списке и нажмите Добавить .
- Пришло время запустить приложение и посмотреть, как все это работает. Нажмите кнопку « Воспроизвести », которая находится прямо под пунктом « Построить » в главном меню студии. Студия запросит у вас разрешение на обновление БД, согласитесь на это.
Когда приложение будет запущено и запущено, вы увидите ссылку localhost: 8080 / app в левом нижнем углу, щелкните по ней.
Приложение CUBA встретит вас с экраном входа в систему, где пользователь по умолчанию — admin , угадайте, какой пароль? Просто нажмите Отправить . Нажмите на Приложение -> Экран в главном меню, и вот мы!
Вы можете найти исходный код примера проекта рабочего степпера здесь .
Вывод
Изначально я собирался написать пост, охватывающий все уровни интеграции для компонентов Vaadin, GWT и JavaScript, но, как вы видите, это было бы слишком для одной статьи. Итак, в следующий раз я рассмотрю компоненты JavaScript.
Кроме того, я хотел бы признать, что некоторые части процесса могут быть значительно упрощены и даже полностью исключены, но это первый шаг, который может сразу же помочь пользователям насытить наш общий пользовательский интерфейс редко используемыми, но иногда чрезвычайно полезными виджетами. Итак, если у вас есть предложения или идеи о том, как их можно улучшить, поделитесь ими с нами на нашем форуме .