Il primo obiettivo di questo capitolo è quello di generare tastiere differenziate a seconda del tipo di input.

Definiremo una tastiera numerica per i valori di tipo int e float; ed una alfanumerica per le stringhe. Entrambe avranno una proprietà posizione per scegliere dove visualizzarle (la tastiera numerica sta bene a fianco del messagebox, mentre quella alfa necessariamente deve esser posizionata sotto).

Visto che immaginiamo possibili più campi dello stesso tipo, andremo a creare un oggetto Keyboards che conterrà i due tipi di tastiera (alfa e numpad); ed in fase di creazione dei campi dovremo anche inizializzare le tastiere (qualora non già inizializzate) ed associare il campo di input a quella opportuna)

Inoltre desidero aggiungere funzioni di backspace e enter, e voglio anche usare l'oggetto keyboard fuori dalla message box.

Come procedere? Beh intanto estendiamo il prototipo _keyboard con _keyboardAlfa:

function _keyboardAlfa()
{
    //_keyboard.call(this)
    this.chars = new Array ('QWERTYUIOP','ASDFGHJKLò','ZXCVBNM,.-|')
    this.isLowercase = false;
}

_keyboardAlfa.prototype = new _keyboard()
_keyboardAlfa.prototype.constructor = _keyboardAlfa;

La creazione può seguire diversi stili, questo è il più comodo perché permette una buona gestione dei metodi ereditati

Ora che abbiamo esteso l'oggetto, voglio associare un handler di eventi dedicato: in questo modo potrò catturare la funzione Shift ed implementare solo quella; ed invocare l'handler di default per tutto il resto.

_keyboardAlfa.prototype.handleClick = function (e) {
	/* Questo metodo estende solo lievemente il funzionamento 
	   del metodo del prototipo (_keyboard) 
	   quindi esegue le operazioni specifiche
	   (la gestione di maiuscole e minuscole è inutile in una tastiera numerica)
	*/
	with (msgBoxInstance) // qua sono in una callback non posso usare this.msgBoxInstance
	{
		_keyboard.prototype.handleClick.call(msgBoxInstance);
		//Keyboards.activeKeyboard.handleClick(e)
		if (!Keyboards.activeKeyboard.isLowercase)
			if (Keyboards.activeKeyboard.doshift)
			{
				Keyboards.activeKeyboard.doshift();
			}
	}
}

Ora devo preoccuparmi dell'oggetto Keyboards, contenitore che gestirà l'interfaccia alla message box, e che dovrà contenere un oggetto per ciascun tipo di tastiera che desideriamo utilizzare.

function _keyboards() {
	this.activeInputField
	this.FieldId=-1
	this.virtualKeyboardVisible = false;
	try
	{
		this.KeyboardAlfa = new _keyboardAlfa()
		this.KeyboardAlfa.paintTo("msgBoxKeybAlfa_"+msgBoxAttiva)
		this.KeyboardNum = new _keyboard()
		this.KeyboardNum.paintTo("msgBoxKeybNum_"+msgBoxAttiva)
		this.activeKeyboard = this.KeyboardNum// verrà assegnato alla tastiera correntemente visualizzata
	}
	catch (e)
	{
		log1('errore 24: '+ e);
	}
}

Così, utilizzando activeKeyboard potrò sempre invocare i metodi corretti.

Non resta che definire qualche proprietà in più per i campi (onde poter scegliere la tastiera più opportuna):

 function _field(fieldName, fieldDesc, fieldDefaultValue, fieldValueType) {
  [...]
  this.valueType= fieldValueType||"string" // | "string", "float" o "int"

e sono pronto per testare la tastiera (in IE per il momento!)

Trovate nel codice diversi brandelli di approcci - malamente commentati - che miravano ad ottenere un buon funzionamento cross-browser; tuttavia questo oggetto potrebbe imboccare una strada molto diversa...  per esempio estendere l'oggetto dialog di jQuery.

Aggiungiamo un'ultima funzionalità: questo oggetto tastiera mi fa comodo senza la message box:

Per questo mi basta sostituire i riferimenti assoluti a msgBoxInstance, che viene associata sia ai TD.key che all'oggetto _keyboard stesso:

_keyboard.prototype.getHTMLElement = function () {
[...] 
	kCell = kRow.insertCell(-1)
	kCell.msgBoxInstance = this.msgBoxInstance;

Questo permette di tenere aperte contemporaneamente più tastiere!

Restate sintonizzati per conoscere i futuri sviluppi...

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