AutoComplete: un component per l’autocompletamento dei campi di testo

18 febbraio 2011

Spesso, durante lo sviluppo di applicazioni Flex, ci siamo trovati ad utilizzare il component ComboBox per consentire la selezione di un elemento da una lunga lista di oggetti. Quando, però, i dataProvider assegnati alle combo box contengono molti elementi è scomodo utilizzare il component ComboBox e obbligare l’utente a ricercare l’elemento di interesse costringendolo a scorrere tutta la lista.

In sostituzione delle combobox possiamo utilizzare un component molto potente chiamato AutoComplete, che consente di gestire il riempimento di un campo di testo filtrando il dataProvider in stile Facebook.

Una demo completa delle funzionalità è disponibile all’indirizzo http://flex-autocomplete.com/demo/.

Scaricare la libreria

Il sito ufficiale della libreria è http://hillelcoren.com/flex-autocomplete. Qui è possibile trovare la documentazione e alcune dimostrazioni di utilizzo. La libreria è scaricabile, invece, da questa pagina.

Estraiamo il file che abbiamo appena scaricato e al suo interno, oltre alle due cartelle con il codice sorgente per Flex3 e Flex4 e alla cartella contenente la documentazione, troviamo la cartella ‘bin’ che contiene le librerie compilate. A noi, per lo sviluppo dell’applicazione di esempio, serve la libreria AutoComplete-1.1-Fx4.swc.

Prepariamo il progetto

Per prima cosa, dobbiamo creare un progetto Flex (scegliamo l’sdk 4.1 visto che è la più aggiornata), come mostrato in figura:

Figura 1

screenshot

Una volta creato il progetto, dobbiamo importare la libreria. Lo possiamo fare o copiando il file SWC nella cartella ‘libs’ (consigliato):

Figura 2

screenshot

o dalla preferenze del progetto, selezionando la voce Flex Build Path e cliccando su Add Swc:

Figura 3 (click per ingrandire)

screenshot

A questo punto, la configurazione del progetto è finita e possiamo iniziare ad usare le funzionalità del component AutoComplete. Nel prosieguo dell’articolo analizzeremo prima gli utilizzi di base del component, poi svilupperemo un esempio in cui utilizzeremo il component AdvancedAutoComplete che presenta caratteristiche avanzate.

Se vuoi aggiornamenti su AutoComplete: un component per l'autocompletamento dei campi di testo inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su AutoComplete: un component per l'autocompletamento dei campi di testo

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy