TMG ha terminato l'attività. Grazie per esser stati con noi. Questo sito non è più aggiornato e resta su solo per alcuni prodotti obsoleti che però fanno ancora traffico anche se non dovrebbero ma la colpa semmai è di google.

FasterJoomla

Joomla security and optimization

Visita il nuovo sito FasterJoomla che raccoglie i nostri articoli ed estensioni per Joomla!

Si parla di sicurezza, velocità, sviluppo di estensioni per Joomla.

Trovate pubblicate anche le nostre guide pratiche.

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