232

CHAPTER 6

The user experience

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

closeButton.dialog=dialog;

closeButton.onclick=msg.hideDialog;

var closeTxt=document.createTextNode("x");

closeButton.appendChild(closeTxt);

dialog.appendChild(closeButton);

if (isModal){ i

Add modal layer if need be

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

dialog.modalLayer.className='modal';

dialog.modalLayer.appendChild(dialog);

document.body.appendChild(dialog.modalLayer);

}else{

dialog.className+=' non-modal';

document.body.appendChild(dialog);

}

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

dialog.ico.className="msg_dialog_icon";

dialog.ico.dialog=dialog;

dialog.ico.onclick=msg.showDialog;

bar.appendChild(dialog.ico);

return dialog;

}

msg.hideDialog=function(e){

Hide the dialog

var dialog=(this.dialog) ? this.dialog : msg.dialog;

if (dialog){

if (dialog.modalLayer){

dialog.modalLayer.style.display='none';

}else{

dialog.style.display='none';

}

}

}

msg.showDialog=function(e){

Show the dialog

var dialog=(this.dialog) ? this.dialog : msg.dialog;

if (dialog){

if (dialog.modalLayer){

dialog.modalLayer.style.display='block';

}else{

dialog.style.display='block';

}

}

}

Licensed to jonathan zheng

Implementing a notification framework

233

render() can be called more than once. It will check for the presence of the common UI components b, f and create them if necessary, using the createDialog() h and createBar() g functions. These assemble the UI components using standard DOM manipulation methods and event handlers, such as those used to show and hide the dialog.

To render all notifications, the system first sorts them by priority into three temporary arrays c. Low-priority messages are then rendered to the status bar d and other messages to the dialog, higher-priority messages first e. To implement a modal dialog, we simply nest the visible dialog within another DIV element that occupies the entire screen, blocking any mouse events from getting through to the main user interface i. This modal DIV has a background pattern of alternating white and transparent pixels to gray out the interface, giving a clear indication that the dialog is modal. We use this rather than CSS transparency settings because the latter will make any nested elements, such as the dialog itself, transparent, too. This is implemented in the CSS file for our notification framework, presented in listing 6.7.

Listing 6.7 msg.css

.msg_small_icon{

height: 32px;

width: 32px;

position:relative;

float:left;

}

.msg_dialog_icon{

height: 32px;

width: 32px;

position:relative;

float:right;

}

.msg_large_icon{

height: 64px;

width: 64px;

}

.msg_text{

font-family: arial;

font-weight: light;

font-size: 14pt;

color: blue;

}

Licensed to jonathan zheng

234

CHAPTER 6

The user experience

.msgbar{

position:relative;

background-color: white;

border: solid blue 1px;

width: 100%;

height: 38px;

padding: 2px;

}

.dialog{

position: absolute;

background-color: white;

border: solid blue 1px;

width: 420px;

top: 64px;

left: 64px;

padding: 4px;

}

.popup{

position: absolute;

background-color: white;

border: solid blue 1px;

padding: 4px;

}

.non-modal{

}

.modal{

position: absolute;

top: 0px;

left: 0px;

width: 100%;

height: 100%;

background-image:url(img/modal_overlay.gif);

}

It’s worth noting the use of the CSS float attribute in the msg_small_icon and msg_dialog_icon classes, which are used to render the icons in the status bar. msg_small_icon, which renders the icons for low-priority messages that present the tooltips, uses a left float to align them to the left edge, and msg_dialog_icon uses a right float to align the icon that launches the dialog to the right edge. The framework allows the status bar to be rendered in any shape or size of DIV element. Floating elements will align themselves in a sensible fashion, wrapping into vertically aligned bars, if needed (figure 6.5).

Licensed to jonathan zheng