Макеты Шаблонов Liferay

Макеты Шаблонов Liferay

Как объяснялось в предыдущей главе, страницы портала как правило, включает заголовок с логотипом, навигация по меню (горизонтальное и/или вертикальной вкладок навигации), площадь окна портала содержание и колонтитул. Есть два уровня абстракции, чтобы создать страницу портала в Liferay.

Первый слой с темой, которая генерирует эти компоненты тесно связаны путь на страницы. Тема также включает в себя необходимые CSS и изображения, чтобы представить эти компоненты на странице портала в визуально привлекательным образом.

Площадь окна портала содержание включает в себя одну или несколько портлетов. Эти портлеты служить функциональных компонентов страницы. Они могут быть приложения с различными системами бэкэнда и не обязательно следуют друг за другом в последовательном порядке. Таким образом, это необходимо для администраторов или других пользователей Manage Pages разрешения, чтобы иметь возможность добавлять, удалять или изменять их портлетов в желаемый путь во время постановки или даже выполнения. Liferay абстрагируется из способности в отдельный компонент, называемый макет (Layout). Значение этой абстракции становится очевидным, когда администратор портала изменения планировки и тем самым перемещает портлетов на некоторых страницах портала, которые все имеют ту же тему применяется.

Макет фрагмента, который помещается внутрь страницы, сгенерированной тему, но обертывания портлетов для управления портлеты будут расположены на странице портала. Они, как правило, сетку-подобные структуры и в основном создан в HTML-таблицы, строки и столбцы или CSS основе контейнеров, разделенных дел теги. Это характерно и применять CSS определений для управления символы, такие как ширина и заполнение каждой сетке. Для каждой страницы портала, будет один соответствующий шаблон макета в области основного содержания, где пользователи с соответствующими разрешениями могут перетащить и падение портлетов в целевой сети в желаемом порядке.

Это сочетание темы и макет, который управляет тем, как страница портала представлена ​​для конечных пользователей. Мы узнали некоторые основные понятия темы и как развить тему в Liferay Plugins SDK в главе 2. Мы будем смотреть на детали макета шаблоны в этой главе.

К концу этой главы вы узнаете:

                        Использование вне готовых шаблонов макета в Liferay портал

                        Как тему и шаблон макета работать вместе, чтобы контролировать внешний вид страницы портала

                        Базовая структура шаблон макета

                        Liferay вне окна стандартных шаблонов макета

                        Liferay вне окна пользовательских шаблонов макета

                        Создание нового пользовательского макета

                        Как шаблон макета оказываемых в Liferay

                        По умолчанию конфигурации для верстки шаблонов

Использование вне готовых шаблонов макета в Liferay портал

Liferay Портал имеет несколько встроенных шаблонов макета в его освобождения. Эти шаблоны доступны для администратора или других пользователей Управление страницами разрешение на применение в индивидуальном порядке на странице портала. Они могут удовлетворить большинство основных вариантах использования.

Чтобы понять, что расположение шаблоны доступны вне окна, вы можете войти в систему как администратор портала, перейдите в Управление | Макет страницы ссылку в Dockbar области, вы увидите всплывающие страницы, как показано на следующем скриншоте, чтобы перечислить все предустановленной расположение шаблонов, которые доступны в Liferay Portal.

Теперь давайте посмотрим, как можно динамически применить шаблон макета, чтобы страницы портала. Опять же, давайте использовать Palm-Tree Publications в качестве примера организацию и последующую

приведенным ниже:

1. Войти в качестве администратора портала.

2. Создать Palm-Tree Publications организации, если вы еще не сделали этого.

3. Перейти в Manage Pages Palm-Tree Publications организации.

4. Создайте одну страницу с именем общественной Home рамках этой организации.

5. Добавить администратора в эту организацию.

6. К public Home этой организации.

7. Нажмите на Manage | Page Layout ссылку в области Dockbar.

8. Выберите 2 Columns (50/50) шаблон макета, а затем нажмите на кнопку Сохранить

для сохранения изменений.

9. Теперь нажмите на Add | More... звено в области Dockbar.

10. Поиск или перейти к Loan Calculator портлет Add Application

pop_up панели.

11. Добавить портлет для первой колонке страницы, щелкнув на ссылку Add рядом с portlet or dragging-and-dropping в первом столбце.

