Статья содержит обзор стандартной темы, используемой в сервисах IBM Lotus Quickr для IBM WebSphere Portal, и рассказывает о том, как настраивать и модифицировать темы. Основные разделы статьи посвящены изменению темы, изменению домашней страницы, добавлению пользовательского оформления (skin) для всех страниц Lotus Quickr и адаптации под персональный дизайн.

Предварительные требования

Вам потребуется хорошее понимание основ HTML, Java Server Pages (JSP), Cascading Style Sheets (CSS) и JavaScript. Для полного понимания статьи вы должны быть также знакомы с применением тем в IBM WebSphere Portal. Для получения дополнительной информации о темах в WebSphere Portal прочитайте документ WebSphere Portal Information Center.

В начало

Начало работы

Для модификации темы вы должны иметь доступ к серверу Lotus Quickr с правами администратора. Тема Lotus Quickr располагается в папке QPG в каталоге тем WebSphere Portal. В следующей главе показано, как создавать собственные темы и графические оформления в Lotus Quickr и как применять их к определённым групповым разделам сайта. Также в статье описаны шаги по разрешению перезагрузки JSP для пользовательских тем. Данный подход позволит уменьшить время разработки при внесении изменений в тему.

Создание пользовательского графического оформления

Lotus Quickr по умолчанию использует для темы QPG графическое оформление QuickrSkin. Вы можете создать новое графическое оформление, более подходящее для вашей среды. Файлы оформлений находятся здесь:

was_profile_root/installedApps/cellname/wps.ear/wps.war/skins/html/

Используйте стандартное графическое оформление QuickrSkin как основу для собственного оформления. Для этого скопируйте содержимое папки QuickrSkin в новую папку и назовите её custom_skin. Теперь вы можете установить это оформление как стандартное для темы custom_theme.

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

Для создания собственной темы скопируйте папку темы Lotus Quickr в новую и дайте ей подходящее имя. Файлы тем WebSphere Portal находятся здесь:

was_profile_root/installedApps/cellname/wps.ear/wps.war/themes/html

Вам нужно сделать копию папки QPG в приведённом выше каталоге. Дайте ей имя custom_theme. Теперь вы можете установить тему custom_theme для выбранных разделов (places) вашего рабочего пространства.

Присвоение темы разделу

Следующий шаг – это зарегистрировать custom_skin и custom_theme в WebSphere Portal и присвоить их разделу (team place). Для этого создайте новую тему в WebSphere Portal и назначьте ей папку custom_theme. Выберите Site Administration – Advanced Administration – Themes and Skins. Если вы создали графическое оформление custom_skin, зарегистрируйте его, нажав на кнопку Add New Skin на этой же странице (рисунок 1).

Теперь вы готовы зарегистрировать вашу тему custom_theme и установить custom_skin в качестве графического оформления по умолчанию. Имя папки на странице администрирования сайта WebSphere Portal должно соответствовать имени папки, созданной вами в директории тем WebSphere Portal. В данном примере и имя папки, и имя темы заданы как custom_theme. На этом шаге вы можете добавить любые графические оформления для темы и указать использовать по умолчанию custom_skin (рисунок 2).

После создания и регистрации новой темы в WebSphere Portal вы можете присвоить её одному или нескольким разделам (place). Выберите Site Administration – Advanced Administration – Portal User Interface – Manage Pages и выполните следующие шаги (рисунок 3).

1. Щёлкните узел content под заголовком My Pages с правой стороны.
2. В списке страниц перейдите в ваш раздел (place) в узле Application Root или найдите его, набрав имя в поле поиска.
3. Щёлкните пиктограмму Edit properties у выбранного раздела.
4. Выберите custom_theme из раскрывающегося списка с заголовком Theme и нажмите OK.

Теперь вы готовы применить настройки темы custom_theme.

Разрешение автообновления JSP

Чтобы видеть изменения темы JSP-страниц без перезапуска WebSphere Portal, нужно заставить сервер автоматически проверять новые версии JSP-страниц. Хотя это очень удобно при разработке и тестировании, в конечном результате автообновление JSP-страниц необходимо запретить. При автообновлении JSP-страниц IBM WebSphere Application Server проверяет новые версии при каждом запросе страницы, что сильно снижает производительность.

Для включения автообновления JSP-страниц выполните следующие шаги:

1. Откройте файл was_profile_root/config/cells/cell_name/applications/wps.ear/deployments/wps/wps.war/WEB-INF/ibm-web-ext.xmi.
2. Найдите узел, который показан в листинге 1.
   
   
   Листинг 1. Файл ibm-web-ext.xmi
   

   <webappext:WebAppExtension xmi:version="2.0" xmlns:xmi="http://www.omg.org/XMI" xmlns:webappext="webappext.xmi" xmlns:webapplication="webapplication.xmi" xmlns:commonext="commonext.xmi" xmlns:common="common.xmi" xmi:id="IBM_WPS_Ext" reloadInterval="3" reloadingEnabled="false" fileServingEnabled="true" directoryBrowsingEnabled="false" serveServletsByClassnameEnabled="false" preCompileJSPs="false">

   
   
3. Поменяйте значение reloadingEnabled на true.
4. Сохраните файл.
5. Перезапустите WebSphere Portal.

В начало

Компоненты тем Lotus Quickr

Данный раздел содержит обзор тем Lotus Quickr и их компонентов. Для удобства темы WebSphere Portal разделены на четыре подпапки: colors (цвета), icons (пиктограммы), images (изображения) и js (скрипты). По сути, каждая тема – это четыре элемента: страница JSP, таблица стилей .css, файл скриптов и графика темы, состоящая из пиктограмм и изображений. Следующий раздел содержит более подробное описание элементов в каждой папке и краткое описание файлов.

