Flex per sviluppatori PHP

Ho lavorato su tecnologie web sin dalla fine degli anni 90, e la mia prima tecnologia server-side è stata PHP. Più avanti, sono passato allo sviluppo con ColdFusion e Java, ma mi sono sempre sentito uno sviluppatore PHP. Quando è arrivato AJAX, ho iniziato a lavorare con framework come Prototype e script.aculo.us, e ho cominciato a costruire i miei framework personali.

Verso la fine del 2006, ho avuto un primo “assaggio” di sviluppo Flex. Era una sorta di “corsa al massacro”,  perché avevo circa 4-6 settimane per creare un’applicazione demo per la nuova versione di FDS (Flex Data Services, ora chiamata LiveCycle Data Services). Nonostante fossi nuovo all’uso di Flex e FDS, il progetto andò bene, e mi divertii davvero nelle fasi di apprendimento e sviluppo.

D’altra parte, per quanto fosse divertente, era differente. Voglio dire che quando sviluppavo in ColdFusion o Java, non sentivo sostanziali differenze rispetto al PHP; era tutta una faccenda di trovare le giuste API ed abituarmi alle particolarità del linguaggio.

Poi, quando ho iniziato ad integrare AJAX su DHTML, non fu anche in questo caso tanto diverso. Si continua a creare la maggior parte del sito Web usando le stesse tecniche ma con l’aiuto di un linguaggio server-side, e ci si poteva entusiasmare qua e la in certi casi (ad esempio, alcuni widget AJAX).

Al mio primo progetto in Flex, invece, ragazzi! Fu proprio un cambio radicale! La separazione netta tra il client ed il server, con la Business Logic lato client in aggiunta alla business logic lato server, con la tecnologia lato client compilata invece che interpretata, con due linguaggi lato client… Tutto questo richiedeva un altro approccio, un altro modo di pensare rispetto allo sviluppo web tradizionale.

Ed ecco perché ho scritto quest’articolo. Voglio condividere con voi alcuni aspetti specifici di Flex che si differenziano da PHP. Allo stesso tempo, voglio introdurre Flex paragonandolo a PHP in tutti i casi in cui il confronto abbia senso. Quindi questo articolo è rivolto a:

  • Sviluppatori PHP che vogliono imparare di più su Flex e su Action Script 3
  • Sviluppatori PHP che hanno già fatto i primi tentativi nella costruzione di un’applicazione Flex e vogliono una più ampia visione e comprensione di questa tecnologia

Cosa non tratta quest’articolo? Non è mia intenzione convertirvi, o convincervi che Flex è meglio di X o Y. Credo fermamente che ci siano diversi tipi di progetto e che ogni tipo potrebbe e dovrebbe essere realizzato con strumenti differenti. E quando le prestazioni, massimizzando il ROI (Return On Investment), e l’usabilità sono le principali priorità, non c’è un unico strumento universale che faccia sempre al caso nostro.

Allo stesso tempo, quest’articolo non documenta completamente Flex o ActionScript 3; ci sono dozzine di libri in giro che fanno questo in centinaia di pagine. Ci sono migliaia di articoli su Flex. Il mio intento è di dare abbastanza informazioni sugli argomenti più importanti, e, in qualsiasi momento abbia senso legare i concetti a concetti simili presi da PHP.  Per rendere l’articolo utile l’ho strutturato e ho provato a non addentrarmi in modo eccessivo in dettagli. Alla fine dell’articolo, ho inserito anche una breve introduzione ad Adobe AIR e alcune risorse addizionali, se volete qualche dettaglio in più su quest’argomento.

Infine, ho scelto di usare Flex 3 per la maggior parte degli esempi. Ci sono almeno due buone ragioni per questa scelta. Primo, mentre scrivo questo articolo, Flex 4 è ancora in versione beta. Secondo, Flex 4 è principalmente un’evoluzione del Flex 3, perciò molte delle cose trattate qui, potranno essere applicate anche a Flex 4 direttamente o al massimo con minime variazioni. In certi casi, evidenzierò queste differenze. A proposito di PHP, ho fatto riferimento a PHP 5.3. Detto questo, vediamo il sommario e … approfondiamo!

  1. Flex: cos’è?
    1. Flex: due linguaggi, un unico framework
    2. Perchè occuparsi di Flex
    3. Dal thin client allo smart/rich client
  2. Introduzione al linguaggio MXML
    1. Mescolare MXML e ActionScript 3
    2. Fogli di stile CSS
    3. Modificare codice MXML runtime
  3. Introduzione al linguaggio ActionScript 3
    1. Separare gli statement
    2. Tipi di dato, variabili e costanti
    3. Funzioni e Funzioni Anonime (closures)
    4. OOP: classi e interfacce
    5. Variable scope
    6. Arrays
    7. Namespaces
    8. Lavorare con XML
    9. ActionScript Dinamico
  4. Flex è asincrono
  5. Data Binding, metadata tag, e reflection
  6. Dove sono I miei dati?
  7. Autenticazione utente in Flex e progetti PHP
  8. Lavorare con Flex e progetti PHP
    1. Flex SDK e I text editor
    2. Flex Builder / Flash Builder
    3. Debugging di applicazioni Flex
  9. Cos’è Adobe AIR?
  10. Il prossimo passo
  11. Dove andare da qui

Flex: cos’è?

La risposta più semplice è: Flex è solo un altro modo di creare applicazioni in Flash. Un’applicazione Flash viene compilata in un file SWF, che gira sul Flash Player integrato nel Browser. Perché ci serve un altro modo di fare applicazioni Flash? Tradizionalmente le applicazioni Flash venivano create usando il Flash Authorin Tool. Se date un’occhiata a questo tool, vi accorgerete che è principalmente orientato all’uso da parte dei designer: c’è uno stage, una timeline, dei tool di disegno, e così via.

Quando sviluppate applicazioni preoccupandovi della produttività, vi servono componenti, vi serve poter snellire lo sviluppo più possibile col riuso di codice, e non ultimo e non meno importante, vi serve un IDE moderno.

Quindi una risposta un po’ più ragionata potrebbe essere: Flex è un framework open source che supporta gli sviluppatori nella creazione veloce di Rich Internet Applications che girano su Flash Player. Il framework  fu  progettato nel 2006 per essere così com’è oggi, con l’arrivo di Flex 2, Flash Player 9 ed ActionScript 3. La versione attuale è Flex 3, ma agli inizi del 2010 sarà rilasciato Flex 4.flex_php_0[top]

Flex: due linguaggi, un unico framework

Sotto il cappello di Flex, potete trovare quanto segue:

  • Due linguaggi: MXML ed ActionScript 3. Flex offre due linguaggi per rilasciare una applicazione Flex. Nei prossimi capitoli, vedremo più approfonditamente ciascuno di essi.
  • Una ricca libreria di componenti
  • Compilatori e debugger
  • Tool in linea di comando per compilare e “debuggare” un’applicazione Flex

Dal momento che Flex è un framework , vi incoraggio a visitare la home page del progetto su http://opensource.adobe.com/flex e scaricare l’SDK. Vi potrete trovare il codice sorgente di tutti i componenti della libreria, controllare i bug aperti ed il database delle feature (http://bugs.adobe.com/flex), e troverete le pagine wiki per le specifiche.

Parte del salto di produttività offerta da Flex è legata alla estesa libreria di componenti. Ci sono tutti i componenti UI che si possono immaginare (input boxes, panels, windows, sliders, data grids, combo boxes, accordions, tab sets, …). Ci sono anche layout containers e form elements. Qui sotto potete vedere uno screenshot dei component UI che Flex 3 mette a disposizione.

flex_php_1

E se questo non fosse abbastanza, visto che potete accedere al codice sorgente, potrete  estenderli per costruire i vostri componenti personalizzati o realizzare component da zero.

[top]

Perché occuparsi di Flex

Prima di approfondire il discorso su Flex e su cosa sia, fermiamoci un attimo e rivediamo le ragioni per cui dovremmo considerare Flex.

Le applicazioni scritte con l’HTML tradizionale  hanno un’architettura request-response. Il browser fa una richiesta (request) ed il server restituisce una pagina (response), e questo ciclo è ripetuto.

L’HTML e i CSS costituiscono una scelta eccellente, per presentare l’informazione, presumibilmente una delle migliori. Col passare degli anni, d’altra parte, questa architettura si è portata dalla presentazione statica alla piattaforma applicativa. Con le tecnologie di scripting, abbiamo costruito pagine dinamiche per adattare le risposte del server ad una specifica richiesta.

Inoltre, aggiungendo DHTML e AJAX abbiamo dato nuova vita alle pagine restituite dal web server: l’utente può interagire con la pagina caricata ed alterarne l’aspetto senza che sia fatto il refresh sull’intera pagina.

All’evolversi delle tecnologie, sono comparse nuove applicazioni più complesse. Certe web application hanno iniziato a replicare molte funzionalità tipiche delle applicazioni desktop mantenendo allo stesso tempo tutti i vantaggi di essere una web application (disponibile ovunque sia disponibile un browser e una connessione Internet). Da qui in poi sono apparse versioni online di fogli di calcolo e di editor di testo.

D’altra parte, dal punto di vista dell’usabilità, le applicazioni on-line erano meno “user-friendly” delle applicazioni desktop. Allo stesso tempo, per creare queste complesse web application servivano una marea di competenze su svariate tecnologie (JavaScript, DHTML, CSS, librerie AJAX, tecnologie server-side), e si doveva avere esperienza delle differenze tra i browser e come questi implementavano l’HTML/CSS/JS.

Allora, nel 2002, Macromedia uscì con il termine RIA (Rich Internet Applications) per descrivere un nuovo genere di applicazioni che combinavano i benefici delle web application con i vantaggi delle desktop application. La tecnologia che rese ciò possibile fu Flash Player.

Di base, se volete creare un’applicazione (non semplicemente un sito web o una pagina web), potete farlo con Flex. Certe cose sono semplicemente impossibili con HTML /Javascript, altre sono davvero difficili da implementare in modo consistente e compatibile con tutti i browser. Flash Player offre uno dei migliori motori grafici, è installato sul 98% dei computer connessi a Internet, e tratta immagine e suono con la massima accuratezza. Supporta microfoni e webcam, streaming e data pushing, la tipografia in modo eccellente, e la lista non finisce qui.

Date uno sguardo a queste tre applicazioni per capire cosa è possibile fare usando Flex:

  • SumoPaint un’applicazione gratuita di manipolazione grafica
  • Mindomo un’applicazione di “mind mapping”
  • Times Reader da The New York Times

Col passare del tempo, altre tecnologie sono entrate nella categoria RIA. Accanto agli avanzamenti AJAX che hanno reso possibili applicazioni come Gmail o i fogli di calcolo di Google (Google Spreadsheets), oggi vediamo Silverlight di Microsoft e JavaFX di Sun.

[top]

Dal thin client allo smart/rich client

Torniamo ai browser e a come le web application sono rilasciate. Quando un browser fa una richiesta, il server usa una combinazione di contenuti statici (codice HTML/CSS/JS) e script (questi script possono interrogare un database o chiamare altri script, ma alla fine rispondono con altro codice  HTML/CSS/JS) per comporre una pagina. Questa pagina viene caricata e renderizzata dal browser. Un elemento chiave qui è che, di solito questa pagina (o response) ha il markup di presentazione e i dati, impacchettati nello stesso messaggio.

Quando un nuovo stato dell’applicazione sta per essere “presentato”, il browser fa una nuova richiesta ed il server prepara la pagina. Il client si “limita” a fare il rendering dei dati.

Le applicazioni Flex lavorano in modo diverso. Il server manda l’applicazione Flex compilata (il file SWF) che gira sul browser usando il plug-in Flash Player. Di solito, questo file SWF contiene solo la business logic lato client. Se sono richiesti dati (ad esempio da un database) l’applicazione Flex fa una richiesta per tali dati. Il server manda solo i dati (in formati come XML, JSON, AMF3), ed il client sa già come presentare graficamente i dati. Stiamo parlando di una architettura SOA (Service Oriented Architecture): l’applicazione Flex è il client – un client che può “consumare” data services forniti dal server. L’applicazione potrà quindi cambiare stato senza fare un refresh completo della pagina e senza ricaricare tutto il file SWF nel browser.

L’applicazione è un client che può fare ben più che “limitarsi” a fare il rendering dei dati. Quindi usando Flex e Flash player è possibile creare quasi qualunque cosa che abbia senso distribuire sul web, dai giochi, alle applicazioni, ai widget che sono integrati all’interno di applicazioni web “classiche”, e tanto altro ancora

Ma basta con l’arida teoria, vediamo un po’ di codice!

[top]

Introduzione al linguaggio MXML

MXML è un linguaggio dichiarativo, basato sull’XML. In un’applicazione Flex si usa l’MXML per buttar giù velocemente la struttura/intelaiatura della vostra applicazione. In Flex, tutto quello che si può fare con MXML, lo si può fare anche con ActionScript 3 in egual modo. Invece non è vero il contrario!

