Разработка клиентского приложения Web 2.0 для Lotus Domino

Создайте тонкий Web-клиент в стиле Web 2.0 для Lotus Domino, используя HTML и JavaScript. В данной статье рассматривается вопрос расширения приложения Notes/Domino с использованием Ajax.

Радж Баласубраманиан, IT-разработчик, консультант, IBM

Радж Баласубраманиан (Raj Balasubramanian) работает IT-разработчиком и консультантом IBM Software Group в отделе Enterprise Integration Solutions. Он контактирует с пользователями, предоставляя приложения и проекты, связанные с инфраструктурой. Когда Радж не работает с пользователям и не читает книги по математике, он проводит время в разговорах о роботах и новом марсоходе со своим сыном. Он также поддерживает персональный блог Gurukulam на http://balasubramanians.com/blog.



06.03.2007

В статье "Пользовательская интегрированная среда DXL для доступа к данным Notes/Domino" мы познакомили вас со средой Lotus Domino XML (DXL). Из этой статьи вы узнали, как использовать интегрированную среду DXL для разрешения другим приложениям создавать, просматривать и обновлять документы Notes. Затем, при помощи трех LotusScript-агентов, вы научились просматривать DXL-документ, создавать документ из DXL и обновлять документ из DXL.

В другой статье "Создание порталов JSR 168 для Domino" вы узнали, как создавать интерфейсные приложения (frontend) для базы данных Notes/Domino, используя портлеты JSR 168 (Java Specification Requests).

Продолжая нашу экскурсию по интегрированной среде Lotus Domino DXL, данная статья рассматривает процесс создания "тонкого" клиента в стиле Web 2.0 для базы данных Lotus Notes/Domino Contacts. Мы используем простой HTML-файл, содержащий конструкции CSS/JavaScript и размещаемый на сервере Domino, для доступа к базе данных Domino с использованием технологии Ajax, но для создания этого клиента в стиле Web 2.0 мы также используем некоторые элементы из предыдущих статей.

В данной статье предполагается, что вы являетесь квалифицированным разработчиком приложений Notes/Domino и знакомым с JavaScript.

Что такое Web 2.0?

Термин Web 2.0 был впервые представлен Тимом О'Рейли (Tim O'Reilly) на конференции в 2005. Этот термин представляет Web-приложения следующего поколения, созданные на проверенных принципах Web-проектирования и использующие простоту HTTP. Некоторыми типичными приложениями Web 2.0 являются Google AdSense, Flickr и блоги. С тех пор этот термин был обобщен, сформировав систему из концепций и тенденций, характеризующих стиль Web-приложений. Основной предпосылкой является то, что эти Web-приложения используют Internet в качестве рабочей платформы и отображают функциональность в виде служб, подключаемых по запросу пользователя или других приложений (другими словами, эти приложения являются потребителями служб) для предоставления пользователю осмысленного и полнофункционального приложения. Технологиями и концепциями, поддерживающими стиль Web 2.0, являются:

  • Последнее поколение Web-браузеров (Mozilla Firefox, Microsoft Internet Explorer 7 и т.д.)
  • AJAX
  • JavaScript
  • DHTML
  • REST (REpresentational State Transfer, архитектурный стиль, на котором основан и сам Web)

JavaScript

C ростом популярности приложений в стиле Web 2.0, JavaScript занял центральное место. Поскольку JavaScript является гибким языком сценариев и понимаем практически всеми Web-браузерами, он может быть расширен на применение объектно-ориентированных конструкций и может использоваться для создания сложных Web-приложений. Мы используем JavaScript-функции как объекты, как методы и как традиционные процедурные функции. Вы узнаете, как реализовать шаблон MVC (Model View Controller - модель, представление, контроллер) на JavaScript в простом HTML-файле.


О приложении

Клиент Web 2.0 для Lotus Domino состоит из одного HTML-файла и поддерживает сценарии, изображения и таблицу стилей. Приложение лучше всего просматривать через Mozilla Firefox. Для целей данной статьи мы используем Firefox в качестве нашего браузера.

На рисунке 1 показана главная страница приложения. Это первый экран, который видит пользователь после открытия клиента Web 2.0 в своем браузере.

Рисунок 1. Клиент Web 2.0 для Lotus Domino
Рисунок 1. Клиент Web 2.0 для Lotus Domino

Вы можете нажать ссылку Read Documents или Create Documents. После нажатия Read Documents отображается экран, аналогичный показанному на рисунке 2. В нашем примере мы отображаем имя и адрес электронной почты из базы данных Contacts (база данных основана на шаблоне Lotus Notes Personal Address Book).

Рисунок 2. Вид Read Documents
Рисунок 2. Вид Read Documents