Темы страниц JSP

Страница JSP - это текстовый документ, содержащий статические и динамические данные. Статические данные могут находиться в любом текстовом формате, а динамические используются для динамического создания элементов HTML-страницы. Файлы JSP сервиса Lotus Quickr хранятся в корне папки QPG в директории тем WebSphere Portal:

was_profile_root/installedApps/cellname/wps.ear/wps.war/themes/html/QPG

Тема состоит из нескольких файлов: родительского файла JSP и подчинённых фрагментов. Фрагменты JSP вставляются в родительский JSP и, как правило, хранятся в файлах с расширением JSPF. При большинстве запросов страница портала формируется начиная с Default.jsp в папке тем, кроме случаев, когда запрос содержит параметр newWindow="true". В этом случае страница формируется с использованием Plain.jsp. На рисунке 4 показаны иерархия файлов темы и связи между ними.

Default.jsp – это родительский файл JSP, который включает в себя фрагменты JSP (файлы, имеющие расширение JSPF) и библиотеки тегов, которые нужны для формирования элементов темы. Фрагменты компилируются в сервлет для Default.jsp. При изменении фрагмента пересохраните Default.jsp, чтобы сервер его перекомпилировал. Пересохранение Default.jsp гарантирует, что сервер считает последние версии фрагментов.

Файл head.jspf – это первый фрагмент, включаемый в Default.jsp. Этот файл содержит элементы заголовка страницы HTML. В темах Lotus Quickr все таблицы стилей и скрипты, выполняемые на клиенте, объявляются в head.jspf. Также в этом файле задаются заголовок и описание страницы. Для повышения производительности добавляйте в head.jspf ссылки на все дополнительные файлы темы. При таком подходе все файлы, подлежащие скачиванию клиентом, скачиваются в начале формирования страницы и исключается скачивание файлов в середине процесса формирования.

Файл banner.jspf, как видно из его имени, выводит шапку страницы, как на рисунке 5. Шапка включает логотип, поле для поиска и ссылки на авторизацию и выход. Она также включает дополнительный раздел breadcrumb для показа кнопок Back To Home, кнопок для изменения ширины страницы и кнопки вызова справки Lotus Quickr. Как и Default.jsp, шапка включает в себя файлы фрагментов, скомпилированные в banner.jspf. Вот эти фрагменты:

• banner_toolbar.jspf. Фрагмент формирует панель инструментов вверху страницы, содержащую логотип, поле поиска и ссылки на авторизацию и выход.
• banner_searchControl. Это подфрагмент banner_toolbar.jspf. Он формирует поле поиска в правом конце панели инструментов.
• banner_crumbtrails.jspf. Этот фрагмент формирует на странице ссылку Back to Home.
• banner_globalActions.jspf. Фрагмент содержит код для изменения ширины страницы и ссылку на справку Lotus Quickr.

Раздел темы, находящийся в pageHeader.jspf и показанный на рисунке 6, формирует заголовок приложения. В данном JSP вы можете увидеть код получения имени и статуса приложения. Ссылка Customize в правом конце заголовка приложения также формируется в этом фрагменте. Ссылка Customize открывает динамическую палитру, которая формируется в pageHeaderContent.jspf и показана на рисунке 7.

Файл pageHeaderContent.jspf содержит код для формирования панели настроек. Панель настроек предоставляет возможность добавлять новые компоненты, пользователей, новые страницы или модифицировать свойства существующего раздела сайта.

Файл topNav.jspf – это простой небольшой файл, формирующий строку вкладок навигации, позволяющую пользователям переключаться между разными компонентами одного приложения (рисунок 8). Фрагмент использует разные стили для различного отображения активной и неактивных вкладок.

Файл sideNav.jspf формирует подстраницу в узле навигации верхнего уровня. По умолчанию дочерние узлы отображаются в виде дерева навигации. Далее в статье мы рассмотрим пример смены стиля по умолчанию на стиль с горизонтальной панелью навигации.

Файл footerLarge.jspf формирует область внизу страницы, содержащую ссылки на часто используемые разделы Lotus Quickr (рисунок 9). Эти ссылки являются внутренними ссылками к страницам портала и могут быть как свёрнутыми, так и развёрнутыми.

Таблицы стилей

Разметка данных содержится в JSP-файлах темы, но подробности отображения данных задаются таблицами стилей. Таблицы стилей Lotus Quickr размещены в той же папке, где находятся JSP-файлы темы:

was_profile_root/installedApps/cellname/wps.ear/wps.war/themes/html/QPG

Так же как и файлы JSP тем, таблицы стилей разделены на несколько фрагментов, включенных в родительскую таблицу стилей с именем styles.jsp. Таблицы стилей хранятся как файлы JSP для учета различий в отображении в зависимости от локали и типа браузера. Как и default.jsp, родительская таблица стилей должна перекомпилироваться, если модифицировались входящие в неё фрагменты. Список таблиц стилей с кратким описанием каждого файла:

• styles_cacheSettings.jspf. Используется для указания параметров кэша в заголовках для всех таблиц CSS файлов JSP.
• styles_extension.jspf. Содержит дополнительные стили темы.
• styles_help.jspf. Содержит стили отображения справки Lotus Quickr.
• styles_ibm.jspf. Содержит стили страницы администрирования WebSphere Portal.
• styles_ibmportlet.jspf. Только для тем Lotus Quickr. Содержит стили для библиотеки документов и компонентов управления контентом Lotus Quickr.
• styles_oobQuickr.jspf. Стили для портлета My Places Navigation.
• styles_people.jspf. Стили визитной карточки.
• styles_portlet.jspf. Стандартный стиль темы IBM.
• styles_qpg.jspf. Стиль портлета администрирования.
• styles_rules.jspf. Зависимые от локали и типа браузера стили.
• styles_theme.jspf. Основной стиль темы, используемый в файлах тем и фрагментах.
• styles_themeSolo.jspf. Используется при отключенной панели инструментов для настройки отображения элементов страницы в отсутствие панели инструментов.

