-------------------------------------------------------
Обновление от 05.09.2009, версия 1.0.3
-------------------------------------------------------- Добавлена модерация сообщений (отключаемая). Интеграция произведена так что уже созданные клиенты смогут использовать модерацию без пересоздания.
- Оптимизирован HTML шаблон и стиль. Теперь можно через шаблон настроить фон и кнопку открытия виджета.
Адрес сервиса (админка): http://code.hivext.ru/applications/feedback/Дополнение: Коды админки и виджета открыты для использования в любых проектах включая коммерческие. Кроме того можно использовать уже готовые наработки виджета чтобы сделать полностью самостоятельный проект с профессиональным дизайном на отдельном домене. Единственное требование разработка должна вестись на платформе Hivext.Пример кода встраивания виджета (генерируется админкой)
html4strict:
<script src="FeedbackWidget.js" type="text/javascript"></script>
<script type="text/javascript">
FeedbackWidget("1b733f19391faa29759504f2adc04e4e:764892", { sLang : "ru", nWidth : 600, nHeight : 420 });
</script>
Во втором параметре конструктора FeedbackWidget можно указать следующие параметры (все параметры не обязательные):
sLang - язык виджета (ru, ua, en).
nWidth - ширина виджета.
nHeight - высота виджета.
nSuggestionsOnPage - количество предложений отображаемых на странице ( по умолчанию 5 ).
nCommentsOnPage - количество комментариев отображаемых на странице ( по умолчанию 8 ).
sButtonSide - параметр определяет расположение кнопки открытия виджета при popup размещении. Принимает значения left (по умолчанию) или right.
oInline -
встраивание виджета в страницу (боковая кнопка не показывается). Параметр принимает идентификатор (id) дива. Виджет подстраивается под ширину div, а высота меняется автоматически в зависимости от контента. Если параметр указан, параметры nWidth, nHeight и sButtonSide теряют силу.
Демонстрация Inline размещения
http://code.hivext.ru/applications/feedback/preview_1_0_3.html?client=d3399dd122438320197f95d174d709ce:379822&inline=dropzoneО виджете---------------------------------
Стала тут задача написать полезное веб приложение на базе платформы Hivext, после некоторых раздумий пришла идея сделать виджет обратной связи с пользователями чтобы можно было легко прикрутить его на сайт, и отображать всю информацию в интерфейсе виджета без редиректа. Особо горячие парни могут полностью интегрировать виджет в функционал сайта.
Разработка ведется на JavaScript, серверная часть полностью обеспечивается платформой. Это означает что серверная часть вообще не программируется, пишется только клиент на JavaScript (кстати это может быть любой другой клиентский язык ActionScript, Java FX), а часть серверных работ ведется через API Консоль (разметка базы данных, настройка прав доступа).
Итак основные задачи:
- Простота интеграции виджета
- Быстрая загрузка и компактный размер скрипта (не более 15 кб)
- Весь контент отображается в интерфейсе виджета, без редиректов на сторонний сайт
- Голосование за предложения пользователей
Приложение разбито на две части: Feedback Client - виджет, непосредственно устанавливается на сайт, Feedback Admin - администрирование записей.
Первая версия Feedback Client составит общее представление о том как будет выглядеть виджет и как работать
http://code.hivext.ru/applications/feedback/preview_1_0_5.html?client=4b18ffdb532b118c767208b79c793275:511003Во-первых, чтобы сократить размер кода виджета решено отказаться от готовых JavaScript клиентов. Используется компактный класс, который и обеспечивает кроссдоменные запросы к сервисам. С классом можно ознакомиться в теме
JavaScript - Кроссдоменные запросы к сервисам.
Типичное обращение к методу сервиса из виджета:
javascript:
HttpRequest.get("http://api.hivext.ru/1.0/users/authentication/cross/getdevicesignature",
{ appid : sAppid }, function(oResponse) {
if(oResponse.result == 0) {
sSession = sDeviceSignature = oResponse.signature;
GetSuggestion("ORDER BY nScore DESC, id DESC");
}
});
Во-вторых, виджет активно работает с сервисом Batch чтобы объединять несколько запросов к платформе в один большой запрос - это оптимально как для сервера так и для клиента.
В-третьих, виджет использует мини шаблонизатор, да да строит html прямо на Javascript. Данные приходят в формате JSON (противники формата JSON могут ознакомиться с ним подробнее
здесь), скрещиваются с простым шаблоном и преобразуются в html.
Вот пример из кода виджета:
Мини шаблонизатор:
javascript:
function XTemplate(sTemplate, oData) {
var fn = function(t, p) { return (oData[p] != undefined) ? oData[p] : t; }
return sTemplate.replace(/%\(([A-Za-z0-9_|.]*)\)/g, fn);
}
Шаблон:
javascript:
var sSuggestionTemplate =
"<div class='%{sClassName}'><div class='vote-score'>"
+ "<span id='score-%(id)' class='score'>%(nScore)</span>"
+ "<div class='vote-actions'>"
+ "<span><div id='vote-up-%(id)' style='cursor: pointer; display: block; background-color: #00ff00; width: 15px; height: 15px;'></div></span>"
+ "<span><div id='vote-down-%(id)' style='cursor: pointer; display: block; background-color: #ff0000; width: 15px; height: 15px;'></div></span>"
+ "</div>"
+ "</div>"
+ "<div class=''><h3>"
+ "<span class='status'>%(sStatus)</span>"
+ "<a href='javascript:void(0)'>%(sTitle)</a>"
+ "</h3></div>"
+ "<div class='meta'>%(sAuthor)</div>"
+ "<div class='clearfix'></div>"
+ "</div>";
Что из этого получилось опять же можно посмотреть здесь
http://code.hivext.ru/applications/feedback/preview_1_0_5.html?client=4b18ffdb532b118c767208b79c793275:511003Кстати что еще интересно шаблонизатор, кроме вывода html используется для построения пакетного запроса к сервису Batch, не везде, но есть интересные участки кода где так и есть. А вообще лучше изучить исходники, там много интересного.
Понемногу буду постить что добавилось в виджет, чем оброс. Попробую довести его до финального продукта и выложить на публичное
растерзание использование.
