È disponibile l’aggiornamento ad Aptana IDE, l’ambiente di sviluppo Web che supporta Adobe AIR e Apple iPhone. Tra le novità segnaliamo il miglioramento della sezione PHP con l’aggiornamento del Code Assist sia sulle funzioni che sui parametri. Migliorata anche la "colorazione" del codice. Aggiunto il supporto per gli ultimi framework Ajax tra cui Prototype.js e jQuery. Migliorata anche la gestione di Javascript.
Per la lista complete delle nuove funzionalità clicca qui.
È stata appena rilasciata la release candidate 1.6.0 di prototype con interessanti aggiornamenti all’intero sistema di API. In particolare il metodo observe dell’oggetto Event è stato migliorato e ora fornisce il contesto dell’oggetto che ha rilasciato l’evento. Questo “giusto” comportamento può tuttavia essere sovrascritto. Questo significa che per default this si riferisce all’oggetto che ha rilasciato l’evento. È stata introdotta anche la possibilità di creare eventi personalizzati. Altri miglioramenti riguardano la Function.prototype, le funzioni di DOM, Ajax, le funzioni delle classi e molto altro. Per una lista completa vedi il CHANGELOG.
Uno dei punti di forza di Adobe Flash risiede nella scelta di ECMAScript (sottoprodotti di ECMA – European Computer Manufacturers Association) come standard di scripting. ActionScript e Javascript, infatti, derivano entrambi da uno standard superiore che li rende estremamente simili. Questo è uno dei motivi per il quale molti programmatori ActionScript sviluppano con estrema semplicità anche in Javascript e viceversa.
ActionScript ha da sempre avuto una gestione “doppia” degli eventi che spesso ha confuso alcuni sviluppatori. Nei MovieClip, ad esempio, è possibile impostare un evento semplicemente dichiarando una funzione alla proprietà dell’evento stesso, ad esempio:
Metodo 1
1 2 3 | mio_mc.onRelease = function() { trace("Click sul MovieClip"); } |
Altri oggetti, diversamente, richiedono una gestione diversa dell’evento che si vuole monitorare, richiedendo il classico listener, un oggetto predisposto a tale compito. Ad esempio l’oggetto Mouse può essere controllato in questo modo:
Metodo 2
1 2 3 4 5 |
I componenti possiedono un’ulteriore variante, come il componente Loader:
Metodo 3
1 2 3 4 5 |
Perchè queste differenze? La ragione, in verità, è molto semplice. Il metodo 1, quello più immediato, viene utilizzato quando l’evento da “intercettare” è unico nel suo genere, cioè quando non ha senso far “scattare” più funzioni una di seguito all’altra. I metodi 2 e 3, invece, creano delle “liste” di “ascoltatori” e sono estremamente utili e potenti in quanto consentono di agganciare virtualmente infinite funzioni ad un determinato evento.
La stessa identica cosa accade in Javascript e la si può ammirare in librerie come prototype. Il comodissimo metodo observe(), messo a disposizione dall’oggetto Event, permette di agganciare funzioni ad un evento di un oggetto. Ad esempio:
1 | Event.observe(window, 'load', function() { alert("Finestra caricata"); } ); |
In questo caso abbiamo agganciato la nostra funzione che mostra un alert all’evento load dell’oggetto window. Potremmo tuttavia ripetere l’istruzione e agganciare un’ulteriore evento:
1 2 | Event.observe(window, 'load', function() { alert("Finestra caricata - 1"); } ); Event.observe(window, 'load', function() { alert("Finestra caricata - 2"); } ); |
Questa caratteristica, comune anche in ActionScript, è estremamente versatile è, in particolare in Javascript, è stata la chiave per la realizzazione di moltissimi “Widgets” ed estensioni (vedi il classico Snap) che oggi proliferano nel Web. La possibilità di accodarsi, infatti, ad eventi già controllati da altre funzioni, permette di essere non intrusivi (Unobtrusive) e quindi, in pratica, di aggiungere funzioni a quelle già presenti.
Adobe rilascia AIR (formerly code-named Apollo), acronimo di Adobe Integrated Runtime e, quindi, "successore" di Apollo. È possibile scaricare la versione beta rilasciata l’11 giugno qui: downloads AIR
Contemporaneamente viene rilasciata la build 0.2.8.15171 di Aptana IDE, ambiente di sviluppo eccezionale dedicato a sviluppatori HTML, PHP, Rails, Javascript ed ora anche con il supporto per AIR.
The Aptana IDE is a free, open-source, cross-platform, JavaScript-focused development environment for building Ajax applications. It features code assist on JavaScript, HTML, and CSS languages, FTP/SFTP support and a JavaScript debugger to troubleshoot your code.
Un temibile concorrente di Adobe Dreamweaver, almeno per i coders, visto che si tratta di un software gratuito integrabile, tra l’altro, con Eclipse. Misteriosamente, poi, Adobe ha rilasciato un’estensione per sviluppare applicazioni Adobe AIR solo per Dreamweaver CS3, abbandonando gli utenti della versione 8! Aptana, quindi, è un’ottima alternativa a Dreamweaver CS3, per chi vuole sperimentare lo sviluppo di package per Adobe AIR!
Tuttavia in Aptana la mancanza di una modalità WYSIWYG, ottima in Dreamweaver, ne diminuisce le potenzialità, che come già accennato sono indirizzate principalmente nell’editor di codice. Dreamweaver, in particolare con la release CS3, offre poi un’integrazione completa e ottimale con Flash CS3, Photoshop CS3 e tutti gli altri tools della nuovissima suite Creative Adobe, caratteristica completamente assente in ambienti IDE come Aptana.
L’IDE di Aptana, comuqnue sia, è spettacolare, comprensibile e dotata di tutte le caratteristiche vitali per un programmatore: gestione progetti, anteprime sui browser installati, autosalvataggio, confronto file, visualizzazione numeri di riga, editor completamente configurabile, collapse delle "taggature", XML incorporato, Debugger di alto livello, supporto italiano e moltissimo altro ancora.
Ottima la gestione della documentazione dinamica che permette di accedere alle specifiche W3C, Javascript e delle librerie (Web2.0 più note come Dojo, JQuery, Mootools, Yahoo (YUI) e Scriptaculous, tutto integrato in un unico ambiente nonostante la documentazione vera e propria venga prelevata direttamente dalla rete!
Aptana è disponibile per Windows (XP e Vista), Macintosh, Linux ed in Plugin per Eclipse. Sul sito sono disponibile moltissime features, compreso un Aptana.tv.
Insomma, per chi già sviluppa o per chi vuole iniziare a sviluppare applicazioni in Adobe AIR (qui troverete un tutorial video per iniziare lo sviluppo di applicazioni Adobe AIR), Aptana è un ambiente funzionale e confortevole, ottimamente integrato in rete e corredato anche da Plugin ed estensioni, alcune mirate per particolari browser come il debug per FireFox.
Ultima nota: alcune funzioni, come il Plugin per AIR, richiedono l’installazione delle runtime Java!
È uscita un’interessante indagine sulla quantità (non parliamo certo di qualità) di strumenti Ajax, in particolare Frameworks, che sono stati sviluppati in quest’ultimi anni, sia come puro Javascript lato Client che strati più ingegnerizzati lato Server; la pagina originale, in continuo aggiornamento, potete trovarla qui su Google Spreadsheet. La ricerca parte da AjaxPatterns dove sono stati elencati tutti i Frameworks presi in esame.
Come sottolinea l’autore (210 Ajax Frameworks and Counting) i dati non sono precisi al millesimo, quindi prendiamoli come indicativi, tuttavia forniscono qualche dato curioso.
|
Javascript puro – lato client |
||
| Flash | 3 | |
| Specialised | 3 | |
| Logging | 5 | |
| Graphics and Effects | 6 | |
| XML | 6 | |
| Remoting | 19 | |
| Multipurpose | 37 | |
| Totale | 79 | |
Sul fronte del puro Javascript è interessante notare il 19 di Remoting, che dimostra una forte attenzione per la tecnica Ajax in senso stretto, quindi a librerie che si sono concentrare nell’uso del controllo XMLHttpRequest. I Multipurpose, evidentemente, sono i preferiti, in quanto garantiscono l’inclusione di un unico pacchetto che – in teoria – fa un po’ tutto.
|
Pure Javascript |
||
| Eiffel | 0 | |
| Ruby, 4D, C#, Lisp, Tcl, Smalltalk | 1 | |
| Perl, Lotus Notes | 2 | |
| Coldfusion | 4 | |
| Python | 5 | |
| Multi-Language | 11 | |
| C++, DotNet (+ASP) | 19 | |
| PHP | 38 | |
| Java | 44 | |
| Totale | 229 | |
Sul fronte Server anche le grandi software house e i colossi informatici si sono davvero sbizzarriti ultimamente, infatti Java vince su tutti! Tuttavia il popolo di Internet risponde con PHP, open source per eccelenza. Microsoft e affini si trovano quindi dietro PHP con le tecnologie .NET etc…
Mi sono preso la briga di linkare le varie categorie così potete vedere i dati aggiornari ed avere anche un commento sui singoli Frameworks elencati. Uno sguardo può essere interessante ed istruttivo.
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!!
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!
Permettere agli utenti di interagire con una pagina Web ha prodotto negli ultimi anni un notevole aumento nell’uso di script lato client: codice Javascript in grado di rispondere e manipolare in tempo reale tutta una serie di informazioni. Il Web2.0 è la massima espressione di questa capacità di interazione, dove l’utente finale – il navigatore -partecipa attivamente alla costruzione e all’evoluzione del sito Web, interagendo con esso e contribuendo personalmente. Si parla quindi di User-Generated Content (o UGC – contenuto generato dagli utenti) che vede il “navigatore” sicuramente meno passivo!
Per realizzare questa interazione, per permettere quindi all’utente finale di aggiungere il suo contributo, sono state sviluppate una serie di tecniche che hanno modificato l’aspetto e il comportamento delle pagine Web (statiche sino ad oggi, mentre adesso simili alle tradizionali applicazioni dei Desktop) negli ultimi anni. Modificare il contenuto di una pagina, inviare dei file, dare il proprio voto ad un video o a un documento, registrarsi o modificare i propri dati, sono solo alcune delle operazioni richeste in tanti servizi (2.0 beta) presenti sul Web.
Scegliere la tecnologia da usare nello sviluppo di una Web Application è di vitale importanza, per non ritrovarsi nei guai subito dopo. Il tipo di Web Application, le sue caratteristiche di funzionamento, sono il primo punto da prendere in considerazione per poter scegliere il FrameWork e le tecnologie correlate.
Ho spesso discusso sull’efficacia di script Javascript nei confronti di tecnologie diverse come Adobe Flash o Java. Tuttavia è bene sottolineare un aspetto importante spesso sottovalutato: l’accesso al DOM. Javascript, in questo caso, è il candidato (per non dire il solo) prediletto per questo tipo di operazione.
Strumenti con Snap, ad esempio, funzionano su un semplicissimo meccanismo: quando la pagina HTML è caricata (e dopo aver inserito il caricamento dello script Javascript) viene eseguita una scansione della pagina HTML e aggiunto un nuovo codice in punti particolari. Nel caso specifico di Snap vengono identificati tutti i link a pagine esterne (o interne nella configurazione dell’ultimo rilascio), i TAG <A> per indenderci. Questi vengono modificati in modo tale che al passaggio del mouse si apra una finestra di anterpima del link (vedi questo stesso Blog per un esempio).
Non solo Snap ma molti altri script Javascript fanno praticamente la stessa cosa. Ultimamente questa tecnica si è largamente diffusa grazie alla libreria Prototype, che mette a disposizione tutta una serie di metodi (come il famoso $ o doppio-dollaro $$ – vedi Prototype: l’uso del doppio dollaro ($$)) sia per rintracciare che modificare – al volo – gli elementi di una pagina HTML.
Muoversi all’interno del DOM HTML è dunque compito specifico di Javascript. Storicamente, tra l’altro, Javascript fu introdotto proprio per leggere e scrivere i contenuti di una pagina HTML.
Se ad esempio volessimo fare alcune modifiche ad una pagina HTML tramite Adobe Flash, ci aggorgeremmo – o presto o tardi – di essere costretti ad invocare una funzione Javascript. Il nuovo ActionScript 3.0, ad esempio, mette a disposizione una classe (ExternalInterface) adatta a tale scopo. Una volta (nelle precedenti versioni di ActionScript) si usava il comando getURL() – oggi sostituita dalla migliore flash.net.navigateToURL() – o fscommad() per chiamare una funzione Javascript:
1 | getURL("javascript:miaFunzione()"); |
Inoltre:
The ExternalInterface class is the External API, an application programming interface that enables straightforward communication between ActionScript and the Flash Player container; for example, an HTML page with JavaScript, or a desktop application with Flash Player embedded.
Notate quel “desktop application” che tanto ricorda Apollo!
Oggi, grazie a ExternalInterface, è possibile invocare una funzione Javascript in modo quantomeno più pulito (questa classe permette una gestione notevolmente più efficace rispetto a getURL(), come ad esempio il passaggio di parametri):
1 2 3 4 5 6 | /* calls the external function "addNumbers" passing two parameters, and assigning that function's result to the variable "result" */ var param1:uint = 3; var param2:uint = 7; var result:uint = ExternalInterface.call("addNumbers", param1, param2); |
1 2 3 4 5 6 | <script><!-- // adds two numbers, and sends the result back to ActionScript function addNumbers(num1, num2) { return (num1 + num2); } // --></script> |
Cosa possiamo concludere quindi? Tra tutti i vari framework e librerie disponibili l’analisi iniziale del progetto che si vuole realizzare rimane di fondamentale importanza. Sbagliare questa fase può compromettere seriamente le successive fasi di qualsiasi progetto Web2.0. Javascript, quindi, vince su tutti quando si deve interagire con il DOM.
Con l’ultimo rilascio di Prototype, Andrew e Christophe hanno velocizzato e migliorato la funzione ‘doppio dollaro’ ($$ utility), la quale permette di selezionare un elemento specificando il selettore (praticamente tutti i selettori supportati dalle specifiche CSS3).
L’utilità di questa funzione va ben oltre la popolare $, che può essere utile ma, in fin dei conti, non svolge nessuna operazione degna di nota. L’utility ‘doppio dollaro’ ($$) invece permette davvero di selezionare qualsiasi tipo di elemento, fornendo ottimi strumenti per filtrare gli elementi nel DOM.
Vediamo alcuni esempi ripresi dal sito ufficiale:
1 2 3 4 5 | $$('div'); // -> Tutti i DIV del documento. Stessa cosa di document.getElementsByTagName('div')! $$('#contents'); // -> Uguale a $('contents'), ma ritorna sempre un array. $$('li.faux'); // -> Tutti fli elementi LI con class 'faux' $$('#contents a[rel]'); // -> Tutti i TAG A (links) al di sotto di un elemento con ID "contents" e con un attributo rel $$('a[href="#"]'); // -> Tutti i TAG A (links) con un'attributo href con valore "#" (eyeew!) |
Il punto di forza, tuttavia, risiede nella possibilità di escludere alcuni elementi in favore di altri, ad esempio:
1 | $$('a:not([rel~=nofollow])'); // -> Tutti i TAG A (links), esclusi quelli che contengono un attributo rel impostato a "nofollow" |
Ancora più interessante è:
1 | $$('a[href^=#]:not([href=#])') |
Questo, in pratica, trova tutti i TAG A con l’attributo href che inizia con ‘#’ ma non prende in considerazione quelli che sono uguali a ‘#’ solamente. In altre parole vengono ignorati i links che non puntato ad un valido ID!
Questa eccezionale caratteristica del ($$) ha ispirato Tobie Langel per creazione di un semplicissimo script (disarmante) in grado di aggiungere un simpatico effetto di scroll quando all’interno di una stessa pagina HTML ci si sposta per Anchors, con la tecnica – appunto – href=”#”.
Per un Demo clicca qui.
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...