Отображение корпоративных данных на динамических HTML-страницах с помощью IBM Mashup Center

Генерирование содержимого из корпоративных источников данных для использования в мэшапах

Платформа IBM® Mashup Center поставляется с виджетами для отображения данных в различных форматах, например, в виде таблиц, графиков или карт. Эти виджеты позволяют очень быстро компоновать страницу, но обычно имеют ограниченный набор возможностей по настройке, ограничивающийся размером шрифта, выравниванием и цветом текста. IBM Mashup Center V3 поддерживает генерирование любого XML-файла непосредственно из корпоративных источников данных, что дает более широкие возможности контроля. Узнайте, как сгенерировать HTML (XHTML, поскольку фид правильно отформатирован) для более выразительного представления данных, используя интерфейс Data Mashup Builder платформы IBM Mashup Center. Кроме того, в статье описывается простой виджет, способный отображать произвольный HTML-код и перехватывать нажатия кнопок мыши для активизации событий, которые могут быть связаны с другими виджетами.

Луиc Мау, архитектор решений, IBM

Луиc Мау (Louis Mau) является членом группы разработки InfoSphere MashupHub. В настоящее время занимается оказанием помощи клиентам в создании ситуационных приложений, использующих IBM Mashup Center. До этого занимался разработкой сервера DB2 Everyplace Sync Server, который помогает синхронизировать данные корпоративных баз данных с небольшими базами данных, работающими на мобильных устройствах.



Раджеш Картха, инженер-программист, IBM

Раджеш Картха (Rajesh Kartha) работает архитектором решений группы IBM Cloudscape Group в IBM Silicon Valley Lab, Сан Хосе. Имеет обширный опыт разработки ПО с использованием различных продуктов IBM Information Management.



16.08.2012

Обзор

IBM Mashup Center поставляется с набором виджетов для быстрой визуализации данных. Эти виджеты предоставляют стандартные возможности настройки, такие как размер шрифта, выравнивание и цвет текста. Предполагается, что при наличии специфичных требований к представлению данных и взаимодействиям пользователи будут разрабатывать специализированные виджеты. Разработка специализированного виджета – это работа по программированию, требующая знаний JavaScript, клиентского интерфейса IBM Mashup Center Widget и, возможно, Dojo или другого стороннего JavaScript-пакета. Такая разработка может потребовать неоправданно больших усилий или оказаться недоступной из-за отсутствия специалистов нужной квалификации. В ситуациях, когда уникальное представление данных можно реализовать посредством статического HTML и CSS, не используя динамический JavaScript, альтернативным подходом является генерирование HTML непосредственно из корпоративных источников данных при помощи интерфейса Data Mashup Builder платформы IBM Mashup Center.

IBM Mashup Center включает в себя InfoSphere MashupHub и Lotus® Mashups.

В данной статье вы узнаете, как использовать Data Mashup Builder для генерирования HTML-документов (совместимых с XML), которые можно отображать при помощи готового виджета Website Displayer или в браузере. Применяя к этим HTML-документам CSS, можно создавать уникальные визуальные представления. В статье также описывается простой виджет, способный отображать произвольный HTML-код и перехватывать нажатия кнопок мышки для активизации событий, которые могут быть связаны с другими виджетами.

В данной статье предполагается, что вы знакомы с основами использования IBM Mashup Center для создания мэшапов и фидов. В частности, для работы с первой частью данной статьи вы должны иметь опыт работы с интерфейсом Data Mashup Builder платформы IBM Mashup Center. В разделе Ресурсы размещена ссылка на статью "Создание фида из корпоративной базы данных (JDBC)", которая поможет вам освоить процесс компоновки мэшапов. Для работы с разделом, описывающим создание специализированного виджета, вы должны уметь программировать на JavaScript и знать основы написания виджетов. Ссылки на дополнительную полезную информацию приведены в разделе Ресурсы.


Интерфейс Data Mashup Builder платформы IBM Mashup Center

В последней версии интерфейса Data Mashup Builder платформы IBM Mashup Center V3 появился ряд существенных новых функциональных возможностей:

  • Поддержка объявления пространства имен – пространство имен (namespace) часто используется в XML-документах для определения словаря разметки, составленного различными организациями. Начиная с версии V3 оператор Transform в Mashup Builder поддерживает управление объявлением пространства имен. Объявление пространства имен можно создавать, изменять и удалять из любого элемента, а элемент можно назначить любому пространству имен, доступному в его области видимости.
  • Способность управлять заголовком фида – объявление и атрибуты пространства имен можно добавлять в корневой элемент. В корневой элемент также можно добавлять дополнительные элементы в качестве узлов одного уровня или в качестве предков повторяющихся элементов. Фактически в оператор Publish можно импортировать готовый XML-фрагмент с описанием верхнего и нижнего колонтитулов для включения в выходной документ.
  • Возможность указывать MIME-тип в операторе Publish – браузеры используют MIME-тип для определения используемой программы и способа отображения принимаемого содержимого. Например: text/xml, text/html, application/xml, application/rss+xml image/svg+xml, application/atom+xml, application/vnd.google-earth.kml+xml и т.д.

Генерирование HTML при помощи Data Mashup Builder

IBM Mashup Center имеет богатый набор генераторов фидов, которые могут извлекать информацию из корпоративных источников данных в формат ATOM. При помощи Data Mashup Builder можно преобразовать эти фиды в другие стандартные формы, например, ATOM, JSON или даже в специализированную XML-структуру с соответствующим MIME-типом. В частности, после преобразования в HTML корпоративные данные можно отображать в готовом виджете Website Displayer. Пользователи могут использовать всю мощь технологий HTML и CSS для создания уникальных визуализаций, не ограничивая себя схемой или внешним видом любого конкретного виджета.

Мы проиллюстрируем процесс генерирования HTML на простом примере. Для упрощения задачи мы будем использовать пример фида "MyCo Customer List", поставляемый вместе с продуктом. Мы преобразуем ATOM-фид в HTML-таблицу. На следующем рисунке показано, как этот пример визуализируется в виджете Website Displayer.

Рисунок 1. MyCo Customer List в виде HTML-таблицы
MyCo Customer List в виде HTML-таблицы

Для создания такой HTML-страницы используется простой мэшап.

Рисунок 2. Простой мэшап для HTML-преобразования
Простой мэшап для HTML-преобразования

Итак, мы используем оператор Source (Источник) для загрузки фида данных в редактор. Затем подключаем оператор Source к оператору Transform (Преобразование). Для преобразования каждой записи из фида источника входных данных в строку HTML-таблицы:

  • Создайте соответствующий элемент <tr> для строки как родительский узел.
  • Создайте все элементы <td> для значений столбцов или ячеек как дочерние узлы элемента <tr> в правом дереве оператора Transform.
  • Для первого элемента <td>, соответствующего названию компании, создайте дочерний элемент <a> с атрибутом href и скопируйте текстовое значение элемента <URL> из левого дерева в атрибут href. Это позволит указать гиперссылку для названия компании.
  • Скопируйте соответствующие текстовые значения из левого дерева в каждый из элементов <td>.
Рисунок 3. Оператор Transform в мэшапе для HTML-преобразования
Оператор Transform в мэшапе для HTML-преобразования

Выходные данные из Transform соединяются с оператором Publish (Публикация), в котором выполняется основная часть настройки визуализации:

  • Выберите вариант Custom Header, в ниспадающем списке поля Feed type выберите Custom MIME type и в качестве MIME-типа выберите text/html.
  • В разделе Header Template щелкните правой кнопкой мыши на корневом элементе и выберите Set Template Tree для указания специализированного шаблона.
Рисунок 4. Оператор Publish в мэшапе для HTML-преобразования
Оператор Publish в мэшапе для HTML-преобразования
  • В операторе Publish можно указать шаблон. Шаблон можно cгенерировать при помощи любого стандартного средства HTML-разработки. Ссылка на HTML-шаблон, который используется в данном примере, приведена в разделе Загрузка. Добавляемый шаблон выглядит следующим образом.
