В статье исследуются подробности кастомизации IBM Lotus Domino Web Access с целью улучшить внешний вид при использовании вместе с темой по умолчанию IBM WebSphere Portal 5.1. Lotus Domino Web Access Portlet, который идёт с WebSphere Portal, работает с любой развёрнутой на данный момент версией Lotus Domino. Однако вид и функции видимого содержимого в пределах портлета контролируется Lotus Domino Web Access, поэтому на него влияет развёрнутая версия Lotus Domino, а также версия шаблона файла почты пользователя.

В Lotus Domino Web Access 7 изменено оформление по умолчанию, поэтому он выглядит гораздо лучше в WebSphere Portal 5.1. В этой статье мы обсудим, каким образом вы можете настроить Lotus Domino Web Access 6.5, чтобы наилучшим образом использовать некоторые из этих изменений в оформлении. Мы подробно рассмотрим имеющиеся в наличии инструменты, которые помогут вам выполнить такие изменения вида и функций, дадим советы, как определить, какие классы каскадных таблиц стилей используются различными областями экрана Domino Web Access, а также опишем, как обнаружить и изменить эти дефиниции в файле Domino Web Access Forms (Forms6.nsf).

Хотя наш пример описывает, как изменить Lotus Domino Web Access, чтобы он больше походил на стили CSS, которые используются в теме WebSphere Portal 5.1 по умолчанию, эти же принципы можно использовать для изменения Lotus Domino Web Access таким образом, чтобы он походил на любую настроенную тему для WebSphere Portal, других портальных серверов или для общих советов по оформлению, которые могут пригодиться конкретной компании, разворачивающей Lotus Domino Web Access.

Краткое повторение

Большая часть элементов дизайна (HTML, JavaScript, изображения и CSS), влияющих на вид и функции Lotus Domino Web Access, находятся в файле Forms Domino Web Access. Для шаблона iNotes6.ntf Domino Web Access (6) этот файл Forms - Forms6.nsf, он расположен в поддиректории iNotes в директории данных сервера.

Lotus Domino Web Access использует технологию тем QuickPlace. Она предполагает группы скинов, которые представляют различные темы, каждая из которых состоит из набора скинов, представляющих конкретные шаблоны компоновки, наряду с отдельной общей таблицей стилей. Чтобы изменить общий вид и функции Lotus Domino Web Access, вам необходимо внести изменения в эти скины.

Lotus Domino Web Access 6.5 имеет две основных группы скинов, h_ShimmerSkin для Microsoft Internet Explorer и h_ShimmerSkin_Gecko для Mozilla. В пределах каждой группы скинов используются следующие ключевые типы скинов на страницах Domino Web Access:

• h_ListFolder, h_Portal, h_DwaLite, h_PortalLite: Используется для большинства страниц просмотра. H_ListFolder используется по умолчанию, а h_DwaLite используется, если используется &ui=inotes_lite. H_Portal используется, если задействован &ui=portal, а h_PortalLite используется, когда указан &ui=portal_lite.
• h_ApptPage: Используется экранами CalendarEntry, ToDo, Out of Office и Preferences (имеет другой класс, указанный для BodyDiv outer div в пределах основной области PageContent, отображаемой компонентом скина PageContent).
• h_MailPage: Используется для экранов других объектов (Read Message, Compose/Edit Message и т. д.)
• h_Edit: Используется для страницы Welcome Page Edit Layout.

В начало

Инструменты

Давайте теперь обсудим инструменты. Для выполнения любой кастомизации скинов Lotus Domino Web Access 6.5 вам потребуется инструмент Domino Web Access Skin Editor Tool (см. рисунок 1), который вы можете загрузить с Lotus Sandbox.

Кроме того, рассмотрите использование следующих инструментов, которые могут помочь вам в процессе кастомизации:

• Mozilla Firefox Document Object Model (DOM) Inspector
• Microsoft Internet Explorer Developer Toolbar
• IBM Lotus Domino Designer

В начало

Mozilla Firefox DOM Inspector

В этой статье мы рассматриваем работу с Mozilla Firefox v1.0.7. DOM Inspector не является устанавливаемой опцией при стандартной установке. Чтобы получить его, вы должны запустить изменённый инсталлятор с Web-сайта mozillaZine.

Для запуска DOM Inspector на странице Domino Web Access введите URL вашей страницы Domino Web Access в Firefox, а затем выберите Tools - DOM Inspector из строки меню.

