MessageBox con un solo campo?

Facciamo ora in modo che sia possibile aprire una piccola messageBox (anche NON modale) per visualizzare solo una tastiera rapida (senza tasti Si/No).

L'obiettivo è quello di creare la message box con una sola istruzione, collegandola all'input text;
e infine invocare l'onClose

Naturalmente ricicliamo tutto il contenitore (i vari div) e il sistema di tastiere, isolandolo nella funzione buildBox per comodità; lasciamo al constructor, ovvero _msgBox, il compito di definire e valorizzare i campi; e spostiamo in buildBox la logica di disegno. Aggiungiamo un paio di parametri, isModal e showButtons per permettere di discriminare nella fase di disegno. Di default prenderanno un valore compatible con le message Box create finora; inoltre se la messageBox non deve essere modal, vengono ridotti automaticamente i margini (padding):

_msgBox.prototype.buildBox = function(isModal, showButtons)
[...]
var rDivBoxHD = document.createElement('div'); 
if (!showButtons)
	rDivBoxHD.className = 'hd bighd'
else
	rDivBoxHD.className = 'hd'
[...]

Le operazioni che - per utilizzare una tastiera _senza_ la messageBox - avevo messo nella funzione getSingleKeyboard sono diverse; e la "nuova" messageBox che andiamo ora a creare usa alcuni di questi comandi.

La nuova messageBox dedicata

Devo derivare una nuova classe, _msgBoxSingle, da _msgBox. Il sistema è simile a quello che ho usato per creare _keyboardAlfa ereditando da _keyboard. Però qui devo anche passare dei parametri.

Per far ciò la funzione da invocare non è più call bensì apply: il resto dell'invocazione rimane immutato; ma per passare i parametri ad apply dovrò costruire un Array dei parametri e passare quello:

  _msgBoxSingle.prototype = new _msgBox();
  _msgBoxSingle.prototype.constructor = _msgBox;

function _msgBoxSingle(aColor, inputElement, sCaption, sCallBack, defaultValue)
{
  var iWidth = 280;
  var iHeight = 350;
  var aParams = new Array(aColor, iWidth, iHeight, "center", true, false, true);
  _msgBox.apply( this, aParams);

La principale differenza rispetto alla messageBox è nell'uso: la funzione show() mostra la tastiera, e devo impostare una callBack per il risultato:

[...]

  this.callBack = sCallBack;
  this.collegaEventi() // serve ad assegnare divContent e divHeader...

Nel seguito della funzione _msgBoxSingle dovremo  differenziare la parte di disegno per disegnare solo un input box (editInputElement) sopra la tastiera (così se uno usa un touch-screen non copre l'importo con la mano).

Prima di tutto crea l'elemento input ed un elemento centerInput nel quale incapsularlo:

	var centerInput = document.createElement('center');
	this.editInputElement = document.createElement('input');
	this.editInputElement.className= "mainInputField"
	this.editInputElement.style.width = parseInt(this.layerWidth) - 20;

Poi prevedo che mi sia passato in alternativa: un elemento input (che dovrò modificare) oppure un valore di default:

	if (inputElement instanceof Object)
	{
		this.editInputElement.value = inputElement.value
	}
	else
		this.editInputElement.value = defaultValue;
	centerInput.appendChild(this.editInputElement)

inputElement è l'elemento INPUT (opzionale); se lo ricevo dovrò alla fine aggiornarne il valore.
editInputElement invece è l'elemento INPUT che ho appena creato all'interno della messageBox.

	this.inputElement = inputElement
	this.divContent.innerHTML = '';
	this.divContent.appendChild(centerInput);
	this.divHeader.innerHTML = sCaption

Infine, mi riassegno tutti i valori:

	this.Keyboard = this.Keyboards.KeyboardNum

onHide viene invocata quando si preme invio. Però deve anche nascondere la messageBox (altrimenti la tastiera nasconde sé stessa ma non la message Box!). L'handler che vado a chiamare lo definisco direttamente all'interno dell'oggetto _msgBoxSingle.

	this.Keyboard.onHide = this.onHideHandler;
	this.Keyboards.activeInputField = this.editInputElement
}

Ultima modifica, faccio l'override del metodo show() per mostrare anche la tastiera: Questo metodo invoca il metodo del _msgBox usando call, quindi visualizza la tastiera

_msgBoxSingle.prototype.show = function () {
  _msgBox.prototype.show.call(this); // no params to show.... ma usando call devo passare
			// come primo parametro l'istanza dell'oggetto su cui eseguire il metodo.
  this.Keyboard.show();
}

Vediamo direttamente il codice reale usato nell'applicazione per utilizzare la tastiera: l'ultimo parametro '2' è il valore predefinito; ho passato null in quanto nell'applicazione non uso INPUT per visualizzare i dati ma li presento in una forma diversa.

var ScontoE_Keyb
function scontoValutaCallback(newValue) {
	alert('Hai richiesto uno sconto di ' + newValue);
}

function apriScontoE_Keyb()
{
	/* Dimostro l'uso della messagebox con sola tastiera per campo singolo numerico */
	if (!ScontoE_Keyb)
	{
		ScontoE_Keyb = new _msgBoxSingle('blue', null, 'Sconto', scontoValutaCallback, '2')
	}
	ScontoE_Keyb.show()
}

Conclusioni

Una volta creato un oggetto, è semplice aggiungere funzionalità.
Ma prendendosi la briga di creare oggetti derivati ottengo il duplice beneficio di

• Non complicare il codice (ciascun oggetto può risiedere in files diversi tra l'altro)
• Non modificare per nulla o quasi il codice dell'oggetto da cui derivo - quindi riduco il rischio di introdurre nuovi bachi.

I file descritti in questo articolo si possono scaricare dall'introduzione