Реализация многоязычных сайтов при помощи IBM Workplace Web Content Management в IBM WebSphere Portal

При помощи пакета IBM Workplace Web Content Management, можно создавать сайты, работающие с содержимым на разных языках. В сочетании с возможностями механизма персонализации IBM WebSphere Portal Workplace Web Content Management может предоставлять персонализированное содержимое на основе предпочтений пользователей.

Ахмед Аббас, архитектор ИТ-систем, IBM  

Ахмед Аббас (Ahmed Abbas) – архитектор ИТ-систем в Cairo Technology Development Center. Участвуя в квалифицированном техническом обслуживании, Ахмед устраняет разрыв между теорией, стоящей за используемой технологией, и практической реализацией для удовлетворения потребностей бизнес-деятельности клиентов.



Хебба Солимэн, инженер-программист, IBM  

Хебба Солимэн (Hebba Soliman) - инженер-программист в Cairo Technology Development Center. Имеет богатый опыт разработки и проектирования многоязычных Web-приложений при помощи IBM Workplace Web Content Management и технологий персонализации.



05.11.2009

Многоязычные сайты интересны тем Web-пользователям, которые привыкли видеть содержимое на своем родном языке. Если ваш портал предоставляет содержимое на различных языках, вы должны учитывать язык, предпочитаемый пользователем. Более того, если портал предоставляет категоризированное содержимое, нужно подстраиваться под предпочтения пользователей. Предпочитаемый язык и области их интересов можно запросить во время регистрации. В разделе "Ресурсы" приведены ссылки на полезные материалы, посвященные персонализации поведения IBM WebSphere Portal при регистрации.

Предполагается, что читатели данной статьи знакомы с администрированием IBM WebSphere Portal V6.0 и его компонентами, а также с IBM Workplace Web Content Management и механизмом персонализации.

Для демонстрации идеи персонализации содержимого в статье используется пример портала, предоставляющего содержимое на английском и арабском языках. Эти же концепции можно применить как для большего количества языков, так и для языков, отличных от используемых в примере. Пример - это новостной портлет, отображающий список заголовков, которые ссылаются на портлет News Details. Эти два портлета показаны на рисунке 1.

Рисунок 1. Новостные портлеты на английском языке
Рисунок 1. Новостные портлеты на английском языке

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

Рисунок 2. Новостные портлеты на арабском языке
Рисунок 2. Новостные портлеты на арабском языке

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

Как это работает

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

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

Язык страницы указывается в соответствии с локалью (locale) пользователя при входе или в соответствии с информацией о предпочитаемом пользователем языке, сохраненной в его профиле. При организации содержимого таким способом элементы содержимого можно отфильтровать в зависимости от языка пользователя и областей интересов во время исполнения, как показано на рисунке 3.

Рисунок 3. Фильтрация содержимого на основе интересов и языка пользователя
Рисунок 3. Фильтрация содержимого на основе интересов и языка пользователя

Для зарегистрированных пользователей язык и интересы обычно извлекаются из пользовательского профиля. Ссылки на более подробную информацию об извлечении из профиля языка, предпочитаемого зарегистрированным пользователем, приведены в разделе "Ресурсы". Эта же схема может работать и тогда, когда язык и области интересов пользователя предоставляются программным способом.

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

  • Компонент menu для каждого языка. Для выбора компонента menu, отображающего список содержимого, можно использовать JSP-компонент в зависимости от локали пользователя.
  • Kомпонент personalization для каждого языка. Правила персонализации определяют используемый компонент personalization на основе соответствия языка пользователя шаблону авторизации, ассоциированному с элементом содержимого. Данное правило подходит также для выполнения фильтрации по интересам пользователя (записанным в профиле). Этот способ использует возможности персонализации WebSphere Portal personalization и Workplace Web Content Management.

Реализация

В данном разделе рассматриваются действия по реализации решения для навигации по языкам на основе предпочитаемого языка. В первой части рассматривается создание артефактов Workplace Web Content Management, общих для обоих вариантов визуализации, описанных во второй части.

Артефакты Workplace Web Content Management

Для создания артефактов можно использовать возможности администрирования WebSphere Portal, как показано ниже, либо пропустить данный раздел и использовать существующие эквиваленты каждого из этих артефактов. Названия артефактов упоминаются только для перекрестных ссылок.

Библиотека содержимого, сайт, области сайта и потоки работ

Создайте библиотеку содержимого Workplace Web Content Management под названием MultiLanguage. В этой библиотеке создайте сайт и назовите его MultiSite. Затем создайте в этом сайте области сайта для каждого языка - HomeEnglish и HomeArabic. Выберите интернациональное отображаемое название для области сайта Arabic, как показано на рисунке 4.

Рисунок 4. Созданные библиотека, сайт и области сайта
Created library, site, and site areas

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

Для публикации содержимого определите этапы потока работ и поток работ, который будут использовать элементы содержимого news. Для данного примера достаточно потока работ, состоящего из одного этапа. Создайте этап потока работ, выбрав New - Workflow stage, назовите его Publish stage и выберите действие publish для этого этапа.

Затем создайте поток работ, выбрав New - Workflow, и назовите его One Stage Workflow. Выберите вариант Select Workflow Stage и только что созданный этап под названием Publish stage.

Шаблоны авторинга и представления

Для создания элементов содержимого создайте шаблон авторинга, представляющего подробные новости, для каждого языка: at_news_en и at_news_ar. Для этого выберите New - Authoring Template. Выберите вариант Manage Elements, затем Element type для поля и нажмите кнопку Add. В качестве примера использовался список, приведенный в таблице 1. Используя Element Manager, добавьте поля, показанные в таблице 1 для обоих шаблонов.

Таблица 1. Поля шаблонов авторинга
Тип элементаИмяОтображаемый заголовок
Texttxt_titletxt_title
Rich textrtf_descriptionrtf_description
Component referenceImg_newImageImg_newImage

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

Для визуализирующей части определите шаблон представления pt_newsDetail. Исходный код страницы News Details приведен в листинге 1. Элементы, показанные в коде страницы, содержатся в таблице, но она для читабельности не показана.

Листинг 1. Исходный код страницы News Details
.
.
<Element context="current" type="content" key="txt_title" /> 
.
.
<Element context="current" type="content" key="img_newsImage" />
.
.
 <Element context="current" type="content" key="rtf_description" />
.
.
<!-- ссылки на страницу News List, созданную с URL-отображением, как обратная ссылка -->
<a href="<PathCmpnt type="noprefixbase" start=" "
			end="/wps/myportal/NewsList" />"> <-- </a>

Шаблоны готовы для отображения на соответствующем сайте новостей. В области сайта English news нажмите кнопку Edit Template Mapping и выберите at_news_en в качестве шаблона авторинга и pt_newsDetail для шаблона представления, как показано на рисунке 5. Это же самое сделайте для области сайта Arabic news, но выберите at_news_ar в качестве шаблона авторинга, как показано на рисунке 6.

Рисунок 5. Отображение шаблонов для области сайта English News
Рисунок 5. Отображение шаблонов для области сайта English News
Рисунок 6. Отображение шаблонов для области сайта Arabic News
Рисунок 6. Отображение шаблонов для области сайта Arabic News

Визуализация страницы News List рассмотрена в следующем разделе, в котором обсуждаются варианты визуализации.

Компонент image

Страница News Details примера содержит изображение. Чтобы избежать повторной загрузки изображения (по одному разу для каждой области сайта или языка), можно создать компонент image, чтобы каждый элемент содержимого, созданный в обеих областях сайта, ссылался на один и тот же компонент image.

Содержимое

Теперь, после создания артефактов Workplace Web Content Management, можно приступить к авторингу элементов содержимого, которые являются частями новостей с заголовком, описанием и изображением. Эти компоненты нужны для предварительного просмотра визуализирующей части.

