1. Привязка Kanban к данным

В этой главе вы создадите:

Перечисление TaskStatus.
Сущность KanbanTask с атрибутами, необходимыми для отображения на kanban-доске.
CRUD-экраны с доской Kanban на экране KanbanTask.list.

Создание сущности и экранов KanbanTask

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

Todo
In progress
Verification
Done

Подробные инструкции по созданию перечислений вы найдете в разделе Использование перечислений самоучителя.

Далее создайте сущность KanbanTask. Подробные инструкции по созданию сущностей вы найдете в разделе Простой CRUD самоучителя.

Сущность KanbanTask имеет следующие атрибуты:

text типа String. Установите флажок Mandatory.
status типа перечисления TaskStatus. Установите флажок Mandatory.
assignee - ассоциация с сущностью User, с кардинальностью "многие-к-одному".

Определите атрибут text для генерации имени экземпляра.

Создайте экран деталей для сущности KanbanTask. Подробные инструкции по созданию экранов списков и деталей сущности вы найдете в разделе Создание CRUD-экранов самоучителя.

Следуйте предлагаемым значениям на каждом шаге мастера создания экрана.

На шаге Entity detail view fetch plan добавьте атрибут assignee в выборку. Теперь вы можете быть уверены, что связанная сущность User будет загружена вместе с корневой сущностью KanbanTask и отображена в экране деталей.

Студия автоматически сгенерирует KanbanTask.detail и откроет соответствующий исходный код.

Добавление компонента kanban на экран

Вам нужно создать пустой экран с идентификатором KanbanTask.list. Этот экран будет использоваться для добавления kanban-доски.

На последнем шаге мастера задайте локализованное сообщение для заголовка экрана: Kanban board.

Найдите kanban-task-list-view.xml в окне инструментов Jmix и дважды щелкните по нему. Откроется дизайнер экрана. Для начала вы добавите collectionContainer, чтобы загрузить задачи из базы данных. Подробные инструкции по определению контейнера данных можно найти в разделе Определение контейнера данных самоучителя.

Нажмите Add Component на панели действий, затем найдите элемент CollectionContainer и дважды щелкните по нему:

В открывшемся диалоге выберите сущность KanbanTask. Новый элемент collectonContainer будет добавлен как в панель иерархии Jmix UI, так и в XML.

Чтобы гарантировать, что dataLoader автоматически загружает данные при открытии экрана, вам необходимо добавить фасет dataLoadCoordinator. Нажмите Add Component на панели действий, затем найдите элемент DataLoadCoordinator и дважды щелкните по нему:

Если вы хотите отобразить Kanban на экране, вам нужно добавить UI компонент kanban в XML-дескриптор.

Поместите курсор внутрь элемента layout.

Затем нажмите Add Component на панели действий, найдите элемент Kanban и дважды щелкните по нему:

Настройте атрибуты id, dataContainer, height и width, как показано ниже.

<kanban:kanban id="kanban" dataContainer="kanbanTasksDc" width="100%" height="100%"/>

Настройка колонок

Чтобы отобразить на экране компонент Kanban, вам необходимо определить колонки. Для этого выберите kanban в панели иерархии Jmix UI или в XML-дескрипторе, затем нажмите кнопку Add на панели инспектора компонентов. В выпадающем списке выберите Columns → Column.

В открывшемся диалоге вам нужно будет определить обязательный атрибут колонки - dataField. Этот атрибут является идентификатором колонки в компоненте kanban. Вам необходимо определить колонку таким образом, чтобы значения атрибута dataField совпадали со значениями перечисления TaskStatus. Также вам нужно определить атрибут label. Значение этого атрибута будет отображаться в заголовке колонки.

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

Нажмите кнопку Debug ( start debugger ) на главной панели инструментов.

Перед запуском приложения студия сравнит модель данных проекта со схемой базы данных. Когда вы создали новую сущность, Studio автоматически сгенерирует Liquibase changelog, чтобы отразить соответствующие изменения в базе данных (например, создание таблицы KANBAN_TASK):

Нажмите Save and run.

Studio выполнит изменения в базе данных, затем построит и запустит приложение:

После запуска приложения перейдите по адресу http://localhost:8080 в вашем браузере и войдите в приложение с учетными данными admin/admin.

