Эта статья продолжение статьи MastremindCMS2 - Как начать?. В ней я рассказывал как установить и настроить community-версию "безголовой" MastermindCMS2.
В этой статье речь пойдет о специальных тегах, которые вы можете использовать для сборки динамических шаблонов в MastermindCMS2.
За свою карьеру программиста я видел множество разных технологий и фреймворков от гигантов индустрии, таких как Oracle, Microsoft, IBM и т. п. Но в каждом из них было какое-то неудобство. А конкретнее у них у всех было одно общее, это необходимость реализовывать серверную логику чтобы можно было использовать ее в шаблонах. И это мне сильно не нравилось, приходилось делать одну и ту же работу из проекта в проект.
Один из таких подходов разнесения логики был паттерн программирования MVVM(Model-View-ViewModel). Его активно продвигали во фреймворках для C#. Структурно с точки зрения разнесения логики, я считаю этот паттерн самым удобным.
Когда я поставил задачу себе разработать удобный фреймворк для работы, то у меня в голове был только один концепт реализации. Который содержал в основе именно MVVM, но я не считал, что это то, что я хочу получить в итоге. Так как проблема написания серверной логики оставалась открытой. И я поставил себе задачу спроектировать фреймворк так чтобы не нужно было каждый раз писать бэк для очередного проекта. Ведь грубо говоря, мы с вами коллеги, решаем одни и те же задачи для разных проектов. Авторизация, управление каталогом продуктов, отправка писем по электронной почте, чаты и прочая энтерпрайз муть. Соответственно опираясь на эти задачи, я начал думать, что нужно сделать чтобы напрямую оперировать с этим на бэке. В результате я решил писать логику парсинга шаблонов на беке, а фронтенд часть делать гибкой и независимой.
Первым шагом я продумал маршрутизацию для обработки HTTP-запросов. Основной задачей было сделать обработку GET-запроса и при этом достать шаблон, где уже будет логика, состоящая из кастомных тегов, которые динамически соберут валидный HTML и отдадут его назад.
Основой для проектирования тегов я выбрал самые частые задачи, которые приходиться решать программисту разрабатывая пользовательский интерфейс. К частым задачам в проектировании пользовательского интерфейса я отношу следующие задачи:
Разбиение визуальных блоков на компоненты, и подключение их на страницы
Получение данных со сторонних микро-сервисов и отображение их на странице
Итеративное отображение данных
Отображения одиночных объектов из базы данных
Логические операции и отрисовка данных на основе выполнения условия отображения
Отображение данных в виде дерева
Расширение возможностей отображения выпадающего списка на основе HTML-элемента select
Отображение текстовых данных напрямую из базы данных
И в итоге я получил 8 специальных тегов которые решают вышеописанные задачи. А теперь по порядку я расскажу на примере этих задач как можно проектировать страницы с использованием тегов фреймворка MastermindCMS2.
Подключение фрагмента
Разработка фронтенд-приложения на MastermindCMS2 не отличается ничем от принципов разработки на других фреймворках. Фронтенд часть полностью автономна, и вам не нужно собирать приложение для того чтобы бекенд-логика заработала у вас в приложении. Вот несколько шагов демонстрирующих принципы разработки на нашей headless-cms.
<msm:fragment>- тег предназначен для использования внешних фрагментов HTML-кода для подключения их на страницы.
-
Для начала создадим новый файл.
Создание нового HTML-файла -
Скопируем все содержимое страницы в новый файл
Копирование HTML -
Далее мы удалим некоторые части HTML, для того чтобы их перенести отдельно во внешние фрагменты.
Убираем навигационное меню и основную часть страницы -
Обратимся к документации на сайте MastermindCMS2. Для примера мы используем
<msm:fragment>
Описание MSM Fragment Tag <msm:fragment id="navbar" path="admin/components/navbar.html"/>- этот код вам нужно добавить на страницу-
Создаем новый файл для фрагмента.
Перенос HTML для навигационной панели в отдельный файл -
Подключаем созданный нами фрагмент на страницу.
Подключение фрагмента HTML на страницу
Запросы на внешний REST API
<msm:rest>- тег предназначен для выполнения запроса на внешний ресурс, который доступен по REST API и возвращает данные в виде JSON.
Исходный код:
<div class="container">
<h1>Star Wars Ships</h1>
<ul id="starWarsRestApiWrapper1" class="container">
<msm:rest id="starWarsRestApi"
endpoint="https://swapi.dev/api/starships/9/?format=json"
request="{}" method="GET" item-name="ship">
<msm:template><li>${ship|name}</li></msm:template>
</msm:rest>
</ul>
<h1>Locations</h1>
<ul id="locationsApiWrapper2" class="container">
<msm:rest id="locationsApi"
endpoint="https://ghibliapi.herokuapp.com/locations"
request="{}" method="GET" item-name="loc">
<msm:template><li>${loc|value.name}</li></msm:template>
</msm:rest>
</ul>
</div>Итерирование - цикл foreach
msm:foreach - тег позволяет сделать итерацию по элементам и отобразить их как повторяющийся HTML-элемент, который определен во вложенном теге msm:template.
Исходный код:
<form>
<div class="form-group">
<label for="inputFirstName">First Name</label>
<input type="text" class="form-control" name="firstName" id="inputFirstName" autocomplete="off" placeholder="First Name">
</div>
<div class="form-group">
<label for="inputLastName">Last Name</label>
<input type="text" class="form-control" name="lastName" id="inputLastName" autocomplete="off" placeholder="Last Name">
</div>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" name="status" value="false" id="checkStatus">
<label class="form-check-label" for="checkStatus">Check me out</label>
</div>
<button type="button" class="btn btn-primary" onclick="app.addDocumentAndRender('foo','custom-users',this)">Submit</button>
</form>
<div id="userListWrapper" class="row gx-lg-5">
<msm:foreach id="userList"
database="foo"
collection="custom-users"
filter="{}"
mode="DATABASE"
item-name="user">
<msm:empty>
<p>No users</p>
</msm:empty>
<msm:template>
<div class="col-lg-6 col-xxl-4 mb-5">
<div class="card bg-light border-0 h-100">
<div class="card-body text-center p-4 p-lg-5 pt-0 pt-lg-0">
<div class="feature bg-primary bg-gradient text-white rounded-3 mb-4 mt-n4"><i class="bi bi-collection"></i></div>
<h2 class="fs-4 fw-bold">${user|firstName} ${user|lastName}</h2>
<p class="mb-0">${user|_id}</p>
</div>
</div>
</div>
</msm:template>
</msm:foreach>
</div>Отображение объектов - элемент block
msm:block - тег позволяет выводить объект на основе определенного HTML-элемента внутри вложенного тега msm:template.
В этом примере видно как входящий параметр от внешнего тега может быть использован на внутренних тегах:
<div id="userBlockWrapper">
<msm:block id="userBlock"
value="{ fullName: '${user|firstName} ${user|lastName}', movie : 'Last Hope'}"
item-name="usr">
<msm:template><h6 style="text-align:center">${usr|fullName} - ${usr|movie}</h6></msm:template>
</msm:block>
</div>Исходный код:
<div id="userListWrapper" class="row gx-lg-5">
<msm:foreach id="userList"
database="foo"
collection="custom-users"
filter="{}"
mode="DATABASE"
item-name="user">
<msm:empty>
<p>No users</p>
</msm:empty>
<msm:template>
<div class="col-lg-6 col-xxl-4 mb-5">
<div class="card bg-light border-0 h-100">
<div class="card-body text-center p-4 p-lg-5 pt-0 pt-lg-0">
<div class="feature bg-primary bg-gradient text-white rounded-3 mb-4 mt-n4"><i class="bi bi-collection"></i></div>
<h2 class="fs-4 fw-bold">${user|firstName} ${user|lastName}</h2>
<p class="mb-0">${user|_id}</p>
</div>
<div id="userBlockWrapper">
<msm:block id="userBlock"
value="{ fullName: '${user|firstName} ${user|lastName}', movie : 'Last Hope'}"
item-name="usr">
<msm:template><h6 style="text-align:center">${usr|fullName} - ${usr|movie}</h6></msm:template>
</msm:block>
</div>
</div>
</div>
</msm:template>
</msm:foreach>
</div>Логический оператор "если"
msm:if - тег позволяет выводить объект на основе условия, которое будет проверяться в атрибуте test.
Для примера изменим свойство в объектах следующим образом:
Исходный код:
<div id="userListWrapper" class="row gx-lg-5">
<msm:foreach id="userList"
database="foo"
collection="custom-users"
filter="{}"
mode="DATABASE"
item-name="user">
<msm:empty>
<p>No users</p>
</msm:empty>
<msm:template>
<div class="col-lg-6 col-xxl-4 mb-5">
<div class="card bg-light border-0 h-100">
<div class="card-body text-center p-4 p-lg-5 pt-0 pt-lg-0">
<div class="feature bg-primary bg-gradient text-white rounded-3 mb-4 mt-n4"><i class="bi bi-collection"></i></div>
<h2 class="fs-4 fw-bold">${user|firstName} ${user|lastName}</h2>
<p class="mb-0">${user|_id}</p>
</div>
<div id="showUserBlockWrapper">
<msm:if id="showUserBlock" test="${user|status}">
<div id="userBlockWrapper">
<msm:block id="userBlock"
value="{ fullName: '${user|firstName} ${user|lastName}', movie : 'Last Hope'}"
item-name="usr">
<msm:template><h6 style="text-align:center">${usr|fullName} - ${usr|movie}</h6></msm:template>
</msm:block>
</div>
</msm:if>
</div>
</div>
</div>
</msm:template>
</msm:foreach>
</div>Отображение элемента в виде дерева
msm:tree - тег позволяет выполнить итерацию по элементам и отобразить их в виде древовидной HTML-структуры. Каждый вложенный элемент, имеющий подэлементы, должен содержать свойство children для отображения в виде элемента вложенного поддерева. Элемент для элемента итерации определяется во вложенном теге msm:template.
Исходный код:
<div class="dd" id="product-groups-tree">
<msm:tree id="productGroups"
database="msm2-application"
collection="categories"
filter="{}"
mode="DATABASE" item-name="cat">
<msm:template>
<ol class="dd-list">
<li class="dd-item dd3-item" data-id="${cat|id}" data-name="${cat|name}">
<div class="dd-handle dd3-handle"></div>
<div class="dd3-content">
<a href="#product-group/view/${cat|id}" class="truncate">${cat|name}</a>
</div>
<a class="dd3-right-handle modal-trigger" href="#remove-pgroup-dialog" data-item-id="${cat|id}"></a>
</li>
</ol>
</msm:template>
</msm:tree>
</div>Выпадающий список
msm:select - тег выполняет рендеринг для на основе определения HTML-шаблона во вложенном теге msm:template в качестве дочернего элемента.
Исходный код:
<div id="selectTagWrapper" class="root">
<msm:select id="selectTag"
database="foo"
collection="custom-users"
filter="{}"
selected="Darth"
mode="DATABASE" item-name="option" class="select-file-types">
<msm:template><option class="item" value="${option|firstName}" ${option|selected}>${option|firstName} ${option|lastName}</option></msm:template>
</msm:select>
</div>Получение текстовых значений из базы данных
msm:text - тег позволяет отображать свойства объекта в виде текста, который определяется согласно шаблону объявленному внутри.
<div id="textTagWrapper">
<msm:text id="textTag"
bean="dummyBean"
function="getDummyUser"
scope="PROTOTYPE"
mode="BEAN" item-name="emp">
${emp|name} - ${emp|age}
</msm:text>
</div>Заключение
Все 8 специальных тегов были рассмотрены в статье с примерами. Я пострарался максимально подробно рассказать как все-таки это работает. В следующей статье я расскажу как использовать эти теги в связке с JavaScript-частью от данной технологии. Дата-байдинг, роутинг уже реализованы на уровне фреймворка, поэтому вам не придется писать тонны JS чтобы сделать интеграции с базой данных, и вам не нужно писать бэкенд часть для REST API. Основные все инструменты уже реализованы в фреймворке.
Как обычно напишу планы на развитие данной технолгии. Я думаю основной задачей для меня сейчас, стоит задача это создание маркетплейса для всех программистов, которые смогут там продавать свой модули и шаблоны написанные на этом фреймворке.
Я делюсь этой информацией тут, потому-что я хочу чтобы рутинная разработка веб-приложений превратилась в искусство шаблонизации. Где вы можете собрать в короткие сроки сложные платформы с поиском и интеграциями как простой конструктор LEGO.
Я делюсь с вами прежде своим инструментом, который мне сейчас позволяет работать быстрее и эффективнее. Но без вас я не смогу сделать это. И это хоть на грамм, на капельку сделает нашу жизнь программиста проще.
Спасибо что дочитали мою статью до конца, продолжение следует...