Затем нажмите на кнопку Inspect (в правом верхнем углу на рисунке 2), чтобы вывести предварительный просмотр HTML-страницы, которую вы исследуете. Имейте в виду, что в этом режиме, когда вы выделяете узлы DOM, DOM Inspector выделяет соответствующую область Web-страницы красным.

Кроме того, можно открыть DOM Inspector, нажав клавиши Ctrl + Shift + I на странице, которую вы хотите исследовать. Это сочетание клавиш особенно полезно для диалоговых окон, не имеющих строки меню, например диалоговое окно Domino Web Access Preferences.

В начало

Internet Explorer Developer Toolbar (Панель разработчика)

Вы можете загрузить Internet Explorer Developer Toolbar из Microsoft Download Center. Подобно Mozilla Firefox DOM Inspector, Internet Explorer Developer Toolbar позволяет вам открыть DOM Explorer (см. рисунок 3), который позволяет вам перемещаться по DOM текущей Web-страницы. Вы можете отобразить или спрятать DOM Explorer, нажав на кнопку View DOM (выделена красным на рисунке 3). Когда вы перемещаетесь по узлам, имейте в виду, что DOM Explorer выделяет соответствующую область Web-страницы голубым цветом.

В начало

Давайте сделаем это

В этом разделе мы рассмотрим процесс изменения цветов в скине Domino Web Access 6.5, чтобы он походил на скин Domino Web Access 7. Перед тем, как мы начнём, давайте обсудим следующие значения аргументов пользовательского интерфейса, доступных в Lotus Domino Web Access 6.5:

h_Portal : Portal skin (&ui=portal)
h_LiteFolder : Lite Folder skin (&ui=inotes_lite)
h_LitePortal : Lite Portal skin (&ui=portal_lite)

По умолчанию Lotus Domino Web Access использует скин, изображённый на рисунке 4. Однако вы можете изменить используемый скин, добавив &ui=inotes_lite к исходной команде ?OpenDatabase URL вместо &ui=inotes. Если вы хотите, чтобы скин lite использовался по умолчанию для всех пользователей на сервере, вы можете использовать следующие настройки Notes.ini:

iNotes_WA_UI=inotes_lite

ИЛИ

iNotes_WA_UI=portal_lite (если все пользователи используют &ui=portal)

См. статью developerWorks Lotus "Улучшение характеристик клиента Lotus Domino Web Access," чтобы получить дополнительную информацию по скину lite.

Для нашего примера настройки мы используем скины iNotes lite и portal lite в качестве отправного пункта. Эти скины lite были введены в Forms6.nsf с целью улучшения характеристик. Стандартные скины Forms7.nsf являются потомками этих скинов, у которых нет закруглённых углов закладок или фона с плавными переходами цвета вокруг баннера. Следовательно, легче начать со скина lite iNotes и не беспокоиться об изменении GIF-файла, который используется для закруглённых углов закладок.

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

Как описано в статье developerWorks Lotus, "Кастомизация вида и функций Domino Web Access 6.5," мы рассматриваем переменные h_CurrentSkinName и h_CurrentSkinType, чтобы определить, какая группа и тип скинов используются. Вы можете получить доступ к этим переменным в Microsoft Internet Explorer, выбрав View (Вид) - Source (Источник) из меню. Мы работаем с группой скинов h_ShimmerSkin; в этом примере мы не изменяем тип скина h_DwaLite, так как большая часть модификации выполняется с помощью изменения дефиниций CSS в h_Stylesheet. Этой информации для нас достаточно, чтобы знать, что делать с инструментом Skin Editor (см. рисунок 1).

С помощью инструмента Skin Editor вы можете редактировать и пересылать обновления скинов на сервер Domino Web Access; однако инструмент не обладает многими функциями текстового редактора. Поэтому мы рекомендуем временно скопировать содержимое в ваш любимый текстовый редактор (например, Notepad или профессиональный инструмент для редактирования текста, например IBM Rational Application Developer или Microsoft Visual Studio), чтобы выполнять изменения. Вы можете сделать это, нажав на кнопку Copy All, и вставив содержимое в текстовый редактор.

Примечание: Сделайте резервную копию содержимого, прежде чем выполнять какие-либо изменения в инструменте Skin Editor. Вы можете хранить резервную копию как текстовый файл, который вы можете при необходимости вставить обратно в инструмент Skin Editor. Всегда полезно копировать и сохранять хорошую рабочую версию, чтобы можно было вернуться к известному рабочему состоянию.

Выбираем, какие дефиниции CSS изменять