Изображения

Изображения используются для пиктограмм и значком инструментов на страницах темы. Файлы изображений расположены в папке images в корне директории темы:

was_profile_root/installedApps/cellname/wps.ear/wps.war/themes/html/QPG/images

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

Палитра цветов

Палитра цветов позволяет устанавливать цветовые схемы темы. В WebSphere Portal палитра цветов задаётся файлом свойств, содержащим пары ключ/значение, ссылающиеся на цвета и графику темы. Это удобная концепция, позволяющая пользователю менять цвета темы без изменения таблиц стилей. Вы можете назначить палитру всей теме или определённой странице в зависимости от требований дизайна. Прочтите главу "Использование цветовых палитр в теме" в WebSphere Portal Infomation Center для получения полной информации о создании и использовании цветовых тем в WebSphere Portal.

Сразу после инсталляции тема QPG использует стандартную цветовую палитру. Цветовая палитра для темы Lotus Quickr устанавливается в разделе метаданных файла head.jspf. Ее можно заменить другой палитрой путем редактирования параметра, как показано в листинге 2.

                
<portal-logic:pageMetaData varname="pageMetaData">
  <%-- pageMetadatatag colorPalette: ${pageMetaData.colorPalette} --%>
    <c:set var="colorPalette" scope="request">
      <c:out value="${pageMetaData.colorPalette}" default="custom_palette"/>
    </c:set>
  </portal-logic:pageMetaData>

ПРИМЕЧАНИЕ: Это текст файла head.jspf. Изменённый текст выделен жирным шрифтом.

Предполагается, что для темы указан ключ colorPalette и значение, содержащее идентификатор палитры (имя файла свойств без расширения).

После установки палитры она загружается в объект map и присваивается атрибуту запроса для использования в таблице CSS. Процесс загрузки показан в листинге 3.

                
java.io.StringBufferInputStream sbis = new
java.io.StringBufferInputStream((String)pageContext.findAttribute
("colorPropertiesStr"));
java.util.Properties colorProperties = new java.util.Properties();
colorProperties.load(sbis);
request.setAttribute("colors", colorProperties);

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

                
Palette Property:
bodyMarginBackground=url(./colors/qpg/body_background.gif) repeat-x                

Referenced in styles_theme.jspf:
body {
   	font-family: ${requestScope.cssRules.fontFamilySansSerif};
	font-size: ${requestScope.cssRules.bodyFontSize};
	background: ${colors.bodyMarginBackground};
	color: ${colors.bodyText};
	margin: 0px auto;
	padding: 0px;
	width: 100%;
}

Стратегия темы

Стратегия темы – это файл XML, описывающий, как формируется отображение темы в различных частях страницы. Такая концепция дизайна позволяет вам показывать одну и ту же тему различными способами. Например, в Lotus Quickr стандартная тема QPG немного отличается при показе главной страницы Lotus Quickr и страницы раздела (place).

Стратегии тем играют значительную роль в настройке тем. Дистрибутив Lotus Quickr поставляется с двумя стратегиями тем: QuickrMyPlaces и QuickrSpaces.

Стратегии тем Lotus Quickr

Дистрибутив Lotus Quickr поставляется с готовой для использования стратегией в файле createThemePolicyNode.xml, расположенном здесь:

portal_server_root/Teamspace/Teamspace/teamspace/work/config/xmlaccess

Для установки новой стратегии ее необходимо создать и инсталлировать, используя утилиту конфигурирования, как описано в WebSphere Portal Information Center.

После установки стратегии ее можно присвоить странице в её свойствах в узле Manage Pages в Portal Site Administration. Последовательность настройки (рисунок 10):

1. Найдите нужную страницу в Manage Pages, например Home.
2. Щёлкните пиктограмму Edit page properties у страницы, имеющей уникальный ID "ibm.qp.Home". Это первая страница, которую вы видите при входе в Lotus Quickr.
   
   Рисунок 10. Установка стратегии для раздела сайта
   
   
   
3. Желаемую стратегию можно выбрать из раскрывающегося списка Navigation Type, как показано на рисунке 10.

Как сказано в начале данной главы, в Lotus Quickr используются две основные стратегии тем – одна для главной страницы Lotus Quickr и другая для страниц разделов Lotus Quickr (team place). Для домашней страницы Lotus Quickr установлена стратегия QuickrMyPlaces, а для страниц разделов установлена QuickrSpaces. Одна и та же тема формирует разный внешний вид для домашней страницы и для страниц разделов. На рисунке 11 показаны два скриншота.

В таблицах 1 и 2 представлены атрибуты стратегий и их значения для двух стратегий темы Lotus Quickr.

Получение атрибутов стратегии темы

После того как стратегия задана, убедитесь, что тема содержит код для загрузки объекта map стратегии в bean-компонент (листинг 5), к которому можно потом будет обращаться в любом месте темы.

                
<portal-theme-ext:initthemepolicy/>
<jsp:useBean id="themePolicy" 
class="com.ibm.portal.theme.policy.ThemePolicyBean" scope="page"/> 
<%
	themePolicy.setValuesMap(portalThemePolicyMap);
%>

Для создания новой стратегии или модификации существующей вы должны быть хорошо знакомы со стратегиями тем. Файл стратегии – это файл XML, содержащий множество атрибутов, определяющих одну стратегию. Каждый атрибут, вычисляемый во время формирования темы, можно рассматривать как свойство стратегии. Пример значения (атрибута) стратегии показан в листинге 6.

                
<policyValue
      Name="renderSideNavigation"
      Factory="com.ibm.wps.policy.parse.BooleanFactory">
      <value>true</value>
