Фрагменты страниц в Liferay 7.1 - Фрагменты страниц в Liferay 7.1
Блоги
Навигационные полоски
В Liferay 7.1 принципиально пересмотрели подход в работе с сайтами. Теперь в Liferay мы именно "строим" новые сайты - под это даже выделен отдельный раздел Build в меню управления сайтом, где администратор может управлять страницами, шаблонами, меню и фрагментами страниц.
Фрагменты страниц - это новая концепция, которая появилась в Liferay 7.1. По сути дела - это шаг навстречу front-end разработчикам. Посмотрим - насколько этот шаг удался.
Раньше (в версии до 7.1) для создания обычных страниц (без какого-то функционала) можно было использовать страницы и размещать на них Web-Content. Этот вариант неплохо работал для простых страниц - редактор контента без глубоких знаний программирования и верстки мог в несколько кликов мышки создать новую страницу, задать для нее раскладку (1 колонка, 2 колонки...) и накидать контенты, создавая их в WYSIWYG редакторе. Проблемы начинались когда надо было создавать страницы со сложной версткой. Тут получался полный разрыв - front-end разработчики "пишут" страницы локально - получается какой-то код на html/js/css, потом этот код надо мучительно разбивать на тему (theme) и веб-контенты, накидывать контенты на страницу, затем аккуратно переносить все между средами (dev-test-uat-prod) и так по кругу при каждом изменении. Одним словом серьезная разработка сложного сайта на Liferay, особенно если в разработку привлечена команда frontend-еров, не знакомых с Liferay - этот тот еще квест. И фрагменты страниц призваны эту разработку упростить.
Что же такое page fragment (фрагмент страницы)? Это по сути дела набор: HTML + стили CSS + код на JavaScript. После написания этот набор можно размещать на любой страницы специального типа (Content Page). Все фрагменты объединены в коллекции (типа папки).
Давайте попробуем создать страницу (повторяет страницу Welcome которая создается по умолчанию) с использованием фрагментов. Для начала идем в управление сайтом -> Build -> Page Fragments и создадим новую коллекцию Main Page.
Изначально в коллекции нет никаких фрагментов - создаем первый фрагмент - Main Page Header
Мы попадаем в редактор фрагмента, разбитый на 4 части - HTML, CSS, JavaScript и превью. Накидаем простейший код для создания аналогичного приветствия как и в портлете Welcome.
Так мы можем создать любое количество коллекций и фрагментов, которые потом могут быть размещены на Content Page. При создании страницы теперь есть выбор, какую страницу мы создаем.
Есть два основных типа: Widget Page (на которой размещаются портлеты-widget-ы) и Content Page (которая как раз строится из Page Fragment-ов). Выберем Content Page и создадим новую страницу Main (сразу добавив ее в меню по умолчанию).
Получаем пустую страницу с возможностью выбора фрагментов (у нас он пока один).
Добавив фрагмент на страницу мы можем управлять его расположением (перемещать вверх-вниз). Почему-то поддержка Page Layout-ов не предусмотрена - то есть мы можем размещать фрагменты друг-под-другом - но не несклько-в-ряд.
В итоге получаем страницу с необходимым контентом
Но самое важное не это, а то, что фрагменты и коллекции можно импортировать и экспортировать - при этом в качестве артифакта для импорта-экспорта мы получаем ZIP с несколькими настроечными json-файлами - и далее понятными любому разработчику html/css/js файлами. То есть теперь легко можно вести разработку фрагментов локально, используя в том числе систему контроля версий (тот же git) - и импортировать результат в Liferay (в том числе теперь упрощается передача артифактов между средами!)
Итого - мы имеет явный шаг в сторону удобства работы front-end разработчиков и разделения разработки фронта и бека. Backend-еры пишут свои REST-сервисы и деплоят в виде OSGI модулей а frontend-еры пишут фрагменты локально - и импортируют их через импорт/экспорт. Администратор потом из этого собирает финальный сайт.
Но-но-но... лично мне кажется, что для реального использования нового подхода не хватает ряда принципиальных вещей:
Поддержка дополнительных ассетов (изображений) - как факт - любой фрагмент - это не только html/css/js - но и изображения. Даже в моем простом примере мы использовали background-картинку. Но изображения не являются частью фрагментов - так что, если какому-то фрагменту нужна какая-то картинка - эта картинка сначала должна быть загружена в тему (что плохо - тема не должна содержать что-то, специфичное для конкретного контента), либо в Document Library (но тогда она получит разную ссылку на скачивание в разных средах!) и только потом на нее можно ссылаться в fragment-е. Без поддержки изображений мы по сути дела можем создавать только простые фрагменты (а смысл тогда???)
Локальная отладка фрагментов - основной плюс фрагментов я вижу в том, что frontend-разработчик может разрабатывать фрагменты локально в виде понятных ему артифактов (html/css/js) и только когда все готово - импортировать на портал. Но для локальной разработки у разработчика должна быть возможность посмотреть, как будет выглядить фрагмент в контексте (как минимум в теме). Без какого-либо средства (например задача в gulp, которая бы брала тему, фрагмент и создавала статическую страницу с фрагментов в теме) разрабатывать фрагменты локально получается нереально
Поддержка Page Layout-ов - не понимаю почему Content Page позволяет располагать фрагменты только в одну колонку... При том что поддержка Page Layout-ов есть в Liferay изначально.
Расположение и фрагментов и виджетов на одной странице - я так и не понял почему виджеты и фрагменты могут быть размещены только на разных типах страниц - ведь может же быть вариант, когда нам на одной странице надо разместить и виджет (форумы или блоги) и фрагмент (заголовок страницы).
Итого - идея хорошая - но реализация какая-то половинчитая и насколько это поможет в реальных, серьезных проектах я пока сильно сомневаюсь. Надеюсь только что это лишь "первая версия" и , например, в Liferay 7.2 мы увидим полноценную реализацию.
Связанные объекты:
- Теги
- liferay liferay 7.1
- 6.2 (12)
- 7.0 (12)
- activiti (14)
- apache camel (6)
- camel (11)
- devcon (6)
- devops (5)
- emdev (9)
- emdev limited (9)
- entaxy (13)
- esb (10)
- fuse (5)
- gartner (7)
- google apps (6)
- jboss (5)
- liferay (143)
- liferay 7.1 (11)
- liferay dxp (11)
- liferay7 (12)
- openshift (8)
- osgi (5)
- redhat (15)
- rest (6)
- wso2 (70)
- wso2 api-m (10)
- wso2 ei (8)
- wso2ei (5)
- wso2esb (7)
- wso2is (8)
- емдев (11)
Сайт использует файлы cookie. Они позволяют узнавать вас и получать информацию о вашем пользовательском опыте. Это нужно, чтобы улучшать сайт. Посещая страницы сайта и предоставляя свои данные, вы позволяете нам предоставлять их сторонним партнерам. Если вы согласны, продолжайте пользоваться сайтом. Если нет – установите специальные настройки в браузере или обратитесь в техподдержку.