Мы определили два основных элемента пользовательского интерфейса: стрск! ку состояния и всплывающее диалоговое окно. Теперь приступим к их реаЦ лизации. Система оповещения достаточно сложна, поэтому разобьем работу| над ней на отдельные этапы. Сначала модифицируем объект Message так| чтобы он мог обеспечить свое отображение в разных ситуациях когда <ж представлен в строке состояния в виде пиктограммы, при выводе окна под-*] сказки или в составе всплывающего диалогового окна. Начнем с реализации: строки состояния.

6.4.1. Отображение пиктограмм в строке состояния

Строка состояния должна отображаться на экране и содержать пиктограм-' мы, представляющие активизированные сообщения. Обязанности по воспроизведению конкретных пиктограмм мы делегируем объекту Message. Его можно описать в терминах архитектуры MVC. Средства отображения рассматриваются как представление, а интерактивные элементы выполняют роль контроллера. Если бы мы предполагали использовать произвольные механизмы отображения, то столкнулись бы с серьезными проблемами при реализации системы оповещения. Однако мы не планируем подобное решение. Более того, для обеспечения согласованности в пределах приложения надо использовать единый механизм оповещения. В листинге 6.4 показан метод, предназначенный для воспроизведения объекта Message.

Листинг 6.4. базовые 'Средства отображения сообц&йрй^ < * * ~""~Щ

//О Воспроизведение сообщения rasg.Message.prototype.render=function(el){

if (this.priority<=msg.PRIORITY_LOW,id){ this.renderSmall(el);

lelse if (this.priority>=msg.PRIORXTX_DEFAULT.id){ this.renderFull(el);

}

)

//@ Вывести в качестве пиктограммы с поддержкой

//окна подсказки

msg.Message.prototype.renderSmall=function{el){

this.icoTd=document.createElement("div"); var ico=document.createElement("img"); ico.src=this.icon; ico.classNarae="msg_smalI_icon"; this.icoTd.appendChild(ico); this.icoTd.messageObj=this;

this . icoTd.onmouseover=msg.moverIconTooltip,- this.icoTd.onmouseout=msg.moutlconTooltip; this.icoTd.onclick=msg.clicklconTooltip; el.appendChild(this.icoTd);

}

// ® Помещение курсора мыши над кнопкой msg.moverIconTooltip=function(e){

var event=e || window.event; var message=this.messageObj; var popped=message.popped; if ('popped){

message. showi?opup(event, f a l s e ) ;

}

}

// О Перемещение курсора м ш и за пределы кнопки msg.moutIconTooltip=function(e){

var message=this.messageObj; v a r popped=rnessage.popped; var pinned=message.pinned; if {popped && 'pinned){ message.hidePopup();

}

)

/ / 0 Щелчок мьппью

m s g . c l i c k I c o n T o o l t i p = f u n c t i o n { e ) { var event=e || window.event; var message=this.messageObj; var popped=message.popped;

var pinned=message.pinned; var 6xpired=message.expired; if (popped && pinned){ message.hidePopup{);

if (expired){ message.unrender();

}

}else{

message.showPopup(event.true);

}

}

// © Вывести окно с подсказкой msg.Message.prototype.showPopup=function(event,pinned){

254 Часть III Создание профессиональных Ajax-приложений

this.pinned=pinned; if (!this.popup){

this.popup=document.createEleraent("dxv"); this.popup.className='popup' ; this.renderFull(this.popup); document.body.appendChild(this.popup);

}

this.popup.style.display='block1; var popX=event.clientX;

var popY=event.clientY-xHeight(this.popup)-12; xMoveTo(thispopup,popX,popY);

if {msg.popper && msg.popper!=this){ msg.popper.hidePopupf);

}

this.popped=true;

msg.popper=this;

}

// Скрыть окно с подсказкой msg.Message.prototype.hidePopup=function(){

i£ (this.popped){ if (this.popup){

this.popup.style.display='none' ;

}

this.popped=false;

}

Мы реализовали для объекта Message высокоуровневый код отображения и определили детали представления в строке состояния. Начнем с высокоуровневого кода. Метод render () О получает в качестве параметра элемент DOM. В зависимости от приоритета сообщения он передает управление либо методу renderSmall() ®, либо методу renderFulK) ©. В строке состояния представлены только сообщения с низким приоритетом, которые отображаются в виде пиктограмм. При помещении на такую пиктограмму курсора мыши выводится окно с подсказкой (рис. 6.2 и 6.3).

Функция rendersmalio отображает пиктограмму в составе элемента DOM и устанавливает обработчики событий, в процессе работы которых выводится подсказка.

Поскольку в данной главе мы стараемся придать Ajax-приложениям профессиональный вид, средства поддержки подсказки полностью определены. В работу с подсказкой вовлечены обработчики трех событий. Когда курсор мыши помещается над пиктограммой О, подсказка отображается на экране до тех пор, пока курсор не будет перемещен с данного элемента ©. По щелчку на пиктограмме подсказка "фиксируется" ©. В этом случае она будет удалена с экрана либо в результате повторного щелчка, либо при отображении другой подсказки (в каждый момент времени на экране может отображаться только одно окно с подсказкой).

Глава 6. Информация для пользователя 255

6.4.2. Отображение подробных сообщений

В диалоговом окне выводятся высокоприоритетные сообщения либо сообщения, имеющие приоритет по умолчанию. Они отображаются в виде пиктограмм, сопровождаемых строкой текста (рис. 6.4). Такое же представление требуется нам для окон подсказки, соответствующих пиктограммам в строке состояния. Функция showPopupO, отвечающая за вывод подсказки, обращается к методу renderFull {), который отображает детальное сообщение. Этот же метод используется для представления информации в диалоговом окне. Такой подход исключает неоправданное дублирование кода и, кроме того, обеспечивает согласованность внешнего вида различных элементов пользовательского интерфейса. Код метода renderFull () приведен в листинге 6.5.

var inTable=(el.tagName=="TBODY"); var topEl=null;

this.row=document.createElement("tr"); if (!inTable){

topEl=document.createElement{"table") ; var bod=document.createElement("tbody"); topEl.appendChild(bod); bod.appendChild(this.row);

}else{

topEl=this.row;

}

var icoTd=document.createElement("td"); icoTd.valign=icenter' ; this.row.appendChild(icoTd);

var ico=document.createElement{"img"); ico.src=this.icon; icoTd.className="msg_large_icon";

icoTd.appendChild(ico);

var txtTd=document.createElement("td"); txtTd . valign - 'top' ;

txtTd.className="msg_text"; this.row.appendChild{txtTd); txtTd.innerHTML=thi s.message;

el.appendChild(topEl);

Метод renderFull () генерирует строку таблицы. Он проверяет элемент DOM и, если тот представляет собой дескриптор <tbody>, непосредственно включает его в таблицу. В противном случае генерируются необходимые дескрипторы <table> и <tbody>. Такой подход позволяет включать в таблицу, содержащуюся в диалоговом окне, несколько сообщений и в то же время обеспечивает корректное заполнение элемента <div> в окне подсказки.