</policyValue>

В этом примере стратегия задаёт атрибут renderSideNavigation и устанавливает его значение как true. В теме это значение проверяется и устанавливается как в следующем примере:

c-rt:if test = "${themePolicy.renderSideNavigation}">
<%@ include file="./sideNav.jspf" %>
</c-rt:if>

Дополнительные примеры узлов стратегий тем можно найти в различных JSP темы Quickr.

В начало

Настройка темы

Следующая глава содержит примеры типичных модификаций темы. В качестве примера различных тем и настроек компонентов используется сайт Greener Autos. Раздел (team place) сайта Greener Autos используется воображаемой автомобильной компанией как инструмент групповой работы с общими данными.

Как указывалось ранее, каждая тема разделена на фрагменты, которые компилируются в единую тему посредством родительского файла JSP. Основные фрагменты темы:

• шапка
• панель инструментов шапки
• заголовок страниц
• строка навигации
• тело страницы (область формируемая портлетом)
• подвал страницы

Схема размещения фрагментов показана на рисунке 12.

Первый шаг при переделке темы – это замена стандартных пиктограмм Lotus Quickr на пиктограммы, адаптированные под ваш дизайн раздела сайта. На одном сервере Lotus Quickr может сосуществовать множество тем, назначенных различным разделам сайта. Перед началом данной главы вам необходимо выполнить шаги из главы "Создание пользовательской темы", создав тему custom_theme и назначив её вашему разделу (team place) сайта. После этого можно приступить к изменению custom_theme и посмотреть, как это влияет на тему вашего сервера.

Фон страницы

Изменение фона страницы – это первый шаг при модификации темы Lotus Quickr. Это можно легко сделать, используя палитру цветов. Цветовая палитра Lotus Quickr находится в файле default.properties.

Для изменения фона темы выполните следующие шаги:

1. Откройте default.properties в папке custom_theme/colors.
2. Найдите свойство bodyMarginBackground = url(./colors/qpg/body_background.gif).
3. Измените значение этого свойства на путь к вашему изображению для фона страницы:
   bodyMarginBackground = url(./colors/ custom/pagebg.gif)
4. Далее пересохраните styles_rules.jspf, styles.jsp и Default.jsp. Это обновит дату модификации файлов и заставит тему перекомпилировать их и заново считать палитру цветов. После проведённых изменений фон страницы будет выглядеть как на рисунке 13.

Шапка темы

Следующим шагом будет смена стандартных логотипа и пиктограмм на собственные. Вы можете начать с шапки Lotus Quickr, которая состоит из фонового изображения и логотипа. Следуйте описанным шагам для адаптации шапки под ваш дизайн сайта.

На рисунке 14 показан логотип шапки, выделенный розовым цветом. Вы можете изменить его, модифицировав файл banner_toolbar.jspf в /custom_theme.

1. Найдите текст из листинга 7.
   
   Листинг 7. Элемент <div> в заголовке шапки
   

   <div class="bannerTitle"> <img alt="Lotus Quickr" title="Lotus Quickr" src='<portal-logic:urlFindInTheme file="colors/${colorPalette}/toolbar_logo.gif"/>' /> </div>

   
   
2. Измените параметр с именем файла логотипа на "colors/custom/logo.gif", где logo.gif - это имя изображения вашего логотипа.
3. Шапка будет выглядеть как на рисунке 15.
   
   
   Рисунок 15. Шапка Greener Autos
   
   
   

Размер, тип и цвет шрифта шапки можно изменить через цветовую палитру.

1. Найдите свойство для цвета текста шапки в файле палитры цветов.
2. Измените его значение с чёрного на #295500 (зелёный). Найдите все остальные параметры цвета текста и также измените их на это же значение. Пример изменённых параметров можно посмотреть в листинге 8.
   
   
   Листинг 8. Свойства палитры цветов шапки
   

   toolbarText=#295500 bannerText=#295500 userActionsButtonText=#295500

   
   

Пиктограмма поиска находится в файле banner_searchControl.jspf. Найдите приведённый ниже код и измените пиктограмму поиска на собственную.

String ic = (bidiImageRTL == null) ? "icons/custom/Go.gif" :
"icons/custom/Go "+bidiImageRTL+".gif";

Фон шапки можно изменить без модификации самой темы.

1. Найдите в палитре цветов следующее свойство:
   toolbarBackground=#FFDB4A url(./colors/qpg/toolbar_background.gif) repeat-x
2. Измените его значение:
   toolbarBackground=#FFFFFF. Это поменяет свет со стандартного жёлтого на белый.

Вы можете сделать панель инструментов отличающейся от остальной части страницы, добавив в неё фоновое изображение.

1. Найдите следующее свойство в палитре цветов:
   bannerBackgroundImage=none
2. Измените его значение:
   bannerBackgroundImage=url(./colors/custom/topbanner3.gif)
3. Теперь шапка выглядит как на рисунке 16.
   
   
   Рисунок 16. Изменённая шапка для Greener Autos
   
   
   

Вы можете оставить шапку как есть либо добавить прозрачность для фона шапки, через которую будет просвечивать фон страницы. Вот пример, как это сделать:

