Online Book Reader

Home Category

AJAX In Action [116]

By Root 4086 0
’ tooltips. When the tooltip is invoked in showPopup(), it calls the renderFull() method to present the full details of the message. The same method is reused to render messages in the dialog. This reuse saves us from duplicating unnecessary code and also ensures a high degree of visual consistency in the user interface. The renderFull() method is presented in listing 6.5. Listing 6.5 renderFull() method

msg.Message.prototype.renderFull=function(el){

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='center';

this.row.appendChild(icoTd);

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

ico.src=this.icon;

icoTd.className="msg_large_icon";

icoTd.appendChild(ico);

Licensed to jonathan zheng

230

CHAPTER 6

The user experience

var txtTd=document.createElement("td");

txtTd.valign='top';

txtTd.className="msg_text";

this.row.appendChild(txtTd);

txtTd.innerHTML=this.message;

el.appendChild(topEl);

}

The renderFull() method generates a table row for the message. It checks the DOM element that it is being appended to, and it will append itself directly if it is a tag or generate the necessary and tags if not. This allows multiple messages to be presented in the same table in the main dialog and the tooltip
tag to be correctly populated.

Note that the message text is attached to the user interface using innerHTML

rather than the W3C DOM methods that we usually use. This allows notifications to use HTML markup to present themselves in a richer fashion than if we were simply generating a text node.

6.4.3 Putting the pieces together

Having provided mechanisms for iconized and full-size display of messages, we’ve provided a comprehensive render() method for individual messages. The dialog and status bar themselves are generated by a top-level render() method, as shown in listing 6.6.

Listing 6.6 msg.render() function

msg.render=function(msgbar){

if (!msgbar){

msgbar='msgbar';

}

msg.msgbarDiv=xGetElementById(msgbar);

b Ensure status

if (!msg.msgbarDiv){

bar exists

msg.msgbarDiv=msg.createBar(msgbar);

}

styling.removeAllChildren(msg.msgbarDiv);

var lows=new Array();

var meds=new Array();

var highs=new Array();

for (var i in msg.messages){ c

Sort messages by priority

var message=msg.messages[i];

if (message){

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

lows.append (message);

Licensed to jonathan zheng

Implementing a notification framework

231

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

meds.append(message);

}else if (message.priority>=msg.PRIORITY_HIGH.id){

highs.append(message);

}

}

}

for (var i=0;iRender low-priority messages

lows[i].render(msg.msgbarDiv);

}

if (meds.length+highs.length>0){ e

Render higher-priority messages

msg.dialog=xGetElementById(msgbar+"_dialog");

if (!msg.dialog){

msg.dialog=msg.createDialog(

msgbar+"_dialog",

msg.msgbarDiv,

(highs.length>0) ); f

Ensure dialog exists

}

styling.removeAllChildren(msg.dialog.tbod);

for (var i=0;ihighs[i].render(msg.dialog.tbod);

}

for (var i=0;imeds[i].render(msg.dialog.tbod);

}

if (highs.length>0){

msg.dialog.ico.src=msg.PRIORITY_HIGH.icon;

}else{

msg.dialog.ico.src=msg.PRIORITY_DEFAULT.icon;

}

}

}

msg.createBar=function(id){ g

Create a status bar

var msgbar=document.createElement("div");

msgbar.className='msgbar';

msgbar.id=id;

var parentEl=document.body;

parentEl.append(msgbar);

return msgbar;

}

msg.createDialog=function(id,bar,isModal){ h

Create a pop-up dialog

var dialog=document.createElement("div");

dialog.className='dialog';

dialog.id=id;

var tbl=document.createElement("table");

dialog.appendChild(tbl);

dialog.tbod=document.createElement("tbody");

tbl.appendChild(dialog.tbod);

Licensed

®Online Book Reader