Повторите два последних шага, чтобы Currency Converter портлет для второй колонке страницы. Вы можете видеть эти два портлета загружены на страницу бок о бок, как показано на следующем скриншоте:

Как вы можете видеть, Вы создали общедоступную страницу с 2 Columns (50/50) раскладка применяется. Каждый из двух портлетов занимает 50% от ширины в области содержимого портлета. Это схема с двумя одинаково широкий столбцов в один ряд генерируется из применяется 2 колонки (50/50) шаблон макета.

Вы можете легко изменить макет страницы, чтобы использовать другой шаблон макета. Нажмите на Manage | Page Layout ссылку в Dockbar области, а затем нажмите на 2 колонки (30/70) шаблон макета, а затем нажмите кнопку Сохранить, чтобы сохранить изменения. Теперь вы можете видеть, что на домашней странице отображается по-другому, как показано на следующем скриншоте, хотя все компоненты, включая страницу Dockbar, заголовок, навигационное меню, окно портала содержание, и нижних колонтитулов в точности то же, что и при 2 колонки (50 / 50) шаблон макета применяется на той же странице.

Контроль внешнего вида страницы с темами и шаблон макета

Как объяснялось в главе 2, portal_normal.vm файл по каждой теме включает в себя различные разделы для создания элементов HTML5, а также компоненты темы, в том числе Dockbar, заголовок с логотипом, навигационные меню, окно портала содержание, подвал, и так далее.CSS, JavaScript и изображения в тему управления общего внешнего вида страницы портала, когда тема применяется ко всем государственным и / или частных страниц сайта, или отдельно на конкретной странице. Это первый уровень абстракции представления.

Макет фрагмента, который помещается внутрь страницы, сгенерированной portal_normal.vm скорости файл тему Liferay.Содержание площадь каждой страницы портала состоит из набора портлетов обернутый макета. Это второй уровень абстракции представления.

Хотя тема управления общего внешнего вида страницы, макета отдельного компонента вызывается в теме, чтобы обернуть способ портлеты оказываются и представлены на странице портала. Различные темы и шаблон макета может быть применен самостоятельно странице портала во время выполнения. Тем не менее, это всегда сочетание одной конкретной теме, а один конкретный макет, который работает вместе для общего выглядеть и чувствовать себя какой-либо конкретной странице портала в любое конкретное время выполнения.

Портлетов на конкретную страницу служить в качестве третьего уровня абстракции, предоставляя в реальном функциональности портала. Мы будем обсуждать внешний вид и внутри портлета в последующих главах этой книги.

Давайте взглянем на следующий блок кода из portal_normal.vm, который находится в ${PORTAL_ROOT_HOME}\html\themes\classic\templates. Давайте тему Liferay Classic theme, как пример, чтобы показать, как тема, шаблон макета, и портлетов работать вместе, чтобы создать страницу портала:

<div id="content">

<nav class="site-breadcrumbs" id="breadcrumbs">

<h1>

<span>#language("breadcrumbs")</span>

</h1>

#breadcrumbs()

</nav>

#if ($selectable)

$theme.include($content_include)

#else

$portletDisplay.recycle()

$portletDisplay.setTitle($the_title)

$theme.wrapPortlet("portlet.vm", $content_include)

#end

</div>

Этот код создает div меткой портлетов области контента для всех окон портала, который может внести на странице. Первая часть представляет собой сайт-панировочные сухари для пользователей, чтобы легко определить, где страница находится в навигации. $Content_include velociyt атрибут вызывает либо  ${PORTAL_ROOT_HOME}/html/portal/layout/view/portlet.jsp или ${PORTAL_ROOT_HOME}/html/portal/layout/edit/portlet.jsp,, который, в свою очередь, вызывает статический метод processTemplate из RuntimePortletUtil.java для генерации применяется шаблон макета и призывает Liferay-портлетов: время выполнения библиотеки тегов рекурсивно оказать всю портлетов загружены на страницу. Мы опишем, как портал страница отображается в более подробно далее в этой главе.

Базовая структура шаблон макета

В настоящее время мы знаем, что макет можно сделать в презентации портала страницы. Чтобы лучше понять расположение и его структуры, мы будем использовать одну из вне готовых шаблонов Liferay это макет, как например, прежде чем мы на самом деле начать работать на наших собственных шаблонов макета.

Давайте посмотрим на следующие выделенные строки в:

