Как после привычного 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.
