xPages. OneUI

В этой и дальнейших статьях не претендую на новизну или абсолютное и полнейшее понимание вопроса во всех аспектах. т.к. являюсь новичком в разработке с использованием xPages и Web-разработке в частности. Так уж повелось, что обладаю с части Web очень -очень базовыми знаниями. Своей задачей в серии статей по xPages - разобраться, понять, постараться изложить понятое (и там самым закрепить свое собственное понимание). Конструктивная и понятная (с учетом написанного выше) критика - приветствуется.

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

Прежде чем говорить о OneUI, стоит определиться понятием темы (theme) приложения (приложение = база данных, .nsf-файл здесь и далее по тексту). Тема - это элемент дизайна приложения, содержащий общие для всего приложения ресурсы (таблицы стилей). Тема  призвана разделить визуальную и функциональную часть приложения, стандартизировать пользовательский интерфейс. Могут быть унаследованы от других тем. Тема в целом - набор каскадных таблиц стилей (CSS). Тема применяется глобально к приложению и может быть установлена в свойствах приложения, как показано ниже:

В Designer'е

Закладка xPages

Выбор темы для приложения. Доступные темы (кроме Server default) отображаются
из тех, которые есть в Resource -> Themes при просмотре структуры приложения

Итак, что же такое OneUI? Пожалуй, самое простое и, как показывает практика, правильное определение OneUI - это тема, определяющая интерфейсную структуру xPages-приложения, такой как ее понимает IBM. Проще говоря - это разметка страницы при помощи неких шаблонных элементов дизайна, которые, по мнению IBM, должны присутствовать в приложении. Это достаточно гибкая к изменениям структура. Удобно, что в части Web-приложений OneUI обходит некоторые узкие места в различных браузерах, что бы разработчик не задумывался о них и приложение выглядело более-менее одинаково в любом браузере. Не нужно заботиться о ее наличии - тема лежит на сервере (если не ошибаюсь, для версий 8.5 +). 

На данный момент OneUI насчитывает 3 версии: 1, 2 и 2.1. Темы называются соотв.: oneui, oneuiv2, oneuiv2.1. Для версий 2 и 2.1 общий вид их структуры можно посмотреть по ссылкам: OneUI v.2, OneUI v.2.1 - вид 1-йо версии на рисунке ниже:

OneUI. На нашел общий вид фреймворка, накидал набросок сам
с базовым применения стилей

Хотя большой структурной разницы между 2 и 2.1 вы не заметите, стоит взглянуть на примеры с применением стандартных тем версии OneUI 2 и OneUI 2.1.

Тема состоит из множества классов. Часть задает общую структуру приложения, другие применяются к конкретным объектам на xPage или Custom Control, дабы придать им соответствующий вид. Забегая вперед: через пробел можно применить более чем один класс к объекту. Классы, задающие структуру, "лежат" не абстрактно, а так же применяются к объектам разметки - div. Вообще говоря вся базовая структура объектов задается через div и span.

От теории к практике. 

Задача. Как применить OneUI тему к xPages-приложению и создать шаблонную страницу с разметкой, которую можно было бы развивать далее.

1. Создаем новую тему (для возможности дальнейшего расширения):

- Resources, Themes, "New Theme"

Создаем новую тему

- В атрибуте extends вершины theme пишем oneui

- Применяем тему к приложению (чуть выше было описано как это делать)

- Создаем новый xPage и описываем структуру страницы при помощи тега div и применяем к ним соотв. стилевые классы:

<div class="lotusFrame">
<div class="lotusBanner">Верхний колонтитул</div>
<div class="lotusTitleBar">Строка заголовка</div>
<div class="lotusPlaceBar">Строка положения</div>
<div class="lotusMain">
<div class="lotusColLeft">Левая колонка</div>
<div class="lotusContent">Основной содержание</div>
</div>
<div class="lotusFooter">Нижний колонтитул</div>
</div>
- Меню, Project -> Build All, далее открываем приложение или F5 на странице в браузере что бы его обновить.
Примечание: советуют ставить галку Project -> Build Automatically. На практике убедился, что вес же лучше перестраивать проект вручную через Build All - надежнее.

Литература и советы.

Эта статья ооочень кратко и ооочень обзорно раскрывает возможности и лишь примерно показывает практические применение CSS, в частности OneUI (которым советую пользоваться при разработке xPages-приложений).

1. Мое личное первичное понимание было получено после выполнения на практике серии "уроков" от Declan Sciolla-Lynch, размещенных в его блоге Learning xPages. Очень советую начать с него, получите знания не только относительно OneUI, но и разработке на xPages. Большущий, огроменный респект этому человеку за проделанную работу.

2. Отличная презентация с определениями и некоторыми выкладками по кастомизации OneUI: XPages Workshop: Customizing OneUI

3. Краткая статья по OneUI и структура приложения для OneUI v2: Getting close with IBM OneUI

Для дальнейшего постижения и использования OneUI:

4. Полная документация по OneUI v2 от IBM

5. Полная документация по OneUI v2.1 от IBM

Советую изначально почитать 2 и 3 пункты, затем выполнить 1 и опять вернуться к 2, 3 с некоторым практическим понимаем. Для дальнейшей работы использовать 4, 5.

Контакты: