• Choose a category
• All
• Classic-Fiction

By Root 3907 0

delivering a View, whose interactive features fulfill the role of Controller. Designing it this way could be problematic if we wished to add arbitrary alternative rendering mechanisms to our notifications framework. We don’t want to do that, however, because we want the notifications to be uniform across our application, for consistency’s sake. Listing 6.4 shows a rendering method for the Message object.

Listing 6.4 Message framework with user interface

msg.Message.prototype.render=function(el){ b

Render message

if (this.priority<=msg.PRIORITY_LOW.id){

this.renderSmall(el);

}else if (this.priority>=msg.PRIORITY_DEFAULT.id){

this.renderFull(el);

}

}

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

Render as icon with tooltip

this.icoTd=document.createElement("div");

var ico=document.createElement("img");

ico.src=this.icon;

ico.className="msg_small_icon";

this.icoTd.appendChild(ico);

this.icoTd.messageObj=this;

this.icoTd.onmouseover=msg.moverIconTooltip;

this.icoTd.onmouseout=msg.moutIconTooltip;

this.icoTd.onclick=msg.clickIconTooltip;

el.appendChild(this.icoTd);

}

msg.moverIconTooltip=function(e){ d

Handle mouse-over events

var event=e || window.event;

var message=this.messageObj;

var popped=message.popped;

if (!popped){

message.showPopup(event,false);

}

}

msg.moutIconTooltip=function(e){ e

Handle mouse-out events

var message=this.messageObj;

var popped=message.popped;

var pinned=message.pinned;

if (popped && !pinned){

message.hidePopup();

}

}

Licensed to jonathan zheng

228

CHAPTER 6

The user experience

msg.clickIconTooltip=function(e){ f

Handle mouse-click events

var event=e || window.event;

var message=this.messageObj;

var popped=message.popped;

var pinned=message.pinned;

var expired=message.expired;

if (popped && pinned){

message.hidePopup();

if (expired){

message.unrender();

}

}else{

message.showPopup(event,true);

}

}

msg.Message.prototype.showPopup=function(event,pinned){ g

Display tooltip

this.pinned=pinned;

if (!this.popup){

this.popup=document.createElement("div");

this.popup.className='popup';

this.renderFull(this.popup);

document.body.appendChild(this.popup);

}

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

var popX=event.clientX;

var popY=event.clientY-xHeight(this.popup)-12;

xMoveTo(this.popup,popX,popY);

if (msg.popper && msg.popper!=this){

msg.popper.hidePopup();

}

this.popped=true;

msg.popper=this;

}

msg.Message.prototype.hidePopup=function(){

Hide tooltip

if (this.popped){

if (this.popup){

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

}

this.popped=false;

}

}

We’ve introduced the top-level rendering code for our Message object, and the specific details for the representation used in the status bar here. Let’s address the top-level code first. We provide a render() method b, which takes a DOM element as an argument. This delegates to either a renderSmall() c or renderFull() d method, based on the priority of the message. Messages being shown in Licensed to jonathan zheng

Implementing a notification framework

229

the status bar are always low priority, and will be displayed as an icon that presents a tooltip on mouseover (see figures 6.2 and 6.3). renderSmall() renders the icon inside the DOM element and provides event handlers for displaying the pop-up tooltip.

Because this chapter is about adding professional polish to Ajax applications, the tooltip that we create for the icon has been implemented in a complete fashion, with three event handlers. It will appear when the mouse rolls over the icon e and disappear when the mouse moves off the icon f. If the icon is clicked, however, the tooltip becomes “pinned” g and will stay in place until either the icon is clicked again, the message expires, or another tooltip is selected (only one tooltip will be visible at any given time).

6.4.2 Rendering detailed notifications

Messages in the dialog are either default or high priority, and will display an icon and a message alongside (see figure 6.4). We also need this type of display for the status-bar icons