Alessandro Lacava

Alessandro Lacava's Web Site: English Version     Sito Web Di Alessandro Lacava: Versione Italiana

Web 2.0 facile con Scriptaculous

Scriptaculous è una libreria per lo sviluppo di interfacce grafiche accattivanti in ambiente web. In quest'articolo analizzeremo il suo set di controlli (autocompleter, slider, ecc.) che completano quelli standard HTML.

La scorsa puntata abbiamo analizzato la parte di Scriptaculous concernente gli effetti. In quest'articolo, invece, esamineremo il ventaglio di controlli offerti da questa straordinaria libreria grafica. I controlli che andremo ad analizzare sono di tre tipi: autocompleter, in-place editor e slider.

Giusto per dare un assaggio di ciò che vedremo, analizziamo un sito che usa l'autocompleter, ossia WeeFly. WeeFly è un motore di ricerca innovativo per voli e hotel low cost. Tra le sue peculiarità più interessanti vi è la possibilità di fare ricerche complicate con una singola query. Ad esempio è possibile scegliere più aeroporti di partenza e destinazione contemporaneamente, o cercare il weekend più economico in un range di date da noi scelto. E' anche disponibile la versione in italiano, basta cliccare sulla bandierina del bel paese in alto a sinistra.

Appena iniziate a scrivere qualcosa nella text box degli aeroporti di partenza o destinazione, appare una lista di suggerimenti che potrebbero matchare la vostra scelta. Ad esempio, se iniziate a scrivere "mila" vedrete suggerimenti concernenti aeroporti che contengono quella stringa.

Pensate che per sviluppare una cosa del genere ci vuole un mago di JavaScript? Se la risposta è affermativa vi sbagliate di grosso. Come vedremo, infatti, utilizzando Scriptaculous, ci serviranno solo poche righe di codice per creare quello che è comunemente chiamato, per ovvi motivi etimologici, autocompleter.

Puoi leggere il resto dell'articolo Web 2.0 facile con Scriptaculous su: ioProgrammo N. 125 - Aprile 2008 - Edizioni Master

Errata Corrige

Ho notato che, a causa di un errore di editing della redazione, le opzioni delle tabelle pubblicate su ioProgrammo sono tutte in upper case. Ovviamente, visto che JavaScript è un linguaggio case-sensitive, utilizzando quelle opzioni tutte in lettere maiuscole il codice non funzionerà. Riporto qui, quindi, le tabelle pubblicate su ioProgrammo con il case corretto.

Tabella 1: Opzioni per customizzare l'autocompleter

Opzione Descrizione
paramName Il nome da usare per il parametro che è inviato al componente server. Il valore di tale parametro è costituito dai caratteri inseriti nella text box e, di default, il suo nome coincide con quello della casella di testo.
frequency Il tempo, in secondi, d'attesa dall'ultimo carattere immesso dall'utente. Trascorso tale tempo la richiesta è inviata al componente server. Di default è 0.4.
minChars Il numero minimo di caratteri da inserire prima che parta la richiesta. Il valore di default è 1.
parameters Ulteriori parametri da inviare al server oltre ai caratteri inseriti dall'utente. Il formato deve essere quello di una query string, ossia param1=value1¶m2=value2...
indicator L'ID di un elemento da visualizzare durante il tempo che intercorre tra la chiamata al server e la ricezione del response.
updateElement Funzione di callback da invocare quando l'utente sceglie un'opzione dalla lista. Di default la funzione è implementata in modo tale che l'opzione scelta è inserita nella text box.
afterUpdateElement La funzione di callback da invocare dopo che l'utente effettua una scelta. Di default non è definita alcuna funzione.
tokens Una stringa o array di stringhe da usare come delimitatori per permettere all'utente di scegliere più opzioni contemporaneamente.
onShow Funzione invocata quando è il caso di far apparire la lista di opzioni. L'implementazione di default va bene per la maggior parte dei casi.
onHide Funzione da invocare quando bisogna far sparire la lista di opzioni. Anche qui l'implementazione di default si adatta perfettamente alla maggior parte delle esigenze.

Tabella 2: Opzioni per customizzare l'autocompleter locale

Opzione Descrizione
choices Il numero di opzioni della lista da visualizzare. Di default è 10.
partialChars E' legato a partialSearch e corrisponde al numero di caratteri minimo da inserire prima che sia tentato un match parziale.
partialSearch E' un booleano che indica se abilitare la ricerca parziale. La ricerca parziale matcha l'inizio di ogni parola nel caso in cui l'opzione della lista è formata da più parole. Di default è true.
fullSearch Un booleano che indica se cercare i caratteri inseriti all'interno delle parole e non solo all'inizio. Per gli avvezzi ad SQL corrisponde a un LIKE '%chars%'. Di default è false.
ignoreCase Un booleano che indica se ignorare le differenze tra maiuscole e minuscole. Di default è true.

Tabella 3: Opzioni per customizzare l'editor in-place

Opzione Descrizione
okText Il testo da mettere nel bottone di conferma. Nel nostro esempio abbiamo usato "Aggiorna".
cancelText Il testo da usare per il link annulla. Nell'esempio proposto abbiamo utilizzato, con poca fantasia, "Annulla".
savingText Questo è il testo che compare nel tempo che intercorre tra il click sul bottone di conferma e l'effettivo aggiornamento. Di default è "Saving..."
rows Il numero di righe da utilizzare per il campo di testo che compare quando clicchiamo sul <div>. Di default è 1 e, in questo caso, è renderizzato come una text box. Un valore maggiore di 1 fa sì che il controllo sia visualizzato come una text area.
cols Il numero di colonne da usare quando il controllo è attivo.
size Lo stesso di cols ma valido per rows pari a 1.
onComplete La funzione di callback da invocare dopo che l'update va a buon fine.
onFailure La funzione di callback da chiamare se l'update non va a buon fine.

Tabella 4: Opzioni per customizzare lo slider

Opzione Descrizione
axis Può assumere due valori: 'horizontal' o 'vertical' ed indica come renderizzare il controllo, ossia orizzontale o verticale, rispettivamente. Di default è 'horizontal'.
range Il range su cui agisce lo slider. Di default va da 0 a 1.
disabled Un booleano che indica se il controllo deve essere inizialmente abilitato o no. Di default è false (slider abilitato).
values Un array indicante un insieme di valori discreti che può assumere lo slider durante il trascinamento dell'handle.
sliderValue Il valore iniziale che lo slider deve assumere.
onChange La funzione di callback invocata quando il valore dello slider viene alterato.
onSlide La funzione di callback da chiamare quando l'utente sta trascinando l'handle.