В данном разделе описываются два варианта визуализации страницы News List: используя компоненты menu и используя компоненты personalization.

Использование компонентов menu

Страницу News List можно реализовать как компонент menu, создаваемый для каждого языка: menu_newsList_en и menu_newsList_ar. Каждый из созданных компонентов menu извлекает содержимое согласно его шаблону авторинга или области сайта, которой принадлежит, как показано на рисунке 7 для английской версии. Арабская версия использует свои артефакты, созданные для арабского языка.

Рисунок 7. Компонент menu, созданный для страницы English News List
Рисунок 7. Компонент menu, созданный для страницы English News List

Вы можете затем добавить заголовок и сноску в раздел design каждого компонента menu. Для результата поиска включите заполнители (placeholder), чтобы поля title и description замещались своими значениями в визуализируемом элементе содержимого, как показано в листинге 2. В конце листинга имеется ссылка на показ дополнительных заголовков новостей.

Листинг 2. Дизайн для каждого результата поиска меню
<a style="color: rgb(0, 0, 0); font-size: 14px; font-weight: bold;" 
href="<Placeholder tag="href" start="" end=""/>"> ** <FONT 
color="blue"><Element context="autoFill" type="content" 
key="txt_title"/></FONT> </a>
.
.
<Element context="autoFill" type="content" key="rtf_description"/>
.
.
<a href="<Placeholder tag="href" start="" end=""/>">More</a>

Компоненты menu готовы для использования JSP-компонентом. Создайте JSP-компонент с именем jsp_DisplayNewsList, и пусть он указывает на JSP-файл /jsp/html/gettingNewsContents.jsp. Соответственно, физический путь к JSP-файлу должен быть таким:

<websphere portal installation path>\installedApps\
WCM_Local_ng_Portlet_PA_dvme0nk.ear\PA_dvme0nk.war\jsp\html\
gettingNewsContents.jsp

Дополнительная информации по созданию JSP-компонентов приведена в WebSphere Portal V6.0 Information Center (EN).

Теперь создайте этот JSP-файл и включите в него код, приведенный в листинге 3.

Листинг 3. JSP-файл, использующий компоненты menu для визуализации содержимого
<%@page language="java" contentType="text/html; charset=ISO-8859-1"	
pageEncoding="UTF-8" session="false"%>
<%@page import="com.ibm.workplace.wcm.api.*,com.ibm.workplace.wcm.api.exceptions.*"%>
<%@ taglib uri="/WEB-INF/tld/portlet.tld" prefix="portletAPI" %>
<%@ taglib uri="/WEB-INF/tld/portal.tld" prefix="wps" %>
<%
try {

	//Подключиться к WCM Workspace
	Workspace workspace = WCM_API.getRepository().
	getWorkspace("username", "password");
	
	//Настроить ее на библиотеку, созданную для примера
	workspace.setCurrentDocumentLibrary
	(workspace.getDocumentLibrary("MultiLanguage"));
	
	//Получить язык пользователя из запроса и, в зависимости от него, 
	//выбирать нужный компонент menu по названию.
	String language  = request.getLocale().getLanguage();
	
	//Пример не учитывает случай, когда язык не обнаружен в запросе. 
	//В реальной жизни нужно обрабатывать эту ситуацию.
	if(language  != null){
	//Установить компонент menu согласно языку
		String compName = "menu_newsList_" + language ;
	
		//Извлечь компонент menu 
		DocumentIdIterator docIds = 
		workspace.findByName
		(DocumentTypes.LibraryComponent,compName);
		if (docIds.hasNext()){
			DocumentId did = (DocumentId)docIds.next();
			LibraryComponent libComp = 
			(LibraryComponent)workspace.getById(did);
				
			//Получить ключ визуализации из запроса
			RenderingContext rcjsp = 
			(RenderingContext)request.getAttribute
			(Workspace.WCM_RENDERINGCONTEXT_KEY);
			//Теперь визуализировать компонент personalization
			 и вывести полученный html!
			String html = workspace.render(rcjsp, libComp);
			out.println(html);
				
		}
	}
}
catch (Exception e) {
	//В реальной жизни нужно обрабатывать исключительные ситуации  
	//более продуманным способом. Базовая обработка приведена просто для примера.
	out.println("exception = "+e.toString());
	e.printStackTrace();
}
%>