Здесь вы можете нажать Create Document или нажать на одну из записей для просмотра более подробной информации. Давайте нажмем на первую запись в виде. На рисунке 3 показаны отображающиеся ключевые поля документа из базы данных Contacts.

Рисунок 3. Контактная информация
Рисунок 3. Контактная информация

Есть минимальный навигационный вид, предоставляемый в левой части со списком имен. Вы можете выбрать одну из записей в этом виде для просмотра подробной информации по этому документу, либо вы можете отредактировать отображающийся документ, нажав пиктограмму Edit. Затем вы можете изменить документ и нажать пиктограмму Save для сохранения изменений. Вы всегда можете отменить ваши изменения, нажав кнопку Close, или выбрав любую другую ссылку.

Если вы хотите создать документ, нажмите пиктограмму Create Document в меню. Отобразится пустая форма (см. рисунок 4). Затем вы можете ввести необходимую информацию и нажать Save для создания нового документа.

Рисунок 4. Создание документа с контактной информацией
Рисунок 4. Создание документа с контактной информацией

Файлы в приложении

Клиент Web 2.0 для Lotus Domino выполнен в виде одной HTML-страницы, поддерживающей JavaScript-файлы для выполнения различных действий, указываемых пользователем. Экран управляется вложенной таблицей стилей (cascading style sheet - CSS) и изображениями. На рисунке 5 показаны взаимоотношения между различными файлами. Файл dxl.html является простым HTML-файлом, использующим style.css для форматирования отображаемого содержимого и файлы dojo.js, controller.js и model.js для выполнения задач.

Рисунок 5. Взаимоотношения между файлами
Рисунок 5. Взаимоотношения между файлами

Все эти файлы расположены в одном подкаталоге web2.0 каталога ...data/domino/html. Используемый нами сервер Domino V7.0.1 работает на Microsoft Windows XP. Сервер поддерживает базовую Web-аутентификацию для нашего приложения. Если вы хотите разрешить аутентификацию, основанную на сессиях, в приведенном ниже разделе "Будущее" узнайте о необходимых шагах для получения работающего таким образом приложения.

Кроме всего этого, мы используем DXL-агенты из статьи "Пользовательская интегрированная среда DXL для доступа к данным Notes/Domino" и импортируем их в базу данных Contacts.

Принципы проектирования

Поскольку JavaScript изначально приспособлен для процедурного стиля программирования, вы можете использовать традиционные методы построения различных функций, необходимых для создания вашего приложения. Однако его будет не очень легко обслуживать. Следовательно, вы хотите создать приложение так, как-будто вы создаете трехуровневое Web-приложение, использующее ваш любимый сервер Web-приложений (J2EE, Microsoft .NET, PHP и т.д.). Это подразумевает, что вам требуется реализация разделения интересов и группирования аналогичных вызовов внутри развертываемого модуля. По существу, вы можете достичь этих целей, применяя для вашего "тонкого" Web-приложения принципы проектирования Model View Controller (модель-представление-контроллер).

