jQuery Layout integration (интеграция jQuery layout в Liferay)

2 May 2012 0 Nicolay Smirnov

Моя очередная статья касается интеграции jQuery layout в Liferay.

Недавно передо мной появилась задача интеграции layout в Liferay. Причем решение должно было быть довольно гибким. Поразмышлев и порыскав по интернету, я пришел к выводу, что данную задачу можно решить, если совместно использовать тему и лайаут Liferay.

Приступим к самому коду...

jQuery layout имеет следующие зависимости:

Необходимо:

jquery.js
ui.core.js

Опционально:

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 в наш портал. И вуа-ЛЯ у нас резиновые колонки.

Плюсы такого решения: