Основные темы развития. Основные темы развития
Скачать 374 Kb.
|
1 2 Основные темы развития Liferay портала стандартами Portal Server. Уровень представления Liferay-портал, приложение включает в себя три основные части: данные, предоставленные до портлетов, тема, которая управляет общими пользовательский интерфейс (внешний вид) портальных страниц, созданных Liferay и макет шаблонов, которые контролируют структуры страниц портала . Тема Liferay в основном компонент пользовательского интерфейса, чтобы сделать приложение-портал более удобным для пользователей и визуально привлекательным. Он обычно включает в себя CSS, изображений, JavaScript, и скорости или Freemarker шаблоны и поставляется в виде веб-архива (WAR) файл для распространения и развертывания. Несколько темы могут быть развернуты на сервере Liferay портал для пользователей с соответствующего разрешения на выбор. Тема может быть применен ко всем сайтам, работающих на одном сервере портала по умолчанию регулярные темы. Например, по умолчанию все пользователи видят "Классический" же по умолчанию Liferay тема для всех сайтов. Тема также может быть применен ко всем государственным или частным страницах того или иного сайта, или какой-либо конкретной странице сайта. Liferay портал предоставляет некоторые инструменты по теме дизайнерам и разработчикам создавать новые темы или обновить существующие темы. В этой главе объясняется, как можно использовать правильные инструменты, чтобы полностью настроить внешний вид любого Liferay-портала, приложение для удовлетворения собственного дизайна. К концу этой главы вы узнаете: Основная структура страницы портала Liferay Настройка Liferay плагинов SDK для разработки плагинов Рекомендуемые инструменты Загрузка и установка Liferay файлы Как построить свою собственную тему Создание собственных свойств строить Создание нового скелета тему AlloyUI Каскадные таблицы стилей: от CSS 2.1 до CSS3 JavaScript: С JQuery для YUI3 HTML5 Изображения Velocity шаблоны Основной скелет темы Всплывающие окна Обновление тему с вашими собственными файлами Изменение конфигурации, чтобы включить режим разработчика Изменение сгенерированных файлов Добавление ваших собственных файлов темы для папок, папки _diffs Строительство тему как файл WAR и ее развертывание Упаковка тему как файл WAR Горячие развертывания тему Основная структура страницы портала Liferay Типичный Liferay Portal страница содержит компоненты, такие как заголовок (с или без логотипа), навигационные меню (либо горизонтальной или вертикальной навигации меню, или то и другое), один или несколько окон портала в области отображения окна портала, и подвал. Начиная с Liferay Portal 6, подписанный в пользователи также заметите, что DockBar инструмент, который может быть отключен, в самом верху страницы портала. Эти компоненты построены в теме Liferay. Шаблон макета не входит в тему, но работает с темой вместе контролировать внешний вид и созданного странице портала. Следующая диаграмма показывает анатомию структуре портала странице: Теперь мы понимаем, высококачественные компоненты уровня страницы портала. Следующий вопрос: как мы можем использовать некоторые существующие инструменты для настройки этих компонентов и создавать привлекательные приложения портала? К счастью, Liferay_Plugins_SDK'>Liferay_Portal__пучок'>Liferay портал предоставляет Liferay Plugins SDK для дизайнеров и разработчиков для создания или изменения различных плагинов Liferay в том числе доб (начиная с Liferay 6.0 только), крючки, верстка шаблонов, портлеты, темы и тканей. Liferay IDE, которая будет рассмотрена немного больше в главе 5, опытные Тема, также доступен как плагин Eclipse, так что разработчики, которые привыкли к Eclipse IDE может воспользоваться этим прекрасным инструментом в теме развития. Настройка Liferay Плагины SDK для разработки плагинов Liferay портал Java основе с открытым исходным кодом предприятия веб-платформу для построения портальных решений. Он поддерживает открытые стандарты с очень гибкой архитектуры. Его поддержка развертывания матрица охватывает сотни различных комбинаций аппаратного обеспечения, операционных систем, серверов приложений или сервлет контейнеров, реляционных баз данных и интеграции со сторонними приложениями. Чтобы сделать объяснение более простым, следующие среды разработки используется по этой книге. Конечно, вы можете использовать других операционных систем или разных версий соответствующего программного обеспечения. Windows XP или Windows 7 Jdk1.6.0_16 Apache Ant 1.8.1 Liferay Portal CE 6.0 в комплекте с Tomcat 6.0.26 Liferay Plugins SDK 6.0 Liferay IDE 1.1 (опционально) MySQL Community Server 5.1 Eclipse с SVN-клиент и квантовой DB плагины Subversion для управления версиями Рекомендуемые инструменты JDK Рекомендуется установить Солнца (Oracle) JDK 1.6 в вашей локальной файловой системы и набора системной среды JAVA_HOME атрибут следующим образом: JAVA_HOME = C: \ Software \ Java \ jdk1.6.0_16 Кроме того, необходимо добавить% JAVA_HOME% \ Bin, в начале вашей Windows системные настройки пути окружающей среды. Вы можете проверить настройки, запустив команду Java-версии или эхо% JAVA_HOME% для Windows или эхо $JAVA_HOME для Linux. На основе операционной системы, вам придется скачать и установить JDK 64-бит для среды разработки. Ant Apache Ant представляет собой библиотеку Java и инструмент командной строки, которые помогают создания программного обеспечения. Из собственного окна Liferay Плагины SDK использует Ant для компиляции и упаковки плагинов, таких как окна портала, темы и расположение шаблонов. Вам нужно установить Ant в локальную папку и установить атрибут ANT_HOME среде, таких как: ANT_HOME = C: \ Software \ Apache-ant-1.8.1 Кроме того, необходимо добавить%% ANT_HOME \ бен; в начале вашей Windows системные настройки PATH среды. Вы можете проверить настройки, запустив команду муравьев-версию или эхо% ANT_HOME% для Windows или эхо $ ANT_HOME для Linux. Maven Maven является высокий уровень, интеллектуальное управление проектом, строительство и развертывание инструмент, предоставляемый Software Group основу Apache. Она имеет дело с приложением для управления жизненным циклом развития. Широко используется версия Maven2. Ant просто инструментарий в то время как Maven совершенно иная. Речь идет о применении модели для достижения инфраструктуры, которая отображает характеристики видимости, возможность многократного использования, обслуживания и понятности. Liferay сообщество работает над официальным артефактов Maven для Liferay Portal, а также перенос Liferay Plugins SDK для Maven. Maven поддержка предоставляется в Liferay Portal 6. Высокий уровень шаги конфигурации включают в себя: Установка прокси Maven / хранилища Настройка Maven настройки в $ HOME/.m2/settings.xml Установка Liferay артефакты в хранилище Установка Liferay Maven SDK Создание плагинов Для более подробной информации, пожалуйста, обратитесь к следующим блог и вики-страницы: http://www.liferay.com/web/mika.koivisto/blog/-/blogs/liferay-maven-sdk https://www.liferay.com/community/wiki/-/wiki/Main/Maven+SDK Eclipse Eclipse Galileo или Helios загружается и устанавливается локально, например, под C:\Software\eclipse в Windows. Liferay IDE Развитие темы Liferay может быть сложным и трудоемким, особенно для тех, кто не знаком с архитектурой Liferay темы и элементы. После введения в Liferay Portal 6.0, IDE Liferay был введен, чтобы обеспечить Eclipse инструментов для Liferay платформы разработки портала. Это Ecplise Плагин поддерживает Windows XP/Vista/7, Linux и Mac OS X 10.5 или выше. Это делает общее и тривиальных задач проще и позволяет некоторым быть автоматизированы в ходе разработки, развертывания и отладки плагинов Liferay. Пожалуйста, обратитесь к главе 5, чтобы узнать более подробную информацию. Другие плагины Eclipse Плагин Eclipse позволяет инженерам Liferay тему, чтобы быстро создать или изменить Liferay темы. SVN и квантовой DB плагин для Eclipse рекомендуется для разработки плагинов. Загрузка и установка Liferay файлы Для настройки среды Liferay развития, нам нужно иметь работающий Liferay портал и Liferay Плагины SDK. Кроме того, настоятельно рекомендуется скачать Liferay кодов портала источником для справки. Все связанные файлы можно загрузить с сайта SourceForge в http://sourceforge.net/projects/lportal/files/Liferay% 20Portal Эта книга предназначена для Liferay 6,0 портала или более поздние версии, поэтому, пожалуйста, скачать нужную версию для начала. Кроме того, убедитесь, что все три компонента по той же версии. Создание общей папки рабочего пространства Теперь создаем рабочую папку в вашей локальной среде, такой как C:\ workspace_6.0.5_book в Windows. Сохраните Liferay Portal расслоения Liferay Plugins SDK, и Liferay кодов портала источника, три вложенные папки в этой же папке рабочей области. Вы также можете установить эти компоненты в разных папках, но необходимо убедиться, что вы обновите среде, такой как строить. Ваше.имя_пользователя {}. Свойствами, которые будут рассмотрены далее в этой главе, в соответствии с собственной установки. Liferay Portal пучок Если у вас не установлен Liferay Portal 6.x тем не менее, вы можете скачать пакет Tomcat, распакуйте его и сохранять файлы в пучки в вашу только что созданную рабочую область. Это пучки папка называется $ {} liferay.bundles.home в этой книге. Liferay Plugins SDK Скачать Liferay Плагины SDK, распаковать его и сохранять файлы в Liferay-плагинов-SDK-{version.number} в ваше, вновь созданное рабочее место. Эта папка называется $ {} liferay.plugins.sdk.home в этой книге. Liferay коды Portal источник Скачать Liferay кодов портала источника, распакуйте его и сохранять файлы в Liferay-портал-SRC-{version.number} в ваше, вновь созданное рабочее место. Эта папка называется $ {} liferay.portal.src.home в этой книге. Вы должны иметь структуру папок похоже на то, что отображается на следующем скриншоте: База данных конфигурации Это необходимо иметь базу данных, чтобы установить и запустить Liferay Portal. По умолчанию, Liferay Portal использует встроенный HyperSQL базы данных (HSQLDB), который достаточно хорош для некоторых тема инженеров, потому что есть не так много прямого взаимодействия с базой данных, когда тема раскрыта. Для построения более стабильного развития окружающей среды, особенно если вы инженер портлетов, а также, вы можете использовать ваш предпочтительный реляционную базу данных, чтобы заменить HSQLDB. Локальной установки MySQL Community Edition 5.1 используется в этой среде разработки. Для изменения базы данных Liferay, пожалуйста, следуйте конфигурации шаги: 1. Установка MySQL базу данных, если это не было сделано. 2. Создать новую пустую базу данных с именем lportal для установки Liferay. 3. Откройте окно командной строки или проводника Windows. 4. К ${liferay.bundles.home}\tomcat-6.0.26\Webapps\Root\WEB-INF\Classes\ папка. 5. Создание портала ext.properties файл. 6. Добавить следующей конфигурации MySQL в этот файл и сохранить изменения: # # MySQL jdbc.default.driverClassName=com.mysql.jdbc.Driver jdbc.default.url=jdbc:mysql://localhost/lportal?useUnicode=true&characterEncoding=UTF-8&useFastDateParsing=false jdbc.default.username=< > jdbc.default.password=< > Обратите внимание, что предыдущую конфигурацию базы данных для Liferay Portal имя базы данных lportal. Поменяйте его на свое имя базы данных, если он не отличается. Вам нужно добавить Войти учетные данные для администратора базы данных в MySQL. Если вы используете другую базу данных, например Oracle, необходимо настроить конфигурацию по-разному в этом же файле. Для более подробной информации, пожалуйста, обратитесь к Liferay Администрация портала гидов. Запуск Liferay Portal Запустим Liferay Portal, выполнив ${liferay.bundles.home}\tomcat-6.0.26\bin\startup.bat|.sh. Войдите, чтобы по умолчанию URL на http://localhost:8080/ с именем пользователя и паролем: bruno@7cogs.com и bruno. Вы можете войти в систему как test@liferay.com и test, если у вас есть не-развернуто sevencogs-hook от ${liferay.bundles.home}\tomcat-6.0.26\webapps. Обратите внимание, что версии Tomcat может отличаться от 6.0.26 так что вам придется обратиться к вашим Tomcat версии соответственно. Как построить свою собственную тему Теперь вы создали Liferay Плагины SDK для вашей темы развития. Пора принять меры, чтобы построить простой. Создание собственных свойств строить Для того, чтобы перезаписать конфигурации по умолчанию свойств построить, нужно создать свой собственный построить свойств до компиляции плагинов, таких как портлеты и темы. Это можно сделать, выполнив следующие действия данной здесь: Узнайте текущее имя пользователя от операционной системы. В Windows, вы можете запустить команду эхо% имя пользователя% в командной строке консоли. Обратите внимание, что имя пользователя с учетом регистра. К ${liferay.plugins.sdk.home} папку, например C:\workspace_6.0.5_book\liferay-plugins-sdk-6.0.5. Копирование build.properties и переименуйте его build.${your.username}.properties, таких как build.frank.properties. По умолчанию, Liferay Plugins SDK поддерживает Tomcat в пучки папку (например C:\workspace_6.0.5_book\bundles\tomcat-6.0.26). Вам необходимо изменить настройки по умолчанию в build.${your.username}.properties. Свойствами, если вы используете другой сервер приложений или сервлет-контейнер, или использовать Tomcat установлен в другую папку. Например, вам нужно изменить следующие строки, чтобы указать на свой собственный сервер приложений Tomcat или каталог установки, если вы не используете Tomcat bundles в папку по умолчанию: # # Укажите путь к распаковали пакет Tomcat. # app.server.type=tomcat app.server.dir=${project.dir}/../bundles/tomcat-6.0.26 app.server.deploy.dir=${app.server.dir}/webapps app.server.lib.global.dir=${app.server.dir}/lib/ext app.server.portal.dir=${app.server.dir}/webapps/ROOT Создание нового скелета тему Теперь у вас установлен Liferay портал и настроить Liferay Plugins SDK в качестве среды разработки. Вы можете начать строить свою собственную тему. В качестве примера, мы собираемся показать вам, как создать Palm Tree Publications тему с нуля. Запуск Liferay Plugins SDK для создания скелета тему Liferay Plugins SDK предоставляет скрипт для создания скелета новую тему. Лучше использовать командную строку на ОС Windows Если вы используете Windows XP и не сделали этого, то рекомендуется добавить командной строке, чтобы ваш Windows Explorer контекстное меню, так что вы можете перейти на нужный файл папку, щелкнув правой кнопкой вашу целевую папку и выбрать команду строке. В противном случае, вам необходимо открыть командную строку и измените каталог на вашу целевую папку каждый раз. Если вы используете Windows 7, в командной строке можно получить в вашем проводнике Windows щелкните правой кнопкой мыши меню. Вы можете нажать и удерживать клавишу Shift, щелкните правой кнопкой мыши на папку, которую нужно открыть командную строку и кликните вариант Open Command Prompt Here Теперь перейдите в папку ${liferay.plugins.sdk.home}/themes и запустите сценарий создания, следующим образом: Для Windows: create Для Unix / Linux / Mac: ./create.sh Пожалуйста, убедитесь, что create.sh файл является исполняемым перед запуском данной команды. Где < theme-name> это имя папке темы, которые не должны содержать пустое пространство во имя, в файловую структуру, и C:\workspace_6.0.5_book\liferay-plugins-sdk-6.0.5\themes>create palmtree "Palm-Tree Publications Theme" Следующий скриншот показывает сообщение BUILD SUCCESSFUL: Теперь вы можете пойти в Windows Explorer и заметили, что папку с темой palm-tree-publications-theme, тема была создана автоматически при ${liferay.plugins.sdk.home}/themes папку. Имя папки тема такая же, как название темы с-тема добавляется к концу название темы. Она имеет следующие скелет тему, как подчеркивается в следующем скриншоте: Создание и развертывание сгенерированный тему как файл WAR Вы можете запустить муравья команду для построения сгенерированный тему. 1. Откройте командную строку и перейдите к ${liferay.plugins.sdk.home}/themes/palm-tree-publications-theme/ 2. Выполнить команду ant clean убирать ранее созданные файлы на ant, если таковые имеются. 3. Выполнить ant задача команды ant построить тему как файл WAR. 4. Пожалуйста, обратите внимание, что команда ant звонки задача развернуть по умолчанию, определенных в ${liferay.plugins.sdk.home}/build-common-plugin.xml.. Как показано в следующем скриншоте, этот процесс занимает следующие действия: Компилирует теме, а также копии многих CSS, изображений, JavaScript, и velocity templates, включающих init_custom.vm, navigation.vm, portal_normal.vm, portal_pop_up.vm и portlet.vm от Liferay портал для соответствующих подкаталогах palm-tree-publications-theme\docroot папку Пакеты тема в WAR форматов Копии упакованный файл WAR тему на ${liferay.bundles.home}/deploy папку для горячего развертывания Теперь вы можете вернуться к docroot папку темы и уведомления следующую структуру папок и файлов: ${your.theme.name}-theme/docroot _diffs css application.css base.css custom.css dockbar.css extras.css forms.css layout.css main.css navigation.css portlet.css images (multiple directories of images) js main.js templates init_custom.vm navigation.vm portal_normal.vm portal_pop_up.vm portlet.vm WEB-INF liferay-plugin-package.properties Вы можете также заметить, что тема была упакована как WAR файл, palm-tree-publications-theme-{version.number}.war, где первая часть {version.number} 6.0.5.1, которая настраивается в lp.version собственности в файле ${liferay.plugins.sdk.home}/build.{your.username}. Это WAR файл сохраняется в ${liferay.plugins.sdk.home}/dist. И тот же файл WAR также были скопированы на папку ${liferay.bundles.home}/deploy для горячего развертывания в Tomcat. Если Liferay портал создан и работает уже или будет запущена, {liferay.bundles.home}/deploy/palm-tree-publications-theme-{version.number}.war, развернутых в Liferay. Вы можете проверить, тема, войдя в систему как администратор портала, применять эту тему на странице и убедитесь, пользовательский интерфейс созданного тему. AlloyUI Если вы откроете некоторые из созданных файлов в вашей теме, вы заметите, что некоторые коды не доступны в предыдущей версии (до 6.0) в Liferay Portal. Например, вы заметите, следующие коды: Некоторые CSS3 определений, таких border-radius и box-shadow кодов в ${liferay.plugins.sdk.home}/themes/palm-tree-publications-theme/docroot/css/extras.css Некоторые элемент HTML5 теги, например #if($is_signed_in) #dockbar() #end #language("skip-to-content") 1 2 |