248 Часть III. Создание профессиональных Ajax-приложений
работник обновления. Итак, мы несколько продвинулись по пути решения вопроса об асинхронном обновлении модели предметной области и информировании пользователя о внесенных изменениях. В следующем разделе мы рассмотрим вопросы представления информации и влияние ее на нормальный ход работы пользователя. Там же мы постараемся отказаться от функ-' ции alert () в пользу более подходящего решения.
6.3. Создание системы оповещения
Функция alert, которую мы применяли до сих пор, позволяет реализовать лишь примитивное решение, типичное для ранних периодов развития JavaScript, когда Web-страницы были в основном статическими, а фоновая активность — минимальной. Внешний вид окна с сообщением не поддается контролю средствами CSS, поэтому, работая над профессиональным продуктом, желательно разработать механизм оповещения, используя технологии, применяемые для остальной части пользовательского интерфейса Ajax. Тем самым обеспечивается дополнительная степень гибкости приложения.
Если вы проанализируете существующие вычислительные системы, то увидите, что в них используются самые различные средства оповещения, различающиеся и по степени воздействия на пользователя. Менее всего привлекают внимание такие эффекты, как изменение вида курсора мыши (классический пример песочных часов в системе Windows) или добавление к пиктограмме, представляющей объект, дополнительных элементов, которые позволяют судить о состоянии папки. Такие простые индикаторы представляют минимум информации. Более детальные сведения о фоновых событиях можно получить, прочитав сообщение в строке состояния. И наконец, самым информативным является диалоговое окно. На рис. 6.1 показан пример использования соглашений об оповещении, принятых для окружения рабочего стола в системе Unix.
Вданном случае папка lost+f ound не доступна текущему пользователю, поэтому к ней добавлено изображение замка. Строка состояния в нижней части окна предоставляет более подробную информацию о содержимом папки и в то же время не отвлекает пользователя от основной работы. Окно
ссообщением об ошибке отображается тогда, когда пользователь пытается открыть папку, к которой он не имеет доступа. В этом случае действия пользователя прерываются явно, так как он должен немедленно отреагировать на сообщение.
Вотличие от рассмотренных способов оповещения, функция a l e r t () применима лишь для отдельных случаев. Хотя решение, предполагающее ее применение, реализуется просто, его нельзя назвать изящным. Если мы стремимся достичь надежности, согласованности и простоты, имеет смысл разработать базовые средства для оповещения пользователя, которые будут применяться во всем приложении. В следующих разделах мы постараемся сделать это.
Рис. 6.1. Соглашения, принятые для предоставления информации о состоянии. Внешний вид пиктограммы отражает характеристики объекта (в данном случае права доступа), строка состояния позволяет получить общие сведения, а модальное диалоговое окно — подробную информацию об объекте. В данном случае в качестве примера приведена среда рабочего стола Unix, но аналогичные соглашения действуют во всех популярных графических интерфейсах
6.3.1 Основные принципы оповещения
В качестве первого шага нашей работы определим, как должно выглядеть сообщение, предоставляющее информацию пользователю. Логично предположить, что в него следует включить текстовое описание и, возможно, пиктограмму.
Если мы оповещаем пользователя о действиях, предпринимаемых в фоновом режиме, то некоторые сообщения окажутся важнее других. Вместо того чтобы в каждом отдельном случае решать, следует ли отобразить сообщение, лучше определить универсальные уровни приоритетов и применять их
ккаждому сообщению.
Вобщем случае нам необходимо сообщить пользователю некоторые сведения, которые тот может принять к сведению или отвергнуть. Некоторые из сообщений достаточно важны и должны отображаться до тех пор, пока пользователь не отключит их явным образом, а другие имеют смысл только в течение ограниченного времени. Ряд сообщений может удалиться без вмешательства пользователя. Например, информация о том, что клиент ожидает получения данных по сети, нужна лишь до активизации функции обратного вызова. Если данные будут приняты до того, как пользователь удалит сообщение, оно автоматически перестанет отображаться. В некоторых случаях, например при получении новостей, имеет смысл задать определенное время Жизни, по истечении которого сообщение должно быть удалено с экрана.
Объект Message, код которого приведен в листинге 6.3, создан с учетом этих требований. Этот объект реализует универсальный механизм оповещения пользователя. Установив модель оповещения, мы можем оформлять сообщения различными способами.
250 Часть 111. Создание профессиональных Ajax-приложений |
I |
Листинг 6.3. Объект Message |
|
var msg=new Objectt); |
| |
rasg.PRIORITY_LOWb { id:l, lifetime:30, icon:"img/msg_lo.png" J; msg.PRIORITY_DEFAULT={ id:2, lifetime:60, icon:"img/msg_def.png" }; 1
msg.PRIORITY_HIGH= { id:3, lifetime:-l, icon:"img/msg_hi.png" }; |
|
|
||||
msg.messages=new Array(); |
|
I |
||||
msg.Message=function{id,message,priority,lifetime,icon){ |
|
|
||||
|
this.id=id; |
|
|
|||
|
msg.messages[id]«this; |
|
|
|||
|
this.message=message; |
|
|
|||
|
this.priority=(priority) ? priority : msg.PRIORITY_DEFAULT.id; |
|
|
|||
|
this.lifetime-(lifetime) ? lifetime : this.defaultLifetime(); |
|
|
|||
|
this.icon»(icon J ? icon : this.defaultlcon(); |
|
|
|||
|
if |
(this.lifetime>0){ |
|
j |
||
|
this.fader=setTimeout( |
|
|
|||
|
"msg.messages['"+thia.id+"'].clear()", |
', |
||||
|
this.lifetime*1000 |
|
|
|||
); |
|
|
|
|
|
|
> |
|
|
|
|
|
|
} |
|
|
|
|
|
|
msg.Message.prototype.clear=function(){ |
|
|
||||
msg.messages[this.id1«null; |
|
|
||||
) |
|
|
|
|
|
|
msg.Message.prototype,defaultLifetime=function(){ |
|
|
||||
|
if |
(this.priority<=msg.PRIORITY_LOW.id){ |
|
|
||
|
return msg. PRIORITY__LOW. lifetime; |
|
|
|||
|
}else if {this.priority==msg.PRIORITY_DEFAULT.id){ |
|
|
|||
|
return msg.PRIORITY_DEFAULT.lifetime; |
|
|
|||
|
}else if (this.priority>=msg.PRIORITY_HIGH.id){ |
|
|
|||
|
return msg.PRIORITY_HIGH.lifetime; |
|
|
|||
)1 |
|
|
|
|
|
|
msg.Message.prototype.defaultlcon=function(){ |
|
|
||||
|
if |
(this.priority<=msg.PRIORITY_LOW.id){ |
|
|
||
|
return msg.PRIORITY_LOW.icon; |
|
|
|||
|
Jelse if (this.priority==msg.PRIORITY_DEFAULT.id){ |
|
|
|||
|
return msg.PRIORITY_DEFAULT.icon; |
|
|
|||
|
Jelse if (this.priority>=msg.PRIORITY_HIGH.id){ |
|
|
|||
|
return msg.PRIORITY_HIGH.icon; |
|
|
|||
} |
|
|
|
|
|
|
_ } |
|
|
'_ |
|
ш |
|
Для системы оповещения мы определили глобальный объект msg, выполняющий функции пространства имен. В нем содержится ассоциативный массив, позволяющий обращаться к любому сообщению по его уникальному идентификатору. Схема генерации идентификаторов зависит от конкретного приложения.
Уровни приоритета, низкий, средний (он же приоритет по умолчанию) и высокий, определяются с помощью констант. В соответствие каждому приоритету поставлены пиктограмма и время жизни (задаваемое в секундах). Пиктограмму и время жизни можно переопределить с помощью необязательных параметров, предусмотренных в конструкторе. Время жизни, равное -1.
Глава 6. Информация для пользователя 251
I
Рис. 6.2. Интерфейс системы оповещения в виде строки состояния. Сообщения отображаются в виде пиктограмм
Рис. 6.3. Информацию о сообщении в строке состояния можно получить, поместив курсор мыши на пиктограмму. В результате на экране отобразится окно с подсказкой
>
(Задается для высокоприоритетных сообщений. Оно указывает на то, что соббщение не должно автоматически удаляться; решение о прекращении его ;Отображения принимает либо пользователь, либо функция обратного вызова.
•
Ы.2. Определение требований к пользовательскому интерфейсу
Применяя термины MVC, мы можем сказать, что нами только что была описана модель системы оповещения. Для того чтобы системой можно было пользоваться, надо определить представление. Существует много способов
.визуального отображения информации, предназначенной для пользователя. В данном случае мы выберем вариант строки состояния, в которой информация будет отображаться в виде пиктограмм (рис. 6.2).
Пиктограмма с красным знаком X — стандартное средство оповещения на вязком уровне. Третья слева пиктограмма на рисунке — это шар синего цвета, отбрасывающий тень; данная пиктограмма переопределяет изображение X. используемое по умолчанию. Более подробную информацию о сообщении, ^соответствующем каждой пиктограмме в строке состояния, можно получить $ окне подсказки (рис. 6.3).
[ Такой механизм оповещения нельзя назвать навязчивым. Строка состоя- •шя занимает относительно мало места на экране, но появление новой пиктотраммы заметно для пользователя. Срочные сообщения надо сделать более заметными, поэтому мы отображаем в строке состояния только низкоприо- ^ригетные сообщения. Информация с более высоким приоритетом выводится -В диалоговом окне (рис. 6.4), которое отображается на экране до тех пор, дюка пользователь не удалит его.
I Диалоговое окно может быть модальным и немодальным. В случае морального окна остальные элементы интерфейса блокируются до тех пор, по- $& окно не будет закрыто. Закрытое окно отображается в виде пиктограммы к правой части строки состояния. В следующих двух разделах мы обсудим реализацию описанных средств.