Включение функции наведения на подсказку с помощью пользовательских тегов JSP

В этой статье описывается платформа JEE уровня представления, предназначенная для включения функции наведения подсказок без жесткого кодирования модулей JavaScript в JSP в веб-приложениях или приложениях портала. Инфраструктура упакована как jar-файл для распространения и включает в себя компонент веб-службы RESTful на стороне сервера и набор обработчиков тегов JSP, который вставляет код JavaScript и код каскадной таблицы стилей (CSS) в файлы HTML во фразе рендеринга страницы. Целевыми пользователями являются Java-разработчики, у которых есть только предварительный опыт написания кода JavaScript.

 

1. Введение

Mouseover — это стандартное событие JavaScript, которое возникает, когда пользователь наводит курсор на определенный элемент HTML на веб-странице. Это событие широко используется в веб-приложениях для навигации или изменения изображения или текста. Hover-over-help, также называемый всплывающим пузырем, относится к процессу отображения небольшого всплывающего окна, когда в браузере происходит событие наведения мыши. Окно содержит сообщение, чтобы помочь пользователю использовать приложение или предоставить дополнительные пояснения и данные. Это полезная функция, которая может сделать ваши веб-страницы более интуитивно понятными и удобными для пользователя и может переносить больше информации на одной странице в многофункциональных интернет-приложениях (RIA). Есть несколько советов и примеров, чтобы включить функцию в Интернете. Однако они не эффективны при разработке крупномасштабных веб-приложений.Некоторые из предостережений включают следующее:

• Содержимое сообщения напрямую жестко закодировано в JavaScript. Они связаны с компонентами графического интерфейса пользователя, такими как текстовые метки на веб-страницах. Возможность повторного использования низкая.
• Если одно и то же сообщение должно появиться на нескольких страницах, сообщение и соответствующий код JavaScript необходимо скопировать и вставить на каждую из этих страниц. Трудно поддерживать эти дубликаты в нескольких местах.
• Сообщения разрабатываются как статические и обычно создаются при разработке страницы. Трудно вставить данные времени выполнения в сообщения на лету.
• Портальные приложения не полностью поддерживаются. 

Платформа, представленная в этой статье, предназначена для решения этих проблем и предоставляет комплексное, но простое в использовании решение для Java-разработчиков, не имеющих большого опыта работы с JavaScript. Он использует технологию JSP taglibary, инфраструктуру Dojo и веб-сервисы RESTful. Возможность повторного использования в веб-среде и среде портала, производительность и надежность являются факторами, которые были приняты во внимание.

2. Пузыри сообщений и сообщения

2.1 Пузыри
сообщений Пузырь сообщений — это информационное окно прямоугольника, содержащее сообщение. Каждый пузырек имеет одно отделение с цветной кодировкой и одно отделение для содержимого. Окно украшено определениями CSS. Изображение ниже иллюстрирует образец сообщения пузыря. 

 

   Рисунок 1 — всплывающее сообщение с подсказкой

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

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

• Идентификатор сообщения: это первичный ключ в каждом сообщении, который представляется в виде уникального номера. При наличии любого идентификатора одного сообщения платформа может идентифицировать одно и только одно сообщение.
• Заголовок сообщения: это строка символов, отображаемая в области заголовка в всплывающем окне.
• Содержание сообщения: это строка символов, которая относится к подробностям справочного сообщения. Содержимое сообщения может содержать элементы HTML.
• Цветовой код: это строка символов, представляющая цветовую схему фона пузырькового окна. Значение должно быть одной из следующих строк: «infor», «data», «warning» или «link».

2.3 Типы сообщений
Исходя из динамики содержимого, мы классифицировали все сообщения на три типа. Каждый из типов описан в этом разделе с предоставленными образцами.

2.3.1 Статические сообщения
Этот тип сообщения считается статическим, поскольку его содержимое всегда остается неизменным. Статическое сообщение может быть определением концепции, объяснением поля или инструкцией действия пользователя. Одни и те же сообщения будут отображаться любому пользователю на той же странице при посещении страницы. Допустимые примеры:

• Это <b> пример </ b> статического сообщения. • Нажмите на кнопку ниже, чтобы отправить запрос.

2.3.2 Сообщения переменных
Эти сообщения содержат заменяемые переменные, которые представлены токенами. Токен — это строка символов без пробелов, окруженная символами «$ {» и «}». Токен будет полностью заменен его фактическим значением во время отображения страницы на сервере. Значение основано на пользовательских данных и, как правило, не будет меняться в течение периода, превышающего продолжительность пользовательского сеанса. С точки зрения пользователей, один и тот же пользователь будет видеть одно и то же сообщение со своими настроенными значениями при просмотре одной и той же страницы, но разные пользователи могут видеть разные сообщения. Ниже приведены примеры допустимых сообщений в этой категории:

• Ваше имя $ {имя}. • Ваша ежегодная цель — продавать автомобили за $ {yourgoalnumber}.

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

