|
La creazione degli oggetti in Javascript è una necessità nelle applicazioni che superano le poche righe.
Tuttavia scrivere oggetti richiede inizialmente molta più fatica. Come ho scritto nel precedente articolo, questa maggior fatica iniziale viene ripagata in maggior facilità di manutenzione ed estensione dell'oggetto.
Voglio qui illustrare le differenze tra approccio procedurale e creazione di oggetti di una funzione semplicissima, che visualizza un messaggio a video e invoca una funzione quando si preme un tasto.
I 5 passi illustrano tutta la procedura, e vanno da un livello di complessità ridicolo fino ad affrontare diversi aspetti fondamentali dello sviluppo.
I primi 3 passi sono compatibili con IE, i successivi con (grossomodo) tutti i browser
Partiremo da un singolo file html contenente il javascript, il css e l'html, che ha tre funzioni: una per mostrare il messaggio, e due invocate da ciascuno dei bottoni sul messaggio.
per la sola visualizzazione del messaggio. Verifichiamo che continua a funzionare
Vediamo come passare gli eventi avanti e indietro dalla funzione chiamante alla funzione di risposta.Introduciamo un metodo ask (bottoni si/no) e un metodo tell (solo bottone ok)
Questo è lo step più importante.
A questo punto abbiamo 100 righe di javascript. Per mostrare un messaggio. Imbarazzante, direste.
Però abbiamo creato un oggetto che espone 2 funzioni, ask e tell, ma che è con pochissima fatica estendibile per gestire tutta la messaggistica di un programma, inclusi gli input di testo.
Anche l'occhio vuole la sua parte.
Semplifichiamo anche l'uso spostando quanto possibile fuori dal file html principale.
Facciamo in modo che l'utente non possa interagire con il resto della pagina finché non ha cliccato un bottone.
Facciamo funzionare anche la tastiera
Il timeout permette di specificare nelle funzioni un numero di secondi trascorsi i quali la finestra viene chiusa premendo il bottone predefinito.
La lista permette di proporre una lista di scelte all'utente che potrà poi sceglierne una.
Testiamo la messagebox all'interno di una applicazione ajax. E vediamo quali modifiche sono necessarie
Un approccio per spostare la messageBox una volta creata
Rendiamo possibile creare più istanze della messageBox sulla stessa pagina. Quindi modifichiamo le callBack e usiamo qualche escamotage per risolvere semplicemente la questione.
Accettiamo l'input per un numero variabile di campi.
Disegno una tastiera a video per permettere l'input anche agli utenti con touch screen
Derivo (eredito) dall'oggetto Tastiera per creare tastiere "specializzate", numerica e alfa; dimostro come usarla senza la msgBox
Ora però facciamo qualche modifica per poter usare la nostra tastiera più rapidamente, diciamo con una riga di codice: derivo un nuovo oggetto, imposto una callback e... perdo 2 ore a disegnare tastini :-) . Sorry niente FF per questo passo.
Passo ?: Auto-creazione da XML
L'intento (ardito) è di creare una estensione del metodo request() che genericamente prenda un file XML, ne esamini una parte, derivi la struttura dal file stesso e ne proponga i valori come scelte possibili; quindi restituisca i valori incluso l'indice della scelta.
Passo ?: Validazione dell'input
Si d'accordo, questo è solo l'indice.
Le spiegazioni sono commentate all'interno del codice. Clic per scaricare. (Corso 1-18) .
L'archivio è diviso in una cartella per ciascuna lezione. All'interno della stessa trovate msgBox.html - che potete usare per testarla.
Attenzione: msgBox e derivati sono sviluppati con l'intento di semplificare e uniformare la gestione della comunicazione con l'utente all'interno dell'applicazione uniKAS. Vengono resi disponibili anche tramite questo corso perché crediamo che siano un semplice strumento per seguire l'evoluzione di un oggetto e capire quanto si risparmi nella manutenzione.
Che altro?
Appena iniziate a mettere in pratica questi esempi, procedete per punti "saldi". Appena ottenuto uno dei risultati che vi prefiggete, fate un commit sull'svn oppure zippate (con il rar si intende) la cartella coi sorgenti, e dategli un nome. Più tardi potrà tornarvi utile.
Tenete sempre sottomano il vostro codice funzionante. E' molto più veloce che consultare la documentazione!
E la documentazione, mettetevela nella homepage di firefox.
Risorse essenziali:
introduction to firebug
Mozilla Developer Center
http://developer.mozilla.org/en/JavaScript
MSDN JScript Language Reference
http://msdn.microsoft.com/en-us/library/yek4tbz0.aspx |