Se si può usare ActionScript 3 per fare tutto quello che fate con MXML, per prima cosa… a che serve MXML? Di solito è molto più semplice seguire o capire un’interfaccia descritta usando il linguaggio XML  piuttosto che uno imperativo. E questo si traduce in meno codice da scrivere per avere una interfaccia grafica. Inoltre è molto più facile costruire tool per linguaggi dichiarativi piuttosto che per linguaggi imperativi. Ecco un esempio di “Hello world!” implementato usando MXML:

   1: <Label text="Hello World!" fontSize="14" color="red" x="100" y="50"/>

In questo codice, ho usato un component Flex chiamato Label per mostrare del testo sullo schermo. Ho settato il l’attributo text con il testo che voglio mostrare. In più, ho personalizzato (un pochino) l’aspetto e la posizione della label nello schermo. Per far questo ho usato gli attributi fontSize, color, x e y. Concorderete che questo è di immediata comprensione.

Adesso, consideriamo lo stesso esempio, ma implementato usando ActionScript 3:

   1: var myLabel = new Label();
   2: myLabel.text = "Hello World!";
   3: myLabel.setStyle("fontSize", "14");
   4: myLabel.setStyle("color", "red");
   5: myLabel.x = 100;
   6: myLabel.y = 50;
   7: addChild(myLabel);

Ho sette line di codice per fare quel che con MXML ho fatto solo con un tag e qualche attributo! Adesso, immaginate che in un’applicazione reale abbiate tantissimi controlli, raggruppati in container differenti. E’ molto più facile manutenere il codice scritto in MXML piuttosto che quello scritto in centinaia di linee di ActionScript 3.

Nonostante possiate usare MXML per descrivere la vostra applicazione, non potete usare MXML per implementare la business logic della stessa. Per questo dovete usare ActionScript 3.

Le applicazioni Flex girano su Flash player, e Flash Player capisce solo ActionScript 2 and ActionScript 3. Questo significa che l’MXML che scriviamo, andrà trasformato dal compilatore MXML in codice ActionScript 3. Questo codice viene trasformato dal compilatore ActionScript in byte code (file SWF) che sarà correttamente capito dal Flash Player.

Quindi dietro praticamente ogni componente MXML c’è una classe ActionScript 3 (al momento ci sono dei tag MXML che non hanno una corrispondenza su una classe ActionScript, come Script e Model). Per esempio qui abbiamo un frammento di codice dalla classe Label:

   1: public class Label extends UIComponent
   2:                    implements IDataRenderer, IDropInListItemRenderer,
   3:                    IListItemRenderer, IFontContextComponent
   4:
   5: {
   6:     /**
   7:      *  Constructor.
   8:      */
   9:     public function Label()
  10:     {
  11:         super();
  12:
  13:         // this is so the UITextField we contain can be read by a screen-reader
  14:         tabChildren = true;
  15:     }
  16:
  17:     /**
  18:      *  @private
  19:      *  Flag that will block default data/listData behavior.
  20:      */
  21:     private var textSet:Boolean;
  22:
  23: ...
  24: }

In tutte le applicazioni Flex c’è almeno un file MXML, che è l’applicazione principale. Per esempio questo è il codice completo per l’applicazione “Hello World!”:

   1: <?xml version="1.0" encoding="utf-8"?>
   2: <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
   3:         <mx:Label text="Hello World!" fontSize="14" color="red" x="100" y="50"/>
   4: </mx:Application>

Il nodo radice deve essere sempre Application, ed è qui che i name space vengono definite.

In questo caso ho un unico namespace  per il linguaggio MXML  per i componenti Flex: mx. (il codice qui sopra è in Flex 3, in Flex 4 ci sarebbero alcune piccole differenze legate al fatto che vengono dichiarati pù namespace).

Se scrivete i vostri component custom, dovrete aggiungerci un namespace. Qui, per esempio, dichiaro un secondo namespace per riferirmi a tutti i componenti creati da me (in quest’esempio sto usando un componente label personalizzato chiamato appunto MyCustomLabel, creato da me):

   1: <?xml version="1.0" encoding="utf-8"?>
   2: <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:local="*">
   3:     <mx:Label text="Hello"/>
   4:     <local:MyCustomLabel text="world!"/>
   5: </mx:Application>

A questo punto vi potreste chiedere come fare su più pagine differenti su un’applicazione Flex. Per un sito HTML, stati differenti sono implementati attraverso pagine differenti. Un’applicazione Flex è molto più simile ad un’applicazione Desktop. Questo significa che potete usare solo un file MXML, e mostrare in questa pagina i differenti stati dell’applicazione. Flex offre diverse vie per farlo, dai componenti Flex come gli Accordion, I Tabset navigator, i Card layout, ai moduli Flex.

Come avete notato il codice MXML può essere usato per descrivere l’aspetto dell’applicazione. Ma potete anche usarlo per creare componenti custom estendendo componenti Flex esistenti. Vediamo un esempio. Supponete di avere nella vostra applicazione molti form con i due bottoni: Save e Cancel. Guardate il codice per questo componente custom MXML (il codice è salvato dentro un file chiamato FormButtons.mxml; tutti i file MXML devono avere l’estensione mxml):

   1: <?xml version="1.0" encoding="utf-8"?>
   2: <mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="150">
   3:     <mx:Button id="saveButton" label="Save"/>
   4:     <mx:Button id="cancelButton" label="Cancel"/>
   5: </mx:HBox>

Quando create un componente custom, potete scegliere che componente estendere (non è permesso estendere Application). Ho scelto di estendere HBox (Horizontal Box), che è un container che mostra tutti i children sulla stessa linea. Dentro il container, ho aggiunto 2 bottoni, uno per Save e l’altro per Cancel. Ho anche settato l’attibuto id per ciascuno di essi. Si utilizza il valore id come un modo per fare riferimento all’oggetto in altre parti del codice. Questo è lo stesso che dichiarare una variabile nel codice ActionScript.

Ora vediamo come possiamo usare questo componente custom in un’applicazione Flex.

   1: <?xml version="1.0" encoding="utf-8"?>
   2: <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:local="*" layout="horizontal">
   3:     <mx:TextInput width="150"/>
   4:     <local:FormButtons/>
   5: </mx:Application>

Qui sotto potete vedere che aspetto ha l’applicazione:

flex_php_2

Potreste pensare che in MXML si potrebbero usare solo componenti Flex visuali (componenti che finiscono per essere mostrati a schermo). In realtà non è vero. Potete avere tag MXML che rappresentano dati (oggetti usati per immagazzinare dati) o componenti che manipolano i dati (componenti che possono reperire/inviare dati da/verso un server). Qui sotto potete vedere un esempio di un generico componente Object che ha una proprietà chaimata name:

   1: <mx:Object id="myObj" name="Mihai Corlan"/>

Come dicevo prima, tutti (quasi tutti) i componenti Flex offerti da Flex hanno una classe ActionScript che implementa l’aspetto grafico (se previsto) e la logica. Quando scegliete di creare un custom component (sia che sia un componente grafico sia che non lo sia) usando ActionScript invece che MXML, dovete tener presente che c’è una restrizione: il costruttore della classe deve poter essere chiamato senza argomenti (e se ci sono argomenti, essi devono avere valori di default).

[top]

Mescolare MXML e ActionScript 3

Tornando al componente custom FormButtons (quello con due bottoni), potreste aver rilevato un problema: Che succede se volete usare questo componente in un posto dove le label Save e Cancel non hanno senso? Dovreste forse creare un altro componente con etichette più appropriate(diciamo per esempio Show and Hide)? Questa è certo una possibilità, ma non è certo una soluzione scalabile o elegante! Quello che vi serve è un componente che sia più generale, e un modo di cambiare il componente usando il codice. Questo è il motivo per cui presto o tardi vi troverete a dover usare codice ActionScript in aggiunta a codice MXML.

Nel prossimo esempio, ho aggiunto del codice ActionScript dentro il codice MXML del componente, per definire due variabili che conservano le etichette che I bottoni usano. Notare, che sto usando un nuovo tag, Script, e dentro questo, CDATA. Questo perché dentro i documenti XML i caratteri >,<, & non sono consentiti senza il carattere di escape. Inoltre, non mi focalizzerò sul codice ActionScript adesso, ma lo analizzerò più approfonditamente nelle prossime sezioni.

   1: <?xml version="1.0" encoding="utf-8"?>
   2: <mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="150">
   3:     <mx:Script>
   4:         <![CDATA[
   5:             public var label1:String = "Save";
   6:             public var label2:String = "Delete";
   7:         ]]>
   8:     </mx:Script>
   9:     <mx:Button id="saveButton" label="{label1}"/>
  10:     <mx:Button id="cancelButton" label="{label2}"/>
  11: </mx:HBox>

Le variabili che ho definito possono essere settate dall’applicazione Flex che usa questo componente. Quindi andiamo a vedere com’è l’applicazione Flex rivisitata, usando il nuovo componente custom:

   1: <?xml version="1.0" encoding="utf-8"?>
   2: <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:local="*" layout="horizontal">
   3:     <mx:TextInput width="150"/>
   4:     <local:FormButtons label1="Show" label2="Hide"/>
   5: </mx:Application>

Osservate che sul tag FormButtons ci sono due attributi: label1, and label2. Ecco come potete settare il testo che volete sia mostrato nei bottoni. E questo è il meccanismo che si usa per aggiungere altri comportamenti ad un componente MXML (usando codice ActionScript). In un’applicazione reale potreste dover associare un comportamento diverso a ogni bottone, in modo tale che alla pressione del bottone, accada qualcosa. Si usa codice ActionScript per scrivere le funzioni che saranno eseguite alla pressione dei tasti.

C’è un secondo metodo per aggiungere codice ActionScript al codice MXML. Potete creare un file ActionScript (in questo esempio il nome del file è buttons.as), e includere questo file nel file MXML. Si può fare usando il tag Script con l’attributo source che punti al file ActionScript. Ecco il codice per questo approccio:

   1: // ActionScript file called buttons.as
   2: public var label1:String = "Save";
   3: public var label2:String = "Delete";
   
   
   1: <?xml version="1.0" encoding="utf-8"?>
   2: <!-- MXML component file called FormButtons.mxml a-->
   3: <mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="150">
   4:     <mx:Script source="buttons.as"/>
   5:     <mx:Button id="saveButton" label="{label1}"/>
   6:     <mx:Button id="cancelButton" label="{label2}"/>
   7: </mx:HBox>

Adesso, torniamo qualche passo indietro per capire cosa accade quando il compilatore MXML fa il parsing del file FormButtons.mxml. Già sapete che tutto il codice sarà trasformato in codice ActionScript. Ma cosa succede con il codice ActionScript che ho aggiunto (le due variabili)? Il compilatore MXML compila ogni file MXML in una classe ActionScript. In questo caso ottengo una classe che sia chiama  FormButtons (il nome del file è usato per il nome classe) che estende il componente HBox (perché ho scelto HBox come nodo radice del componente). E tutto il codice ActionScript dentro  la classe diventa membro della classe: variabili (come quelle dell’esempio) diventano variabili di istanza, e funzioni diventano metodi di istanza.

[top]

Fogli di stile CSS

A questo punto, vi potreste chiedere se potete cambiare il look and feel dei componenti Flex visuali. C’è qualcosa di simile all’HTML ed ai CSS? La risposta è sì, Flex supporta i CSS. In Flex 4 il supporto ai CSS è esteso per consentire la definizione di stili non solo basati sui class names, ma sugli id, per consentire dei pseudo-selector (per esempio per un Button avete il down selector, over selector, ecc.), e molto altro ancora.

Come nell’HTML, gli stili possono essere definite inline (dentro l’MXML) o in un file separato. Torniamo al componente custom, FormButtons, e impostiamo qualche stile. Se scegliete di impostare gli stili in un file separato, usate il tag Style e indicate il percorso dove si trova il file di stile, impostando l’attributo source.

   1: <?xml version="1.0" encoding="utf-8"?>
   2: <!-- MXML component file called FormButtons.mxml a-->
   3: <mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="150">
   4:     <mx:Style>
   5:         .Button1 {
   6:             font-size: 14;
   7:             color: #990000;
   8:         }
   9:     </mx:Style>
  10:     <mx:Script source="buttons.as"/>
  11:     <mx:Button id="saveButton" styleName="Button1" label="{label1}"/>
  12:     <mx:Button id="cancelButton" label="{label2}"/>
  13: </mx:HBox>

Ho creato una classe CSS chiamata Button1 che definisce il colore per la label e il font size. Quindi ho impostato lo stile per il primo bottone usando l’attributo styleName del primo bottone. Ora l’applicazione risulta così:

flex_php_3

Gli stili CSS  possono essere cambiati runtime (dopo che l’applicazione Flex è caricata nel browser), e l’aspetto dell’applicazione cambierà istantaneamente.