• Вы поговорили с $ {anumber} клиентами сегодня. • Теперь это $ {servertimestamp}.

 

3. Разработка и реализация

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

3.1 Кэширование сообщений
Сообщения могут быть сохранены в базе данных или текстовом файле, но независимо от того, где они физически хранятся, они будут загружаться и кэшироваться в веб-контейнере при его запуске. Инфраструктура включает в себя класс — CacheIntializer, который реализует интерфейс ServerContextListener для выполнения задания. Все, что вам нужно разработать, — это ваш собственный класс загрузчика сообщений для извлечения ваших сообщений из хранилища. Ваш класс должен реализовывать интерфейс com.myuan.tags.bubblemsg.serverside.MessageLoader в платформе, и его имя должно быть добавлено в качестве ContextParameter в веб-дескрипторе. Пожалуйста, обратитесь к разделу установки для более подробной информации.

3.2 Dojo и CSS стратегия
Эта стратегия разработана для поддержки статических и переменных сообщений. Это можно назвать стратегией push, поскольку сообщения помощи встроены в виде элементов html и передаются в браузеры пользователей вместе со всей веб-страницей. После завершения загрузки страницы связь между клиентом и сервером не требуется. Значения будут оставаться неизменными, пока страница не будет снова загружена. Эта стратегия использует модуль Dojo для распознавания определенных элементов span (перечисленных в списке 1) в HTML-файлах. Для каждого отдельного всплывающего сообщения требуется два элемента span. Первый представляет видимый графический компонент на странице, а второй представляет собой всплывающее сообщение, которое в большинстве случаев не видно. Когда вы наводите курсор мыши на первую область «span», браузер запускает действие,и метод Dojo заставит всплывающее сообщение (показано на рисунке 1). Атрибут «id» в первом элементе «span» и атрибут «connectid» во втором являются ключами для связывания пары. Эти два атрибута должны иметь одинаковое значение. Значение генерируется случайным образом с помощью пользовательских тегов в структуре, что гарантирует, что стратегия может поддерживать как веб-приложения, так и портальные приложения.

<span id="connectid22121585605area" class="callout" style="font-weight:bold">
    Households
</span>                                                
<span dojotype="tooltip" connectid="connectid22121585605area">
    <div class="informationWindow">
        <div class="infor">
          <div class="titleBar">Household</div>
          <div class="contentPane">A household includes all the persons who occupy a housing unit.</div>
      </div>
    </div>
</span>

Четыре обработчика тегов были разработаны для поддержки сценариев статических сообщений и переменных сообщений соответственно. Во время рендеринга страницы обработчики могут извлекать справочные сообщения из кэша, заменять переменные токены в сообщениях, если таковые имеются, а также создавать и вставлять html-элементы с совпадающими значениями в веб-страницы. Полный процесс подробно описан в диаграмме последовательности на рисунке 2.

 

3.2.1 hohcsstag
Этот тег вставляет определения CSS в страницы JSP во время рендеринга. Он должен быть помещен в элемент заголовка страницы. В среде WebSphere Portal этот тег следует добавить в файл Default.jsp.

<mt:hohcsstag />

 

 3.2.2 hohstatictag
hohstatictag — это пользовательский тег, созданный для сценария статического сообщения. У него есть пять атрибутов:

• msgstr: Это первичный ключ, используемый для идентификации сообщения из кэша. Этот атрибут является обязательным.
• label: это текст, который будет связан с действием наведения мыши для отображения сообщения.
• Стиль: это определение стиля, которое будет использоваться для украшения надписи выше. Это место, где пользователь может перезаписать CSS-атрибуты для метки.
• bubblestyle: это место, где пользователь может перезаписать атрибуты CSS для пузыря сообщения.
• img: Если вам нужно включить наведение на изображение вместо текстовой метки, вы можете использовать этот атрибут и передать путь к вашему изображению. Если этот атрибут присутствует в теге, значение в атрибутах «label» и «style» будет игнорироваться.

Пример статического сообщения —

MSG_ID	msg_title	Msg_content	Color_cd
1	Домашнее хозяйство	Домохозяйство включает всех лиц, которые занимают единицу жилья.	Infor

 Фрагмент JSP, где используется hohstatictag —

<mt:hohstatictag msgid="1" label="Households" style="font-weight:bold"/> //text

<mt:hohstatictag msgid="1" img="/img/myimage.jpg" /> //image 

 3.2.3 hohvariabletag и hohparamtag
hohvariabletag и hohparamtag работают вместе для поддержки переменных сообщений. «Hohvariabletag» имеет те же четыре атрибута, что и тег «hohstatictag». Один тег «hohparamtag» содержит одну пару имя-значение. Токены в сообщении будут заменены значениями, переданными из hohparamtag при создании html-элементов. Ниже приведен пример использования пользовательского тега.

Пример переменного сообщения—

