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-по-русски