In Flex 4, Adobe ha aggiunto un nuovo linguaggio chiamato MXML for Graphics che aggiunge primitive, effetti, maschere, trasformazioni 2D. Potete creare una classe skin in un file MXML usando questi nuovi tag. Qui sotto potete notare una lista “skinnata” con Flex 4. L’immagine a sinistra mostra la lista nel suo stato di default, è quella di destra mostra lo stato della lista al mouse over. Potete vedere l’applicazione online a questo indirizzo.

flex_php_4 flex_php_5

Esplorando la documentazione per la personalizzazione del look and fell delle applicazioni Flex, potreste incappare nel termine “skinning”. Potete fare un ottimo “skinning  grafico” o “skinning programmatico” per cambiare l’aspetto. Qui c’è un buon articolo a tal riguardo.

[top]

Modificare codice MXML runtime

A volte vorrete cambiare i componenti UI runtime. Può essere necessario, in base a certi dati prelevati dal server, per costruire un form al volo. Ancora una volta, potete usare codice ActioScript per farlo. Ogni componente Flex visuale ha metodi per aggiungere un nuovo child, per rimuoverlo, ottenere tutti i children, e così via. Se volete, potete comparare questo col modo in cui cambiate il DOM in HTML, usando JavaScript. D’altro canto, c’è una differenza: con JavaScript potete fare injection su HTML  recuperando il codice dinamicamente dal server (chiamata Ajax). In Flex questo non è possibile, e la funzione eval() non esiste in Flex. Però, c’è un modo per caricare altre applicazioni Flex o moduli Flex dopo che l’applicazione principale è già caricata.

Quando conoscete tutte le possibili viste differenti per un componente, potete usare gli MXML States per implementare stati differenti per lo stesso componente o applicazione. Gli States sono un’area dove Flex 4 ha sensibilmente migliorato l’implementazione di Flex 3, rendendoli più facili da usare e potenziandoli. In Flex 4 gli stati lavorano in questo modo:

  1. definite un numero di stati e specificate quello di default
  2. potete specificare in quale stato un preciso componente dovrebbe apparire
  3. potete specificare separatamente i valori per qualunque attributo per ogni stato dove  appaia

Supponete di voler creare un componente che comunica con le funzionalità di login di un’applicazione. Vi servirà usare questo componente per mostrare il form di login, e quando il login è andato a buon fine vorrete mostrare il pulsante di logout ed il nome dell’utente loggato.

Ecco come potete creare questo componente di Login/Logout usando Flex 4:

   1: <?xml version="1.0" encoding="utf-8"?>
   2: <s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo">
   3:     <s:states>
   4:         <s:State name="notlogged"/>
   5:         <s:State name="logged"/>
   6:     </s:states>
   7:
   8:     <s:TextInput includeIn="notlogged" text="user name"/>
   9:     <s:TextInput includeIn="notlogged" text="password"/>
  10:     <s:Button includeIn="notlogged" label="Login" click="{currentState='logged'}"/>
  11:
  12:     <mx:Label includeIn="logged" text="Current user: Mihai Corlan"/>
  13:     <s:Button includeIn="logged" label="Logout" click="{currentState='notlogged'}"/>
  14:     <s:layout>
  15:         <s:HorizontalLayout/>
  16:     </s:layout>
  17: </s:Group>

Il codice dovrebbe essere auto esplicativo. Come top container, ho usato un Group component con il layout reimpostato a HorizontalLayout (questo ha lo stesso effetto ottenuto con HBox, usato nell’esempio con Flex 3 poco sopra).  Ho definito in cima al file gli stati disponibili per questo componente. Poi i buttons, text inputs e label. Notare gli attributi includeIn, che specificano in quale stato il componente appare . Per la cronaca, c’è anche l’attributo excludeFrom. Se volete un bottone in tutti gli stati,  allora non specificate niente per questi due attributi. Infine, potete vedere che ho assegnato un’espressione per gli attributi di click dei due bottoni. Per esempio, click=”{currentState=’logged’}”, dice a Flex che quando il bottone è clickato, di cambiare lo stato del componente allo stato chiamato logged.

Ho incluso tanto altro codice ActionScript in questi esempi, anche se sto ancora parlando dell’MXML. E’ un chiaro segnale che è tempo di passare al secondo linguaggio Flex , ActionScript 3.

[top]

Introduzione al linguaggio ActionScript 3

Action Script 3 è un linguaggio di scripting dinamico object oriented che risulta essere (all’incirca) “type-safe”. ActionScript 3 è basato sulle specifiche ECMAScript 3 (ECM-262). Inoltre, alcune delle sue features sono allineate con le specifiche dell’ECMAScript 4. Ho scoperto che è molto più semplice spiegare ActionScript 3 a qualcuno che non conosce niente in merito in questo modo: ActionScript sembra un mix di Javascript e Java e in più ha dei suoi caratteri distintivi. Al momento, JavaScript è un altro linguaggio basato sulle specifiche ECMAScript, quindi è naturale vedere molte cose in comune con ActionScript.

Come dicevo prima Flash Player può lavorare con due linguaggi: ActionScript 2 e ActionScript 3.

Internamente usa due diverse Virtual Machine per far girare questi due linguaggi (ActionScript 3 e la Virtual Machine AVM2 Virtual Machine presente a partire da  Flash Player 9). ActionScript 3 è costituito dal core del linguaggio (keywords, data types, ecc…) e la API del Flash Player (questa API da agli sviluppatori l’accesso a tutte le funzionalità di Flash Player attraverso le display API, le 3D API, le drawing API, le Animazioni, e così via). In quest’articolo concentrerò l’attenzione sul core del linguaggio. Qui c’è un buon articolo introduttivo su ActionScript 3.

A partire da ora userò l’abbreviazione “AS3” per dire “ActionScript 3”.

[top]

Separare gli statement

In PHP si usa il punto e virgola (;) per separare o terminare uno statement. In AS3 potete usare il punto e virgola(;) o semplicemente potete andare a capo (carattere di fine linea). Devo dire che quando vedo codice scritto senza punti e virgola non è proprio piacevole a vedere… Quindi vi suggerisco di usare lo stesso metodo di PHP.

[top]

Tipi di dato, variabili e costanti

In PHP ci sono i seguenti data type: Booleani, interi, a virgola mobile, Stringhe, Vettori, Oggetti, Risorse e NULL.

In AS3 abbiamo:

  • data type di alto livello:  Boolean, int, uint, Number (lo stesso del floating point del PHP), Strings, Null (contiene solo un valore: null), void (contiene solo un valore:  undefined)
  • data type complessi: Object, Array, Vector (a partire da Flash Player 10), Dictionary, Bitmap, ByteArray, Date, XML, XMLList, Function, Error, RegExp

In AS3, una variabile è solo un identificatore o un riferimento associata al valore attuale. I valori consentiti in AS3 sono oggetti (int o uint sono oggetti, e lo stesso si può dire di Number e di Date), null, e undefined. Null, e undefined significano l’assenza di dati, ma d’altra parte c’è una differenza tra i due. Quando dichiarate una variabile e non la inizializzate, conterrà il valore null a meno che non sia di tipo Boolean, int, uint, o Number. Se la variabile è senza tipo e non inizializzata, allora avrà il valore undefined. Allo stesso tempo, quando avete un oggetto dinamico e volete controllare che un particolare metodo o una particolare proprietà siano definiti, potete effettuare un check che non siano undefined.

In PHP dichiarate una variabile in questo modo:

   1: $anInteger = 12;
   2: $isTrue = true;
   3: $aString = "my string";
   4: //or
   5: $aString = 'my string';

In AS3 you use the var keyword when declaring a variable:

   1: var anInteger:int = 12;
   2: var isTrue:Boolean = true;
   3: var aString:String = "my string";
   4: //In AS3 you can not use simple quotes for declaring a String

Notate che dopo il nome variabile, ho un’annotazione di tipo; per esempio, myVarName:Boolean (il tipo è dichiarato usando “:” seguito dal tipo). AS3 consente di lavorare con o senza le annotazioni di tipo (se il compilatore è settato per lavorare in strict mode, allora è obbligatorio includere le annotazioni di tipo).

Provenendo da PHP dove non è necessario dichiarare una variabile, può sembrare strano, e potreste essere tentati di continuare nel modo di fare le cose “senza tipo”. Anche se è una bella tentazione, vi incoraggio fermamente ad usare le annotazioni di tipo. Prima di tutto, quando usate un IDE  per scrivere codice, dare un tipo alle vostre variabili vi consente di trovare molti più errori in fase di compilazione. Per esempio, considerate una funzione che ha un singolo argomento di tipo String. Se tentate di chiamare questa funzione passandogli un Object come argomento, l’IDE vi avvertirà di questo errore.

Senza annotazioni di tipo rischiate di cadere negli errori di run-time, ma solo quando voi o l’utente finale userete l’applicazione, e a questo punto l’origine del bug sarà molto più difficile da individuare.

La seconda ragione per puntare sulle annotazioni di tipo, è che il compilatore AS3 può fare delle ottimizzazioni se conosce il tipo preciso delle variabili coinvolte.

In PHP potete cambiare il tipo di variabile in qualunque operazione di assegnazione:

   1: $myVar = 12; //it is an int
   2: $myVar = "now is a string";

In AS3 potete fare lo stesso (in strict mode) solo quando dichiarate la variabile untyped usando “*”:

   1: var myVar:int = 12;
   2: //this will raise an error and the application can not be compiled
   3: myVar = "this is a string";
   4:
   5: //declaring the variable untyped you can change the type with each assignment
   6: var myVar2:* = 12;
   7: myVar2 = "this is a string now";

Avrete notato che ho usato la parola chiave var solo quando ho dichiarato la variabile; per ulteriori operazioni di assegnazione potete omettere var e l’annotazione di tipo.

Come dicevo prima, in AS3 le variabili sono solo dei Riferimenti all’oggetto attuale (puntamenti). Invece, quando assegniamo una variabile int, uint, Number, Boolean, or String a un’altra variabile, è creata una copia della stessa (lo stesso accade passando una variabile dei tipi citati a una funzione). In PHP, potete usare l’operatore “&” per assegnare sempre le variabili per riferimento (si dice anche per puntamento) anche per i tipi primitivi; e quando cambiate il valore di una variabile, l’altra variabile punterà ancora allo stesso valore modificato.

Per concatenare stringhe in PHP si usa  “.” (punto), in AS3 si usa “+” (più):

   1: //in PHP
   2: $space = " ";
   3: $a = "this" . $space . "is!";
   4:
   5: //in AS3
   6: var space:String = " ";
   7: var a:String = "this" + space + "is!";

In PHP potete definire le variabili dovunque vogliate: a livello di file, in una funzione, o in una classe. Nelle applicazioni Flex, le variabili possono essere dichiarate solo dentro una funzione o a livello di classe.

Inoltre in PHP potete avere un pezzo di programmazione procedurale che non è dichiarata all’interno di una funzione:

   1: <?php
   2:
   3: $a = 1;
   4: for ($i=0; $i<100; $i++) {
   5:     $a += $i * $a;
   6: }
   7:
   8: ?>

In AS3 non potete fare operazioni con le variabili fuori dalle funzioni (anche se potete dichiarare le variabili fuori dalle funzioni) eccetto un caso che vi spiegherò quando parleremo di Classi. Allora se provate a far girare il prossimo codice, avrete un errore in fase di compilazione dell’applicazione:

   1: <?xml version="1.0" encoding="utf-8"?>
   2: <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
   3:     <mx:Script>
   4:         <![CDATA[
   5:         var a:int = 1;
   6:         for (var i:int = 0; i<100; i++) { //this raises an error
   7:             a += i * a;
   8:         }
   9:         ]]>
  10:     </mx:Script>
  11: </mx:Application>

Ecco come potete scrivere il codice perché le cose funzionino:

   1: <?xml version="1.0" encoding="utf-8"?>
   2: <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
   3:     <mx:Script>
   4:         <![CDATA[
   5:         var a:int = 1;
   6:
   7:         function calculations(a:int):int {
   8:             for (var i:int = 0; i<100; i++) {
   9:                 a += i * a;
  10:             }
  11:             return a;
  12:         }
  13:         ]]>
  14:     </mx:Script>
  15: </mx:Application>

In PHP, le costanti sono dichiarate e usate così:

   1: //constants
   2: define("CONSTANT", "Hello");
   3: $myString = CONSTANT . ‘ world!’;

In AS3 le costanti sono dichiarate usando la parola chiave const (c’è la convenzione di usare lettere maiuscole per le costanti):

   1: static const HELLO:String = "Hello";
   2: var myString:String = HELLO + " world!";

Come scegliere il nome di una variabile? In questo PHP e AS3 sono simili: il primo carattere può essere una lettera o un underscore “_” seguito da lettere, cifre, o altri underscore. Di seguito degli esempi di nomi di variabile consentiti da entrambi i linguaggi: _1, _a1A, b.

In PHP c’è un modo di usare una variabile conoscendo il suo nome:

   1: <?php
   2: $myVar = 12;
   3: $varName = 'myVar';
   4: echo($$varName); //print 12;
   5: ?>

