Как после привычного Spring за месяц сделать сайт с платформой быстрой разработки Jmix. Коротко о технологии, особенностях, возникающих в процессе вопросах и ответах на них.
Привет! Меня зовут Никита, я Java‑разработчик в Red Collar. Так вышло, что я стал первопроходцем платформы Jmix и в короткие сроки сделал на ней уже два проекта. Кажется, мне даже понравилось ? Делюсь своим опытом и мыслями, почему вообще решил познакомиться с платформой. Также кратко расскажу об этапах работы над проектами, который реализовали на Jmix.
Коротко о Jmix
Jmix — это высокоуровневая Java-платформа на базе открытого кода для быстрого создания корпоративных информационных систем. Платформа Jmix — преемник другой известной платформы, CUBA Platform. Поставляется с расширенными инструментами и обширным набором функциональных модулей.
Система позволяет создавать как серверную часть, так и пользовательский интерфейс приложения. Подходит для разработки приложений со сложной моделью данных и широким пользовательским интерфейсом.
В чем суть Jmix и почему Java-разработчику проще адаптироваться
Jmix основан на Spring Boot, который де-факто является стандартом для создания корпоративных веб-приложений Java. Это означает, что разработчик может использовать множество сторонних библиотек и фреймворков с минимальной конфигурацией в дополнение к функциям, предоставляемым Jmix. Джависту будет несложно освоить платформу — здесь есть подробная документация в двух языках, которая поможет разобраться на старте.
Платформа предоставляет множество функций с генерацией кода. Это не значит, что код вообще писать не придется, просто сокращается время на рутинные процессы.
Jmix Studio — что это такое
Отдельного внимания заслуживает компонент платформы Jmix Studio, который является плагином для IntelliJ IDEA. Studio реализует визуальные инструменты для разработки приложения и помогает на всех этапах:
создание и настройка проекта;
определение модели данных;
создание сценариев миграции базы данных;
разработка экранов пользовательского интерфейса в визуальном редакторе.
Модуль обеспечивает расширенную навигацию, автозавершение кода и проверки, специфичные для проектов Jmix. Одновременно с разработкой кода в стандартном «текстовом» режиме разработчик может полноценно использовать визуальные редакторы экранных форм, бизнес-процессов и иной инструментарий для ускорения разработки проекта.
Мы обратили внимание на платформу, потому что она ускоряет работу, позволяет быстро создавать UI-компоненты и навешивать на них информацию. Вместе с Java-коллегой начали факультативно знакомиться с Jmix. В процессе коллега поняла, что она старовер и ей ближе Spring, а я продолжил изучать Jmix — «Java на стероидах», получается.
Вскоре к нам пришел клиент с запросом оперативно сделать промо-сайт с большим количеством анимации, 3D-моделей и графики, а также с удобной админкой для управления каталогом, вакансиями и формами обратной связи. Решили попробовать сделать с Jmix админку, которую обычно пишем на Laravel и на Bitrix.
На реализацию ушел месяц. Функциональность сайта должна была включать:
Каталог товаров с фильтрами, анимацией.
Раздел с вакансиями.
Формы обратной связи для клиентов и партнеров.
Административную панель с гибкой системой ролей для управления всеми разделами сайта.
Отдельно можно отметить удобную работу с поддержкой гибкой системы ролей. Также можно с помощью кода сделать несколько классов и назначить пользователям их роли и ограничения.
В рамках нашего проекта админкой могут пользоваться несколько человек — со стороны и нас, и клиента. Сделали несколько ролей в админке. 1 пользователь мог редактировать товары, но не мог редактировать раздел с вакансиями. 2 пользователь, наоборот, редактирует вакансии, но товары не затрагивает.
Второй проект на Jmix: ошибки, шишки и решения
Между первым и вторым — перерыв оказался небольшим, и я сразу занялся следующим схожим проектом. Здесь подробнее расскажу об этапах работы над геймдев-сайтом, реализованном с Jmix.
На первый взгляд казалось, что проект будет очень похожим на первый — после него я уже многое проработал, набрал шишек, которые уже прошли, но…
Реализация
Основное отличие второго проекта от первого: необходимости работать с блочной структурой контента на некоторых страницах — с поддержкой разных типов блоков и их порядка. К сожалению, Jmix не поддерживал такой функционал из коробки. Его необходимо было реализовать.
Помучил вопросами нашего PHP-разработчика, придумал базовую структуру и приступил к реализации. В основе лежит интерфейс Block, у которого есть свойство type — все блоки будут наследоваться от этого интерфейса, определять свой тип и уже в наследнике хранить нужные блоку данные.
public interface ContentBlock {
@JSONPropertyIgnore
BlockType getBlockType();
}public enum BlockType {
RICH_TEXT_AREA("richTextAreaBlock"),
PRIVACY_TERMS("privacyTermsBlock"),
CODE("codeBlock"),
QUOTE("quoteBlock"),
IMAGE_WITH_CAPTION("imageWithCaptionBlock"),
GAME_SCREENSHOT("gameScreenshot"),
GAME_FEATURE("gameFeature"),
ABOUT_VALUE("aboutValue"),
ABOUT_PERK("aboutPerk"),
GAME("game");
private String type;
BlockType(String type) {
this.type = type;
}
public String getType() {
return type;
}
}Далее для каждого блока создавался визуальный компонент для удобного заполнения. В самом компоненте каждый блок являлся своеобразным стейтом для сохранения или для отображения при редактировании сущностей. Каждому визуальному компоненту автоматически добавлялись кнопки для изменения их порядка в родителе.
public class RichTextAreaBlock implements Serializable, ContentBlock {
private final String type = getBlockType().getType();
private String label;
private String content;
@Override
@JSONPropertyIgnore
public BlockType getBlockType() {
return BlockType.RICH_TEXT_AREA;
}
}@UiController("RichTextAreaFragment")
@UiDescriptor("rich-text-area-fragment.xml")
public class RichTextAreaFragment extends ScreenFragment {
private RichTextAreaBlock state;
// ......
}Для хранения использовал тип JsonObject, который впоследствии мапился в Java класс. Что мы получаем в итоге: например, возьмем Новость — у нас есть блок, а у блока есть несколько наследников. В админке с помощью кнопок создаем нужные блоки — они отображаются в контейнере. С помощью кнопок, встроенных в каждый компонент, мы можем менять блоки местами.
Сохраняя сущность, проходимся по очереди по каждому компоненту в контейнере, берем из него стейт, собираем их в массив. Дальше сохраняем это либо в виде строки, либо в виде JsonObject’а и кладем его в поле таблицы.
Что получилось:
JavaScript Component
После того, как создал блочную структуру для контента, возник вопрос с текстовым контентом новостей и вакансий. Нужно было выделить текст, добавить разные заголовки, создать маркированные и немаркированные списки, добавить выравнивание текста.
Подумал о RichTextArea из коробки Jmix, но его функциональности не хватило. Здесь в историю с двух ног врывается JavaScript Component — компонент пользовательского интерфейса, который может работать с любой оболочкой JavaScript без реализации компонента Vaadin. Таким образом, можно интегрировать любой чистый компонент JavaScript в свое приложение на основе Jmix.
Работает это таким образом:
Объявляем его в XML-дескрипторе экрана.
Прописываем нужные зависимости на локальные файлы, стили, так и обычные зависимости (с рядом ограничений).
Далее создаем коннектор — код на JS.
Сonnector JS
ui_ex1_components_javascript_RichTextEditor = function () {
let connector = this;
let element = connector.getElement();
element.innerHTML = `
<div id="${connector.getState().data.options.editorId}"/>
`;
connector.onStateChange = function () {
let state = connector.getState();
let data = state.data;
let toolbarOptions = {
container: [
[{header: [2, 3, 4, false]}],
["bold"],
["underline"],
[{list: "ordered"}, {list: "bullet"}],
[
{align: ""},
{align: "center"},
{align: "right"},
{align: "justify"},
],
["link"],
[{direction: "rtl"}],
["clean"],
],
};
let formats = ["link", "list", "header", "bold","underline", "direction", "align"];
let quill = new Quill(`#${connector.getState().data.options.editorId}`, {
theme: "snow",
formats: formats,
modules: {
toolbar: toolbarOptions,
},
});
quill.on('text-change', function (delta, oldDelta, source) {
if (source === 'user') {
connector.valueChanged(quill.getText(),
quill.getContents(),
quillGetHTML(quill.getContents()));
}
});
connector.setValue = function (value) {
quill.setContents(htmlToDelta(value))
quill.update();
}
}
function quillGetHTML(inputDelta) {
var tempCont = document.createElement("div");
(new Quill(tempCont)).setContents(inputDelta);
return tempCont.getElementsByClassName("ql-editor")[0].innerHTML;
}
function htmlToDelta(html) {
const div = document.createElement('div');
div.setAttribute('id', 'htmlToDelta');
div.innerHTML = `<div id="quillEditor" style="display:none">${html}</div>`;
document.body.appendChild(div);
let formats = ["link", "list", "header", "bold", "underline", "align", "direction"];
let toolbarOptions = [
[{header: [2, 3, 4, false]}],
["bold"],
[{list: "ordered"}, {list: "bullet"}],
[
{align: ""},
{align: "center"},
{align: "right"},
{align: "justify"},
],
[{direction: "rtl"}],
["link"],
["clean"], // remove formatting button
];
const quill = new Quill('#quillEditor', {
theme: 'snow',
formats: formats,
modules: {
toolbar: toolbarOptions,
},
});
const delta = quill.getContents();
document.getElementById('htmlToDelta').remove();
return delta;
}
};В Java-реализации экрана создаем переменную компонента. Если надо, добавляем функции, которые можно вызвать из коннектора. Саму переменную можно использовать, чтобы вызывать функции внутри JS-файла.
На один из популярных редакторов текста был мануал в документах Jmix. Это редактор Quill, и он подошел. Все минимальные функции для задач он поддерживал. Я мог спокойно поменять местами или убрать кнопки из тулбара, которые мне не нужны.
Итоги: с чего начать изучение Jmix и стоит ли начинать
По факту, в обучении ничего сверхъестественного нет. Джависту будет легко ворваться — пролистать документацию, сделать компонент и свериться с докой. Отличие в том, что помимо работы с данными, здесь оперируем с UI-компонентами, при этом уверенных знаний как у фронта в верстке здесь не надо — все на XML.
Хорошо работает с миграцией, не нужно писать вручную. Например, для сущности у нас был определенный набор полей. Если клиент решит заменить одно поле другим, не нужно писать миграцию. Убираем в коде одно поле, добавляем другое, прописываем тип, настраиваем связи. При запуске проекта автоматически происходит миграция.
Подводя небольшие итоги, проговорю, что с Jmix в кратчайшие сроки сделали и внедрили структуру, которая в базовом виде пытается быть похожей на то, что происходит в Bitrix и Laravel.