ПРИМЕЧАНИЕ. Необходимо указать полномочия системы защиты для созданных компонентов и содержимого. Для запуска данного примера можно использовать любого члена группы wcsadmins.

Использование компонентов personalization

Альтернативой компонентам menu являются компоненты personalization, использующие механизм персонализации WebSphere Portal. Применяя правила персонализации, содержимое можно отфильтровать по языку и по области интересов пользователя одновременно.

Сначала создайте таксономию, содержащую бизнес-категории, аналогичные различным областям интересов, как показано на рисунке 8. В качестве категорий используйте Education, Health и Sports.

Для создания таксономии выберите New - Taxonomy и назовите ее Interest. Затем создайте категории, используя New - Category. Выберите Interest в качестве родительской таксономии.

Рисунок 8. Области интересов, реализованные как категории таксономии Interest
Рисунок 8. Области интересов, реализованные как категории таксономии Interest

Определенные вами категории можно ассоциировать с элементами содержимого в разделе User Profile для обозначения областей интересов, к которым эти элементы принадлежат. Чтобы обратиться к странице профиля, выберите Administration page - Launch - Edit My Profile. Можно изменить профиль пользователя используемой учетной записи для настройки областей интересов; это осуществляется путем редактирования поля businessCategory с аналогичным названием категории интересов. Убедитесь в том, что создали элементы содержимого, которые ассоциированы с категорией, назначенной пользователю, для того чтобы можно было увидеть нужные результаты при визуализации.

Теперь создайте правила работы (action rule), используемые для фильтрации содержимого. Необходимо правило для каждого языка: UserInterestContents_en и UserInterestContents_ar. Для создания нового правила выберите Administration page - Launch – Personalization, а затем New - Rule. В качестве типа правила укажите Action.

Каждое правило должно использовать артефакты, созданные для соответствующего ему языка, как показано на рисунке 9 (для английского языка).

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

ПРИМЕЧАНИЕ. Значение site area оставлено пустым, а фильтрация основывается только на шаблоне авторинга и категории интересов.

Теперь нужны компоненты personalization для каждого языка, чтобы использовать только что созданные правила персонализации. Назовите их pers_NewsList_en и pers_NewsList_ar.

При создании компонента personalization выберите созданные правила в разделе Personalization Element. В разделе design этих компонентов personalization повторно используйте раздел design, созданный вами для компонентов menu.

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

//Установить компонент personalization согласно языку
String compName = "NewsPersonalizedList_" + language ;

Страницы WebSphere Portal

После выбора одного из вариантов визуализации создается страница портала, содержащая портлеты для просмотра списка новостей и страницы подробностей для новости, выбранной из списка. В программе администрирования WebSphere Portal создайте две страницы - NewsList и NewsDetail. Добавьте портлет Web Content Viewer на каждую из них. Для облегчения навигации между этими двумя страницами вы можете создать URL-отображение для каждой - News List и News Details. На рисунке 10 показаны эти страницы.

Рисунок 10. Созданные страницы портала
Рисунок 10. Созданные страницы портала

ПРИМЕЧАНИЕ. Содержимое по умолчанию было установлено в английский вариант, но это не имеет значения - можно выбрать любой вариант.

Используемым на странице News List компонентом является созданный вами JSP-компонент jsp_DisplayNewsList, либо для компонента menu, либо для компонента personalization. Поле target portal page страницы News List указывает на страницу News Detail. В свою очередь, страница News Detail использует поле target portal page для указания обратно на страницу News List.