Potete ottenere simili funzionalità in AS3 usando il metodo dinamico di referenziazione dei membri (variabili/metodi).

   1: <?xml version="1.0" encoding="utf-8"?>
   2: <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
   3:     <mx:Script>
   4:         <![CDATA[
   5:
   6:             var myVar:int = 12;
   7:
   8:             function init():void {
   9:                 var varName:String = "myVar";
  10:                 trace(this[varName]); //output 12
  11:             }
  12:         ]]>
  13:     </mx:Script>
  14:
  15: </mx:Application>

Nell’esempio ho usato this per referenziare l’oggetto corrente, ma potete usare la stessa tecnica su qualunque oggetto. Dirò altro sul this non appena parleremo delle classi dinamiche.

[top]

Funzioni e Funzioni Anonime (closures)

In AS3 potete fare con le funzioni tutto quello che già fate in PHP, e qualcosa in più.

Primo, in AS3 si può definire il tipo degli argomenti e di quanto viene restituito (in PHP si possono aggiungere le annotazioni di tipo solo ai metodi degli oggetti).

   1: function calculate(x:int=0, y:int=0):int {
   2:     return x + y;
   3: }
   4: //using the function
   5: var result:int = calculate(1, 2);
   6:
   7: function calculateAverage(...arguments):Number {
   8:     var result:Number = 0;
   9:     for (var i:int=0; i<arguments.length; i++) {
  10:         result += arguments[i];
  11:     }
  12:     return result/arguments.length;
  13: }
  14:
  15: //using the function 
  16: var result:Number = calculateAverage(1, 2, 3, 4, 5, 6);

Si può mischiare l’operatore … (rest) con argomenti espliciti esattamente come si può usare l’operatore rest come ultimo della lista argomenti: function foo(x:int, y:int, …arguments):Number {}. L’operatore rest può essere utile quando volete creare funzioni con un numero variabile di argomenti.

Se la funzione non restituisce niente, usate void come tipo restituito.

In PHP e in AS3 potete avere dei valori di default per gli argomenti. Per esempio:

   1: //php code
   2:
   3: function doThing($a, $b="default value") {
   4:     echo $a . $b;
   5: }
   6:
   7: //AS code
   8: function doThing(a:String, b:String="default value"):void {
   9:     trace(a + b);
  10: }

Ovviamente potete definire funzioni dentro una funzione (vedrete un esempio nel prossimo esempio di codice).

Secondo, in AS3 qualsiasi funzione è rappresentata come un’istanza della classe Function. Questo rende possibili alcune cose molto interessanti:

  • Potete creare una “literal function” ed assegnarla ad una variabile, e poi chiamare la funzione attraverso questa variabile (è possibile anche in PHP)
  • Potete restituire una funzione come risultato dell’esecuzione di un’altra funzione
  • Potete passare funzioni come argomenti quando chiamate altre funzioni
   1: var f:Function = function multiply(x:int, y:int):int {
   2:     return x*y;
   3: }
   4:
   5: trace(f(3,5));
   6:
   7: function giveMeAFunction():Function {
   8:     return function multiply(x:int, y:int):int {
   9:         return x*y;
  10:     };
  11: }
  12:
  13: var h:Function = giveMeAFunction();
  14: trace(h(3,4));

In PHP e in AS3 potete creare funzioni anonime (anche dette closure). Nel precedente esempio di codice, potete vedere un esempio di come si crea una funzione anonima dentro giveMeAFunction() e la si ritorna.

Forse la più grande differenza tra funzioni in AS3 e in PHP è come vengono definite. In PHP potete definire un qualsiasi numero di funzioni in un file. In AS3 potete definire solo una funzione per file, ed il nome della funzione deve coincidere col nome del file. Per esempio se definite una funzione che si chiama doSomeMath(), allora dovete mettere questa funzione in un file che si chiami doSomeMath.as. Nella definizione delle funzioni, usate le dichiarazioni di package (nella prossima sezione conoscerete i package). Quindi, quando voleste creare un certo insieme di funzioni utility, se non volete metterne ognuno in un file distinto,  potete creare una singola classe e definirli come metodi statici.

[top]

OOP: classi e interfacce

E ora di passare alle caratteristiche di Object Oriented Programming (Programmazione Orientata agli Oggetti) di PHP e di AS3. In PHP potete scrivere codice object oriented o procedurale; AS3 è object oriented.

Iniziamo con un esempio PHP semplice per vedere le differenze di sintassi (ricordate che uso PHP 5.3 come riferimento):

   1: namespace org\corlan {
   2:
   3:     class SimpleClass {
   4:
   5:         public $public = 'Public';
   6:         protected $protected = 'Protected';
   7:         private $private = 'Private';
   8:
   9:         function SimpleClass() {
  10:
  11:         }
  12:         // Redefine the parent method
  13:         function displayVar()
  14:         {
  15:
  16:         }
  17:     }
  18: }
  19:
  20: //use the class like this
  21: require_once('flassFile.php');
  22: $obj = new org\corlan\SimpleClass();
  23: $obj->displayVar();

In AS3  la stessa classe si scrive così:

   1: package org.corlan {
   2:
   3:     public class SimpleClass {
   4:
   5:         public var _public:String = "Public";
   6:         protected var _protected:String = "Protected";
   7:         private var _private:String = "Private";
   8:
   9:         function SimpleClass() {
  10:
  11:         }
  12:
  13:         // Redefine the parent method
  14:         public function displayVar():void
  15:         {
  16:
  17:         }
  18:     }
  19:
  20: }
  21:
  22: //you use the class like this:
  23: import org.corlan.SimpleClass;
  24:
  25: var object:SimpleClass = new SimpleClass();
  26: object.displayVar();

Qui ci sono le principali differenze:

  • Indicare il file dove la classe è messa
    • In PHP puoi definire una classe in un file che può essere chiamato in qualsiasi modo
    • In AS3 il nome del file deve essere lo stesso della classe (se la classe si chiama SimpleClass, allora il file sarà SimpleClass.as)
  • Namespace contro Package
    • In PHP you potete usare i namespace per evitare omonimie tra i nomi delle classi
    • In AS3 si usano i package; quindi quando si dichiara una classe che si trova nel package org.corlan ad esempio, questo significa che la classe si troverà nel folder org/corlan  nel folder dei sorgenti Flex. Il nome del package name si traduce in una struttura di folder. I Package usati insieme ai modificatori d’accesso di classe possono nascondere la classe a classi al di fuori del progetto (approfondiamo in seguito)
  • require/include contro import
    • In PHP, di solito, si include il file dove è definita la classe usando la funzione require_once.  Partendo da PHP 5 potete definire una funzione __autoload() e chiamare  require_once o include_once in questa funzione invece di scrivere la lista dei file richiesti in cima ad ogni file
    • In AS3 si usa uno statement di import per includere la classe desiderata. In più, se volete includere tutte le classi del package org.corlan, potete scrivere l’import usando una wild card: import org.corlan.*. Un’altra differenza è che il compilatore AS3 compilerà solo le classi che sono usate dal vostro codice (che succede solo nel momento in cui l’istanza di questa particolare classe viene creata)
  • Per chiamare un metodo/membro su un’istanza:
    • In PHP you use the “->” operator
    • In AS3 you use the “.” (dot) operator

Adesso passiamo ai modificatori di classe/metodi/membri.

Partirò coi modificatori di classe:

  • PHP ha: public, private, protected, static
  • AS3 ha public, internal, final, e dynamic. Se non si specifica alcun modificatore di accesso (public o internal), allora la classe è per default internal, il che significa che può essere acceduta solo da classi appartenenti allo stesso package. public e final hanno lo stesso significato che hanno in PHP; abstract non esiste in AS3, ma si può superare questa limitazione usando le interfacce. Dynamic marca la classe come una classe che potrà essere modificata run-time modificando i membri esistenti o aggiungendone di nuovi

Modificatori per proprietà di classe:

  • PHP has: public, private, protected, static
  • AS3 ha I modificatori del PHP più internal. Internal è usato per rendere le proprietà disponibili solo all’interno dello stesso package. Quando non è specificato alcun modificatore, è usato di default internal

Modificatori per metodi di classe:

  • PHP ha public, private, protected, static, final, e abstract
  • AS3 ha: public, private, protected, static, final, internal, e override. Abstract non esiste in AS3; internal rende i metodi disponibili solo per codice appartenente allo stesso package

In AS3 tutto quello che si può fare con una function closure, lo si può fare con I metodi di classe.

I costruttori in PHP possono essere impostati come private, si può definire un costruttore con lo stesso nome della classe, oppure si possono usare i metodi speciali __construct(), __destruct(). In AS3 il costruttore è sempre pubblico e deve avere lo stesso nome della classe. Se non se ne fornisce uno, AS3 lo crea dietro le quinte per voi.

I membri static  e i metodi static vengono acceduti in questo modo:

  • In PHP usando ClassName::propertyName
  • In AS3 usando ClassName.propertyName. Comunque all’interno della stessa classe si può lasciare il nome di classe
   1: package org.corlan {
   2:
   3:     public class Foo {
   4:
   5:         private static myVar:String;
   6:
   7:         function Foo() {
   8:             Foo.myVar = "value 1";
   9:             myVar = "value 2";
  10:         }
  11:
  12:     }
  13: }

this:

  • In PHP si usa la speciale variabile di classe $this per riferirsi a membri di classe (variabili /metodi) definiti all’interno della stessa classe: $this->myVar = 22;
  • Anche in AS3 viene sempre usato this: this.myVar = 22; d’altra parte, si può tralasciare this e semplicemente usare myVar = 22