А теперь самое интересное. Как узнать, какие дефиниции CSS модифицировать, чтобы изменить внешний вид HTML-элемента? Если изучить HTML, который генерируется, когда вы выбираете View - Source в Internet Explorer, вы обнаружите, что в нём недостаточно подробностей, чтобы помочь вам понять, что нужно менять.

В данном случае лучше всего использовать либо Mozilla Firefox DOM Inspector, либо Internet Explorer Developer Toolbar. Когда вы начнёте использовать один из этих инструментов, вы увидите, что они сэкономят вам массу времени. Например, когда вы работаете с Mozilla Firefox DOM Inspector с включенной функцией Inspect, он выделяет красным цветом область, которую вы исследуете, что позволяет гораздо легче обнаружить стиль, относящийся к HTML-элементу.

Выполнение изменений в дефинициях CSS

Как описано выше в разделе "Начало работы", мы рекомендуем вам скопировать скин, который вы хотите модифицировать (из инструмента Domino Web Access Skin Editor) в текстовый редактор и выполнять изменения с помощью текстового редактора для облегчения редактирования.

В эту статью мы включили наши изменения в виде текстовых файлов для исходных и изменённых таблиц стилей. Вы можете использовать инструмент для сравнения текста, чтобы увидеть изменения. Мы также приводим таблицу с подробной информацией и скриншотами дефиниций стилей, которые подлежат изменению, чтобы достичь вида и функций, показанных на рисунке 7. Дополнительную документацию см. в разделе Downloads.

Рисунок 5 показывает пример некоторых изменений активных и неактивных закладок с помощью Rational Application Developer, используемого в качестве инструмента для сравнения текста.

После того, как вы закончите делать изменения в текстовом редакторе, вы можете вставить изменения обратно в инструмент Skin Editor и нажать на кнопку Update для обновления файла Forms6.nsf.

Изменения, не связанные с CSS

Большая часть кастомизации скинов выполняется простым изменением дефиниций CSS. Тем не менее, некоторые изменения предполагают модификацию графических элементов Forms6.nsf. Вот примеры такой кастомизации:

• Настройка баннера
• Страница приветствия
• Массив специальных цветов

Настройка баннера
См. IBM Redbook, "Domino Web Access 6.5 on Linux", где вы можете получить дополнительную информацию по кастомизации баннера в Lotus Domino Web Access.

Страница приветствия
Для настройки внешнего вида при редактировании раскладки Страницы приветствия, вы должны изменить встроенную дефиницию стиля PrefDiv в подформе s_WelcomePageEdit, как показано в таблице 1.

