К основному контенту

XPages. Диалог с пользователем. dGrowl уведомления. Часть 1

Продолжаю тему диалога с пользователем. И снова уведомления.
Ведь правда хочется, чтобы приложение реагировал на действия пользователя красивыми всплывающими уведомлениями? Почему бы и нет! Интересно? Тогда поехали!

Я буду долго растекаться мыслью. Если кратко:
1. dGrowl - это Dojo плагин, позволяющий отображать всплывающие уведомления. Стиль этих сообщений регулируется через CSS.
2. В Dojo уже изначально есть возможность использовать всплывающие уведомления - dojo toaster. Но у этого способа есть ряд ограничений, о них чуть ниже.

Для начала, чтобы не играть в испорченный телефон, настоятельно рекомендую посмотреть видео о подключении dGrowl на NotesIn9. Весь код и основные моменты я опишу в своем посте, реализация (моя) будет доступна в моем Demo-приложении. Так что даже если вы не очень хорошо владеете английским вы увидите различий (и ограничения, о наличии которых я упомянул выше) между подходами и основные принципы dGrowl.

Теперь, когда мы говорим на одном языке, продолжим.
План на первую часть довольно прост и, по-сути, совпадает с тем, что есть в видео:
1. Подключить dGrowl
2. Изменить CSS. На мой вкус кое-что нужно добавить.
3. Добавить еще 2 канала для отображения сообщений типа
4. Отправить сообщение

Подключение плагина
По ссылке №0 (список ссылок в конце статьи) качаем исходный код и устанавливаем в наше приложение. Как это сделать очень подробно рассматривает Brad Balassaitis в видео, ссылку на которое давал выше. Ниже приведу только код (он найден по ссылке №3 в списке ссылок) непосредственного подключения плагина на страницу (xPage), при условии, что вы уже разместили ресурсы плагина в своем проекте. Лучше всегда для этого дела использовать Custom Control, который затем накидывать на нужные страницы или целиком поместить в Custom Control для Layout.

Подключаем ресурсы:
<xp:this.resources>
<xp:dojoModulePath url="/dGrowl/main" prefix="dGrowl"></xp:dojoModulePath>
<xp:styleSheet href="/dGrowl/dGrowl.css"></xp:styleSheet>
</xp:this.resources>

Добавляем CSJS:
<script type="text/javascript">
var dg;

require([ "dGrowl", "dojo/domReady!" ],
function(dGrowl) {
dg = new dGrowl({'channels':[
{'name':'error', 'pos':1},
{'name':'info','pos':2}
]})
}
);
</script>

Изменение CSS
На мой взгляд исходной отображение выглядит каким-то...плоским (если посмотреть демо по ссылке №1 и списка ссылок). Не смотря на то, что в исходном CSS прописаны параметры для отображения тени, как-то это не очень видно. Немного погуглив, поправил этот момент + чуть расширил сам канал (и отображение сообщений)
Было:

Стало:


Изменения в dGrowl.css:
.dGrowl-notification {
...
width: 250px;
...
-webkit-box-shadow: 5px 5px 12px -3px #000000;
box-shadow: 5px 5px 12px -3px #000000;
...
}

.dGrowl-channel {
...
width: 280px;
...
}

.dGrowl-topRight .dGrowl-notification {
margin-left: 300px;
}

Еще мне как-то не очень нравилась кнопка закрытия сообщения, поэтому там же, в dGrowl.css:
a.dGrowl-close-btn {
...
opacity: 0.6;
font-size: 12px;
...
}
a.dGrowl-close-btn:hover {
...
font-size: 12px;
...
}

и в NotificationNode.html заменил в строке
<a href="#x" class="dGrowl-close-btn" data-dojo-attach-event="onclick:killme">X</a>
перед </a> буковку "X" с маленькой на большую

Добавление каналов
Добавим еще 2 канала для отображения сообщений типа Warning и Success (или Confirmation). Для этого:
1. Добавляем в стилевые классы в dGrowl.css
/* 'Warning' Channel */
.dGrowl-channel-warning .dGrowl-notification {
  background-color: rgb(255, 255, 188);
  border: 1px solid rgb(246, 230, 146);
}
 
/* 'Confirmation' Channel */
.dGrowl-channel-confirmation .dGrowl-notification {
  background-color: rgb(236, 249, 223);
  border: 1px solid rgb(200, 226, 184);
}

2. Добавляем код в CSJS:
В нашем скрипте, подготавливающем dGrowl заменим:
{'name':'error', 'pos':1},
{'name':'info','pos':2}

на:
{'name':'error', 'pos':1},
{'name':'warning','pos':2}
{'name':'confirmation','pos':3},
{'name':'info','pos':4}

Отправка сообщения
Ну пора уже посмотреть, чего получилось!
Формат отправки такой (!!! в Client-side скрипте !!!):
dg.addNotification("ТЕКСТ СООБЩЕНИЯ", {'channel':'ТИП_КАНАЛА', 'title':'ЗАГОЛОВОК', 'sticky':true})
, где ТИП_КАНАЛА = {error, warning, confirmation, info}. В целом никто не запрещает добавить еще, внеся изменения аналогичные тем, что описаны в разделе Добавление каналов этого поста.
Элемент 'title' может отсутствовать.
'sticky' - означает, что сообщение "приклеивается" на странице (до полного обновления страницы или перехода на другую). При этом сообщение можно закрыть, нажав на крестик. Вместо этого элемент можно указать сколько сообщение должно отображаться на странице. прежде чем пропадет. Задается это элементом 'duration':МИЛИСЕКУНДЫ.

Ну вот как бы в целом и все :) Пример вы можете посмотреть в моем Demo-приложении

Ссылки по теме:
0. Исходный код dGrowl
1. Демо от Brad Balassaitis
2. Добавление дополнительных каналов
3. Упрощение загрузки Dojo

Отправляем мы это все из клиентской части (CSJS). Хотелось бы из добавить отправку с сервера, не правда ли? Этим и займемся во 2ой части работы с dGrowl уведомлениями. Присоединяйтесь!

Если вам понравился пост, жмите +1делитесь в соц. сетях и форумах! Комментируйте, обсуждайте! #xPages-по-русски

Популярные сообщения из этого блога

Занимательные алгоритмы. Поиск цикла в односвязном списке

И снова про тараканов, которые иногда возникают в голове. Как-то раз, засыпая, я задумался на курьезными задачками из своей сферы деятельности (Lotus Notes), которые можно было бы задать на собеседовании, плавно перешел к воспоминаниям о своих первых собеседования, когда опыта работы еще не было. Опыт самих собеседований у меня не велик а места, где задавались действительно интересные задачи (а не задачки типа: написать сортировку массива любым известным способом) вообще равны одному - это ABBYY. Как минимум одна задачка в списке на знание и понимание классических алгоритмов, описанных в книге Дональда КнутаИскусство программирования.

Lotus Notes FAQ. Добавление пользовательских адресных книг

Все, кто так или иначе работает с IBM Lotus Notes, видели диалог выбор адресатов - скажем, при написании письма. Там имеется выпадающий список, включающий как минимум личную адресную книгу и серверную. В этот список можно добавить и свою базу. Ниже будет разобрано как это можно сделать









Lotus Notes FAQ. 8/9 Eclipse. Как настроить уведомления о Sametime сообщениях

На написание данной "инструкцию" натолкнул мой коллега. Помню, первый раз сам долго искал, как отключить постоянно выпрыгивающие уведомления о новых сообщениях в Sametime.

Итак, речь идет о клиентах IBM Notes 8+ версии Standart (Eclipse based).

Как настроить уведомления о Sametime сообщениях?