Вы также хотите придерживаться принципа DRY (Don't repeat yourself - не повторяй себя) настолько максимально, насколько это возможно. Для выполнения этого принципа вы используете JavaScript-функциональность замыкания (closures), которая позволяет вам рассматривать функцию как данные для создания классов и объектов. Вы можете затем определить классы и объекты во многом аналогично тому, как мы делали это в нашем примере портлета JSR-168 (см. статью "Создание портала JSR 168 для Domino").


Покажите мне проект

Теперь давайте рассмотрим, как вы можете использовать MVC для создания простого Web-приложения. На рисунке 6 показаны релевантные объекты, предоставляемые ими методы и модули развертывания, которым они принадлежат.

Представление (view) управляется главной Web-страницей (dxl.html); она также имеет вспомогательные (helper) функции и глобальные переменные для хранения информации. Основными компонентами представления являются:

  • Класс Menu. Отображает элементы меню Read/Create Documents.
  • Класс mainView. Управляет экраном информации Domino-вида в табличном формате.
  • Класс miniView. Управляет экраном навигационного вида для быстрого доступа к документам в режиме отображения документа.
  • Класс doc. Управляет экраном информации Domino-документа и обеспечивает параметры для редактирования, создания и сохранения.

Модель управляется кодом, находящимся в JavaScript-файле model.js. Основными классами, определенными в нем, являются people (хранит информацию из Domino-вида) и person (хранит информацию о Domino-документе contact).

Контроллер управляется JavaScript-файлом controller.js и содержит несколько методов и атрибутов для выполнения своей работы. Основным методом этого класса является метод action, который управляет отображением соответствующей информации в виде на основе действия, выполненного пользователем. Класс controller обращается также к соответствующему Domino-ресурсу, используя Ajax-запросы, заполняет соответствующий объект модели и передает его в вид для отображения. Вид в свою очередь инициализирует экземпляр контролера и делегирует ему все действия и решения.

ПРИМЕЧАНИЕ: В идеальном случае вы могли бы выделить логику доступа к данным в свой собственный модуль развертывания и обеспечить "чистоту" контроллера. Однако ради простоты мы скомбинировали их. В качестве домашнего задания вы можете выполнить рефакторинг кода для изолирования функций доступа к данным в отдельном файле.

Рисунок 6. Дизайн
Рисунок 6. Дизайн

Процесс выполнения некоторых типичных действий показан на рисунке 7.

Рисунок 7. Диаграмма последовательности
Рисунок 7. Диаграмма последовательности

Покажите мне код

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

Ссылка на внешние JS-файлы в определенном порядке

Прежде всего, файл dxl.html загружает JavaScript-файлы в порядке приоритета:

<script type="text/javascript" src="controller.js"></script>
<script type="text/javascript" src="model.js"></script>
<script type="text/javascript" src="dojo.js"></script>

Установка ключевых глобальных переменных

Затем приложение создает экземпляр объекта controller со спецификатором global. Это основа вашей разработки, поскольку каждое действие, выполняемое пользователем, передается этому контроллеру для обработки. Приложение также устанавливает другие глобальные переменные для служебных целей, например, для обнаружения изменений значений в полях. Код передает строковое значение того, как к элементу управления реализовано обращения на этой локальной Web-странице, для того чтобы объект controller мог обратиться к нему при отображении объектов вида.

<script language="JAVASCRIPT">
var html_control = new control("html_control");

Инкапсуляция компонентов представления как JavaScript-объектов

Компоненты представления, реализованные в виде JavaScript-объектов, инициализируются объектом controller. Объекты вида/представления принимают ссылку на имя объекта controller, который вы создали на предыдущем шаге ("html_control").

function mainView(ob,controller){
 ....
 this.show=function(...){

 };
 this.hide=function(...){
 ...
 };
}
function miniView(ob,controller){
...
..
}
function doc(ob,controller){
...
..
}

Экземпляры компонентов представления создаются объектом control, расположенным в controller.js.

function control(str){
...
 this.mainview = new mainView(this.ob,this);
 this.doc = new doc(this.ob,this);
 this.miniview = new miniView(this.ob,this);
...
}

Использование DOM браузера для хранения контекста элементов

Используйте теги <div> для всех активных элементов. Вы используете доступные DOM-атрибуты для хранения контекста и передаете его как часть действия, выполняемого пользователем. В нашем примере мы определили UNIDs документа в качестве значения атрибута name для хранения контекста элемента.

<tr><td><a href="#" id="display_doc" name="'
+u.unids[x]+'" onclick="'+controller.varname+'
.action(this)">'+u.names[x]+'</a></td></tr>';

Передача всех действий из вида в контроллер

Любая ссылка или активная функциональность в вашем Web-приложении посылается в контроллер с передачей ссылки на себя.

<!--пиктограмма предыдущего вида на странице вида -->
<input type="image" src="prev.gif" id="view_prev" 
onclick="'+controller.varname+'.action(this)"/>';
<!-- ссылка в виде для отображения подробной информации о документе-->

<a href="#" id="display_doc" name="'+u.unids[x]+'" 
onclick="'+controller.varname+'.action(this)">'
+u.names[x]+'</a>

Принятие всех решений на основе действия и контекста, централизация всей логики в контроллере

Основная логика работы при выполнении действия инкапсулирована в JavaScript-функции action как части объекта control. Выражение switch/case используется для делегирования соответствующих функций.

function control(str){
....
..
 this.action = function(u){
  if(u.id==''){u.id='menu_read';};
  switch(u.id){
   case("menu_read"):
    {
     this.menu.move();
     this.startdoc='1';
     this.serialize(this.viewurl
(this.startdoc,this.displaycount),
this.showMainView, this.mainview);
     this.miniview.hide();
    }
   break;
   case("display_doc"):
    {
	// получить детальную информацию о doc и выполнить перенаправление  
	// на соответствующий экран
    ...
    }
   break;
   case("view_prev"):
    {
	// получить следующий набор записей вида  
	// и отобразить его на экране
    ...
    }
   break;
   ... 
  ... 
 };
}

Определение повторно используемых объектов для описания Notes-вида и Notes-документа

Файл model.js содержит два объекта, реализованных как JavaScript-функции: person для документа и people для вида. Представление (dxl.html) управляет только этими доменными объектами. Именно контроллер (функция control) ответственен за сериализацию XML/DXL из Domino-сервера в соответствующий объект и наоборот.

//People
function people(){
 this.unids=[];
 this.names=[];
 this.emails=[];
}

//Person
function person(){
 this.firstname='';
 this.lastname='';
 this.officecity='';
 this.officestate='';
 this.unid='';
 this.jobtitle='';
 this.companyname='';
 this.mailaddress='';
}

Делегирование Ajax-вызовов в библиотеку или набор инструментальных средств

Вместо реализации своих собственных элементов управления Ajax мы используем набор инструментальных средств Dojo [http://dojotoolkit.org/]. Эти вызовы инкапсулированы в JavaScript-функциях, которые подключены как часть объекта control.

this.serialize =function(url, fn, fn1){
  dojo.io.bind({url: url,
    load: function(type,data,evt){fn(data, fn1);},
    error: function(type,error){alert
    ("reached in error"+error.toSource());},
    mimetype: "text/xml"
  });
};

Здесь вы передаете другие JavaScript-функции в качестве параметров в метод serialize, который затем устанавливает их для вызова при изменении состояния. В предыдущем фрагменте кода после завершения загрузки на возвращенный из сервера XML ссылается объект data, который посылается как параметр в первоначально переданную функцию. Это само по себе подходит для повторного использования. Вы можете использовать такой же метод сериализации для показа содержимого в главном виде (который отображает два столбца - name и email), а так же для показа минимального навигационного вида, используемого для доступа к документам при просмотре подробной информации документа.


Система защиты

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


Развертывание на вашем сервере и тестирование

Используйте следующие советы для развертывания клиента Web 2.0 на вашем сервере Lotus Domino 7:

  • Создайте рабочую базу данных Contacts на основе шаблона Notes Personal Address Book.
  • Убедитесь, что ACL настроен на разрешение тестирующему пользователю создавать/изменять документы и читать виды.
  • Установите LotusScript-агенты, рассмотренные в первой статье, и проверьте, что они подписаны авторизованным Agent Signer.
  • Разархивируйте файлы, поставляемые с данной статьей, в каталог ...data/domino/html. Убедитесь, что файлы расположены в подкаталоге web2.0 каталога html.
  • Откройте файл controller.js и измените переменную this.dominourl в функции control на соответствующий URL вашего сервера Domino.

    ПРИМЕЧАНИЕ: Если у вас включена для Web-регистрации аутентификация, основанная на сессиях, вы должны указывать корректное полное имя хоста как часть строки. Также вы должны указывать соответствующее значение порта, если ваш сервер Domino использует порт, отличный от 80.
  • Установите защиту файлов только что созданного каталога web2.0. На закладке Basics документа File Protection подтвердите параметры по умолчанию и измените список контроля доступа (access control list) для гарантирования того, что каталог domino/html/web2.0 указан как Path. На закладке Access Control проверьте, что "Current access control list" включает No Access for Anonymous и POST and Get for Default (см. рисунок 8).
Рисунок 8. Закладка Access Control
Рисунок 8. Закладка Access Control

Это все. Теперь вы можете протестировать приложение. Выполните следующие действия:

  • Откройте Mozilla Firefox.
  • Обратитесь к URL: http://your dominourl/web2.0/dxl.html.
  • После входа в систему вы должны иметь возможность обратиться к приложению.

Адаптация к вашему собственному приложению Domino

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

  • Измените объекты models в model.js для отображения предметной области, представляемой вашим приложением. Например, предположим, что приложение представляет собой систему подачи заказов. Если у вас есть Domino-вид, отображающий заказы, и если документы называются order detail (детали заказа), то вы можете иметь объект collection с названием Orders и объект document с названием OrderDetails.
  • Измените управляющий код в controller.js на соответствующие URL, а также отображение столбцов вида, которые вы хотите отображать в функциях showMainView и showMiniView.
  • Наконец, измените объекты mainView, miniView и doc в файле dxl.html для соответствия полям объектов models из первой рекомендации.

Заключение

Вы узнали, как использовать интегрированную среду DXL, с которой вы познакомились в первой статье, чтобы создавать приложения в стиле Web 2.0 для доступа к базе данных Domino. Вы можете сделать представление более изощренным при помощи UI-элементов набора инструментальных средств Dojo или любых других DHTML-средств. Вы также узнали, как создать Web-приложение, используя шаблоны проектирования для разделения интересов и улучшения возможности повторного использования. Вы можете подробно исследовать код и адаптировать это приложение к базе данных discussion или другому Domino-приложению, изменив файлы model.js, controller.js и dxl.html.


Загрузка

ОписаниеИмяРазмер
Пример сценариев для данной статьиweb20.zip45 KB

Ресурсы

Научиться

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

Обсудить

Комментарии

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=Lotus, XML
ArticleID=200233
ArticleTitle=Разработка клиентского приложения Web 2.0 для Lotus Domino
publish-date=03062007