MSG_ID	msg_title	Msg_content	Color_cd
2	признание	Мой показатель удержания составляет $ {rate}, а моя цель — $ {goal}.	данные

Фрагмент JSP, где hohvariabletag и hohparamtag используются вместе —

<mt:hohvariabletag msgid="2" label="<strong>My goals</strong>">
    <mt:hohparamtag paramName="rate" paramValue="<%= dao.getRate() %>"/>
    <mt:hohparamtag paramName="goal" paramValue="100"/>
</mt:hohvariabletag> 

3.2.4 hohgenerictag
Этот тег был создан для предоставления единого API как для статических, так и для переменных сообщений. Этот тег может заменить «hohstatictag» или «hohvariabletag» без какого-либо изменения синтаксиса. Но производительность будет незначительной, если вы будете использовать этот тег в сценарии статических сообщений вместо hohstatictag.

3.3 Стратегия
AJAX AJAX (асинхронный JavaScript и XML) — это мощная техника веб-разработки для создания интерактивных веб-приложений. Стратегия AJAX была разработана для сценария динамических сообщений. Это модель на основе извлечения, поскольку сообщения извлекаются модулем AJAX во время выполнения с сервера. Такой подход может гарантировать, что сообщение содержит самые последние данные.

Когда событие наведения мыши запускается с веб-страницы, модуль AJAX вызывает конечную точку веб-службы RESTful на стороне сервера. Серверный компонент получает правильное сообщение из кэша сообщений, заменяет все переменные токены в нем самыми последними данными пользовательской сессии и отправляет окончательное сообщение обратно в ваш браузер в формате XML. После получения ответа модуль AJAX заполняет соответствующее информационное окно и открывает его. Полный процесс иллюстрируется диаграммой последовательности на рисунке 3. 

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

3.3.1 HelpMessagesServiceServlet
Это расширение класса HTTPSerlvet. Он служит конечной точкой веб-службы RESTful на стороне сервера. Он обрабатывает HTTP-запрос от клиентского AJAX-модуля, создает сообщение с последними данными в сеансе пользователя и отправляет ответ в формате XML обратно в браузер.

Пример ответа приведен ниже.

<mouseovermsg>
    <connectid>Household</connectid>
    <bkgdcolor>infor</bkgdcolor>
    <msgtitle>Household</msgtitle>
    <msgcontent>A household includes all the persons who occupy a housing unit.</msgcontent>
</mouseovermsg>

3.3.2 hohajaxtag
Этот тег вставляет AJAX-методы в JSP, который будет вызываться hohdynatag ниже. У него есть два атрибута. Пространство имен можно использовать для передачи пространства имен портлета в тег в среде портала. В веб-приложении значение атрибута можно оставить пустым. Атрибут serviceurl должен быть действительным URL-адресом для HelpMessagesServiceServlet. В среде WebSphere Portal этот тег следует добавить в файл Default.jsp.

 // Portal environment
<mt:hohajaxtag namespace="<portlet:namespace />" 
               serviceurl="/contextpath/svltpath" />  

// Web environment
<mt:hohajaxtag namespace="" serviceurl="/contextpath/svltpath" />

 3.3.3 hohdynatag и hohdynaparamtag
hohdynatag имеет четыре атрибута, такие же как тег «hohstatictag», и он генерирует элемент «span». Каждый hohdynaparamtag устанавливает соответствие между одним токеном в сообщении и одним ключом, используемым в сеансе пользователя для ссылки на фактическое значение. Эти сопоставления будут отправлены конечной точке RESTful в качестве параметров HTTP. Когда мышь пользователя перемещается по области на странице, представленной тегом span, в браузере клиента последовательно происходят следующие события:

• События OnMouseOver будут запускаться браузером.
• Будет вызван метод Ajax, сгенерированный hohajaxtag. Метод сделает HTTP-запрос к конечной точке службы RESTful и будет ожидать ответа.
• Получив ответ, метод AJAX проанализирует его, чтобы получить реальное сообщение помощи.
• Метод AJAX отобразит всплывающее сообщение в браузере.

Ниже приведено правильное использование этих тегов.

<mt:hohdynatag namespace="<portlet:namespace />" msgid="6"
    lable="Definition and calculation for Retention">
  <mt:hohdynaparamtag tokenkey="first" sessionattributekey="SESSIONKEY_FIRST" />
  <mt:hohdynaparamtag tokenkey="second" sessionattributekey="SESSIONKEY_SECOND" />
</mt:hohdynatag> 

 

 4. Установка

 Процедура установки довольно проста. После добавления файла JAR — MYTagLib.jar — в каталог / WEB-INF / lib вашего веб-проекта, вы можете использовать редактор дескрипторов развертывания в RAD / RSA для завершения установки:

• Разработайте свой собственный класс загрузчика сообщений и добавьте параметр контекста с именем «BubbleMsgLoaderClass» и значением в качестве полностью определенного имени вашего класса.