Моя очередная статья касается интеграции jQuery layout в Liferay.
Недавно передо мной появилась задача интеграции layout в Liferay. Причем решение должно было быть довольно гибким. Поразмышлев и порыскав по интернету, я пришел к выводу, что данную задачу можно решить, если совместно использовать тему и лайаут Liferay.
Приступим к самому коду...
jQuery layout имеет следующие зависимости:
Необходимо:
Опционально:
-
ui.draggable.js – для включения возможности изменения размеров
-
effects.core – для open/close эффектов
-
effects.slide.js – для 'slide' эффекта
-
effects.drop.js – для 'drop' эффекта
-
effects.scale.js – для 'scale' эффекта
Поэтому заходим на jQueryui создаем необходимый js и качаем его вместе с jquery.
Далее размещаем наши js библиотеки в папке js, а в css кладем layout-default-latest.css, который можно скачать с сайта jQuery layout.
В Liferay теме нам понадобится подключить необходимые js библиотеки, а также определиться с header и footer, присвоив им необходимые id, а также повесить на них нужные css стили.
portal_normal.vm
<head>
...
#js("$javascript_folder/jquery-1.7.2.min.js")
#js("$javascript_folder/jquery-ui-1.8.19.custom.min.js")
#js("$javascript_folder/jquery.layout-latest.js")
</head>
<div class="ui-layout-north" id="headerwrap">
...
</div>
...
<div class="ui-layout-south" id="footerwrap">
...
</div>
в main.css подключаем css стили jquery layout:
@import url(layout-default-latest.css);
На этом работу с темой можно закончить. Теперь нам необходимо приступить к разработке Liferay layout.
Для этого можно скачать какой-нибудь простой Liferay layout (например трехколоночный) и переделать его. На его примере мы и будем создавать наш layout. Нам понадобится править 2 файла с расширением .tpl Один из файлов необходим для отображения страниц в стандартных web-браузерах, другой для wap
Пример tpl layout:
<script>
jQuery(document).ready(function () {
jQuery("body").layout({
north__size: "auto",
north__paneSelector: "#headerwrap",
north__showOverflowOnHover: true,
north__resizable: false,
north__closable: false,
north__spacing_open: 0,
east__paneSelector: "#column-1",
east__size: 350,
center__paneSelector: "#column-2",
west__paneSelector: "#column-3",
south__paneSelector: "#footerwrap",
south__resizable: false,
south__closable: false,
south__spacing_open: 0,
south__size: 60
});
});
</script>
<div class="ui-layout-east portlet-column" id="column-1">
$processor.processColumn("column-1", "portlet-column-content portlet-column-content-east")
</div>
<div class="ui-layout-center portlet-column" id="column-2">
$processor.processColumn("column-2", "portlet-column-content portlet-column-content-center")
</div>
<div class="ui-layout-west portlet-column" id="column-3">
$processor.processColumn("column-3", "portlet-column-content portlet-column-content-west")
</div>
Теперь деплоим тему и layout в наш портал. И вуа-ЛЯ у нас резиновые колонки.
Плюсы такого решения:
-
layout выполняет все необходмые для него функции.
Минусы:
-
layout без темы работать не будет. Только в связке.
Ресурсы:
1) jQuery layout - документация
2) Liferay layout - wiki для работы с темплейтами
Исходники:
1) Liferay layout
И как обычно ;) Пишите - отвечу