E alcuni mesi che lavoro assieme a Simbul su un progetto interno a Kallideas realizzato integralmente in Flash CS3.
Data la mia predilezione per ECMAScript 3.x come linguaggio non ho potuto che apprezzare il passaggio di Flash da una interfaccia a livello codice orrenda e inconsistente ad un paradigma finalmente sensato con una Virtual Machine mostruosamente più efficiente e veloce (AVM2).

Fra i dispiaceri che posso annoverare ci sono:

1. L’utilizzo di ECMAScript 4.x (draft). ECMAScript 3.x utilizza il paradigma a oggetti basato su prototipi, mentre la 2.x ci aggiunge (e quasi preferisce) il paradigma a oggetti basato su classi (alla Java, C#, etc per intenderci). Se non fosse chiaro, preferisco i prototipi.
2. La scelta di obj.addEventListener(Event.EVENT, function() {}) invece di obj.onEvent += function() {}, sintatticamente più chiaro.

Non voglio però approfondire qui i miei rant su AS3, quindi proseguiamo con questo breve corso introduttivo. Tenderò a dire tante cose in modo molto sintetico, per dare un panorama generale e contemporaneamente tutti gli elementi necessari per partire. I buchi mancanti dovrete ovviamente riempirli voi… o chiedermi nel caso ulteriori spiegazioni.

Esternalizzare il Bootstrap del Codice AS3

Il progetto l’ho avviato fin da subito in modo che utilizzasse l’IDE praticamente solamente per la compilazione (ed eventualmente la programmazione, se non si ha un altro editor).

Questo può essere fatto nel modo grezzo mettendo sul frame 1 il seguente codice:

include "init.as";

Oppure il modo elegante implica configurare il file FLA aprendo File -> Publish Settings… -> Flash -> Settings… -> Document Class e scrivere qui il nome della classe AS che si posizionerà a fianco del file FLA (o in uno dei path di ricerca).
La classe richiamata deve ereditare da MovieClip (o credo da qualunque oggetto erediti da DisplayObject). Supponendo di aver scritto in Document Class il nome “MyApp” il codice contenuto nell’omonimo MyApp.as è:

package {
    import flash.display.MovieClip;

    public class MyApp extends MovieClip {
        public function MyApp() {
            // code
        }
    }
}

Dentro il costruttore della classe, come dentro il file “init.as” specificato nel metodo grezzo, scriverete il vostro codice AS3.
A questo punto Flash non lo toccherete più se non per eseguire il codice o debuggare.

Io consiglio di tenere il file FLA nella root del vostro progetto e creare una cartella source/ che conterrà tutte le vostri classi e package AS.

Se interessa come strutturare i package e le classi ActionScript consiglio Google e la documentazione Adobe piuttosto buona. Poi beh, se proprio volete scriverò un altro post.

Flex SDK (MXMLC) è free

Aver reso Flex SDK gratuito è assieme ad AVM2 e AS3 il motivo per cui ora ritengo la “piattaforma Flash” degna di sviluppo più consistente.

Potete scaricare Flex SDK (2.0 stable o 3.0 beta 2). Io utilizzo la 3, al momento senza alcun problema.

Alcuni vantaggi nel passare a MXMLC:

1. E’ free.
2. Eliminazione del peso di Flash CS3, che torna ad essere un ambiente visuale.
3. Possibilità di usare alcune macro di inclusione automatica [Embed].
4. Possibilità di usare MXML (“HTML per Flash”) e i suoi CSS.
5. Possibilità di eseguire script batch.
6. Possibilità di configurare sorgenti, librerie, etc in modo flessibile.
7. E’ meglio indicato per chi volesse sviluppare in AIR.

Per chi volesse c’è anche Flex Builder, che è l’IDE di sviluppo per Flex SDK. Io tendo a fare notare solo una cosa: è Eclipse. Il risultato è che pesa più di Flash CS3. DIY.

E ‘ bene notare anche una cosa: è vero che Flex è free (opensource), ma il formato SWF è ancora chiuso e soprattutto rimane chiuso Flash Player. La virtual machine AVM2 invece è aperta (Tamarin).
Certo, anche Windows come piattaforma è chiusa, anche OS X. Ognuno sceglie, però è meglio chiarire questo dubbio.

Da Flash a MXMLC

Se avete sviluppato il progetto come ho indicato sopra, ovvero senza praticamente niente realizzato dentro Flash CS3 non dovrete quasi riscrivere nessun codice.

Prima di tutto, passate al metodo elegante di bootstrap del codice.

• Se utilizzate classi nel namespace flash.* e non in fl.* allora il vostro codice è già pronto.
• Se utilizzate classi nel namespace fl.* dovete aprire la cartella contenente la vostra installazione di Flash CS3 e localizzare la cartella “fl” (su OSX si trova nella sottocartella “ActionScript 3.0/Classes/fl”). Prendetela e copiatela nella vostra cartella dei sorgenti (i.e. source/).
• Se utilizzate anche componenti fl.controls il metodo più semplice è creare un SWC da Flash CS3.
  Aprite quindi Flash, create un nuovo progetto AS3.
  Aprite il pannello components (Window -> Components) e trascinate nella Library tutti i controlli che volete utilizzare (non preoccupatevi, non saranno inclusi automaticamente tutti).
  Aprite File -> Publish Settings… e specificate di voler creare anche il file SWC.
  Pubblicate.
  Copiate il file SWC in una sottocartella del vostro progetto. Per i sorgenti consigliavo source/, qui consiglio lib/.
• Se includete font o altri oggetti grafici da libreria dovrete includerle nuovamente con [Embed(...)] o altre tecniche. Faccio notare che i comandi [Embed()] sono ignorati da Flash: le variabili su cui agiscono risulteranno quindi vuote se compilate da Flash, piene da MXMLC.

Come è abbastanza logico pensare potete vedere che all’aumentare delle risorse di Flash che avete utilizzato aumenta anche la difficoltà di transizione. Il vantaggio è però che avrete un progetto funzionante sia su Flash che su Flex.

Eseguire MXMLC

Una cosa molto interessante che ho scoperto solo recentemente è che MXMLC funziona anche prendendo come parametro un file AS, non soltanto file MXML.

Si tratta proprio dello stesso file AS creato con il metodo elegante di bootstrap del codice.

I parametri a linea di comando essenziali per MXMLC sono:

• -sp <path>: il path contenente i sorgenti AS. Se avete seguito il mio consiglio di sopra sarà quindi source/ (i.e. -sp ./source/).
• -library-path+=<path>: il path contenente le librerie SWC aggiuntive. Se avete seguito il mio consiglio sopra sarà quindi lib/ (i.e. -library-path ./lib/). Fate attenzione al “+=”.
• -default-frame-rate <int>: il framerate del file SWF generato. Non avete più un file FLA, quindi va specificato (i.e. -default-frame-rate 25).
• -default-size <int> <int>: le dimensioni di default del filmato SWF (i.e. -default-size 800 600).
• -default-background-color <hex>: il colore di sfondo del filmato SWF (i.e. -default-bacckground-color 0x0066cd).
• -compiler.warn-no-type-decl=false: questo lo utilizzo io perché ritengo importante che in AS3 la tipizzazione sia opzionale e la reputo uno dei più grossi vantaggi di AS3.
• -allow-source-path-overlap=true: questo comando evita un warning in MXMLC dovuto al fatto che avete la cartella source/ come sottodirectory del file che state compilando.

Sono tutt’ora in fase di osservazione e transizione, l’applicazione di cui parlavo all’inizio ad esempio è tutt’ora su Flash e vi sono alcune cose che devo ancora chiarirmi (ad esempio l’embed). Aggiornerò questo post.

A questo punto dovreste avere un progetto compilabile contemporaneamente su Flash e su Flex/MXMLC. Spero che non vi siate spaventati troppo.

Non sono molto d’accordo con questa definizione che ritengo superflua: Javascript è comunque utilizzato, HTML dovrebbe essere XHTML (quindi XML) e HTTP è una ovvietà.

Caricamento diretto via Ajax

Comunque, a parte questa digressione, questo tipo di funzionalità non fa altro che caricare tramite Ajax il contenuto di un elemento della pagina:

Prendo un esempio preso parzialmente da PhotoShakr:

$("#list").load("form/sets?user=" + $("#email").attr("value"))

Il comando è semplice ed intuitivo, come è prevedibile da jQuery:

1. Seleziono gli elementi con ID “list”. Essendo un ID è univoco.
2. Carico (load) al suo interno il risultato della pagina puntata dall’URL passato come parametro.
3. Il parametro è composto dal valore dell’elemento con id “email”, che non è altro che il campo del form contenente l’e-mail dell’utente.

Con una singola riga di codice ho interrogato il server, ottenuto il risultato e modificato la pagina.

Per rendere l’operazione un po’ più user-friendly poi ho preceduto la riga di cui sopra con:

$("#list").html("Asking Flickr...");

Che immediatamente cambia il contenuto del campo in modo che l’utente capisca subito che sta caricando qualcosa.

Dettagli su load()

Load accetta oltre all’URL anche due parametri opzionali: parametri e funzione callback.

1. L’URL è un normale URL, non credo vi sia niente da aggiungere.
2. I parametri sono costituiti da un hash contenente coppie di valori da passare (i.e. {test: true}).
3. La funzione callback è un oggetto funzione javascript (anche lambda, ovvero dichiarato al momento) che viene eseguito appena si è ricevuta risposta dal server. Questa funzione prende un parametro, data, che è il contenuto della risposta (i.e. function(data) { alert(“Ok!\n” + data); } ).

Ad esempio quindi la chiamata di cui sopra poteva diventare:

$('#list').load(root + 'form/sets', {user: $('#email').attr('value')});

Che è anche più chiaro da leggersi, separando la posizione della risorsa/comando (URL) dai parametri variabili passati.

Ajax: anche post() e get()

Però load() è un comando che carica direttamente nella pagina. Ajax in realtà consente manipolazioni più complesse che potrebbero non richiedere un inserimento 1:1 diretto del risultato sulla pagina.

Per questo motivo ci sono post() e get() che funzionano con gli stessi parametri, ma con la differenza che non si applicano a nessun elemento del DOM:

• $.post(url, params, callback);

• $.get(url, params, callback);

Come vedete la chiamata non specifica nessun elemento. La funzione callback anche qui ha un parametro che contiene l’oggetto XML.

$.post("test.cgi", function(data) { alert("Ok! " + data); })

Preciso un dettaglio importante che potrebbe sfuggire ai meno esperti: si dovrebbe utilizzare GET nel caso in cui non si modifica alcuna risorsa sul server, mentre POST quando si inviano dati che modiicano lo stato del server.

JSON, cross domain loading

Vi è anche un’alternativa ad Ajax, che utilizza un interessante workaround in grado fra le varie cose di aggirare i problemi di sicurezza connessi con la chiamata Ajax allo stesso dominio di appartenenza. Per quanto possa portare a possibili problemi di sicurezza, tutt’ora non mi risulta ve ne siano, né che i browser lo impediscano in alcun modo.

JSON è un formato di interscambio di dati semplice, basato su sintassi JavaScript (JavaScript Object Notation). Di fatto si tratta di una serie di strutture dati javascript (hash, array, …).

La nostra libreria jQuery supporta anche questo tipo di chiamate:

$.getJSON(url, params, callback);

Qui bisogna capire un po’ meglio come passare i dati, in quanto devono essere formattati non in XML ma in JSON, ma per il resto dei dati JSON sono immediatamente disponibili e non necessitano di parsing.

Il parametro passato alla funzione callback infatti è l’oggetto JSON appena caricato.

Riprendo dall’esempio fatto la volta scorsa:

$("p.surprise").addClass("ohmy").show("slow");

Questa chiamata:

1. Seleziona tutti gli elementi p.surprise (selettore stile CSS).
2. Aggiunge a tutti gli elementi p.surprise la classe “ohmy” (class=”ohmy”).
3. Visualizza tutti gli elementi p.surprise (modificati con class=”ohmy”) con una animazione lenta.

Avete provato a pensare quante righe di codice avrebbe richiesto una modifica analoga, anche premettendo che avevate già la funzione che usa i selettori CSS?

Avete notato che tutto questo con jQuery si fa in una riga, in modo chiaro ed efficiente?

Proseguendo in modo intuitivo:

1. se c’è un addClass() c’è anche un removeClass().
2. se c’è show() c’è anche hide().

Così è. Non solo, dato che show() e hide() sono due operazioni distinte che spesso si accompagnano, la sintesi è la funzione toggle(), che non fa altro che chiudere quando è aperto e aprire quando è chiuso. Ovvero, toggle() è un interruttore.
Piccola variazione: avete visto il menu a scomparsa che io uso sul mio blog (si, la barra nra insomma). E’ evidente che si può realizzare in modo molto semplice con una piccola variazione del comando toggle(), che invece di aprirsi genericamente si apre regolando l’altezza. Questa operazione si chiama slide ed è utilizzabile con queste funzioni:

• slideUp() – chiude
• slideDown() – apre
• slideToggle() – interruttore

Piccola nota conclusiva a questo post. Le funzioni prendono tutte due parametri, entrambi opzionali:

1. speed – il primo parametro regola la velocità di apertura/chiusura
2. callback – il secondo parametro è una funzione che viene chiamata appena l’operazione si completa.

Come sempre, se ci sono dubbi chiedete pure, non fa che bene anche a questo tutorial.

Storia

Breve excursus storico: più o meno in modo coincidente all’onda Ajax sono nate alcune librerie javascript di automazione per lo sviluppo web. Lo scopo era rendere a tutti la vita più semplice. Nacque così la prima famosa libreria di questo tipo, chiamata Prototype. Questa però non è tutt’oggi molto più che una libreria di funzioni: una serie di strumenti utili per semplificarsi la vita ma non molto oltre questo. La documentazione inoltre è sempre stata piuttosto scarsa.
Qualche tempo dopo ha visto la luce jQuery, che si pone quasi in contrasto con Prototype. Vuole infatti porre non una serie di strumenti ma principalmente un modello uniforme estensibile e su questo costruire. La libreria risulta anche molto leggera.

Ma una cosa che è sempre mancata in Prototype era la documentazione. Pare che jQuery sia meglio, ma vediamo se riesco a fornire anche qualche strumento in italiano per iniziare a sviluppare con questa libreria.

Architettura

Ma cosa è quindi jQuery? jQuery è uno strumento per rendere la manipolazione delle pagine (X)HTML uniforme e immediato, con il minor numero possibile di problemi fra un browser e l’altro.

La libreria jQuery si basa su alcuni punti cardine:

1. Il risultato di una chiamata jQuery è un altro oggetto jQuery.
2. Gli oggetti jQuery sono insiemi di elementi.
3. La chiave di tutto è la funzione $().
4. Separazione della logica funzionale dalla logica strutturale (interazione vs presentazione).

Esempio

Ma allora, come si usa esattamente? Il suo funzionamento è quasi magico. Partiamo dall’esempio sulla homepage della libreria:

$("p.surprise").addClass("ohmy").show("slow");

E scomponiamolo:

• $() utilizza un selettore CSS (non c’è niente di nuovo da imparare quindi) e restituisce una collezione di oggetti jQuery che rappresentano tutti i tag che il selettore ha identificato. Può essere uno solo, o tutti quelli sulla pagina.
• A tutti i tag viene quindi aggiunta la classe “ohmy”.
• A tutti i tag viene applicata la funzione show(), ovvero vengono visualizzati.

Si vede in modo chiaro come sia contemporaneamente semplice e potente. La combinazione della funziona $() con la possibilità di concatenare operazioni raggiunge una notevole potenza espressiva con pochissimo codice.

Analisi

Vediamo come è fatto internamente. Faccio notare che non riproporrò praticamente mai il codice completo, che è piuttosto complesso, quanto alcuni estratti utili ai fini logici e di comprensione di javascript.

var jQuery = function(a, c) { ... }
var $ = jQuery;

La costruzione è semplice, anche se implica forse alcuni passaggi caratteristici di javascript:

1. Viene creato un oggetto jQuery (var jQuery) e gli viene assegnato un oggetto funzione (function() {}) tramite una lambda function.
2. Viene creato un oggetto $ al quale viene assegnato l’oggetto jQuery. jQuery era una funzione, quindi anche $ sarà una funzione.
   Notate come in var $ = jQuery; jQuery sia passato senza le tonde finali delle funzioni. Scrivere “jQuery” significa utilizzare l’oggetto funzione passato per riferimento. Scrivere “jQuery()” significa chiamare la funzione associata all’oggeto jQuery.

Direi che ho messo abbastanza carne al fuoco… non so quando sarà il prossimo approfondimento, ma ci sarà. Se avete domande fate pure.