1. В файле styles_theme.jspf из папки /custom_root найдите классы .banner и .toolbar. Отредактируйте эти классы как показано в листингах 9 и 10.
   
   
   Листинг 9. Задание стиля шапки
   

   .banner { color: ${colors.bannerText}; background: ${colors.bannerBackgroundImage}; background-color: ${colors.bannerBackground}; margin: 10px 0px 0px; padding: 0px; }

   
   
   
   
   Листинг 10. Задание стиля панели инструментов
   

   .toolbar { color: ${colors.toolbarText}; background:${colors.toolbarBackground}; margin-${requestScope.cssRules.bidiRight}: 0px; border-bottom: 1px solid ${colors.toolbarBorder}; border-left: 1px solid ${colors.toolbarBorder}; border-right: 1px solid ${colors.toolbarBorder}; -moz-border-radius-bottomright: 4px; -moz-border-radius-bottomleft: 4px; opacity:0.87; }

   
   
2. Теперь шапка должна выглядеть как на рисунке 17.
   
   
   Рисунок 17. Отредактированная шапка
   
   
   Тень шапки панели инструментов выглядит несоответствующей цветовой схеме страницы. Изображение тени можно заменить другим либо удалить. В данном примере мы удалим картинку тени.
3. Удалите следующий текст из banner_toolbar.jspf:
   <div class="toolbarShadow"><!-- IE hack --></div> . Примечание: текст комментария <! - - IE hack - - > вставлен для решения проблемы Microsoft Internet Explorer. Вставка текста с комментарием предотвращает скрытие стилей, отображаемых пустыми тегами <div>.
4. Теперь шапка должна выглядеть как на рисунке 18.
   
   
   Рисунок 18. Изменённая шапка
   
   
   

После изменения фона и фонового изображения шапки вам нужно изменить ссылки в панели инструментов, чтобы сделать их подходящими для темы. Ссылки находятся в двух фрагментах JSP: banner_crumbtrails.jspf и banner_globalActions.jspf. Сначала найдите текст, отвечающий за отображение кнопки Back to Home, для изменения её цвета.

1. Отредактируйте текст файла styles_theme.jspf как показано в листинге 11. Это изменит фоновую картинку используемую для ссылки Back to Home.
   
   
   Листинг 11. Задание стиля returnHome
   

   a.returnHome{ background: #295500 url(images/quickr/returnHome_green_${requestScope.cssRules.bidiLeft}.gif) center ${requestScope.cssRules.bidiLeft} no-repeat; border: 1px solid ${colors.breadcrumbBorder}; padding: 1px 15px !important; display: block; }

   
   
2. Далее измените цветовую схему панели навигации в палитре цветов. Это можно сделать, изменив свойства как показано здесь:
   breadcrumbText=#295500
breadcrumbBorder=#295500

Наконец, измените пиктограммы и цветовую схему для раздела глобальных действий (actions) шапки. Раздел глобальных действий содержит пиктограмму сворачивания/разворачивания и ссылку на справку Lotus Quickr в правом нижнем углу шапки. Их можно изменить в файле banner_globalActions.jspf и в палитре цветов.

При настройке вашего дизайна вы можете удалить как весь фрагмент JSP, так и отдельные части, формирующие ссылки, которые вам не нужны. Например, если нужно убрать ссылку "свернуть/развернуть", вы можете удалить из файла banner_globalActions.jspf код, показанный в листинге 12.

                
                <% if(user!=null) {%>
	<a tabIndex="8" href='#' id="widthPage" class="globalActionLink" 
	onClick="changeWidth("<%= user %>", "fluid"); 
	return false;"><img src="<portal-logic:urlFindInTheme 
	file='images/quickr/set100.gif'/>" style="width: 18px; height: 18px;" 
	alt=<portal-fmt:text key="fluidWidth" bundle="nls.quickr"/> 
	title=<portal-fmt:text key="fluidWidth" bundle="nls.quickr"/> /></a>
	<a style="display:none;" tabIndex="6" href='#' id="widthPageFixed" 
	class="globalActionLink" onClick="changeWidth("<%= 
	user %>", "fixed"); return false;"><
	img src="<portal-logic:urlFindInTheme file='images/quickr/setfixed.gif'/>" 
	style="width: 18px; height: 18px;" alt=<portal-fmt:text key="fixedWidth" 
	bundle="nls.quickr"/> title=<portal-fmt:text key="fixedWidth" 
	bundle="nls.quickr"/> /></a>
	<% } %>
            

Также можно изменить цвет ссылки на справку, модифицировав цветовую палитру (рисунок 19):

globalActionText=#295500

Для большего единообразия темы текст Help можно заменить кнопкой, похожей на ссылку Back to Home. Ссылка на справку формируется в banner_globalActions.jspf. В этом файле найдите текст, показанный в листинге 13.

                
                <%-- Help --%>
	<% 
		String user = request.getRemoteUser();
	%>	
	<a tabIndex="9" href='javascript:void(0);' class="" 
	onClick="showHelpWindow('com.ibm.qpp.places.help/ts/h_ts_places_welcome.html', 
	'<%=preferred%>'); return false;">
	<img class="breadCrumbImage" border="1" 
	src="<portal-logic:urlFindInTheme file='images/custom/help.gif'/>" 
	alt=<portal-fmt:text key='link.help' bundle='nls.engine'/> />
	</a>

Модифицируйте этот код для вставки фона как показано в листинге 14.

                
                <%-- Help --%>
	<% 
		String user = request.getRemoteUser();
	%>	
	<a tabIndex="9" href='javascript:void(0);' class="globalActionLink" 
	onClick="showHelpWindow('com.ibm.qpp.places.help/ts/h_ts_places_welcome.html', 
	'<%=preferred%>'); return false;">
	<img border="0" src="<portal-logic:urlFindInTheme file='images/custom/help.gif'/>"
	 alt=<portal-fmt:text key='link.help' bundle='nls.engine'/> />
	<portal-fmt:text key='link.help' bundle='nls.engine'/>
	</a>

Для корректного выравнивания кнопок вы также можете удалить свойство margin:

margin-${requestScope.cssRules.bidiRight}: 5px;