In AS3 solo una classe può essere dichiarata all’interno del package (e questa classe dà nome al file). Tuttavia, fuori dalla dichiarazione di package si possono dichiarare tutte le classi che si vuole:

   1: package org.corlan {
   2:
   3:     public class Foo {
   4:
   5:         private static var instance:Foo;
   6:
   7:         function Foo(object:Bar) {
   8:
   9:         }
  10:
  11:         static public getInstance():Foo {
  12:             if (Foo.instance == null) {
  13:                 Foo.instance = new Foo(new Bar());
  14:             }
  15:             return Foo.instance;
  16:         }
  17:
  18: }
  19:
  20: class Bar {}

Questo ha un importante risvolto: tutte le classi definite in un file fuori dal package saranno visibili solo dal codice dichiarato nello stesso file. Per tutti gli altri pezzi di codice queste classi non esistono. Ricordate la limitazione che in AS3 non si può dichiarare il costruttore come privato? Bene, usando una tecnica simile a quella usata in questo esempio, potete star tranquilli che ci sarà una sola istanza della classe Foo.Se del codice esterno chiama il costruttore, viene lanciata un’eccezione di run-time perché il codice esterno non può usare un’istanza di Bar, perché questa classe è invisibile al codice esterno.

Ereditarietà

Estendere classi in AS3 è davvero simile a come lo si fa in PHP. Si usa la stessa parola chiave extends seguita dal nome della classe che si vuole estendere. L’overriding è lo stesso che in PHP, l’unica differenza è che va aggiunta la parola chiave override alla signature del metodo. L’overloading non è supportato (non si possono avere due o più metodi con lo stesso nome).

In PHP si accede ai membri padre usando la sintassi parent::memberName; in AS3 si usa super.memberName. Quando viene eseguito il costruttore di una classe, per prima cosa viene chiamato il costruttore del padre. Questo accade anche quando non lo chiamiamo esplicitamente nel codice. Allora, quando avete del codice nel metodo costruttore, non potete avere la chiamata al costruttore del padre dopo il vostro codice. In questo modo, date una chance alla classe padre di essere correttamente inizializzato. Potete chiamare il costruttore padre usando questa sintassi: super().. Vediamo questi concetti al lavoro, prima il codice PHP, poi quello AS3.

   1: class SimpleClass {
   2:
   3:     function SimpleClass() {
   4:         echo('SimpleClass() called');
   5:     }
   6:
   7:     function __construct() {
   8:
   9:     }
  10:
  11:
  12:     function displayVar()
  13:     {
  14:         echo "SimpleClass class\n";
  15:     }
  16: }
  17:
  18: class ExtendClass extends SimpleClass {
  19:
  20:     function ExtendClass() {
  21:         $myVar = 1;
  22:         parent::SimpleClass();
  23:         //or
  24:         parent::__construct();
  25:     }
  26:     // Redefine the parent method
  27:     function displayVar()
  28:     {
  29:         echo "Extending class\n";
  30:         parent::displayVar();
  31:     }
  32: }

Diamo un’occhiata   a come viene inizializzata una classe in AS3. Quando una classe è istanziata, per prima cosa tutte le proprietà sono inizializzate, poi il codice statico specificato a livello di classe viene eseguito (è qualcosa che non è possibile fare in PHP), poi viene eseguito il costruttore. Qui c’è un esempio:

   1: public class Foo {
   2:
   3:         private var a:int = 0;
   4:         private static var os:String;
   5:         trace("initializer");
   6:
   7:         if (Capabilities.os == "LINUX")
   8:             os = "LINUX";
   9:         else
  10:             os = "other";
  11:
  12:         public function Foo(a:int=1) {
  13:             trace("foo() executed");
  14:         }
  15: }
  16:
  17: var foo1:Foo = new Foo();
  18: var foo2:Foo = new Foo();
  19: //produces this output in console:
  20: initializer
  21: foo() executed
  22: foo() executed

In AS3 potete creare oggetti  fuori dalle function closures usando la proprietà prototype di una funzione (è simile a quello che si usa in JavaScript per creare ed estendere le classi). Ecco un breve esempio:

   1: //we create a function
   2: function MyClass(value:String = "Mihai") {
   3:     //we create a property
   4:     this.name = value;
   5: }
   6: //we use the special variable prototype of the function 
   7: //to create another method 
   8: MyClass.prototype.setName = function (value:String):void {
   9:     //we have access to the property defined on MyClass object
  10:     trace(this.name);
  11:     this.name = value;
  12:     trace(this.name);
  13: }
  14:
  15: //create an instance
  16: var myObject = new MyClass();
  17: //accesing the method created earlier
  18: myObject.setName("Joe");

Parlerò ancora delle caratteristiche dinamiche di AS3 in una sezione in seguito.

Getters/setters

In qualsiasi linguaggio OOP di solito si usano i getters/setters per controllare le proprietà di una classe che si vogliono esporre verso l’esterno. PHP non fa eccezioni in tal senso. Tuttavia, in AS3 c’è uno speciale supporto per le proprietà usando le parole chiave set e get. Ecco un esempio:

   1: public class Employee {
   2:
   3:     private var _salary:int = 0;
   4:     private var _income:int = 0;
   5:
   6:     function Employee() {
   7:
   8:     }
   9:
  10:     public function set salary(value:int):void {
  11:         if (value > 0) {
  12:             this._salary = value;
  13:             this._income = this._salary * 12;
  14:         }
  15:     }
  16:
  17:     public function get salary():int {
  18:         return this._salary;
  19:     }
  20:
  21:     public function get income():int {
  22:         return this.income;
  23:     }
  24: }
  25:
  26: //using this class
  27: var emp:Employee = new Employee();
  28: emp.salary = 1000;
  29: trace(emp.income);
  30: //this raise an error, because the income property is read-only 
  31: //for the outside code
  32: emp.income = 120;

Principalmente, dal momento che ho setter e getter per il campo _salary, posso chiamare questi metodi come fossero campi o proprietà e non funzioni: object.salary = 20 invece di object.salary(20).

E se scegliete di non definire un setter, avrete proprietà in sola lettura. Questo è quel che ho fatto con la proprietà  _income.

Questa feature consente la scrittura di codice un po’ più pulito, rendendo facile scrivere API o classi che verranno usate da altre. Supponiamo che nel mio esempio scelga di creare il campo _salary come un membro pubblico. Se più tardi decido che mi serve validare i valori che possono essere settati, devo aggiungere un setter. In PHP questo dovrebbe essere qualcosa del genere myObject.setSalary(). Nel giro di un istante tutto il codice che usa la classe è “rotto”; và aggiornato con il setter.

In AS3 si può far partire la classe con la proprietà definita come public var salary:int e quando decidete che serve un setter, rinominate la variabile e aggiungete il metodo public function set salary(). Tutto il codice che usa la classe non è affetto da questa modifica, perché continua ad accedere la proprietà usando la stessa sintassi: objectInstance.salary = 10.

C’è la convenzione in AS3, per quando si usano in questo modo i setters e i getters, ché è quella di aggiungere un underscore “_”  al nome variabile.

Interfaces

Le interfacce funzionano all’incirca allo stesso modo in PHP e in AS3. La differenza evidente è che mentre in PHP potete definire metodi e costanti, in AS3 potete solo definire metodi. Tuttavia, potete definire i setters/getters:

   1: public interface IEmployee {
   2:
   3:     public function set salary(value:int);
   4:     public function get salary():int;
   5:     public function get income():int;
   6: }

Exceptions

Come  in PHP, AS3 ha il supporto alla gestione delle eccezioni:

   1: try {
   2:
   3: } catch(e:Error) {
   4:
   5: } finally {
   6:
   7: }
   8:
   9: //throwing an exception
  10: throw new Error("Some error");

Error è la classe radice per tutti in tipi di errore su AS3. Potete creare i vostri errori  personalizzati estendendo questa classe, o potete usare le sottoclassi già disponibili in libreria.

Casting e testing del tipo di un oggetto

A volte si vuole fare il “cast” di un determinato oggetto a un tipo differente, oppure si vuole controllare il tipo. Per controllare il tipo PHP usa instanceof, e AS3 usa is. Per fare il cast, in AS3 si hanno due diverse sintassi.

   1: class A {};
   2:
   3: class B extends A {};
   4:
   5: var b:A = new B();
   6: //casting
   7: var c:B = b as B;
   8: //or
   9: var d:B = B(b);
  10:
  11: //checking the type of an variable
  12: if (b is A)
  13:     trace(true);
  14: if (b is B)
  15:     trace(true);

[top]

Variable scope

Ora che abbiamo visto come le variabili, le funzioni e le classi lavorano in Flex e in As3, è ora di vedere lo scope di una variabile (raggio di azione). In PHP ci sono 2 scope principali: global (variabili definite a livello di file) e locale (variabili definite dentro funzioni).

In Flex si hanno 5 diverse possibilità di scope: function body, instance method body, static method body, class body, e global scope. Aggiungendo a questi i modificatori di accesso (public/private/protected/internal) abbiamo una situazione un po’ più complicata che in PHP.

Gli scope possono essere annidati; in questo caso le variabili/funzioni/membri dello scope di inclusione diventano visibili a quello annidato. Per esempio dichiarando una funzione anonima nel body di un’altra funzione, in AS3 tutte le variabili definite nella funzione più esterna sono disponibili dentro la funzione annidata. In PHP, bisogna passare le variabili che si vogliono usare, oppure usare lo statement use:

   1: //php code
   2: function a() {
   3:     $a = 1;
   4:     $b = 2;
   5:
   6:     function b() use ($a, $b) {
   7:
   8:     }
   9: }
  10:
  11: //AS3 code
  12: function a():void {
  13:     var a:int = 1;
  14:     var b:int = 2;
  15:
  16:     function b():void {
  17:         //variables a and b are available here
  18:     }
  19: }

Quando si dichiara una funzione dentro un package senza nome, è posizionata nello scope globale ed è visibile da tutto il codice. D’altra parte , qualunque cosa sia dichiarata fuori dal package è sempre nello scope globale, ma è visibile soltanto al codice contenuto nello stesso file.

[top]

Arrays

Gli Array in AS3 sono veramente simili a quelli del PHP, con una differenza: in AS3 un array può avere solo indici numerici. Se si vuol creare un array associativo, bisogna usare la classe Object. Se si vuol creare una hash map dove le chiavi sono oggetti (e non stringhe) bisogna usare la classe Dictionary. Per creare un array dovete usare la classe Array, e potete creare array multi-dimensionali. Sia per gli Object che per gli  Array potete usare definizioni letterali. Vediamo alcuni esempi:

   1: var myArray1:Array = new Array(1, 2, "some string");
   2: //creates an array with three elements: 0->1, 1->2, 3->some string
   3:
   4: //literal definition for an array
   5: var myArray2:Array = [1, 2, 3];
   6: //ading two more elements
   7: myArray2.push(4,5);
   8:
   9: //a hash map, similar to associative arrays in PHP
  10: var myMap:Object = new Object();
  11: myMap.name = "Flex";
  12: //literal definition of a map
  13: var myMap2:Object = {name:"Flex"};
  14:
  15: //using Dictionary class
  16: var dic:Dictionary = new Dictionary();
  17: var anObject:Object = new Object(); //creating the key
  18: dic[anObject] = "some value"; //adding a value to Dictionary

Avete tutti i metodi tipici per aggiungere elementi o per toglierli, inclusi push, shift, pop, unshift, e splice. Concat può essere usato per aggiungere array ad un altro array. Nell’esempio precedente potete vedere come ho usato push per aggiungere altri due elementi ad un array.

Gli array non sono di dimensioni finite; possono crescere aggiungendo elementi. In PHP si usa “[]” per aggiungere un nuovo elemento alla fine di un array. C’è un modo analogo n AS3 che usa la proprietà length dell’array (potete usare tale proprietà anche per ridurre la dimensione dell’array):

   1: var array:Array = new Array();
   2: array[array.length] = 1;//array has the values: 1
   3: array[array.length] = 23;//array has the values: 1, 23

Potete usare delete per impostare come undefined un determinato elemento di un array:   delete array[index]. Questo non ridurrà la lunghezza dell’array. Potete usare lo statement for() per fare un loop di un array usando la sua proprietà length. Se volete fare un loop attraverso un Object (ancora una volta può essere usato per creare quelcosa di simile agli array associativi del PHP), potete usare for – each (che lavora similmente allo stesso costrutto PHP) o for-in (lo vedremo nella sezione Dinamica).

[top]

Namespaces

Se state cercando un concetto equivalente ai namespace PHP anche in AS3, dovreste leggere in merito ai package nella sezione Classi, perché i package AS3 sono simili ai namespace in PHP.

In ActionScript, namespace ha un diverso significato. Vediamo per che cosa vengono usati e vi farò qualche esempio:

  1. Prevenire conflitti di nomenclatura (potete creare metodi multipli con lo stesso nome nella stessa classe, ognuno appartenente a namespace diversi)
  2. contrassegnare variabili e metodi di framework/programmi attraverso regolazioni custom della visibilità (per esempio, Flex usa un namespace chiamato mx_internal; usando il namespace invece che private o protected, è possibile usare questi metodi in qualunque package e classe presi dal frame work Flex. Allo stesso tempo, gli sviluppatori sono avvertiti che questi metodi o membri non sono pensati per essere usati esternamente, dal momento che possono cambiare)
  3. implement permissions-based access control for a class
  4. creare una classe che possa cambiare il proprio comportamento in base ad un namespace specifico scelto

Prima di entrare nel dettaglio, dovrei specificare che i namespace sono usati internamente dal Flash player per implementare I modificatori di accesso: public, protected, internal, e private.

Potete definire un namespace usando questa sintassi: namespace identifier = URI. L’identifier è ciò che si usa quando si dichiarano variabili e metodi, e quando si vuole qualificare un membro o un metodo per usarlo. URI è di norma un URL che deve essere unico per la vostra applicazione. Non deve esistere, e nella maggior parte dei casi potrete usare il vostro domain name. Per esempio potrei definire un namespace come questo: namespace online = “http://corlan.org/apps/online”.

Potete definire un namespace ovunque definiate delle variabili: al livello superiore della definizione di un package (sarà disponibile in tutto il programma), o a livello di classe (sarà visibile solo nella classe in cui è definito). A livello di funzione potete usare semplicemente un namespace che è definito da qualche altra parte (potreste usare questo per identificare una variabile che è stata definita altrove usando lo stesso namespace; dovete conoscere l’URI per fare questo).

Si può dichiarare un metodo o una variabile in un dato namespace posizionando l’identificatore di namespace prima della dichiarazione. Per esempio: mynamespace var a:int = 1. Quando si definisce una variabile o un metodo in un namespace, non è permesso usare altri modificatori di accesso (come private ad esempio).

Per chiamare una variabile o un metodo che è stato definito in un namespace, usate l’operatore di qualifica dei nomi “::”. Supponendo di aver definito un metodo chiamato myMethod() in un namespace chiamato online, potete accedere al metodo con questa sintassi: objectInstance.online::myMethod(). Lo stesso vale per le variabili. A volte potete aver bisogno di usare più variabili e metodi che siano qualificati per namespace. Potete aprire il namespace in questo scope e sbarazzarvi dell’operatore name-qualifier. Si fa usando la direttiva namespaceidentifier . Per esempio:

   1: public function doSomething() {
   2:     use namespace online;
   3:     //call the method defined in that namespace:
   4:     myMethod();
   5: }

Potete passare i namespace, ad esempio potete far restituire un namespace a un metodo, abilitando il codice chiamante per usarlo per qualificare un metodo o un membro.

Adesso, creiamo due namespace che possono essere usati per cambiare il comportamento di una classe in run-time. Primo, definirò i due namespace (userò un file per ogni namespace):

   1: // ActionScript file online.as
   2: package org.corlan {
   3:     public namespace online = "http://corlan.org/apps/online";
   4: }
   1: // ActionScript file offline.as
   2: package org.corlan {
   3:     public namespace offline = "http://corlan.org/apps/offline";
   4: }

Poi, ho usato questi due namespace per creare una classe che alimenta un oggetto. A seconda dello stato della connessione può alimentare l’oggetto localmente (ad esempio usando uno storage locale), o in remoto sul server (usando il servizio REST). La parte interessante arriva quando del codice ha bisogno di usare questa classe.

Il codice chiamante non tiene per niente conto del metodo; esso chiede semplicemente che sia allocato. Usando questi due namespace, creerò una classe che ha due metodi entrambi chiamati save(), ciascuno di essi definito in uno dei due namespace.

Poi, ho una variabile private che alloca il namespace corrente giusto a seconda dello stato della connessione. Il programma chiamante accede al namespace corrente usando una getter, e usando this per chiamare  il metodo save(). Ancora, il programma chiamante non conosce niente di questi meccanismi interni e niente sui namespace, e non gliene importa.

Vediamo il codice PersistObject :

   1: package org.corlan {
   2:     import flash.events.Event;
   3:
   4:     public class PersistObject {
   5:
   6:         private var _mode:Namespace = offline;
   7:
   8:         public function PersistObject() {
   9:
  10:         }
  11:
  12:         online function save(object:Object):void {
  13:             //save the object back to server
  14:             trace("online");
  15:         }
  16:
  17:         offline function save(object:Object):void {
  18:             //save the object locally
  19:             trace("offline");
  20:         }
  21:
  22:         private function connectivityChanged(e:Event):void {
  23:             //here the mode can be changed from offline to online
  24:             //and vice-versa
  25:         }
  26:
  27:         public function get mode():Namespace {
  28:             return this._mode;
  29:         }
  30:     }
  31: }

The next code snippet uses this class. The code is simple, and the inline comments should explain it.

   1: //creating an object that we want to be stored
   2: var object:Object = {book:"Ulysses", author:"James Joyce"};
   3: //create an instance of PersitObject
   4: var persistenceObject:PersistObject = new PersistObject();
   5: //get the current namespace
   6: var currentMode:Namespace = persistenceObject.mode;
   7: //use the namespace we retrieved to qualify the save method()
   8: persistenceObject.currentMode::save(object);

Accessibilità dei Namespace

Potete usare gli stessi modificatori di accesso che usate per variabili e metodi:  public, internal, protected, and private (per namespaces definite a livello di package potete usare solo public e internal).

[top]

Lavorare con XML

In PHP c’è un supporto esteso per l’XML attraverso funzioni native o estensioni addizionali. In AS3 ci sono due classi che rappresentano l’XML nativamente: XML e XMLList. AS3 implementa la classe XML basata sul DOM (ci sono metodi come children(), appendChild(), parent(), insertChildBefore() etc).

Si può creare un oggetto XML usando uno qualsiasi dei seguenti metodi:

  1. scrivere XML usando form letterali
  2. creare un’istanza di XML e quindi importare l’XML da un file esterno
  3. creare un’istanza di XML   e usare la notazione col punto per aggiungere/cambiare la struttura:
   1: var author:XML = <author/>;
   2: author.@id = 1; //setting an attribute called id and its value
   3: //adding two child nodes to author:
   4: author.name = "Mihai Corlan";
   5: author.article = "Flex for PHP developers";
   6:
   7: //this code is equivalent with:
   8: var author:XML = <author id="1">
   9: <name>Mihai Corlan</name>
  10: <article>Flex for PHP developers</article>
  11: </author>;

Usando E4X si possono facilmente trovare i nodi creando delle condizioni basate sul nome dei nodi o sugli attributi creando le condizioni basate sul nome dei nodi o sui valori degli attributi. Potete usare l’operatore discendente “..” per ritrovare tutti i nodi con un certo nome (per esempio ritrovare tutti i nodi del programma del tipo: programs.. program). Potete creare le condizioni basate sugli attributi usando l’operatore “@” (per esempio programs..program.(@id==2)).

E infine usando la notazione col punto potete navigare tra i nodi (solo tenendo a mente che ogni child è trattato come una XMLList anche quando è “figlio unico”). Qui sotto potete vedere degli esempi di uso del E4X con XML.

   1: var programs:XML = <root>
   2:     <program id="1">
   3:         <name>Flex</name>
   4:     </program>
   5:     <program id="2">
   6:         <name>ActionScript 3</name>
   7:     </program>
   8:     <program id="3">
   9:         <name>AJAX</name>
  10:     </program>
  11: </root>;
  12:
  13: //retrieving the second program node and printing its name
  14: trace(programs.program[2].name[0]);
  15: //retrieving all the program nodes:
  16: var list:XMLList = programs..program;
  17: //retrieving all the program nodes that have an id attribute equal to 2
  18: var list:XMLList = pograms..program.(@id==2);

[top]

ActionScript Dinamico

Ricordate la definizione di AS3? Nella definizione dicevo che AS3 è un linguaggio di scripting dinamico. Vediamo meglio. Dinamico significa che un oggetto può essere modificato runtime aggiungendo o togliendo metodi o membri.

E’ possibile aggiungere nuovi metodi alla stessa classe (e qualsiasi oggetto creato da questa classe avrà questi metodi). Si possono anche creare nuove classi da zero (usando la proprietà prototype).

In AS3 ci sono degli oggetti dinamici built-in come Object, e in Flex c’è un altro esempio, ObjectProxy.

Se vi state chiedendo perché questa feature esiste, la risposta è semplice: le prime versioni di AS non avevano tutte le feature e l’OOP che AS3 offre oggi. Devo dire, che dalla mia esperienza, non molti developer usano le feature dinamiche  di AS3. Per una serie di motivi. Primo perché i tempi di accesso sono più lunghi per membri dinamici rispetto a membri statici. Secondo, se vi ritrovate con del codice pieno di bug (non c’è controllo sugli errori di compilazione run-time, per esempio). Non siete limitati alle classi built-in; potete creare oggetti dinamici usando il modificatore dynamic nella definizione della classe:

   1: dynamic public MyDynamicObject {
   2:
   3: }

Adesso, usando la classe che avete appena definite, potete aggiungere membri in fase run-time (ricordate che tutte le variabili di istanza sono untyped e public):

   1: var a:MyDynamicObject = new MyDynamicObject();
   2: a.author = "Mihai Corlan";

Potete ciclare tra tutti i membri di una classe dinamica usando il ciclo for-each-in. Ecco come potete mostrare i membri dal precedente esempio:

   1: for each (var element:* in a) {
   2:     trace(element); //displays Mihai Corlan
   3: }

Se volete estrarre i nomi dei membri invece che i loro valori, potete usare il loop for-in:

   1: for (var memberName:* in a) {
   2:     trace(memberName); //outputs author
   3:     trace(a[memberName]); //outputs Mihai Corlan
   4: }

[top]

Flex è asincrono

Finora, abbiamo coperto le feature di Flex, e diverse erano abbastanza simili a quelle del PHP. Tuttavia la natura asincrona di Flex è qualcosa di completamente differente da quanto visto in PHP. E’ importante capire questo fatto,non fare resistenza e seguire il flusso.

Cosa significa asincrono? Supponete di creare un’applicazione Flex, e che dopo che l’applicazione è caricata dal browser, l’utente può scegliere di caricare delle immagini da un altro sito. Potete usare una classe URLLoader per questo task.

Quando si esegue il metodo load(), sulla riga di codice successiva non si avranno i dati. Lo script non fa pause dopo la chiamata a load() e si aspetta che i dati siano caricati. Invece l’esecuzione dello script è ripresa. Come programmatore avete a che fare con questa “natura asincrona” utilizzando il sistema di eventi integrato in AS3.

Se avete familiarità nella programmazione in AJAX, questo è simile a quanto accade quando si fa una chiamata AJAX: si predispone la funzione callback, e quando i dati arrivano la funzione di callback è chiamata e si può accedere immediatamente ai dati caricati.

Tornando indietro all’esempio dell’ ULRLoader, si potrebbe aggiungere un event listener per l’evento result. Questa è la funzione che viene chiamata una volta che i dati sono caricati. Qui c’è un esempio di come potrebbe essere un codice:

   1: function loadPic():void {
   2:     var loader:URLLoader = new URLLoader();
   3:     loader.dataFormat = URLLoaderDataFormat.BINARY;
   4:     //adding the event handlers or listeners
   5:     loader.addEventListener(EventComplete, picLoaded);
   6:     loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, picError);
   7:     //starting the loading
   8:     loader.load(new URLRequest("http://some_url"));
   9: }
  10:
  11: //event handler for 
  12: function picLoaded(event:Event):void {
  13:     //get the data from the loader object
  14:     //use the target property to get the loader object
  15:     (event.target as URLLoader).data;
  16: }
  17:
  18: //event handler for the error event
  19: function picError(event:IOErrorEvent):void {
  20:     //displays the error id in a pop-up windonw
  21:     Alert.show(event.errorID);
  22: }