Выберите пункт Kanban board в меню Application. Вы увидите экран KanbanTask.list:

Добавление действий

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

Выберите kanban в панели иерархии Jmix UI или в XML-дескрипторе экрана, затем нажмите кнопку Add на панели инспектора компонентов. В выпадающем списке выберите Actions → Action.

Укажите действия, которые вы хотите добавить. Например: list_create, list_edit, list_remove.

Нажмите кнопку OK. Элементы действия будут добавлены как в панель иерархии Jmix UI, так и в XML. Затем, чтобы использовать эти действия, вам нужно создать панель кнопок.

Поместите курсор перед элементом kanban. Затем нажмите Add Component на панели действий, найдите элемент hbox и дважды щелкните по нему. Чтобы добавить необходимые стили, добавьте атрибут classNames со значением buttons-panel к элементу hbox:

<hbox classNames="buttons-panel"/>

Выберите hbox в панели иерархии Jmix UI или в XML-дескрипторе экрана, затем нажмите кнопку Add Component на панели действий, найдите элемент button и дважды щелкните по нему.

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

Чтобы сделать редактирование задач более удобным, вам нужно открыть экран деталей в диалоговом режиме. Для этого выберите действие create в панели иерархии Jmix UI или в XML-дескрипторе, затем измените свойство openMode на DIALOG. Повторите те же действия для действия edit.

Нажмите Ctrl/Cmd+S и переключитесь на запущенное приложение.

Выберите пункт Kanban board в меню Application. Теперь вы можете создавать, редактировать и удалять задачи с помощью диалогового экрана деталей:

Автоматическое сохранение данных

Компонент kanban сохраняет временные изменения в контейнере данных до тех пор, пока не будет вызвано действие подтверждения для фиксации их в базу данных. Это поведение характерно для визуальных компонентов.

Чтобы включить автоматическое сохранение DataContext, можно использовать атрибут autoSave.

Выберите kanban:kanban в панели иерархии Jmix UI или в XML-дескрипторе экрана, затем установите флажок autoSave в панели инспектора.

Не забудьте удалить атрибут readOnly="true" из loader. В противном случае, изменения не будут сохранены в базу данных.

Нажмите Ctrl/Cmd+S и переключитесь на запущенное приложение.

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

Редактирование двойным щелчком

Kanban поддерживает обработку событий. Для получения дополнительной информации о доступных событиях обратитесь к разделу Обработчики.

Чтобы включить редактирование карточки задачи KanbanTask двойным щелчком, необходимо реализовать обработчик события KanbanTaskDoubleClickEvent.

Откройте класс KanbanTaskListView.java. Чтобы сгенерировать метод обработчика с нуля, нажмите Generate Handler на панели действий в верхней части редактора кода:

Затем выберите KanbanTaskDoubleClickEvent в дереве обработчиков Kanban:

Теперь вам нужно реализовать логику для открытия экрана деталей:

@ViewComponent
private Kanban<KanbanTask> kanban;

@Autowired
private DialogWindows dialogWindows;

@Subscribe("kanban")
public void onKanbanKanbanTaskDoubleClick(
        final KanbanTaskDoubleClickEvent<KanbanTask> event) {
    dialogWindows.detail(kanban)
            .open();
}

Нажмите Ctrl/Cmd+S и переключитесь на запущенное приложение. Теперь вы можете редактировать карточку двойным щелчком.

Резюме

В этом разделе мы рассмотрели, как подключить компонент Kanban к данным вашего приложения, и описали шаги по созданию kanban-доски.

В этом разделе мы продемонстрировали:

Создание сущности JPA под названием KanbanTask для представления задачи на kanban-доске.
Подключение компонента Kanban к данным: вы узнали, как связать компонент Kanban с контейнером коллекции.
Определение колонок Kanban: вы узнали, как создавать и настраивать колонки на kanban-доске, представляющие различные статусы задач.
Обработка действий и событий: вы изучили, как реализовать действия для создания, редактирования и удаления задач, а также как обрабатывать события, такие как двойной щелчок.
Включение автоматического сохранения данных: вы узнали, как настроить компонент Kanban для автоматического сохранения изменений в ваш источник данных.