Nell'era del Web 2.0 innumerevoli startups, ma anche aziende e singoli sviluppatori, hanno partecipato alla nascita di nuove tendenze nella programmazione Web. Alcune idee sono risultate vincenti, altre un po' meno, altre ancora hanno aperto la strada a nuove prospettive per lo sviluppo. In particolare, abbiamo assistito ad un grande sviluppo dei Frameworks, strumenti utili per creare basi solide e condivise nello sviluppo e a semplificare le più comuni operazioni quotidiane.

Strumenti che, per quanto esistenti prima dell'epoca 2.0, hanno certamente vissuto un momento di notevole espansione negli ultimi anni evolvendosi fino ad adeguarsi alle rinnovate e più complesse necessità degli sviluppatori. In questo articolo ci occuperemo di frameworks per lo sviluppo di javascript. Tra questi, i più noti nelle community degli sviluppatori sono sicuramente Script.aculo. us, jQuery, Moo-Tools, JSExt e Prototype (che è anche alla base del primo Framework menzionato), ciascuno con le sue caratteristiche e le sue particolarità. Da non molto tempo possiamo però contare su un nuovo Framework molto innovativo e particolarmente semplice nel suo uso: JAST.

Figura 1 - L'home page di Jast Eg it (http://jastegg.it/) presenta una ricca documentazione sul framework

La prima operazione da fare per poter iniziare il nostro interessante cammino, è procurarsi una copia della libreria, il Core, di soli 10 Kb. Nel CD è disponibile la versione 0.2 alpha, ma gli esperimenti effettuati hanno dimostrato un'ottima stabilità del sistema e una quasi totale compatibilità cross-browser. Comunque, controllate sempre la presenza di nuove release sul sito www.jastegg.it (Figura 1). JAST è sviluppato in modo tale da rendere la vita di uno sviluppatore molto semplice, non richiede particolari skills per poter iniziare a lavorarci e basta leggere la documentazione presente sul sito (www.jastegg.it) per essere in grado di sviluppare qualcosa.

Figura 2 - I tooltip sono messaggi di supporto presentati quando ci si posiziona su una casella di testo o su un elemento della pagina

 

Il framework promette di essere un sistema che semplifica il processo di sviluppo aiutando a scrivere dei componenti che siano anche accessibili (quindi utilizzabili da strumenti assistitivi).

IL CORE: LA SINTASSI
Il Core di JAST dispone di una serie di funzioni e classi utili allo sviluppo di script accessibili e cross-browser. A differenza di altri framework Javascript, JAST consente di operare con le sue funzioni includendo solo la chiamata allo script nella sezione HEAD della pagina Web.

Figura 3 - Una tooltip in cui un elemento della pagina con attributo title ha una formattazione diversa

 

   