Posso riassumere così: “Non chiamateci, vi chiamiamo noi!”

Come dicevo, AS3 ha un sistema di gestione eventi built-in. La top class di tutti gli eventi è Event. Tutti gli oggetti che lavorano in modo asincrono hanno un metodo addEventListner(), e i primi due argomenti sono di tipo evento, e il nome della funzione da chiamare quando l’evento si verifica.

Potreste dedurre che i soli oggetti che sono legati al reperimento di dati remote siano soggetti a questo modello di gestione eventi. Ma non è così; tutti i componenti o gli oggetti che sono visuali, hanno anche degli eventi. Per esempio, ogni applicazione Flex ha un evento che si chiama  creationComplete.  Questo evento è innescato una volta che tutti i componenti richiesti dall’applicazione sono processati e mostrati a schermo.

Nonostante possiate pensare che questo codice non sia così lineare come in PHP, c’è una buona ragione per avere chiamate asincrone sparse per Flex (e Flash Player): Flex è una tecnologia client-side. Se tutte le chiamate fossero sincrone, l’interfaccia utente dell’applicazione smetterebbe di essere reattiva per ogni chiamata legata al caricamento dati, ad esempio.

E gli utenti odiano le interfacce non reattive.

Potete cancellare certi eventi e anche cambiare il loro comportamento di default. Vi lascio esplorare questi dettagli per conto vostro, se vi dovessero servire; per adesso dovreste avere una più che buon’idea di quali eventi e di quali event listeners si parli.

[top]

Data Binding, metadata tags, e reflection

Il binding dei dati è un’altra feature di Flex che rende la vita più facile agli sviluppatori, e allo stesso tempo riduce il numero di linee di codice. Il data binding è un modo elegante di collegare il data model alla vista e aggiornare automaticamente la vista per riflettere qualsiasi variazione nel data model.

Siccome Flex è usato per creare applicazioni di tipo User Interfaces, i componenti Flex finiscono spesso per mostrare un mare di dati. Quando i dati vengono modificati, anche real-time, si vogliono visualizzare i nuovi dati e non i vecchi. Usando il data binding, questo può essere ottenuto facilmente. Il data binding linka una proprietà di un oggetto (chiamato sorgente) alla proprietà di un altro oggetto (chiamato destinazione), quindi ogni volta che il sorgente cambia, la destinazione viene automaticamente aggiornata.

In Flex 4 c’è un supporto per il binding bi-direzionale (al momento si può fare anche sul Flex 3, ma lo si deve dichiarare in un secondo passo), che significa che opera anche nell’altro verso: quando la destinazione è aggiornata, il nuovo valore è copiato nel sorgente.

E’ utilissimo quando si usano i data model e i form. Si fa il bind del data model al form, e quando l’utente cambia valori nel form, il binding bi-direzionale aggiorna il data model con i valori del form. E’ tempo di vedere un po’ di codice:

   1: <?xml version="1.0" encoding="utf-8"?>
   2: <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal">
   3:     <mx:Script>
   4:         <![CDATA[
   5:
   6:             [Bindable]
   7:             private var labelValue:String = "Hello World!";
   8:
   9:             private function add():void {
  10:                 labelValue += "!";
  11:             }
  12:         ]]>
  13:     </mx:Script>
  14:     <mx:Label id="myLabel" text="{labelValue}"/>
  15:     <mx:Button label="Add a !" click="add()"/>
  16: </mx:Application>

Il metadato Bindable sulla variabile labelValue lo marca come sorgente per il data binding. Poi ho usato “{}” per l’attributo di testo del Label per marcare questa proprietà come destinazione del binding.

Avendo sistemato il binding, ogni volta che la variabile  labelValue è cambiata, la label aggiorna anche la sua vista per riflettere il cambiamento. Posso usare la stessa variabile per più label o input di testo, e tutti questi saranno aggiornati di volta in volta per riflettere il nuovo valore.

C’è anche una sintassi MXML : <mx:Binding source=”labelValue” destination=”myLabel.text”/>.

Se volete “bindare” i dati con un controllo editabile (ad esempio un input di testo) e copiare il valore sul sorgente, in Flex 4 potete fare binding bi-direzionale usando l’operatore “@”:

   1: <s:TextInput id="txt" text="@{labelValue}"/>

E se volete usare il tag Binding, settate l’attributo twoWay a true (di nuovo, solo su Flex 4):

   1: <mx:Binding source="labelValue" destination="myTextBox.text" twoWay="true"/>

