La libreria Yahoo User Interface (YUI)

Continua il lavoro di Yahoo! volto allo sviluppo della libreria Yahoo User Interface (YUI), una collezione di tools utility e controlli scritti in JavaScript da integrare nelle pagine web dinamiche. Esaminiamo i tools che comprenderà la libreria.

Fino ad ora ne sono stati portati a termine 6, e sono: l' Animation utility, il Connection Manager, la Drag and Drop utility, la DOM collection utility, l' Event Utility e la YAHOO Global object. in fase di sviluppo troviamo invece le utility DataSource, Element e Browser History Manager.

La YAHOO Global Object è la namespace dentro la quale risiedono tutti i codici dello YUI. La si può integrare in ciascuna pagina, per far sì che essa possa usufruire di tutti i servizi del pacchetto.

L' Animation utility invece fornisce una semplice implementazione di animazioni nella pagina, per far muovere gli oggetti per la pagina, regolarne le dimensioni, i colori ed altri interessanti parametri, il tutto in stile Ajax.
Corsi online:

* HTML avanzato e CSS
* WebMaster: realizzare un sito da zero
* Flash MX Base
* Flash MX - Action Script
* Macromedia 8
* WebDesign (Photoshop,..)

Creare un' animazione-base è molto semplice. Basterà selezionare l' oggetto al quale dar vita ed usarvi una serie di attributi che dicano allo script quali azioni fargli svolgere.

La Connection Manager utility permette di effettuare richieste HTTP in-page, tramite un' interfaccia semplificata dall' elemento XMLHttRequest dell' AJAX. Ciò permette di inviare richieste da server a server e ricevere le risposte in pochissimo tempo e con pochissime linee di codice, senza preoccuparsi della possibilità che browsers diversi creino richieste HTTP differenti.

Ottimo effetto DHTML è quello offerto dall' utility Drag and Drop. Un tempo effetti di questo genere richiedevano un' elevata conoscenza del linguaggio di programmazione, e molteplici linee di codice. Ora con questa utility la fatica viene ridotta pressochè a zero: basterà selezionare l' oggetto da rendere drag-droppabile e associarlo ad un' istanza YAHOO.util.DD.

L' Event utility fornisce un' interfaccia semplificata per la creazione di eventi DOM e per la creazione di eventi personalizzati.

L' utility Element (in fase di beta) fornisce invece un involucro per gli elementi HTML nella DOM, per semplificare le principali operazioni su di essi.

Per interagire con i dati contenuti in varie sorgenti-dati, quali gli array JavaScript, c'è l' utility DataSource.

Per facilitare la creazione di applicazioni web nelle quali i bottoni Avanti ed Indietro dei browsers risultino perfettamente funzionali, è stato sviluppato il Browser History Manager.

Analizzate le utility, facciamo luce sui controlli implementati nella YUI. Ora come ora sono 8 quelli completati e pronti per essere utilizzati, ma il numero non è definito.

Il primo controllo è l' AutoComplete, che fornisce un motore di suggerimento parole. Associandolo ad un campo di testo fornirà suggerimenti all' utente su ciò che stà scrivendovi. Per funzionare, interagisce con il DataSource utility.

Il controllo Calendar permette agli utenti la scelta di una o più date graficamente, tramite un calendario graficamente gradevole e facilmente implementabile nelle form che richiedono l' inserimento di date (Es: data di nascita).

C'è poi il controllo Container, creato per permettere ai programmatori la creazione di diversi tipi di moduli container, ciascuno con le sue funzionalità.

Per leggere i messaggi che si ricevono quando i controlli o le utility vengono inizializzate, c'è il controllo Logger. Serve prevalentemente nelle operazioni di debugging.

C'è poi il controllo Menu, che permette la creazione di gradevoli menu senza bisogno di un elevato numero di righe di codice e di studi in riguardo alla compatibilità di esso con ciascun browser.

Il controllo Slider serve invece per aggiungere una sostituzione visuale di qualcosa inserito in una casella di testo. Questo controllo è utile nel momento in cui si ha una textbox che deve richiede l' inserimento, ad esempio, di numeri all' interno di un determinato range. In caso l' utente sgarri da esso, il controllo ritoccherà ciò che lui ha inserito. Lo si può combinare all' utility Animation.

Per aggiungere una pagina contenente una tabella di contenuti, c'è il controllo TabView. Ciascuna tabella viene segnata con un semplice <li>.

Yahoo ha creato pure il controllo TreeView, utile per creare una struttura a grafico ad albero nella pagina da caricare dinamicamente.

Il controllo Beta Button permette invece di avere bottoni elaborati graficamente che abbiano però le stesse funzionalità di quelli standard dell' HTML. Il controllo può creare 8 tipi diversi di bottoni: classico, specifico per i links, di submit e di reset, un ceckbox o un radio, uno proprio per i menu (se clickato mostra/nasconde un menu) ed uno split, per eseguire un comando utente specifico.

Infine il controllo DataTable che, interagendo con l' utility DataSource, fornisce un ottima formattazione in tabella dei vari flussi di dati.

Quella di questo articolo è, ovviamente, un' infarinatura generale, per informazioni maggiormente tecniche invece rimandiamo al portale di Yahoo!, che fornisce ampia documentazione sulla YUI.



Powered by ScribeFire.

Commenti