До	После
PrefDiv{background-color: #ceceaa;padding: 4px;margin: 1px;}	PrefDiv{background-color: #D8E0E8;padding: 4px;margin: 1px;}

Массив специальных цветов
В форме s_SessionInfo есть массив специальных цветов, который контролирует цвета различных элементов, изменяемых Lotus Domino Web Access более динамично (обновляются явно заданные стили, а новый класс не используется). Таблица 2 указывает, какой сдвиг массива контролирует какие элементы Domino Web Access.

Вам потребуется Lotus Domino Designer, чтобы выполнить изменения в форме s_SessionInfo. А именно, перейдите в раздел Forms Forms6.nsf в Lotus Domino Designer, чтобы добраться до s_SessionInfo, откройте форму и ищите "s_clr=", чтобы вы могли редактировать массив (см. рисунок 6). Не забудьте сохранить изменения, когда вы закончите редактирование.

Таблица 3 показывает, как модифицирование этого массива можете изменить цвета закладок Preferences и выпадающих меню.

До	После
s_clr="#ceceaa, #b0b096, #336699, #ffffff, #e0e0e0, #000000, #ffffff, #fcfcf0, #f6f3e2, #cc3300, tan, darktan, #999999, #f6f3e2";	s_clr="#dee3ef, #adc3d6, #336699, #ffffff, #e0e0e0, #000000, #ffffff, #fcfcf0, #f6f3e2, #cc3300, tan, darktan, #999999, #f6f3e2";
s_clr="#ceceaa,#b0b096, #336699, #ffffff, #e0e0e0, #000000, #ffffff, #fcfcf0, #f6f3e2, #cc3300, tan, darktan, #999999, #f6f3e2";	s_clr="#ceceaa, #adc3d6, #336699, #ffffff, #e0e0e0, #000000, #ffffff, #fcfcf0, #f6f3e2, #cc3300, tan, darktan, #999999, #f6f3e2";

Дополнительные соображения

При выполнении кастомизации имейте в виду, что цвет некоторых элементов на странице Domino Web Access определяется изображениями. Чтобы изменить цвет, вам нужно изменить эти изображения. Одним из примеров являются закруглённые углы алфавитных закладок в Contacts (см. рисунок 7). См. IBM Redbook, "Domino Web Access 6.5 on Linux" для получения дополнительных подробностей, как изменять изображения в Lotus Domino Web Access до Lotus Domino 7. (ПРИМЕЧАНИЕ: В Lotus Domino 7 изображения хранятся как графические элементы файловых ресурсов в Forms7.nsf, и их гораздо легче обновить.)

В Таблице 4 перечислены изображения, которые нужно модифицировать, когда вы выполняете изменения в цветовой схеме Lotus Domino Web Access.

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

Наконец, вы готовы просмотреть конечный результат. Как и в случае с любой другой кастомизацией Domino Web Access, вы должны перезапустить HTTP-сервер Lotus Domino, прежде чем сможете увидеть любые изменения. Чтобы сделать это, выполните следующие шаги:

1. В консоли сервера Domino напечатайте tell http quit, чтобы выключить HTTP-сервер.
2. Введите dbcache flush, чтобы сбросить на диск БД из кэша.
3. Запустите HTTP-сервер, введя команду load http.

После того, как вы перезапустите HTTP-сервер, вы можете увидеть результат из браузера, как показано на рисунке 8. Вам, возможно, потребуется либо очистить кэш браузера перед испытанием обновлённого файла Forms6.nsf, либо использовать Ctrl + Refresh (удерживая клавишу Ctrl, нажмите мышью на кнопку Refresh браузера), чтобы заставить браузер обновить всю информацию в кэше браузера.

Поздравляем! Вы успешно настроили вид и функции страницы Domino Web Access 6.5, изменив дефиниции CSS в файле таблицы стилей Domino Web Access.

В начало

Сильно ли отличается кастомизация скинов в Lotus Domino Web Access 7?

Ответ на этот вопрос - не слишком сильно. Концепции и инструменты, которые мы обсудили в этой статье, по-прежнему работают. Что ещё более важно, кастомизация скинов значительно улучшена в Lotus Domino Web Access 7 в том плане, что она стала более дружелюбной к разработчику. Вам больше не нужно использовать инструмент Domino Web Access Skin Editor; все скины доступны, как файловые ресурсы. В Lotus Domino Web Access 7 вы можете легко экспортировать или открыть ресурс файла скина из Lotus Domino Designer, изменить его с помощью любого текстового редактора, сохранить изменения с помощью этого внешнего инструмента, а затем обновить содержание файлового ресурса.

В начало

Соображения по миграции

Имейте в виду, что когда вы выполняете кастомизацию в Lotus Domino Web Access, она не обязательно будет работать после миграции. Непременно проанализируйте различия между оригинальным и изменённым кодом и попытайтесь выполнить аналогичные изменения в обновлённом файле Forms (Forms7.nsf), там, где это имеет смысл. Вы можете использовать утилиты для сравнения текста, что поможет вам провести плавную миграцию.

В начало

Загрузка

Информация о методах загрузки          Загрузить Adobe® Reader®

Ресурсы

Научиться

• Оригинал статьи: "IBM Lotus Domino Web Access 6.5 skin customization"
  
  
• Статья developerWorks Lotus, "Кастомизация вида и функций Domino Web Access 6.5 (Customizing the look and feel of Domino Web Access 6.5)"
  
  
• Статья developerWorks Lotus, "Управление данными в Domino Web Access (Manipulating data in Domino Web Access)"
  
  
• Статья developerWorks Lotus, "Улучшение характеристик клиента Lotus Domino Web Access (Lotus Domino Web Access client performance improvements)"
  
  
• IBM Redbook, "Domino Web Access 6.5 on Linux"
  
  

Получить продукты и технологии

• Загрузите инструмент Domino Web Access Skin Editor с Lotus Sandbox.
  
  
• Получите инструкции по установке DOM Inspector для Mozilla Firefox.
  
  
• Загрузите Internet Explorer Developer Toolbar с Microsoft.com.
  
  

Обсудить

• Примите участие в обсуждении материала на форуме.
  
  
• Посетите блоги developerWorks и примите участие в работе сообщества developerWorks.
  
  

Об авторах

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

Комментарии

В начало

Содержание

• Краткое повторение
• Инструменты
• Mozilla Firefox DOM Inspector
• Internet Explorer Developer Toolbar (Панель разработчика)
• Давайте сделаем это
• Сильно ли отличается кастомизация скинов в Lotus Domino Web Access 7?
• Соображения по миграции
• Загрузка
• Ресурсы
• Об авторах
• Комментарии