из стиля в файле styles_theme.jspf, как показано в листинге 15.

                
.globalActions {
    float:${requestScope.cssRules.bidiRight};
    color: ${colors.globalActionText};
    background:${colors.globalActionsBackground};
    margin-${requestScope.cssRules.bidiRight}: 5px;
    padding: 0 5px;
}

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

На этом закончим с редактированием шапки Lotus Quickr.

Подвал страницы

На рисунке 21 показан стандартный подвал страницы темы Lotus Quickr. Подвал может быть свёрнут, и тогда в нем отображаются только часто применяемые ссылки. При настройке подвала вы можете установить его свёрнутым по умолчанию, изменить ссылки, изменить или удалить логотип IBM или даже удалить подвал вовсе.

Вы можете легко изменить логотип IBM в подвале страницы. Подвал формируется файлом footerLarge.jspf. Внутри этого фрагмента найдите тег изображения, указывающий на логотип IBM (footerIBM.gif). Вы можете вместо этого указать путь к вашему собственному логотипу:

<img class="ibm" src="<portal-logic:urlFindInTheme
file='images/custom/footerCustom.gif'/>" alt="IBM">

Как описано выше, по умолчанию подвал отображается в раскрытом состоянии и содержит все доступные ссылки. Для экономии пространства вы можете свернуть подвал, как на рисунке 22.

Состояние по умолчанию можно изменить, отредактировав файл footerLarge.jspf. Этот JSP использует атрибут стиля CSS display для переключения состояний. В листинге 16 показан фрагмент кода, где формируются ссылки Expand и Collapse. Добавьте код, выделенный жирным шрифтом, и удалите следующий код:

style="display: none;"

выделенный наклонным шрифтом в листинге 16. Эти изменения позволяют изменить состояние по умолчанию.

                
                <% if(usernameID!=null){ %>
	<a id="footerLinkIDCollapse" style=”display: none;” class="footerLink" href="#" 
	onclick="expandFooter(); changeFooter("<%=usernameID%>
	"); return false;"><portal-fmt:text key="footer.collapse" 
	bundle="nls.quickr"/></a>
	<a id="footerLinkIDExpand" style="display: none;" class="footerLink" href="#" 
	onclick="expandFooter(); changeFooter("<%=usernameID%>"); 
	return false;"><portal-fmt:text key="footer.expand" 
	bundle="nls.quickr"/></a>
	<% } %>
            

Сходные изменения нужны для тегов <div> содержащих ссылки на свёрнутое и развёрнутое состояние. По умолчанию <div> footerSmall - ссылки на свёрнутое состояние спрятаны, а <div> footerMain - ссылки на развёрнутое состояние видны. Этот код можно отредактировать как в приведенном ниже примере:

<div id="footerSmall" style="display: none;">

Добавьте текст выделенный жирным шрифтом:

<div id="footerMain" style="display: none;">

После этих изменений при обновлении страницы вы увидите свёрнутый подвал.

В некоторых случаях, если того требует дизайн, желательно удалить подвал страницы полностью. Вы можете легко это сделать, просто удалив оператор include, добавляющий фрагмент footerLarge. В файле default.jsp найдите и удалите следующий код:

<portal-logic:if portletSolo="no"> <!-- <%@ include file="./footerLarge.jspf" %> --> </portal-logic:if>

Тело страницы

Следующая глава содержит руководство по настройке тела страницы в теме Lotus Quickr. Тело страницы находится внутри тега <div> с ID, имеющего значение pageArea. Этот тег <div> служит обёрткой для заголовка тела страницы, панели навигации, области формируемой портлетом и подвала тела страницы.

На рисунке 23 показано тело страницы с обозначенными разными цветами элементами тела.

Первым шагом является настройка самой обёртки pageArea. Обёртка рисует границы тела страницы и фон. Стиль можно отредактировать в файле styles_theme.jspf следующим образом:

1. Найдите pageArea в файле стиля CSS и измените его, как показано в листинге 17.
   
   
   Листинг 17. Стиль pageArea
   

   #pageArea { background-color: ${colors.bodyBackground}; border: 2px solid ${colors.bodyBorder}; // #295500 padding: 10px; -moz-border-radius: 4px; }

   
   
2. Вы можете изменить значение цвета в bodyBorder в соответствии с остальными цветами темы. Это делается изменением свойства:
   bodyBorder=#295500

Будет добавлена зелёная рамка вокруг тела страницы как на рисунке 24.

Заголовок тела страницы, показанный на рисунке 25, – это первый элемент, формируемый в теле страницы. Этот элемент используется для показа названия приложения, статуса и ссылки Customize для настройки сайта прав доступа или добавления документов. Стандартные шаги настройки тела страницы – это изменение фоновой картинки, стилей шрифтов и размера заголовка.

Примеры настройки заголовка тела страницы.

• Градиентная заливка фона - это свойство, настраиваемое в цветовой палитре:
  customizeBackground=#EEEEEE
• Параметры шрифта также можно изменить в цветовой палитре. Найдите свойство pageHeader в цветовой палитре и измените его на стандартный цвет вашей темы:
  pageHeader=#295500
• Сходным образом в цветовой палитре можно отредактировать цвет текста ссылки Customize. Значение свойства можно изменить следующим образом:
  customizeLink=#295500

После всех изменений заголовок тела страницы выглядит как на рисунке 26.

На рисунке 27 показана строка навигации со ссылками на все страницы раздела. Эта часть темы требует дополнительных настроек. Выполним стандартные действия: изменим фон, шрифт и пр.

Сначала измените стиль, чтобы строка навигации соответствовала остальным частям темы. Для этого добавьте фоновый цвет для родительского тега <div> строки навигации как здесь:

.topnav{
background-color: ${colors.customizeBackground};
}

