Anteprima della libreria di effetti Scriptaculous, la 1.8 in attesa della 2.0:
Per la lista completa dei miglioramenti vide il CHANGELOG
Ne avevamo già parlato di questa libreria Javascript Unobtrusive realizzata dallo stesso autore di LightWindow 2.0. Viene ora rilasciata la versione 2.0, che fa sempre uso di scriptaculous.
Tra le novità più interessanti troviamo la possibilità di “innestare” gli Accordion uno dentro l’altro, sia in modlità orizzontale che in verticale.
Allontanandosi poi dall’originale funzionamento degli Accrodion classici è stata aggiunto il comportamento di apertura/chiusura. Sul sito è possibile scaricare lo script (indicato ancora con la dicitura 1.0!?) e accedere agli esempi di codice.
Un’interessante e utile libreria Javascript basata sull’accoppiata Prototype e Scriptaculous che permette di aggiungere la funzione di DatePicker (componente presente in ActionScript/Flash) in normali INPUT TEXT HTML.
La sua caratteristica Unobtrusive (non intrusiva) lo rende uno strumento ideale per espandere le funzionalità di un sito già precostituito. Per attivare la funzione di DatePicker basta aggiungere la classe “date” nel nostro TAG INPUT. Nel codice Javascript è possibile impostare una serie di parametri tra cui il suporto per la lingua italiana.
Ecco una porzione di codice esemplificativa:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <script type="text/javascript" src="/prototype.js"></script> <script type="text/javascript" src="/scriptaculous.js"></script> <script type="text/javascript" src="/datepicker.js"></script> <style type="text/css"> @import("/css/datepicker.css"); </style> <form> <input type="text" id="date-from" name="date-from" /> </form> <script type="text/javascript"> var dpck = new DatePicker({ relative : 'date-from', language : 'en' }); </script> |
Finalmente un bello script in Javascript (scarica Accordion 1.0), semplice e leggero, che permette di aggiungere il componente Accordion usato in Flash e in mootools sfruttando la libreria scriptaculous. Effettivamente mancava questo oggetto, utile in tante occasioni. Questa versione è estremamente semplice e permette di creare Accordion sia orizzonali che verticali. Lo script è gratuito, tuttavia potete fare una piccola donazione all’autore per aiutarlo ad acquistare un bel MacPro 
Per utilizzarlo basta inserire queste semplici righe di codice:
1 2 3 |
Il markup HTML è immediato:
1 2 3 4 5 6 7 8 9 10 11 |
Un’esempio pratico:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | // General Syntax new accordion('container-selector', options); // Horizontal example var horizontalAccordion = new accordion('#top_container', { classNames : { toggle : 'horizontal_accordion_toggle', toggleActive : 'horizontal_accordion_toggle_active', content : 'horizontal_accordion_content' }, defaultSize : { width : 525 }, direction : 'horizontal' }); // Vertical Accordion var verticalAccordion = new accordion('#bottom_container'); |
Dopo aver sistemato la grafica di Undolog e aver apportato gli ultimi ritocchi ad alcuni titoli (vedi sidebar), mi sono divertito ad usare l’accoppiata Prototype.js e Scriptaculous, in modalità non intrusiva (Unobtrusive)! Ecco un video (ma lo potete provare di persona qui a destra ) con la simpatica funzione che ho aggiunto alla sidebar di Undolog, che oltre a renderla più gradevole spero la renda anche più funzionale!
Il codice che ho utilizzato è davvero semplice:
1 2 3 4 5 6 7 8 9 | Event.observe(window, 'load', function() { $$('h2.dropdown').each( function(element) { element.style.cursor="pointer"; element.observe('click', function(event) { if( this.next().style.display == "" ) new Effect.BlindUp(this.next(),{duration:.5}); else new Effect.BlindDown(this.next(),{duration:.3}); Event.stop(event); }.bindAsEventListener(element)) }) }) |
Inoltre notate che la prima volta che viene caricata la Home Page di Undolog viene automaticamente chiuso il pannello delle Categorie – identificato dall’id tit_category:
1 | Event.observe(window, 'load', function() {new Effect.BlindUp($("tit_category").next(),{duration:.5}) } ) |
I titoli sulla sidebar sono definiti, quindi, in questo modo:
1 2 3 4 |
Tramite la classe dropdown vengono identificati i titoli H2 da rendere dinamici, grazie alla funzione doppio-dollaro ($$) di Prototype.js – di cui abbiamo già parlato…
L’inserimento di oggetti (in particolare Flash Objects) all’interno delle pagine Web è diventato ultimamente un’attività spesso stressante. In altri Post abbiamo già affrontato l’argomento di come rilevare Flash ed inserirlo nelle pagine in modo appropriato. Dato che abbiamo parlato di tecniche Unobtrusive, vi segnalo due noti script in grado di rilevare (ed eventualmente installare) ed inserire oggetti Flash in una pagina, in modo assai afficiente e poco intrusivo: SWFObject e UFO.
Entrambi gli script offrono in sostanza le stesse caratteristiche e un funzionamento identico. L’approccio è quello che sostituire tramite Javascript un determinato TAG con il contenuto Flash. Come sappiamo questo procedimento elimina il problema dell’attivazione dell’oggetto Flash imposto da Internet Explorer, tuttavia implica che Javascript sia attivato sul target-browser.
Entrambi gli script non fanno uso di librerie esterne, come Prototype.js ad esempio. La differenza più importante tra i due è che SWFObject va chiamato quando il TAG da sostituire è già stato caricato nella pagina, modalità non propriamente Unobtrusive. Ecco uno stralcio di codice che mostra la sequenza di chiamata:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <div id="flashcontent"> <strong>You need to upgrade your Flash Player</strong> This is replaced by the Flash content. Place your alternate content here and users without the Flash plugin or with Javascript turned off will see this. Content here allows you to leave out <code inline="true">noscript</code> tags. Include a link to <a href="swfobject.html?detectflash=false">bypass the detection</a> if you wish. </div> <script type="text/javascript"> // < ![CDATA[ var so = new SWFObject("so_tester.swf", "sotester", "300", "300", "9", "#FF6600"); so.addVariable("flashVarText", "this is passed in via FlashVars for example only"); // this line is optional, but this example uses the variable and displays this text inside the flash movie so.write("flashcontent"); // ]]> </script> |
UFO, invece, permette un’approccio decisamente più in linea con i classici script Unobtrusive. La sostituzione del TAG avviene in modalità trasparente, senza abbligare sequenze di caricamento, come mostrato nell’esempio qui sotto:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <head> <title>Unobtrusive Flash Objects (UFO) | Sample page</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <script type="text/javascript" src="ufo.js"></script> <script type="text/javascript"> var FO = { movie:"test8.swf", width:"300", height:"120", majorversion:"12", build:"0", xi:"true" }; UFO.create(FO, "ufoDemo"); </script> </head> <body> <div id="ufoDemo"> <p>Replacement content</p> <p><a href="http://www.macromedia.com/go/getflashplayer"><img src="http://www.macromedia.com/images/shared/download_buttons/get_flash_player.gif" alt="Get macromedia Flash Player" style="border: none;" /></a></p> </div> </body> |
Nel codice sorgente dello script di UFO, infatti, si nota immediatamente l’uso – più appropriato – di un evento che attente il caricamento completo della pagina prima di eseguire la sostituizione; approccio quindi estremamente più consono a script non intrusivi.
Tra le varie librerie – o insieme di librerie (veri e propri framework), dedicate ad Ajax, estensione dell’interfaccia HTML e Web2.0 che mi è capitato di vedere, Ext è sicuramente degno di nota. Il sito Web e la documentazione sono ben fatti e organizzati, inoltre i demo online sono da non perdere. L’interfaccia grafica, la compatibilità con Prototype e Scriptaculous e l’impletazione dei Yahoo Utils, ne fanno un sistema quantomeno interessante! Attenzione però alla licenza! Nonostante si presenti come open source e gratuito, per usi personali, richiede un pagamento per potenziarne l’uso e l’assistenza. Quest’ultima, infatti, non è mai da sottovalutare in framework di una certa complessità.
Per la documentazione e i demo clicca qui.
In particolare cito questo sistema, che sto ancora analizzando in dettaglio, in quanto è stato utilizzato per creare Fresh Feed Reader, una delle applicazioni di esempio fornite con la versione Alpha di Adobe Apollo (vedi Adobe Apollo Alpha Release). Fresh, quindi, è un duplice esempio dell’uso di Apollo, che dimostra le sue capacità di sfruttare HTML e Javascript al massimo. Fresh, infatti, non è un’applicazione Apollo pura, ma usa il framework Ext- e quindi Javascript e HTML – all’interno del motore Apollo! Fantastico!!
In questo Post vorrei analizzare l’uso di script unobtrusive dal punto di vista del Web Designer. Normalmente, infatti, uno script non intrusivo è tale nei confronti del navigatore finale!
Ma può esserlo anche per il Web Designer?
Mettendoci nei panni di un Web Designer potremmo identificare due categorie di unobtrusive Javascript: true unobtrusive Javascript e pseudo unobtrusive Javascript.
Entrambe le categorie, tuttavia, non sono completamente non intrusive (sempre dal punto di vista del Web Designer). Un reale e completo unobtrusive Javascript non dovrebbe richiedere nessun intervento nella pagina Web, ma questo è – per ora – sostanzialmente impossibile. L’operazione minima richiesta durante l’installazione di uno script è comunque l’inserimento dell’inclusione dello script stesso! Viene dunque ammessa tale operazione che – effettivamente – non costringe il Web Designer ad apportare modifiche straordinarie alla struttura della pagina. Il semplice posizionamento dell’inclusione dello script all’interno del Tag head può essere quindi considerato non intrusivo.
Gli script di questo tipo sono quelli che richiedono la sola inclusione dello script unobtrusive e non ;pretendono nessun’altra operazione! Script di questo tipo sono, ad esempio (il solito e citatissimo), Snap. Una volta inserito il codice di inclusione il Web Designer non deve svolgere nessuna operazione ulteriore, in quanto lo script di Snap opera su Tag standard.
Questi si differenziano dai precedenti in quanto richiedono una taggatura ulteriore per funzionare correttamente. Esempi di questo tipo sono i Control.Tabs di Ryan Johnson o la libreria per gli slideshow Lightbox JS. Quest’ultima soluzione, ad esempio, richiede l’inserimento nel Tag A dell’attributo rel per identificare i link che devono essere modificati. Lightbox JS, in particolare, richiede addirittura la presenza esplicita sia di Prototype che di Scriptaculous. Come indicato sul sito di Lightbox JS, l’inclusione dello script deve essere di questo tipo:
1 2 3 |
I link che puntano ad un’immmagine che si vuole visualizzare con il sistema Lightbox JS devono essere scritti in questo modo:
Inoltre per identificare un gruppo di immagini, per aggiungere la capacità di scorrere avanti e indietro le immagini, i Tag A devono essere impostati nel modo seguente:
1 2 3 |
La necessità di tali costrizioni risulta evidente; non esiste un modo semplice per distinguere un elemento link (Tag A) da un altro. In particolare non è possibile capire quale elemento il Web Designer vuole visualizzare in un modo o in un altro. Dev’essere necessariamente il Web Designer ad indicare in qualche modo i Tag e i loro comportamenti. Sono quindi richieste – intrusive – del tutto comprensibili, che non sminuiscono affatto l’utilità e le potenzialità di questi script. Comportano solo un dettaglio maggiore e qualche riga di codice in più al Web Designer.
È interessante, comunque, il doppio aspetto dell’unobtrusive Javascript, analizzato sia dal punto di vista dell’utente finale sia dal punto di vista Web Designer.
Come promesso ecco qualche esempio concreto di unobtrusive Javascript, strumento davvero potente e versatile se usato a dovere. Sul sito/Blog di Ryan Johnson è possibile scaricare due esempio davvero ottimi di unobtrusive Javascript:
Ryan Johnson, nei suoi script, fa uso della libreria Prototype, come molti del resto. Ha scritto anche alcune estensioni relativamente alla Prototype, poi introdotte – in forma diversa – nell’ultima versione della libreria.
Usare Prototype per illustrare il funzionamento di codice unobtrusive Javascript è generalmente più comodo – come vedremo più avanti, tuttavia ecco un primo esempio grezzo che non richiede nessuna librerie esterna. Cominciamo ricordando che il concetto che sta alla base del unobtrusive Javascript è quello di partire da una qualsiasi pagina HTML (standard e non necessariamente scritta da noi – altro importantissimo punto di forza) e sfruttare Javascript per apportare alcune modifiche.
Schematimamente il concetto è quello di eseguire una funzione che analizza il codice HTML, attraversa quindi il DOM e in punti particolare aggiunge o modifica funzionalità. Normalmente si sfruttano due metodi per eseguire codice Javascript al caricamento di una pagina: il primo è quello che non racchiudere il codice in nessuna funzione e quindi lasciare che il browser esegua immediatamente il codice caricato nel punto in cui compare la chiamata:
Stesso risultato lo si ottiene includendo il codice:
Tuttavia quando si deve operare sul DOM di una pagina si presuppone che essa si a completamente caricata, cioè che tutti i TAG della pagina sia presenti e disponibili per essere rintracciati. Così la soluzione migliore diventa quella di essere sicuri che la pagina sia completa. Ciò è possibile agganciandosi all’evento onload del TAG body ad esempio, che viene rilasciato quando il caricamento della pagina è completo.
1 2 3 | window.onload = miafunzione; // oppure, che è lo stesso window.onload = function() { alert("Hello"); } |
Da evitare, ovviamente, la soluzione canonica che definirla intrusiva sarebbe un eufemismo:
1 | <body onload="miafunzione()"> |
Altra tecnica, più rozza e ugualmente intrusiva (in quanto costringerebbe l’utente finale a posizionare il codice in un punto particolare), è quella di inserire il nostro script alla fine del documento, prima della chiusura del Tag body; tecnica oramai obsoleta e usata in rari casi (vedi Google Analytics!).
Ancora meglio è usare il metodo qui sotto:
1 2 3 4 5 6 7 | if (window.addEventListener) { window.addEventListener("load", miafunzione, false); } else if (window.attachEvent) { window.attachEvent("onload", miafunzione); } else { window.onload = createSubMenus; } |
Anche questo frammento di codice non è racchiuso in una funzione. Esso aggiungerà un event listener per l’evento load della finestra, richiamando la nostra funzione miafunzione(). I browser moderni, come FireFox ad esempio, useranno la funzione addEventListener() definita nella specifica DOM Level 2, mentre Internet Explorer userà la sua funzione proprietaria attachEvent(). Tuttavia non siamo ancora alla perfezione: in questa maniera, infatti, si rimpiazzeranno tutti gli – eventuali – eventi onload creati da altri script, il che non è proprio “non intrusivo”.
Per risolvere rapidamente la questione, che per via dei diversi comportamenti dei browser sarebbe quantomeno complicata da esporre qui, conviene usare libreirie come Prototype che forniscono un’elengantissimo metodo per superare il problema:
1 | Event.observe(window, 'load', function() { alert("Hello"); } ); |
La sintassi è davvero ovvia e spettacolare! Il vantaggio, per chi non lo avesse capito, è quello di poter scrivere:
1 2 | Event.observe(window, 'load', function() { alert("Hello 1"); } ); Event.observe(window, 'load', function() { alert("Hello 2"); } ); |
Al caricamento della pagina verrà mostrato prima l’alert “Hello 2″ e poi l’alert “Hello 1″. In pratica si carica in modo FILO (First Input Last Output) un stack, garantendo comunque l’esecuzione di tutti gli eventi agganciati al load del documento, esattamente quello che si voleva ottenere. In questo modo una pagina può caricare – virtualmente – infiniti unobtrusive Javascript che si agganciano alla load del documento.
Ma cosa si può fare con questa tecnica? Molte cose interessanti. Un esempio che possiamo commentare (vedi anche Prototype: l’uso del doppio dollaro ($$)) ci viene da Tobie Langel. Con poche righe di codice e scaricando le librerie Prototype e Scriptaculous si può dare un simpatico effetto ai classici anchor delle nostre pagine. Prima di tutto create una pagina HTML con il seguente codice:
1 2 3 4 5 6 7 8 |
Includete nella pagina:
1 2 3 4 5 6 7 8 9 10 11 12 | <script src="prototype.js" type="text/javascript" charset="utf-8"></script> <script src="scriptaculous-js-1.7.0/src/effects.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" language="javascript1.2"> Event.observe(window, 'load', function() { $$('a[href^=#]:not([href=#])').each(function(element) { element.observe('click', function(event) {new Effect.ScrollTo(this.hash.substr(1)); Event.stop(event); bindAsEventListener(element)) }) }) </script> |
Grazie all”uso di Event.observe() e alla funzione doppio-dollaro ($$) è possibile modificare in modo semplice il comportamento del classico anchor. In questo caso viene agganciata una nuova funzione al caricamento della pagina HTML. Quando scatta l’evento load vengono rintracciati nel DOM tutti i link (Tag <A>) con l’href che inizia con cancelletto (#, escludendo quello con solo cancelletto!). A questi elementi viene agganciata una funzione all’evento click, similmente a quanto fatto con la load del documento. A questo punto entra in gioco Scriptaculous che produce un effetto di scroll verso l’elemento punatato dal nostro link – modificato!
Ultimi Commenti
Giovambattista Fazioli: @Nik: Sono contento! In bocca al lupo dunque!!
Nik: Lunedì ho l’esame di informatica su java, grazie mi sei stato utilissimo, il libro che ho era poco chiaro...
Marco: Ti ringrazio moltissimo, mi hai illuminato
ho risolto impostando [cc_objc] //OptionViewController.m -...
Giovambattista Fazioli: @Marco: Ti consiglio un approccio credo più corretto. Se hai eseguito il subclass del tab...
luigi: molto chiaro e semplice devo ammettere che anche scrivendo da un pà difficilmente uso delegati creati da...