Теперь пример готов к работе. Просмотрите на странице News List список новостей, зависящий от языка и области интересов зарегистрировавшегося пользователя.


Соглашения по дизайну

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

Поддержка большего количества языков

Этот дизайн упрощает процесс поддержки сайтом дополнительных языков. Все, что нужно, - это добавить новую область сайта для хранения артефактов, созданных для языка, вместе с шаблоном авторизации и компонентом menu или personalization.

Для переключения между языками пользователь должен изменить локаль браузера, либо изменить предпочитаемый язык на странице Edit My Profile. Также, если автором содержимого для каждого языка является другой человек, можно использовать управление доступом для назначения различных авторов различным областям сайта; то есть, можно назначить автора для каждого языка.

Варианты фильтрации

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

Упрощение авторинга и обслуживания содержимого

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

Оптимизация использования Workplace Web Content Management API

Выбранный дизайн полагается на ассоциацию содержимого с шаблонами и компонентами, устраняя, таким образом, необходимость в JSP-страницах, использующих API, которые ищут содержимое в репозитории Workplace Web Content Management.

В других ситуациях, если нужно добавить поиск в JSP-файл, используйте метод workspace.contentsearch(), который принимает в качестве параметров отдельный шаблон авторинга и отдельную область сайта. Этот метод имеет лучшую производительность, чем поиск содержимого по шаблону авторинга и последующая фильтрация результатов по области сайта. С другой стороны, правила персонализации работают лучше, когда метод извлекает содержимое по шаблону авторинга, а не по области сайта.


Заключение

Поддержка многоязычных порталов упрощается благодаря встроенным возможностям WebSphere Portal, а именно Workplace Web Content Management и компонентам персонализации. В данной статье вы узнали, как реализовать портал, предоставляющий содержимое в зависимости от предпочитаемого языка и области интересов пользователя.


Благодарности

Авторы хотели бы выразить признательность Маха Абдел-Куадеру (Maha Abdel-Qader) и Хасану Али (Hassan Ali) за их поддержку на ранних этапах проекта. Особая благодарность Хале Язиз (Hala Aziz), Ахмеду Каири (Ahmed Khairy), Кариму Джеймсу (Kareem James), Мохабу Эль-Хилали (Mohab el-Hilaly), Мохаммеду Махеру (Mohamed Maher) и Мураду Эль-Бадри (Mourad el-Badry), которые нашли время в своем плотном графике для рецензирования этой статьи.

Ресурсы

Научиться

Обсудить

Комментарии

developerWorks: Войти

Обязательные поля отмечены звездочкой (*).


Нужен IBM ID?
Забыли Ваш IBM ID?


Забыли Ваш пароль?
Изменить пароль

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


Профиль создается, когда вы первый раз заходите в developerWorks. Информация в вашем профиле (имя, страна / регион, название компании) отображается для всех пользователей и будет сопровождать любой опубликованный вами контент пока вы специально не укажите скрыть название вашей компании. Вы можете обновить ваш IBM аккаунт в любое время.

Вся введенная информация защищена.

Выберите имя, которое будет отображаться на экране



При первом входе в developerWorks для Вас будет создан профиль и Вам нужно будет выбрать Отображаемое имя. Оно будет выводиться рядом с контентом, опубликованным Вами в developerWorks.

Отображаемое имя должно иметь длину от 3 символов до 31 символа. Ваше Имя в системе должно быть уникальным. В качестве имени по соображениям приватности нельзя использовать контактный e-mail.

Обязательные поля отмечены звездочкой (*).

(Отображаемое имя должно иметь длину от 3 символов до 31 символа.)

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


Вся введенная информация защищена.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=40
Zone=WebSphere, Lotus
ArticleID=444495
ArticleTitle=Реализация многоязычных сайтов при помощи IBM Workplace Web Content Management в IBM WebSphere Portal
publish-date=11052009