Для изменения стиля строки навигации удалите строку

background: #EEEEEE bottom left repeat-x;

из кода в листинге 18.

                
.wpsPageBarFirstRow{
	margin:0px;
	clear: both;
	white-space: nowrap;
	float:${requestScope.cssRules.bidiLeft};
	*float: none;
	padding-${requestScope.cssRules.bidiLeft}: 0px;  
	<%--browsers default to either left margin or padding of 
	40px for li indention --%>
	background: #EEEEEE bottom left repeat-x;
	width: 99%;
	font-family: ${requestScope.cssRules.fontFamilySansSerifLarge};
	font-size: ${requestScope.cssRules.fontSize.normal};
	font-weight: bold;
}

Также необходимо изменить свойства шрифта в цветовой палитре. Отредактируйте следующие свойства:

tabsTextSelected=#f6931c
topNavFirstRowUnSelectedText=#999

Теперь найдите в свойствах цветов все вхождения значения #999 и замените их цветом #295500 из custom_theme, как показано в листинге 19. Это позволит изменить все остальные цвета темы.

                
topNavRowUnSelectedText=#295500
topNavFirstRowText=#295500
launchButtonText=#295500
menuPortletseparator=#295500

После завершения всех изменений верх тела страницы будет выглядеть как на рисунке 28.

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

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

1. Щёлкните ссылку Customize в заголовке тела страницы.
2. Перейдите на вкладку Pages и щёлкните Advanced Layout.
3. Щёлкните кнопку New Page и добавьте новую страницу. Назовите её Test Page.
4. Щёлкните Done. Отметьте, что новая страница добавлена в ваш раздел (team place) сайта в верхнюю строку навигации.
5. Далее повторите шаги 1 и 2 для перехода на вкладку Manage Pages. Выберите добавленную страницу Test Page для добавления в неё дочерних страниц.
6. Добавьте новые страницы Page 1 и Page 2 в Test Page.

Теперь ваш раздел сайта выглядит как на рисунке 29.

Подстраницы, добавленные в Test Page, появляются в виде дерева навигации. Следующий пример показывает шаги по замене дерева ссылок строкой ссылок.

Примечание: описанные изменения могут привести к ошибкам JSP, если будут сделаны некорректно. Создайте резервную копию файлов перед их модификацией.

В копии Default.jsp найдите таблицу с ID portletRenderWidth и измените таблицу как в листинге 20 (изменения выделены жирным шрифтом). Эти изменения вставят в таблицу новую строку, к которой можно получить доступ через CSS и вставить в неё горизонтальную навигацию вместо дерева ссылок.

                
<table style="width:100%; height:100%;" cellpadding="0px" 
cellspacing="0px" id="portletRenderWidth">
   <tr>
   <% if(nodeSel == null ) {%>
    <td  width="100%" height="100%" valign="top">
   <%}else{ %> 
    <td valign="top">
    <%}%>
  <portal-logic:if portletSolo="no">
	<%@ include file="./sideNav.jspf" %>
  </portal-logic:if>
    </td>
    <% if(nodeSel == null ) {%>
   </tr>
   <tr>
   <%} %>
    <td width="100%" height="100%" valign="top">
  <a name="wpsMainContent"></a>
 <%-- Call the portal engine command to render the portlets 
 for this page --%> 
  
  <div id="mainContent">
  <%  if (nodeSel != null){
   if(nodeSel.equals("wps.Login")){ %>
        <portal-logic:if portletSolo="no">
          <%@ include file="./login.jspf" %>
        </portal-logic:if>
   <% } } %>
	<portal-core:screenRender/>
  </div>
    </td>
  </tr>
  </table>

Файл sideNav.jspf содержит код, который читает дочерние элементы страницы и выводит их на экран. Для обновления блока навигации создайте новое объявление стиля, который будет формировать горизонтальную строку меню, и добавьте эти классы в существующие элементы HTML блока навигации. Пример в листинге 21 показывает, как создать новое объявление стиля. Этот стиль скопирован из имеющегося стиля области Side Navigation (класс CSS с именем wpsSideNav). Затем измените стиль по умолчанию для показа горизонтального меню.

                
<%--===================================================
    Page Horizontal Navigation
====================================================--%>
.wpsHorizontalNav{
    background: #F0F0F0 url(./images/portlet/tableBg.gif) repeat-x scroll left top;
	margin:0px;
	clear: both;
	white-space: nowrap;
	float:${requestScope.cssRules.bidiLeft};
	width: 99%;
	padding-left: 0px;
	font-size: ${requestScope.cssRules.fontSize.normal};
	border: 1px solid;
	border-color: ${colors.sideNavBorder};
	text-decoration: none;
	
}
.wpsHorizontalNav li{
	font-family: ${requestScope.cssRules.fontFamilySansSerifLarge};
	float:${requestScope.cssRules.bidiLeft};
	display:inline;
	list-style: none;
	margin-${requestScope.cssRules.bidiLeft}: 0px;
	padding: 4px 12px 6px 0px;
    /** padding-${requestScope.cssRules.bidiLeft}: 0px; **/
}

/* for Selected node in the first sub-layer i.e. the second layer */
.wpsHorizontalNav .selectedElem{
    background-color: #FFFFFF;
}

/* first sublist is not indented */
.wpsHorizontalNav ul{
    margin-${requestScope.cssRules.bidiLeft}: 1.5em;
    padding-${requestScope.cssRules.bidiLeft}: 0px;
}
/* indent sublists nested 2 levels or deeper  */
.wpsHorizontalNav ul ul{
    margin-${requestScope.cssRules.bidiLeft}: 1.5em;
    padding-${requestScope.cssRules.bidiLeft}: 0px;
}

