La message box è ora completa del primo set di funzionalità base che desidero.

E' il momento di metterla all'opera.

Userò codice molto simile al msgBox.html per integrarlo nell'interfaccia utente di uniKAS, che è una applicazione piuttosto complessa con diverse dozzine di oggetti e un minimo di 4 fogli di stile caricati in parte all'avvio ed in parte dinamicamente.

Inoltre contiene funzioni che manipolano alcuni fogli di stile (lo so, è contrario a quanto ho scritto nel Decalogo del Javascript: ma è del 2003, sbagliando si impara!)

Naturalmente l'integrazione deve risultare indolore.

La prima cosa che osservo è che la chiamata all'oggetto msgBox può esser fatta dal "top" document, e per semplificare la dichiarazione includerò fogli di stile e javascript solamente da là. Quindi creerò delle funzioni da invocare dal resto dell'applicazione e le metterò nel file principale, index.html

function getMsgBox() {
    if (msgBox==null)
    {
        msgBox = new _msgBox('green',460,300)
    }
    return msgBox;
}

function tell(msgHTML, aCallbackFunction, msgTitle, okTimeoutSeconds)
{
	getMsgBox().tell(msgHTML, aCallbackFunction, msgTitle, okTimeoutSeconds);
}

Però dovrò anche sincerarmi che i parametri non siano "undefined". Invece di complicarmi la vita lato implementazione, controllando quanti parametri ho e passando solo quelli, aggiungo dei piccoli controlli nelle funzioni che hanno un numero variabile di parametri. Verifico che il parametro esista e che sia del tipo corretto (usando instanceof String e isNaN)

        if ((arguments.length > 2) && (msgTitle instanceof String))

        if (isNaN(okTimeoutSeconds)) 
                return

In questo modo da qualunque file (.js o .html in un frame) dell'applicazione potrò invocare:

top.tell('ciao');

senza preoccuparmi di altro. Questa sarà l'unica istruzione necessaria in ciascun file.

Fatto questo mi accorgo di un piccolo problema: alla creazione dell'oggetto msgBox (che grazie alla funzione getMsgBox() avviene solo al momento del primo uso) visto che uso

document.body.innerHTML +=

per aggiungere il layer, il browser ridisegna completamente la pagina. Distruggendo la pagina ospite che nel frattempo si era caricata altri fogli di stile in base a parametri di avvio...

Per ovviare devo spiegare al browser che in effetti sto solo aggiungendo e non modificando quanto già presente. Quindi dovrò istanziare degli oggetti  div:

			var rDivModal = document.createElement('div'); 
			rDivModal.id = 'msgModalDiv'; 
			rDivModal.className = 'color_'+color
			rDivModal.innerHTML = " "; 
			document.body.appendChild(rDivModal); 

			var rDivBox = document.createElement('div'); 
			rDivBox.id = 'msgBoxDiv'; 
			rDivBox.className = 'dialog color_'+color
			rDivBox.innerHTML = aMsgBoxContent; 
			document.body.appendChild(rDivBox); 

In questo modo sia internet explorer che firefox non ridisegnano gli elementi già presenti sulla pagina. Ed applicano correttamente lo stile ai nuovi div.

Ripristinare il focus

L'oggetto che ha il focus è quello che riceve l'input da tastiera, e che normalmente è davanti a tutti gli altri.

Ma se l'oggetto chiamante ha funzioni onmouseout associate, raramente il focus riuscirà a esser trasferito al nuovo elemento.

Quindi visto che so bene dove voglio il focus, creo una funzione unica per visualizzare la messagebox che imposta anche il focus corretto:

_msgBox.prototype.show = function()
{
	with (this)
	{
		divMsgModal.style.display = "block"
		divMsgBox.style.display = "block"
		divMsgBox.focus()
	}
}