Figura 4 - Sul sito ufficiale Jast Eg (http://jastegg.it/) sono disponibili diversi Eggs per le più disparate necessità

Abbiamo caricato il Core nella nostra pagina, ma senza eseguire ancora nulla. Il core espone due oggetti per poter gestire il Framework: uno denominato "notazione breve" e l'altro denominato "notazione estesa". La prima consente di richiamare le funzioni del Framework utilizzando un solo carattere: "_" (Underscore). La seconda, invece, prevede la digitazione del nome completo dell'oggetto: JASTEggIt. Facciamo subito un esempio con un metodo messo a disposizione dal Framework esattamente per verificarne il funzionamento:

 

Utilizzare la notazione breve o quella estesa non comporta alcuna differenza nella gestione del Framework. È bene però inserire il tag che consente il caricamento del Framework, come visto nel primo esempio di codice, prima di ogni altro script così da evitare conflitti sull'uso della chiamata breve. Questo consentirà di evitare che il Framework possa sovrascrivere un metodo o una classe di un altro script identificato sempre dal nome "_", anzi lasciando che chiunque possa sovrascrivere la sua notazione breve. C'è però da fare un appunto: nel caso di sovrascrittura della notazione breve da parte di qualche altro oggetto, è necessario puntare al Framework esclusivamente tramite la sua notazione estesa: JASTEggIt. Per scoprire alcune caratteristiche del Framework svilupperemo un plugin che mostrerà dei tooltip personalizzati sugli elementi del documento.

TOOLTIP PERSONALIZZATI
I tooltip sono quei messaggi di supporto che vengono presentati quando ci si posiziona su una casella di testo o su un elemento della pagina, che potrebbe suggerirci qualche informazione supplementare (Figura 2). Il codice dovrà ricercare tutti gli elementi sulla pagina e, per quelli che hanno l'attributo title, generare una casella stilizzata alla quale attribuiremo uno stile che presenta il contenuto dell'attributo title (Figura 3).

Tale codice esegue la selezione e la scansione di tutti gli elementi del documento. La funzione _name( ) richiede due parametri tagName e Parent, il primo identifica il tag da ricercare (* per selezionarli tutti), il secondo invece è il contesto di ricerca, se non specificato la selezione avviene sull'intero documento.

Per visualizzare il tutto in un'area custom, abbiamo bisogno però di un elemento che sarà il nostro visualizzatore. Per cui creiamo un DIV che sarà il nostro elemento, contenitore del tooltip, sulla pagina:

Com'è intuibile, abbiamo creato un elemento di tipo DIV sulla pagina e gli abbiamo attribuito uno stile (display: none;) preservando l'id del DIV generato in una variabile che ci tornerà utile in seguito. A questo punto elaboriamo nel ciclo solo gli elementi che hanno la proprietà title:

L'evento Mouse Over e Mouse Out deve far riferimento a ciascun elemento della pagina al quale sia associato un attributo title. Questi eventi si scatenano quando il mouse viene posto sull'elemento (Mouse Over) e quando il mouse non punta più l'area d'interazione dell'elemento (Mouse Out). Per la creazione degli eventi abbiamo utilizzato una funzione del core: event () che si occupa di agganciare ad un elemento, una funzione che sarà scatenata per uno specifico evento. La funzione displayTooltip si occuperà quindi di collocare l'elemento div nella posizione corretta:

  Mettendo insieme tutti questi frammenti di codice si ottiene il listato completo, che per comodità abbiamo inserito all'interno del CD nella sezione Nella Rivista (Listato 1).

"COVIAMO UN UOVO"
Una delle caratteristiche più interessanti di JAST è la sua semplicità nel creare plugin, o Egg (Figura 4). Per realizzarne uno nostro basta trasformare il codice precedentemente sviluppato. Quello che bisogna ricordare prima di creare un plugin per JAST è che non bisogna fare riferimento dall'interno del plugin al Framework tramite la notazione breve (_) ma tramite la sua forma estesa: (JASTEggIt). Assodato ciò, studiamo la sintassi di un Egg.

JastEggIt.extend( <nome-egg>, <egg> );

Il parametro  <nome-egg> fa riferimento alla stringa contenente il nome del plugin. Questo nome potrà essere poi utilizzato per fare riferimento all'Egg successivamente. Il nostro Egg lo chiameremo tooltip. Per cui, dopo aver richiamato il metodo _.extend( ) potremo far

Figura 7 - JSON (JavaScript Object Notation) si propone come il successore all'XML nel browser per lo scambio di informazioni fra il browser e il server

riferimento a questo nuovo oggetto utilizzando una sintassi del tipo _.tooltip. <egg> è invece un oggetto nella notazione JSON. Quindi, scrivere un codice del genere corrisponde all'aver creato un Egg per JAST:

 _.extend( 'tooltip', { } );

Per rendere l'Egg visibile all'utente (requisito necessario per rendere un Egg ufficiale), è necessario esporre una proprietà che corrisponde ad un altro oggetto in notazione JSON. L'oggetto si chiama info e prevede all'interno alcune informazioni sul plugin:

...QUANDO L'UOVO SI SCHIUDE
Per richiamare il plugin ci sono due modi. Tramite il metodo startup( ) (rigorosamente senza parametri) se esiste nell'Egg sarà richiamato appena il Core di JAST si renderà conto che il DOM della pagina è disponibile, purché il metodo sia presente nel Plugin. Oppure tramite un metodo di esecuzione manuale solitamente denominato setup( ). Volendo fare un plugin completo, dovremo prevedere entrambe le opzioni, tramite avvio automatico e tramite chiamata da parte dell'utente (magari ha intenzione di richiedere l'elaborazione per un elemento iniettato in un secondo momento sulla pagina) (Figura 5). Quindi il nostro plugin sarà così costruito:

Assemblando i vari pezzi e modificando tutte le chiamate brevi al Framework in chiamate estese, abbiamo creato il

Figura 8 - Per garantire che un click su un link sia accessibile, occorre intercettare i click eseguiti con strumenti di navigazione alternativi quali per esempio la tastiera

nostro plugin. Il codice è riportato nel Listato 2 inserito nel CD allegato alla rivista. Nell'esempio allegato a questo articolo, l'ultimo elemento dell'elenco dei links è stato alterato iniettando il titolo tramite la funzione setup del nostro plugin. Come segue:

Il modello di un'applicazione sviluppata con JAST è rappresentabile graficamente con la sezione di uovo (Figura 6). Il guscio dell'uovo corrisponde al nostro sito o alla nostra applicazione Web, il tuorlo dell'uovo corrisponde al core di Jast mentre l'albume che si interpone tra la nostra applicazione ed il core sono i plugin o dei javascript che fanno uso del core.

Figura 6 - Il framework JAST può essere paragonato ad un uovo il cui guscio corrisponde al nostro sito o alla nostra applicazione Web

L'utente, in Figura 6, è rappresentato da un martello che interagendo con la nostra applicazione, produce degli eventi o delle richieste che vengono elaborate dai vari plugin, o direttamente dal Core, il quale produce una risposta adeguata (un effetto, una chiamata AJAX, generazione di un oggetto complesso).