.wpsHorizontalNav .wpsNavItem{
	text-decoration: none;
	display:block;
	white-space:nowrap;
	color:${colors.sideNavText} !important;
}

.wpsHorizontalNav .wpsNavItem a {
	display: inline;
}

.wpsHorizontalNav .wpsNavItem a:hover {
	text-decoration: underline;
}

.wpsHorizontalNav .selected{
	/* color: ${colors.sideNavSelectedText} !important; 
	background:#FFFFFF none repeat scroll 0%;   */
	text-decoration: none;
	/*padding:3px 3px; */
	display:block;
	cursor:default;
	white-space:nowrap;
}
display: inline;
	cursor: pointer;
	text-decoration: none;
}

.wpsHorizontalNav .selected a:hover{
	color:  #666666 !important;
	text-decoration: none !important;
}

.wpsHorizontalNav .wpsNavIcon{
    height: 9px;
    width: 9px;
    border: 0px;
    padding: 0px;
    margin: 0px;
    vertical-align: baseline;
}


.wpsHorizontalNav .menuLinkSideNav {
    border: 0px;
    margin-${requestScope.cssRules.bidiLeft}: -10px;
    padding: 0px 10px;
}

.wpsHorizontalNav .wpsNavLevel1{
	color:  #999999 !important;
	font-size: ${requestScope.cssRules.fontSize.bold};
	padding-top: 3px;
}

.wpsHorizontalNav .selected .wpsNavLevel1{
	color:  colors.sideNavTopLevelSelectedText !important;
}


.wpsHorizontalNav .wpsNavLevel2 wpsNavLevel3 wpsNavLevel4 wpsNavLevel5 
wpsNavLevel6 wpsNavLevel7 wpsNavLevel7{
	text-indent:36px;
}

Последний шаг – это настройка элементов HTML в файле sideNav.jspf для использования нового стиля. Изменения показаны в листинге 22 жирным шрифтом.

                
<ul <% if(previousNavLevel==0 && nodeSel == null){%>
 class="wpsHorizontalNav"<%} else{%> class="wpsSideNav" 
<%}%> >
<li <%if (isNodeSelected) { %> class="selectedElem" 
id="portalSelectedNode" onmouseover="showSidePageAffordance(); return false;" 
onmouseout="hidePageAffordance(); return false;" <% } %> >

<c-rt:when test="<%=nodeSel!=null && nodeHasChildren && 
isExpanded%>">
	<a href='<portal-navigation:navigationUrl type="collapse"/>'>
	<img alt="<portal-fmt:text key='link.collapse' bundle='nls.engine'/>" 
	title="<portal-fmt:text key='link.collapse' bundle='nls.engine'/>" 
	class="wpsNavIcon" src="<portal-logic:urlFindInTheme 
	file='images/sideNav/minus.gif' />"></a>
</c-rt:when>

Теперь добавим последний штрих в цветовую палитру:

sideNavTopLevelSelectedText=#295500

Конечный результат показан на рисунке 30.

В начало

Графические оформления Lotus Quickr

Графические оформления представляет собой обёртки над компонентами. Они включают в себя контейнеры строк, контейнеров столбцов и элементов управления. Контейнеры работают как обёртки внутреннего портлета, а раздел элементов управления отображает элементы управления портлета.

По умолчанию Lotus Quickr использует графическое оформление QuickrSkin, которое адаптировано для работы с темами и страницами Lotus Quickr. В главе "Начало работы" данной статьи мы создали графическое оформление custom_skin из стандартного графического оформления Lotus Quickr. Папка графического оформления содержит три основных файла JSP:

• UnlayeredContainer-H. Контейнер строк.
• UnlayeredContainer-V. Контейнер столбцов
• Control.jsp. Отображает элементы управления портлета.

В начало

Файлы локализации

Файлы локализации тем Lotus Quickr находятся по адресу:

portal_server_root\shared\app\nls

Файлы имеют имена, построенные по шаблону quickr_[language].properties. Для добавления новых строк для темы вы можете добавить новый файл ресурсов в ту же папку. Более детальное описание файлов ресурсов можно найти в WebSphere Portal Information Center.

В начало

Заключение

В статье приведен обзор типичных настроек тем Lotus Quickr для WebSphere Portal. Описано, как создаются новые темы и графического оформления и как они используются в страницах сайта. Также рассмотрены компоненты тем и их роль в темах. Наконец, в статье рассматриваются отдельные разделы темы и приводятся примеры типичных изменений этих разделов при модификации темы.

В начало

Загрузка

Информация о методах загрузки

Ресурсы

Научиться

• Оригинал статьи: "Customizing themes in IBM Lotus Quickr services for IBM WebSphere Portal V8.0" (EN).
  
  
• Прочитайте статью на developerWorks Lotus " Введение в Web-сервисы IBM Lotus Quickr" (EN).
  
  
• Прочитайте статью на developerWorks Lotus " IBM Lotus Quickr: Увеличение продуктивности работы коллектива в социальных сетях " .
  
  
• Прочитайте статью на developerWorks Lotus " Введение в сервисы REST IBM Lotus Quickr" (EN).
  
  
• Прочтите Руководство разработчика Lotus Quickr (EN).
  
  
• Ознакомьтесь с Документация developerWorks по Lotus Quickr (EN).
  
  

Обсудить

• Примите участие в обсуждении материала на форуме.
  
  
• Участвуйте в блоге developerWorks команды Lotus.
  
  

Об авторе

Оценить эту статью

Комментарии

В начало

Содержание

• Предварительные требования
• Начало работы
• Компоненты тем Lotus Quickr
• Настройка темы
• Графические оформления Lotus Quickr
• Файлы локализации
• Заключение
• Загрузка
• Ресурсы
• Об авторе
• Комментарии