Per implementare il data binding, Flex aggiunge codice incollato (glue code) in fase di compilazione (ricordate che il data binding non è una feature di Flash player o di AS3), ed il bello di ciò sta nel fatto che non dovete scrivere voi questo codice a mano.

Dal momento che il data binding offre un approccio lineare per il collegamento del data model e della vista, è un bell’incremento di performance avere un insieme di binding per variabili che vengono aggiornate decine o centinaia di volte al secondo. Per queste variabili non serve aggiornare la user interface così frequentemente, perché c’è un limite ai frame per secondo imposto dal browser stesso (da qualche parte è intorno ai 50 frame per secondo). Quindi non ha senso cercare di mostrare su schermo aggiornamenti real time con frequenza di centinaia di frame per secondo.

Altra cosa da ricordare è che non tutti gli oggetti sono “bindabili”. Per esempio Object e Array non sono bindabili, dovete usare ObjectProxie e ArrayCollection. Quando create classi per modellare i dati, se volete tutti i membri della classe bindabili, potete inserire il metadato Bindable a livello di  classe, invece di aggiungerlo per ogni proprietà:

   1: package org.corlan {
   2:
   3:     [Bindable]
   4:     public class VOAuthor {
   5:
   6:         public var id_aut:int;
   7:         public var fname_aut:String;
   8:         public var lname_aut:String;
   9:     }
  10: }

Adesso passiamo ai tag metadata (a volte chiamati annotazioni). Avete già visto i tag metadata nel form con il metadata tag Bindable. Per una lista completa dei tag metadata usabili su Flex, guardate qui. In certi casi, i metadata tag sono usati dal compilatore MXML per generare il glue code (come nel caso di Bindable), in altri casi potete usare i metadata tag per dare un suggerimento al Flash Builder dell’IDE o per creare delle proprietà  sul tag MXML. Questo è il caso del metadato Event. Per esempio supponete che io scriva una classe che lancia un evento quando un film è caricato. Posso usare il metadata tag Event per per dichiarare il tipo di evento ed il nome. Nel fare questo, posso usare la proprietà del’evento movieLoadedEvent sul tag MovieLoader MXML  per registrare l’event listener per tale evento. Vediamo il codice di una classe e come si può usare la classe in MXML.

   1: //class definition
   2: package org.corlan {
   3:     import flash.events.EventDispatcher;
   4:     import flash.events.IEventDispatcher;
   5:
   6:     [Event(name="movieLoadedEvent", type="flash.events.Event")]
   7:
   8:     public class MovieLoader extends EventDispatcher {
   9:
  10:         public function MovieLoader(target:IEventDispatcher=null) {
  11:             super(target);
  12:         }
  13:
  14:     }
  15: }
   1: <?xml version="1.0" encoding="utf-8"?>
   2: <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
   3:         xmlns:local="org.corlan.*" layout="horizontal">
   4:     <mx:Script>
   5:         <![CDATA[
   6:             private function movieLoadedListener(event:Event):void {
   7:                 //do something with it
   8:             }
   9:         ]]>
  10:     </mx:Script>
  11:
  12:     <local:MovieLoader id="loader" movieLoadedEvent="movieLoadedListener(event)"/>
  13: </mx:Application>

Ci sono altre interessanti cose che si possono fare con i metadati. Settando un flag sul compilatore (keep-as3-metadata seguito dai nomi dei tag), potete aggiungere I vostri metadata personali ed il compilatore vi fa diventare i tag bytecode. Potete usare i tag runtime. Per esempio in questo post, potete vedere come usare tag metadata personalizzati per ottenere un modo di avere un dato data model in un’applicazione AIR ( di AIR ne parleremo più avanti). E questo mi porta all’ultimo argomento di questa sezione: la reflection. Per usare tag metadata personalizzati dovete affidarvi alla API reflection di AS3.

In PHP c’è complete “object-oriented reflection API”: Reflection, ReflectionFunction, ReflectionParameter, ReflectionMethod, e così via. Ecco un esempio di uso della classe Reflection su una semplice classe PHP:

   1: class SimpleClass {
   2:
   3:     public $public = 'Public';
   4:     protected $protected = 'Protected';
   5:     private $private = 'Private';
   6:
   7:     private function SimpleClass() {
   8:         echo('SimpleClass() called');
   9:     }
  10:
  11:     private function __construct() {
  12:
  13:     }
  14:
  15:     function displayVar() {
  16:         echo "SimpleClass class\n";
  17:     }
  18: }
  19:
  20:
  21: Reflection::export(new ReflectionClass('SimpleClass')); //this outputs:
  22:
  23: Class [ <user> class SimpleClass ] {
  24:   @@ /Applications/MAMP/htdocs/_learning/classes.php 7-26
  25:
  26:   - Constants [0] {
  27:   }
  28:
  29:   - Static properties [0] {
  30:   }
  31:
  32:   - Static methods [0] {
  33:   }
  34:
  35:   - Properties [3] {
  36:     Property [ <default> public $public ]
  37:     Property [ <default> protected $protected ]
  38:     Property [ <default> private $private ]
  39:   }
  40:
  41:   - Methods [3] {
  42:     Method [ <user> private method SimpleClass ] {
  43:       @@ /Applications/MAMP/htdocs/_learning/classes.php 13 - 15
  44:     }
  45:
  46:     Method [ <user, ctor> private method __construct ] {
  47:       @@ /Applications/MAMP/htdocs/_learning/classes.php 17 - 19
  48:     }
  49:
  50:     Method [ <user> public method displayVar ] {
  51:       @@ /Applications/MAMP/htdocs/_learning/classes.php 22 - 25
  52:     }
  53:   }
  54: }
  55:

Su AS3 ci sono tre funzioni nel package flash.utils package che possono essere usate per la reflection: describeType(), getDefintionByNameI() e getQualifiedSuperClassName(). Qui c’è un esempio di output di describeType() (l’output è un oggetto XML):

   1: public class SimpleClass {
   2:
   3:    public var _public:String = "Public";
   4:    protected var _protected:String = "Protected";
   5:    private var _private:String = "Private";
   6:
   7:    function SimpleClass() {
   8:        trace("SimpleClass() called");
   9:    }
  10:
  11:    public function displayVar():void
  12:    {
  13:        trace("SimpleClass class");
  14:    }
  15: }
  16:
  17: function reflect():void {
  18:     var s:SimpleClass = new SimpleClass();
  19:     var description:XML = describeType(s);
  20:     trace(description);
  21: }
  22:
  23: //the output:
  24: <type name="org.corlan::SimpleClass" base="Object" isDynamic="false" isFinal="false" isStatic="false">
  25:   <extendsClass type="Object"/>
  26:   <method name="displayVar" declaredBy="org.corlan::SimpleClass" returnType="void"/>
  27:   <variable name="_public" type="String"/>
  28: </type>

[top]

Dove sono I miei dati?

Come sviluppatori PHP, avete dei modi molto diretti di leggere idati, parsarli, e mostrarli a schermo. Collegarsi ad un database MySQL è una delle prime cose che uno sviluppatore PHP impara. In effetti, dubito fortemente che voi abbiate progettato di leggere questo articolo senza sbirciare su questa sezione.

E a proposito di Flex? Vi devo deludere, perché non avete accesso diretto ai dati immagazzinati in un database. Ma c’è qualcosa di buono in questo, immagino, perché potete continuare a scrivere file PHP per leggere e scrivere dati dai vostri DB, anche quando scrivete applicazioni Flex .

Perché non c’è modo di leggere direttamente i dati da un database? A causa del vecchio adagio “Non fare mai affidamento sul client” .

Supponete che il client sia un componente Flex che sa come connettersi al server MySQL. Come e dove tenete le credenziali in modo che non siano facilmente rubabili col rischio di ritrovarsi col DB compromesso?  Settate un utente e una password differente per ogni utente e li informate di ciò? Questa è solo una delle ragioni per cui non è una buona idea avere una tecnologia client che si può connettere direttamente al server database, senza usare un application server in mezzo.

Principalmente, nelle applicazioni Flex ci si affida a script server-side per gestire i database. Flex offre per chiamare le pagine del server ed avere in dietro le risposte in Flex. Ci sono tre differenti modi di connettersi ad un data source con Flex: REST style services, web services, e Remoting (or RPC).

flex_php_10

Potete usare la classe HTTPService per connettervi via REST style services. Potete mandare variabili POST per fare una richiesta, e la risposta potrà essere XML, JSON (c’è una libreria di terze parti che fa il parsing di JSON),o formattazione custom.

Se avete web services disponibili sul server (SOAP/WSDL), potete usare la classe WebService.

Ma il metodo più interessante è il remoting (usando la classe RemoteObject).

Ci sono tre ragioni perché sia il metodo più interessante. Primo, usando il remoting potete far leva su qualunque classe PHP troviate sul server chiamando qualsiasi metodo pubblico. Di base, dal lato Flex si usa un’istanza di RemoteObject come se fosse la classe PHP remota.

Secondo , si può mappare il data model fin dal lato PHP su un data model ActionScript, e avere la conversione automatica. Questo è estremamente importante, perché quando si usano oggetti dotati di tipo, si hanno i benefici dei controlli sugli errori al momento della compilazione e si ha il completamento automatico del codice (code completion). Questo significa codice più leggibile e meno affetto da bug.

Terzo, il formato di messaging per questo metodo, AMF3 (Action Message Format) è un formato binario, che può essere molto più veloce e piccolo in confronto ai vari SOAP/XML/JSON, specialmente per grossi set di dati. Il formato in se stesso è aperto,  e chiunque può leggere i white papers e implementare programmi che lo usano.

AMF3 è più veloce perché codifica i dati. Per esempio se la stessa stringa è ripetuta nel data set, allora viene codificata solo una volta, e tutte le altre volte vengono riportate solo i riferimenti.

Se un numero è più piccolo di 4 bit, allora è usato il numero minimo di byte per rappresentarlo.

flex_php_11

James Ward della Adobe ha creato un test carino test che mostra le differenze tra il remoting e gli altri modi.

Il remoting è supportato nativamente da Flex, d’altra parte la situazione server side non è la stessa. PHP non supporta il remoting e AMF3 nativamente. Questo è il motivo  per cui vi serve una libreria server side per abilitare il remoting con un Web Server PHP. Ci sono 4 librerie disponibili, tutte free, e ci sono dei tutorial dove si spiega come usarle: Zend AMF, PHPAMF, WebORB for PHP, SabreAMF. E qui potete leggere un post che le mette a confronto.

Siccome i tipi di dato nativi sono convertiti automaticamente (da PHP ad AS3 e viceversa), dovete fare attenzione a come vengono effettivamente convertiti. Qui c’è un esempio della corrispondenza tra I data type nella libreria AMFPHP.

[top]

Autenticazione utente in Flex e progetti PHP

Quindi come può essere fatta l’autenticazione utente in progetti Flex e PHP? La risposta è molto semplice, proprio come con i siti PHP, si utilizza una sessione e qualche modo per convalidare l’utente / password. Fondamentalmente ogni volta che una chiamata viene effettuata da Flex, l’ID di sessione viene automaticamente aggiunto. Quindi se l’utente si era già autenticato, viene usata la stessa sessione. Altre informazioni in merito le potete trovare qui.

[top]

Lavorare con Flex e progetti

Fortunatamente, sia PHP che Flex sono tecnologie mature, quindi non avete che l’imbarazzo della scelta per i tool a supporto.

[top]

Flex SDK e I text editor

La prima opzione potrebbe essere usare la versione open source Flex SDK, specialmente se vi piacciono i tool in linea di comando e i text edtor come vi . Potete scrivere il codice col vostro text editor preferito , ed usare i tool in linea di comando per compilare e  debuggare l’applicazione.

[top]

Flex Builder / Flash Builder e Eclipse PDT / Zend Studio

Flex Builder è il nome dell’IDE Flex di Adobe fino alla quarta versione;  la quarta versione è stata rinominata in Flash Builder 4. Questa IDE è basata su Eclipse, è disponibile per Windows e Mac OS, e viene distribuita sia in versione plug-in che standalone. Per esempio se avete Zend Studio, potete prendere in considerazione il plugin Flash Builder ed installare questo plugin su Zend Studio.

Io preferisco usare un IDE moderno. Per progetti Flex e PHP, probabilmente la migliore combinazione è il Flex Builder o Flash Builder 4 e Zend Studio.  Flex Builder è il nome dell’IDE Flex di Adobe giunto alla quarta versione; la quarta versione è stata rinominata Flash Builder 4. Questo IDE è basato su Eclipse, ed è disponibile per Windows e per MAC OS, sia in versione plugin che in versione stand alone. Per esempio se avete Zend Studio, potreste considerare il plugin Flash Builder, e installare Zend Studio questo plug-in su Zend Studio.

Potete usare Flex Builder 3 for 60 days (trial version), per 60 giorni (trial version), e Flash Builder 4 è in beta adesso (estate 2009). Se siete un professore o uno studente potete avere una license gratuita.