<?xml version="1.0"?>

<!DOCTYPE layout-templates PUBLIC "-//Liferay//DTD Layout Templates 6.0.0//EN" "http://www.liferay.com/dtd/liferay-layout-templates_6_0_0.dtd">

<layout-templates>

// ignore details

</layout-templates>

Как вы можете видеть, это XML-файл начинается с версии XML и включает в DTD для параметров макета Шаблоны для Liferay Portal, как в выделенной линией.

DOCTYPE определение доступных на http://www.liferay.com/dtd/liferay-layout-templates_6_0_0.dtd указывает, что Есть два типа компоновки шаблонов: стандартные и пользовательские. Оба они имеют тот же набор параметров.

В соответствии с определением DTD, каждый макет-шаблон включает в себя шаблон-элемент пути, WAP-шаблонов элемент пути, дополнительно миниатюр-элементу, и необязательный элемент ролей. Необязательный элемент ролей содержит список имен ролей, которые обозначают имена ролей безопасности в Liferay Portal. Пользователи, у которых какой-либо из этих ролей будет в состоянии применить этот шаблон макета, чтобы страницы портала. Каждый может использовать этот макет шаблона, если никакой роли имена установлены.

Liferay вне окна стандартных шаблонов макета

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

Как определено в javax.portlet.WindowState.java, Есть три стандартных состояния окна портлета, указанных в спецификации JSR 168 портлета.

      WindowState.MAXIMIZED: развернутое окно государство признак того, что портлет может быть только портлетов, оказываемые на странице портала, или что портлет больше места по сравнению с другими портлетов на странице портала.

      WindowState.MINIMIZED: когда портлет в свернутом состоянии окна, окна портала должны только оказывать минимальное выход или не выход на всех.

      WindowState.NORMAL: нормальное состояние окна указывает, что портлет может быть обмен на страницу с других портлетов.

Есть также два пользовательских Liferay окно состояния, как это определено в:

${PORTAL_ROOT_HOME}/WEB-INF/portlet-custom.xml

<custom-window-state>

<window-state>exclusive</window-state>

</custom-window-state>

<custom-window-state>

<window-state>pop_up</window-state>

</custom-window-state>

Эти два состояния пользовательских окна для различных целей:

 Эксклюзив: пользовательские эксклюзивные состояние окно используется для потоковой передачи двоичных файлов и не оказывают фазы. Это полезно, когда AJAX используется для вызова сервером и получить данные обновляются в течение конкретной области портлетов без обновления всей страницы портала.

 pop_up: Есть два вида pop_up окна: Плавающий pop_up дел и оконные pop_up. В случае плавающей pop_up дел, нам нужно иметь WindowState набор параметров для LiferayWindowstate.EXCLUSIVE того, чтобы сделать асинхронный вызов URL портлета. С другой стороны, окна pop_up такие как Печать страницы портлета загружалась в новом окне браузера. Pop_up портлет должен иметь свой WindowState параметра в URL портлетов установлен в LiferayWindowState.POP_UP.

Трое из выше стандартных и нестандартных состояниях окна определены в следующий файл в Liferay: exclusive, maximized, и pop_up.

com.liferay.portal.kernel.portlet.LiferayWindowState.java

Соответственно, Есть три стандартных шаблонов макета в Liferay: эксклюзивные, не более, и pop_up, которые показаны в ${PORTAL_ROOT_HOME}/WEB-INF/liferay-layout-templates.xml файл, как показано ниже:

<standard>

<layout-template id="exclusive">

<template-path>/layouttpl/standard/exclusive.tpl</template-path>

<wap-template-path>/layouttpl/standard/exclusive.wap.tpl</wap-template-path>

<thumbnail-path>/layouttpl/standard/exclusive.png</thumbnail-path>

</layout-template>

<layout-template id="max">

<template-path>/layouttpl/standard/max.tpl</template-path>

<wap-template-path>/layouttpl/standard/max.wap.tpl</wap-template-path>

<thumbnail-path>/layouttpl/standard/max.png</thumbnail-path>

</layout-template>

<layout-template id="pop_up">

<template-path>/layouttpl/standard/pop_up.tpl</template-path>

<wap-template-path>/layouttpl/standard/pop_up.wap.tpl</wap-template-path>

<thumbnail-path>/layouttpl/standard/pop_up.png</thumbnail-path>