Листинг 1. Шаблон заголовка для генерирования HTML-фида
<html>
	<head>
		<style>
			table { 
				background:#FFFFFF;
				border:1px solid gray;
			...
			...
			.description{
				font:bold 11px verdana;
			} 
			p {
				white-space:normal;
			} 	
		</style>
	</head>
	<body>
	<div class="content">
	  MyCo Customer List:
	</div>
	<div class="description">Here is the transformed MyCo Customer list sample feed 
	presented in a CSS formatted HTML Table using a data mashup:
	</div>
		<table>
			<caption>My Customer List</caption>
			<th>Customer</th>
			...
		</table>
	</body>
</html>
  • Добавьте этот HTML-шаблон в область Set Template Tree и нажмите кнопку OK в последующих диалоговых окнах. HTML-шаблон визуализируется в виде дерева, что позволяет изменять его, например, добавлять новые дочерние элементы, атрибуты, пространства имен и т.д., а также добавлять нужные элементы из оператора Upstream.
  • Включите реальные данные, предоставляемые предыдущим оператором, в элемент <table>. Для этого щелкните правой кнопкой мыши на элементе <table> и выберите Attach repeating element.
Рисунок 5. Включение повторяющегося элемента в оператор Publish
Включение повторяющегося элемента в оператор Publish
  • В диалоговом окне Attach Repeating Element выберите элемент <tr>, содержащий выходные данные, поступающие от предыдущего оператора Transform, и нажмите кнопку Attach.
Рисунок 6. Выбор <tr> для включения в качестве повторяющегося элемента
Выбор <tr> для включения в качестве повторяющегося элемента
  • Теперь элемент <tr> становится дочерним элементом элемента <table>, что и требовалось.
  • Сохраните мэшап и выполните его, чтобы убедиться, что выходные данные выглядят так, как ожидалось, т.е. представляют собой правильно отформатированную HTML-таблицу.

Этот мэшап-фид можно использовать непосредственно в виджете Website Displayer. Просто выберите Edit Settings для виджета и укажите URL. Внешний вид таблицы можно изменить путем модификации CSS в HTML-шаблоне. Рекомендуется разделять представление и логику преобразования данных. Если нужно преобразовать, сгруппировать или дополнить корпоративные данные, эти операции следует выполнять в отдельном мэшапе. Затем результат можно преобразовать в HTML, используя другой мэшап. Такое разделение облегчает изменение представления при изменении требований.


Простой виджет для добавления поддержки обработки событий

До сих пор мы использовали только Data Mashup Builder. Все это хорошо, если нужно просто получить уникальное визуальное представление. Но если мы хотим сгенерировать HTML-содержимое, способное взаимодействовать с другими виджетами на странице, нужна помощь специального виджета. В данном разделе мы рассмотрим процесс создания виджета, который:

  • Может отображать произвольные HTML-фрагменты точно так же, как и готовый виджет HTML-разметки.
  • Используя специальный атрибут, реализует генерирование произвольными HTML-элементами событий iWidget при нажатии кнопки мыши.

Как говорилось в разделе Обзор, вы должны быть знакомы с файлом определения виджета и основами написания iWidget. Ниже мы лишь кратко опишем наш виджет. Поскольку наш виджет перехватывает нажатия кнопок мыши и преобразовывает их в события iWidget, мы назовем его HTMLEvent. Начнем с анализа файла iWidget, приведенного в листинге 2.

Листинг 2. Фрагмент файла iwidget.xml
<iw:iwidget name="sample.mashupcenter.HTMLEvent"
            xmlns:iw="http://www.ibm.com/xmlns/prod/iWidget" 
            allowInstanceContent="true"
            supportedModes="view edit"
            mode="view" 
            iScope="sample.mashupcenter.HTMLEvent">

<iw:resource uri="HTMLEvent.js" />

<iw:event id="HtmlUrl" eventDescName="HtmlUrlDesc"
           handled="true" onEvent="handleHtmlUrl" />  
   <iw:eventDescription  id="HtmlUrlDesc" payloadType="text"
                          description="Url to retrieve HTML fragment" lang="en" > 
</iw:eventDescription>

<iw:content mode="view">
<![CDATA[
    <div  id="_IWID_HtmlArea"></div>
]]>
</iw:content>

Некоторые замечания по содержимому iwidget.xml:

  1. Атрибут iScope элемента iWidget определяет имя класса JavaScript Dojo, реализующего виджет.
  2. Элемент iresource указывает JavaScript-файл, который содержит JavaScript-реализацию и должен быть загружен до создания экземпляра виджета.
  3. Заметьте, что мы определяем только одно событие receive для изменения URL и не определяем события send. Они динамически создаются позднее и указываются в HTML-фрагменте. Позже мы обсудим это подробнее.
  4. Элемент content с атрибутом mode, установленным в значение view, определяет HTML, отображаемый в режиме просмотра. Он очень прост и содержит пустой тег div. Отметим, что он имеет атрибут id, состоящий из строки _IWID_HtmlArea. Специальный префикс _IWID_ будет замещаться реальным идентификатором экземпляра виджета, генерируемым инфраструктурой при создании экземпляра виджета. Реальное содержимое для отображения будет поступать из входного фида, который, как предполагается, содержит HTML-фрагмент.

Чтобы указать виджету, где перехватывать события нажатия кнопок мыши, добавьте атрибут MCEVENTonclick="eventName" к любому элементу в HTML-фрагменте, который будет реагировать на нажатия кнопок мыши. Значение eventName будет заменено текстовым значением, применяемым для генерирования названий событий, которые появляются в диалоговом окне связей виджета. Как показано в листинге 3, предварительную обработку HTML-фрагмента и поиск всех экземпляров этих атрибутов выполняет функция обратного вызова _cbHtmlReceived в виджете. Значения этих атрибутов извлекаются и сохраняются в объекте newEvents, который используется при динамической регистрации событий Send. После регистрации эти объекты будут появляться на вкладке Send tab диалогового окна связей. Затем вызывается функция _insertOnclick с входным HTML-фрагментом, строкой атрибутов и названием события. (Последний параметр избыточен, поскольку уже включен в строку атрибутов.)

Листинг 3. Тело функции _cbHtmlReceived
var  newEvents = {};
var  beg = strHtml.indexOf( "MCEVENTonclick=" );
var  len = 14 + 1; // длина "MCEVENTonclick="
while ( beg > 0 ) {
    var  quote = strHtml.charAt( beg + len );
    var  end   = strHtml.indexOf( quote, beg + len + 1 );
    var  name  = strHtml.substring( beg + len + 1, end );
    newEvents[ name ] = true;
    strHtml = this._insertOnclick( strHtml, strHtml.substring(beg,end+1), name );

    beg = strHtml.indexOf( "MCEVENTonclick=" );
}

this.updateDynamicEvents( newEvents );

this.htmlFragment = strHtml;
var node = dojo.byId(this.uid + "HtmlArea" );
node.innerHTML = this.htmlFragment;

Функция _insertOnclick, полностью приведенная в листинге 4, очень проста. Для заданного eventName она при помощи средств поддержки регулярных выражений JavaScript заменяет все вхождения MCEVENTonclick="eventName" на DOM-атрибутом onclick, указывающим сценарий, который должен выполняться при нажатии кнопки мыши на этом HTML-элементе. Сценарий должен вызывать нашу функцию handleOnclick с eventName в качестве параметра, для того чтобы виджет мог сгенерировать событие iWidget для указанного имени. Точнее, поскольку на одной Web-странице может находиться несколько экземпляров этого виджета, нам необходимо вызывать функцию handleOnclick из экземпляра this. Для обнаружения этого экземпляра iWidget добавьте к iContext в качестве префикса идентификатор виджета, содержащийся в переменной this.uid, и вызовите функцию iScope. Идентификатор виджета инициализируется в функции onLoad. Эти и другие подробности можно узнать, изучив JavaScript-файл реализации виджета, ссылка на который приведена в разделе Загрузка.

Листинг 4. Тело функции _insertOnclick
_insertOnclick: function( strHtml, srchString, eventName )
{
    this.debugTrace( "_insertOnclick srchString,event=" + srchString + "," + eventName ); 

    var rexp  = new RegExp(srchString, "g");  // глобальная 
    // Внимание: используется переключение между одинарными и двойными
    // кавычками для строк.

    var sTo   = " onclick='JavaScript: "
              + this.uid + 'iContext.iScope().handleOnclick( "'
              + eventName
              + '", this );'
              + "return false;' ";
    var result = strHtml.replace( rexp, sTo );
    return result;
},

После завершения предварительной обработки HTML мы ищем DOM-узел с идентификатором _IWID_HtmlArea, определенным в разделе view mode файла определения iWidget. Виджет отображает HTML-фрагмент, просто присваивая его DOM-элементу innerHTML. После нажатия кнопки мыши на любом элементе активизируется событие iWidget. Если HTML-элемент является ссылкой, в качестве данных события используется значение href. Для всех остальных элементов используется текстовое содержимое элемента.

Виджет поддерживает дополнительные функциональные возможности, такие как прозрачный фон и динамическая вставка CSS для изменения оформления. Если интересно, проанализируйте JavaScript-файл реализации виджета. Давайте рассмотрим виджет в действии.


Работа виджета HTMLEvent

В предыдущем разделе мы рассмотрели процедуру создания простого виджета HTMLEvent. В этом разделе мы увидим, как его можно связать с другими виджетами и использовать на динамической мэшап-странице.

Чтобы начать использовать любой специализированный виджет в Mashup Builder, необходимо сначала загрузить в каталог ZIP-файл (облегченные виджеты) или WAR-файл (для iWidgets), а затем выполнить над ними действие Add to Mashup Builder. Это же действие применяется и для виджета HTMLEvent, созданного ранее.

Затем нам необходим фид, к элементам которого добавлен атрибут события MCEVENTonclick, который может быть полезен при генерировании событий в виджете HTMLEvent. Для добавления атрибута события MCEVENTonclick мы будем использовать мэшап, созданный в разделе Генерирование HTML при помощи Data Mashup Builder. Откройте мэшап для редактирования, в операторе transform щелкните правой кнопкой мыши на элементе <a> и добавьте атрибут события MCEVENTonclick=mytest, как показано ниже. Значение атрибута MCEVENTonclick указывает имя события mytest и позволяет передать значения атрибута href элемента <a> после корректного связывания.

Рисунок 7. Добавление атрибута MCEVENTonclick
Добавление атрибута MCEVENTonclick

Сохраните мэшап и запустите фид, чтобы убедиться в отсутствии ошибок.

Создайте в Mashup Builder новую страницу и добавьте на нее виджет HTMLEvent. Нажмите кнопку Edit settings и в поле HTML URL укажите URL-адрес мэшапа, который редактировался на предыдущем шаге. Отметим, что в виджете HTMLEvent есть раздел для добавления пользовательской CSS, форматирующей HTML-фид. В нашем примере вставляется HTML-фрагмент, но не все браузеры поддерживают HTML-теги style. Поэтому извлеките тело тега style из HTML-шаблона заголовка, показанного в листинге 1, и вставьте его в текстовую область CSS. Нажмите кнопку Save для сохранения настроек виджета. (Отметим, что при создании мэшапа для виджета HTMLEvent нет необходимости включать тег style в HTML-шаблон. В сущности, теги html и body генерировать не обязательно. Поскольку эти дополнительные теги игнорируются, нет необходимости удалять их из мэшапа.)

Добавьте виджет Website Displayer на эту же страницу и нажмите кнопку Edit Wiring для связывания виджета HTMLEvent с виджетом Website Displayer. В появившемся диалоговом окне выберите вариант URL using Text для Website Displayer, а затем выберите HTMLEvent в качестве виджета для отправки содержимого. Обратите внимание, что виджет HTMLEvent отображает значение mytest, поступающее из атрибута MCEVENTonclick=mytest. Выберите его в качестве содержимого для отправки, как показано ниже. Нажмите кнопку Done для сохранения связей виджета.

Рисунок 8. Связывание виджета HTMLEvent
Связывание виджета HTMLEvent

Теперь два виджета (HTMLEvent и Website Displayer) связаны между собой. Это можно проверить, нажав ссылку в поле customer HTML-таблицы. Должен открыться URL-адрес, соответствующий пользователю, выбранному в виджете Website Display.

Рисунок 9. Связанные виджеты HTMLEvent и Website Displayer в действии
Связанные виджеты HTMLEvent и Website Displayer в действии

Другие примеры использования

Большинство виджетов из IBM Mashup Center оптимизировано для отображения данных в окне браузера определенного размера. Если нужно одновременно отображать больше элементов данных, чем помещается на странице, для показа скрытых данных часто используются прокрутка и разбиение на страницы. Рассмотрим простую страницу с виджетом просмотра данных, связанным с виджетом ввода данных, в котором можно указывать значения для поиска. Если виджет просмотра данных настроен на отображение только 20 строк, а возвращается 100 строк, распечатка страницы будет содержать только 20 видимых строк. Как вывести на печать все строки? Один из подходов состоит в использовании Data Mashup Builder для переформатирования содержимого фида в HTML и добавления пиктограммы print для отображения содержимого на отдельной странице браузера, где можно использовать стандартную функцию печати. Используя ранее рассмотренный пример фида, мы добавим другой мэшап для генерирования HTML-разметки, отображаемой на странице браузера и корректно отформатированной для вывода на печать.

Рисунок 10. Пример таблицы, отформатированной для печати
Пример таблицы, отформатированной для печати

Примечание. Поскольку содержимое фида имеет формат HTML-таблицы, его можно легко экспортировать в стандартные настольные приложения, например в Microsoft® Excel®.


Заключение

В данной статье рассматривалось использование Data Mashup Builder платформы IBM Mashup Center для генерирования отображаемого содержимого непосредственно из корпоративных источников данных. Для иллюстрации были выбраны довольно простые примеры. При использовании всей мощи технологий HTML и CSS можно создавать яркие презентации. Но важнее всего то, что, используя специальное соглашение (вставляемый в сгенерированные данные атрибут), можно разработать виджет, способный отображать созданное представление и взаимодействовать с другими виджетами. Надеемся, что читатель сумеет ввести другие соглашения и еще больше расширить возможности виджета.


Загрузка

ОписаниеИмяРазмер
Пример форматированияgenHtmlDownloadPkg.zip8 КБ

Ресурсы

Научиться

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

  • Для освоения IBM Mashup Center посетите Lotus Greenhouse.
  • Бесплатная ознакомительная версия IBM Mashup Center на developerWorks.

Обсудить

Комментарии

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, Information Management
ArticleID=830796
ArticleTitle=Отображение корпоративных данных на динамических HTML-страницах с помощью IBM Mashup Center
publish-date=08162012