Se preferite lavorare con Eclipse PDT, potete usare lo stesso approccio: installare la versione plug-in  del  Flash Builder 4 oppure, installare PDT sopra il Flash Builder stand alone.  Flash Builder 4 offre wizard per lavorare con PHP e Flex (qui c’è un tutorial in materia). Potete usarlo per il debug,  profile, compile, e per lanciare un’applicazione (web o AIR). Potete anche esportare l’ applicazione per fare una release, e c’è il supporto per il refactoring e la Design view e l’editor degli stati.

Si integra anche con Flash Catalyst, quindi potete creare le UI di un’applicazione  con Flash Catalyst e quindi aprire il progetto generato in Flash Builder 4 e continuare ad aggiungerci la business logic (potete guardarvi questo screen cast per vedere  come si crea una scrollbar verticale usando Adobe Illustrator, Flash Catalyst, e Flash Builder 4).

Ci sono altri IDE (prodotti commerciali) per Flex: IntelliJ IDEA e FDT (basato su Eclipse).

[top]

Debugging di applicazioni Flex

Potete debuggare il codice Flex usando il debugger di Flex SDK, oppure il debugger di Flash Builder 4 (o Flex Builder 3). Se scegliete un’installazione combinata di Flash Builder 4 e Zend Studio, allora potrete debuggare il codice PHP e Flex dallo stesso progetto veramente in modo facile. Fate una chiamata da Flex a PHP e potrete entrare nel debugger PHP, e quando la risposta tornerà indietro in Flex, osservarla attraverso il Flex debugger. Qui e qui ci sono alcuni video a tal proposito, e qui c’è un tutorial sul debugging con Eclipse PDT e Flex Builder.

In PHP uno dei primi approcci che ho provato in presenza di bug è stato l’uso di una combinazione di chiamate die() e var_dump() per vedere cosa stava succedendo. In AS3 potete usare trace() per avere le variabili in output sulla console. La cosa più bella è che mentre compilate l’applicazione in produzione, tutti i trace() statement sono rimossi.

Questo è un modo non ostruzionistico di fornire informazioni in output; potete usare anche la classe  Alert per mostrare i messaggi in una finestra di pop-up  (più simile al debugging di JavaScript prima della comparsa di Firebug ).

L’elemento chiave da tenere a mente è: adesso avete un client che è separato dal server, e i problemi potranno trovarsi sul client, sul server, o a livello rete.

[top]

Cos’è Adobe AIR

Adobe AIR è un desktop runtime per RIAs che gira sotto applicazioni desktop di Windows, Mac, and Linux. Con AIR, potete creare una singola applicazione che può girare su tutti questi sistemi operativi. Esempi di applicazioni AIR: Tour de Flex, TweetDeck, Times Reader, Dojo Toolbox, and Sideline from Yahoo!.

flex_php_12

Potreste pensare Adobe AIR come un “Flash Player” desktop. D’altra parte , Adobe AIR è più che un semplice  Flash Player modificato.

Dentro questo  runtime, c’è un motore HTML  (WebKit, lo stesso engine usato da Safari e Google Chrome) e un motore Flash Player modificato.

Questi due engine offrono un set di API che danno accesso alla macchina sulla quale AIR gira.

Ci sono API per scrivere e leggere file dal disco, verificare la connessione di rete,  determinare il numero di display connessi e la risoluzione, gli aggiornamenti delle applicazioni, le notifiche del desktop ,i database locali, il drag and drop, and altro ancora.

flex_php_6

Come sviluppatori web potete scegliere qualsiasi combinazione di queste tecnologie:  Flex, ActionScript 3, o HTML/CSS/JavaScript. E’ vero; potete creare un’applicazione AIR usando solo HTML, JavaScript, e CSS. Attualmente, il Dojo Toolbox e Sideline di Yahoo! Sono create usando  HTML/CSS/JS.

Quindi, con AIR,  potrete far leva sugli skill già esistenti per costruire una applicazione desktop.

Ma perché creare una web application che funzioni come desktop application? Al momento ci sono diversi motivi per chieder questo:

  • Può essere necessario poter usare un’applicazione o parte di essa, anche se non si ha un connessione Internet disponibile
  • Può essere necessario sbarazzarsi del “browser chrome” e personalizzare completamente l’aspetto della nostra applicazione
  • Può essere necessario integrare l’applicazione insieme ad altre che si trovano sul computer dell’utente (ad esempio fare il drag&drop dei file dalla applicazione AIR al desktop e viceversa)
  • Può essere necessario conservare i file sulla macchina dell’utente
  • Si può voler costruire un sistema di notifiche , è mandare l’applicazione minimizzata nella “system tray”  (per esempio , gli  instant messenger  possono notificarvi quando un nuovo messaggio e stato ricevuto, anche se sono minimizzati e non hanno il focus)

Per sviluppare applicazioni AIR, si può usare l’AIR SDK che è free (ci sono tool in linea di comando per il building, il testing, e per il debugging), potete usare Aptana Studio (se volete realizzare applicazioni AIR usando HTML/JS/CSS), oppure potete usare Flash Builder 4 (o Flex Builder 3).

Infine , qualsiasi applicazione Flex create per il browser può essere trasformata in un’applicazione AIR in poco tempo. Chiaramente se vi fermate qui e non fate uso delle specifiche caratteristiche di AIR, la cosa non ha senso perché non avreste introdotto alcun valore aggiunto.

[top]

Il prossimo passo?

All’inizio dell’anno prossimo Flex 4 sara rilasciato. Adobe ha sviluppato un nuovo tool (è ancora in beta) chaimato Flash Catalyst che può essere usato per trasformare design statici fatti con Photoshop o Illustrator in funzionali interfacce utente in Flex.

Immaginate un tool che può prendere in input un file Photoshop o Illustrator e dare in output codice HTML/CSS/JavaScript  tenendo conto del look and feel dei file grafici dati in input. Questo è quello che Flash Catalyst sta facendo, solo che da in output codice Flex 4 e non HTML.

Allo stesso tempo, ci stiamo indirizzando sempre più sul rendere la piattaforma Flash fruibile da tutti gli schermi: dai computer ai dispositivi mobile, fino alle TV e quant’altro. Adesso abbiamo Flash Lite 3 disponibile sul mobile (Nokia, Sony Ericsson, HTC, Android, Palm, BlackBerry).

L’anno prossimo, rilasceremo la versione mobile di Flash Player,  Flash Player 10.1 (con supporto al multi-touch, all’accelerometro ed altre amenità). Inoltre è davvero possibile che l’anno prossimo vedremo i primi apparecchi TV col supporto per Flash. Potrà essere davvero interessante avere una interfaccia utente che ha tutti i vantaggi dati dalle caratteristiche del Flash Player, o poter vedere video ad alta definizione dal web (Flash supporta lo standard  H-264).

Alcuni analisti pensano che nel prossimo futuro ci saranno più telefoni connessi a Internet che computer, e molte persone useranno i loro dispositivi mobili come mezzi principali per accedere ai contenuti web dal momento che non avranno computer.

Cosa significa questo per uno sviluppatore web?  Ciò significa che è possibile espandere l’area di competenza e di ciò che si offre, dai siti web alle applicazioni RIA (usando Adobe AIR), dai computer ai dispositivi mobili e altri dispositivi dotati di schermo.

Certamente, per avere questo, è necessario rispolverare un po’ di competenze, ma il livello di complessità non è come quello che si deve affrontare per diventare abili sviluppatori C o C++ per una data piattaforma.

[top]

Dove andare da qui

Spero abbiate trovato risposte alle vostre domande. Se siete seriamente intenzionati ad entrare nel mondo Flex, di seguito trovate alcune risorse:

Tour de Flex

Vedo Tour de Flex come le versioni  Web 2.0 o RIA dell’amato php_manual.chm.

Potete installarlo da qui. Fornisce esempi su come usare qualsiasi componente Flex (potete vedere com’è ed il codice usato per implementarlo). C’è anche libero accesso alla documentazione Flex. L’applicazione stessa è stata create usando Flex e Adobe AIR.

flex_php_7

Libri

Ci sono un sacco di libri su Flex e su ActionScript 3. Però i miei preferiti e quelli che di solito raccomando sono questi :

  • Flex 4 in a Day – well this is not exactly a book. It is a 40-page documentation on Flex 4 that once read it, it should give you a good overview over Flex 4
  • First steps in Flex, di Bruce Eckel e James Ward (Technical Evangelist ad Adobe); questo libro vi dà una panoramica su come potete usare Flex per sviluppare web e desktop applications, e potete leggervelo in un week end.
  • Essential ActionScript 3 di Colin Moock; è un libro di spessore, e dovete essere degli ottimi lettori per leggerlo tutto in un week end. Anche se non copre Flex,  da qui si può imparare praticamente tutto su ActionScript 3.

flex_php_8 flex_php_9

Siti Web

Ci sono centinaia di siti web e blog che parlano di Flex and ActionScript 3. E’ impossibile stilare una lista completa, ma vi cito alcuni dei miei preferiti:

  • Adobe Developer Connection. Un gran posto dove leggere articoli tecnici, su Flash, Flex, ed AIR. E’ aggiornato settimanalmente. C’è una sezione dededicate a Flex e a PHP.
  • Adobe TV. This site gives you access to tons of videos with presentations from conferences and video tutorials.
  • Gotoandlearn.com. Questo sito vi da accesso a caterve di video con presentazioni  dalle conferenze, ai video tutorial.
  • Flex documentation. Tenete presente che potete scaricare un file zip di tutta questa documentazione. Potete trovare  qui risorse in vari  formati.
  • Adobe Groups. Una piattaforma free dove si possono trovare gli Adobe User Groups (inclusi gruppi Flex o Flash). Dateci un occhiata, potrebbe esserci un Gruppo Utenti Flex dalle vostre parti, e di solito organizzano dei meeting mensili. Sotto questa piattaforma trovate anche i forum, e supportano la localizzazione, quindi qui potreste trovare anche qualcosa che non sia in Inglese.
  • My blogroll. Il mio blogroll. Guadatelo; molti di quelli che scrivono sono persone di Adobe che scrivono su Flash e Flex..
  • Guardate la lista che mantengo, a proposito di  framework, librerie, e altre risorse legate a Flex.

E ora penso che possiate capire perché quando uno sviluppatore mi chiede cosa sia Flex, faccio scena muta per un istante; un istante durante il quale le migliaia di parole che ho scritto qui passano di fronte ai miei occhi… C’è così tanto da dire, che caspita potrei dire in una sola riga!? Speranzosamente, adesso posso rispondere semplicemente: “Flex è incredibile, ragazzi! Guardatevi questo articolo.” :D.

Se avete commenti e suggerimenti, vi prego di dedicarvi un po’ di tempo e annotarli su questa pagina. Grazie!

[top]

4 thoughts on “Flex per sviluppatori PHP

  1. Pingback: Flex per sviluppatori PHP | Napolux.com

  2. Pingback: Un interessante articolo su Adobe Flex per sviluppatori PHP! | sastgroup.com

  3. Pingback: Un interessante articolo su adobe flex per sviluppatori php!

  4. buongiorno
    spero che questo commento venga letto da Thomas Baggio, magnifico traduttore di questo articolo che, per quanto mi riguarda, reputo utilissimo rispetto alla ricerca di chiarezza sugli strumenti di sviluppo web/client server e locali.
    ho passato tutta la vita lavorativa a sviluppare, o coordinare lo sviluppo, di applicazioni client server per grosse aziende e, mea culpa, ho sempre snobbato le applicazioni orientate al web.
    ora che sono in ‘pensione’ mi è venuta la curiosità, e da qualche mese (febbraio/marzo) sto cercando di districarmi nella giungla degli strumenti di sviluppo alla ricerca di punti fermi.
    Sono passato da WordPress (facile ma troppo vincolante e limitato), html-css-js-php o aiax (troppa roba da collegare e, a mio avviso, complessità di manutenzione), e altro ancora.
    questo articolo mi conforta nella scelta, che ho fatto di recente, di concentrarmi su PHP/MySql e Flash/Air/actionscript/SQLite.
    ho già implementato, con soddisfazione, qualche applicanzioncina usando pesantemente actionscript e php, creando, con fatica, i componenti che mi servivano, in quanto non soddisfatto da quelli messi a disposizione da FLASH (pochi e senza possibilità di interventi sul codice sottostante).
    nelle ricerche sul www mi sono imbattuto spesso in esempi FLEX, ma considerandolo un semplice dialetto per flash e, pigro quale sono, li saltavo a piè pari.
    questa panoramica mi ha aperto gli occhi e credo che FLEX sia l’ultimo punto fermo che cercavo, quindi ringrazio Mihai Corlan, per la chiarezza dell’esposizione, e Lei per magnifica traduzione.
    Ho notato che gli altri articoli del sito non sono tradotti, peccato, dovrò forzare la mia pigrizia e spolverare il mio inglese arrugginito ;)
    Grazie ancora e a presto

Leave a Reply

Your email address will not be published. Required fields are marked *