266 Часть III. Создание профессиональных Ajax-приложений
альных приложениях не каждая ошибка, связанная с передачей данных по сети, настолько важна, чтобы отображать сообщение о ней в диалоговом окне. Мы предлагаем читателю в качестве упражнения самостоятельно добавить к ContentLoader параметр, определяющий приоритет сообщения об ошибке (либо другим способом изменить обработчик onError для реализации менее строгой политики).
Итак, мы продемонстрировали, как можно обеспечить взаимодействие разработанной нами системы оповещения с существующим кодом. В следующем разделе мы рассмотрим альтернативные соглашения об оповещении
иприведем пример их применения.
6.6.Информация о новизне данных
Система оповещения, созданная нами, предоставляет набор компонентов верхнего уровня, отображающих информацию о системной активности. В некоторых случаях пользователю требуются дополнительные сведения, например, о том, что некоторые данные были модифицированы. В этом разделе мы модифицируем объект ObjectViewer, который рассматривался в главах 4 и 5, так, чтобы он сообщал пользователю информацию о данных, недавно подвергшихся изменению.
6.6.1. Простой способ выделения данных
Начнем решение задачи с рассмотрения простого способа выделения данных путем подсветки; для этой цели будем использовать инвертирование изображения. В пользовательском интерфейсе ObjectViewer используются в основном синие и серые тона, поэтому красный цвет будет выделяться на фоне окружающих элементов. Первое, что нам нужно сделать, — это определить дополнительный класс CSS, представляющий недавно измененные данные.
.new{ background-color: IfOeOdO; }
Мы выбрали очень простой стиль. Для реального приложения этого недостаточно; чтобы интерфейс выглядел хорошо, надо приложить дополнительные усилия. В листинге 6.11 показаны изменения кода ObjectViewer, предназначенные для того, чтобы выделить свойства, недавно подвергшиеся редактированию. В данном случае признак новизны данных автоматически удаляется по истечении заданного интервала времени.
Листинг 6.11. ObjectViewer, предусматривающий выделение новых данных'' objviewer,PropertyViewer.prototype.commitEdit=function(value){
if (this.type=objviewer.TYPE_SIMPLE){ this.value=value;
var valDiv=this.renderSimple(); var td=this.valTd;
td.replaceChild(valDiv,td.firstChild);
this.viewer.notifyChange(this);
Глава 6. Информация для пользователя |
267 |
// О Установить признак новизны this.setStatus(objviewer.STATUS_NEW);
}
}
objviewer.STATUS_NORMAL=1; obj viewer.STATUS_NEW=2;
objviewer.PropertyViewer.prototype.setStatus=function(status){
this.status=status; if (this.fader){
clearTimeout(this.fader);
}
if (status==objviewer.STATUS_NORMAL){ this.valTd.className='objViewValue' ; }else if (status==objviewer.STATUS_NEW){ this.valTd.className='objViewValue new1 ; var rnd="fade_"+new Date(),getTime(); this . valTd . id=rnd;
this . valTd . fadee=this;
// 0 Установить значение тайы-аута
t h i s . f a d e r = s e t T i m e o u t ( " o b j v i e w e r . a g e ( ' " + r n d + " 1 ) " , 5 0 0 0 ) ;
}
}
o b j v i e w e r . a g e = f u n c t i o n ( i d ) {
v a r e l = d o c u m e n t . g e t E l e m e n t B y I d ( i d ) ; v a r v i e w e r = e l . f a d e e ;
// © Восстановить состояние по окончании отсчета времени viewer.setStatus(objviewer.STATUS_NORMAL);
e l . i d - " " ;
e l . f a d e e = n u l l ;
_} |
m |
|
|
|
|
Мы определили два варианта данных: "обычные" и "новые". Можно было бы использовать для их идентификации логическое значение isNew, но мы предпочли определить два признака. Такой подход допускает дальнейшее расширение; например, мы сможем ввести дополнительный признак для тех данных, которые были модифицированы и информация об обновлении которых передана на сервер. При фиксации изменяемых значений вызывается метод setStatus () О. В результате задается соответствующий класс CSS и для "новых" данных устанавливается значение таймера ©. После истечения пятисекундного интервала данные переходят в "нормальное" состояние. (Для реального приложения время, в течение которого информация будет отображаться как "новая", должно быть намного больше. Интервал в пять секунд выбран только для проверки и демонстрации возможностей данного решения.) Объект сохраняет ссылку на таймер и может переустановить его значение в случае, если до истечения заданного времени возникнут новые изменения.
268 Часть III Создание профессиональных Ajax-приложений
Рис. 6.8. Модифицированный объект O b j e c t v i e w e r отображает недавно модифицированное значение диаметра, выделяя его цветом фона
Учитывая ограничения метода setTimeout(), мы присваиваем обрабатываемому узлу DOM уникальный идентификатор. Это позволит снова обнаружить его тогда, когда таймер активизирует функцию аде() ©. Функция аде () "приводит в порядок" идентификатор и другие временные ссылки. На рис. 6.8 показан внешний вид Objectviewer после редактирования одного значения.
Через некоторое время данные перестанут считаться "новыми", и для них будет восстановлен нормальный стиль отображения.
Изменение цвета привлекает внимание пользователя к недавно измененному значению. Выделить данные можно также с помощью анимации. В следующем разделе вы увидите, что такое решение реализуется достаточно просто.
6.6.2. Выделение данных с использованием библиотеки Scriptaculous
Мы реализовали выделение данных путем установки стилей вручную. Такой подход был выбран отчасти потому, что результаты его использования хорошо видны на рисунках. При работе над реальными приложениями мы рекомендуем использовать объекты Effect библиотеки Scriptaculous, которые позволяют достаточно просто "оживить" отображаемые сообщения. Данную библиотеку мы вкратце рассмотрели в разделе 3.5.2, и вы уже знаете, что она позволяет путем выполнения несложных операций организовать различные анимационные эффекты.
Метод setstatus(), который был рассмотрен в листинге 6.11, несложно переписать для использования Scriptaculous. Предположим, что мы хотим, чтобы недавно отредактированные данные "вибрировали'1 при отображении. Этого-легко добиться с помощью объекта Effect. Pulsate. Такой эффект привлекает внимание пользователя, но, к сожалению, его невозможно передать на статическом рисунке. Необходимые изменения в коде метода показаны в листинге 6.12.