Negli ultimi anni internet è diventato sempre più dinamico ed interattivo: lo scambio di dati, l'interazione con l'utente e la personalizzazione dell'esperienza di utilizzo sono sempre più importanti, soprattutto ha assunto un ruolo fondamentale il poter offrire al navigatore del proprio sito un servizio completo e di facile utilizzo. Proprio dal lato dell'offerta di servizi all'utente sono nate le Rich Internet Applications, dei veri e propri "software via web" che ricalcano il design e le modalità di utilizzo delle applicazioni desktop.
In pratica viene offerta all'utente un'interfaccia con cui consultare i dati che si trovano all'interno dell'applicazione stessa (o in fonti esterne). Proprio le RIA sono il campo di applicazione principale di Flex 2.
Flex 2
Flex nasce quindi per favorire gli sviluppatori nel realizzare applicazioni Web, ovvero raggiungibili da una qualsiasi postazione connessa ad Internet e non solo dal proprio pc.
Inizialmente nato come tecnologia lato-server per la compilazione e generazione "al volo" di file swf, nella versione 2 il software è invece in grado di generare swf che potranno essere distribuiti online senza particolari necessità da parte del server; questo è un grosso vantaggio, molte tecnologie lato server per quanto potenti sono molto poco utilizzate a causa dello scarso supporto da parte dei provider.
Un pacchetto completo
Flex 2 è un vero e proprio framework che comprende i seguenti strumenti
- Flex SDK serve per poter compilare le applicazioni.
- Flex Builder è l'ambiente di sviluppo privilegiato per la creazione di applicazioni Flex
- Flex Data Services sono utili per aumentare le già elevate funzionalità di Flex integrando servizi aggiuntivi per la gestione e il trasferimento di dati.
- Flex Charting per rappresentare dei dati tramite grafici.
Nota: è possibile sviluppare le proprie applicazioni non solo con il Flex Builder ma anche ad esempio con Eclipse, compilandole poi grazie al Flex SDK.
Design o codice
Analogamente a molti software di sviluppo web, come ad esempio Dreamweaver, con Flex Builder è possibile scegliere se utilizzare un approccio visuale, trascinando quindi i vari elementi al loro posto e impostandone le proprietà tramite gli appositi pannelli, oppure utilizzare la vista "codice" e scrivere quindi a mano il codice MXML. MXML, come intuibile dal nome, è un linguaggio che utilizza la stessa struttura dell'xml, ovviamente però i suoi comandi sono inerenti a Flex.
Una prima applicazione
Listato 1. Semplice pannello con la scritta "Hello world" in MXML
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
horizontalAlign="center" verticalAlign="middle"
width="300" height="160">
<mx:Panel
paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10"
title="My Application" >
<mx:Label text="Hello World!" fontWeight="bold" fontSize="24"/>
</mx:Panel>
</mx:Application>
Questo codice realizza un filmato largo 300 pixel e alto 160, con gli elementi allineati centralmente in orizzontale e verticale (queste sono le informazioni date con il tag <mx:Application>), al suo interno conterrà un pannello con etichetta "My Application" che avrà il padding (spaziamento del testo dal bordo) impostato a 10 pixel per tutti i 4 lati (informazioni date con il tag <Mx:Panel>) che a sua volte conterrà un campo di testo con la scritta "Hello world" in grassetto a dimensione 24 (tag <mx:Label>).
Il posizionamento degli elementi uno interno all'altro è dato dalla gerarchia dei tag: "Application" contiene "Panel" che a sua volta contiene "Label". È quindi molto semplice creare gli elementi, stabilire le loro "gerarchie" e di conseguenza come verranno visualizzati nell'applicazione finale.
MXML può essere utilizzato anche per l'associazione di particolari effetti grafici ad un dato elemento.
Listato 2. Effetti di zoom in MXML
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml" width="170" height="140">
<!-- Define effects -->
<mx:Zoom id="shrink" duration="100" zoomHeightTo=".9" zoomWidthTo=".9" />
<mx:Zoom id="revert" duration="50" zoomHeightTo="1" zoomWidthTo="1" />
<mx:Panel
title="Bouncy Button" paddingTop="10" paddingBottom="10"
paddingLeft="10" paddingRight="10" autoLayout="false"
left="41" top="24" right="42">
<!-- Assign effects to target -->
<mx:Button
id="bouncyButton" label="Click me!"
mouseDownEffect="{shrink}" mouseUpEffect="{revert}" />
</mx:Panel>
</mx:Application>
Questo codice crea due effetti di tipo "zoom" di nome "shrink" e "revert" e li associa alla pressione del pulsante creato tramite il tag <mx:Button>.
Actionscript 3
Oltre al linguaggio MXML, in Flex 2 è disponibile anche "Actionscript 3". Originariamente previsto all'interno di Flash 8, questo linguaggio è stato invece inserito per la prima volta in Flex 2 e nel Flash Player 9 (rilasciato i concomitanza). Sarà inserito poi in Flash 9.
Actionscript può essere utilizzato sia al posto di MXML per la creazione degli elementi e la associazione di effetti, sia per la creazione di script da associare poi a pulsanti o ad altri elementi dell'interfaccia. MXML e Actionscript possono interagire tra loro all'interno di una stessa applicazione Flex.
A proposito di Flash 9, sembra che in tale versione di Flash verrà data la possibilità di esportare in codice MXML le animazioni create dalla timeline con un semplice comando già integrato nel software: questo consentirebbe di riproporre facilmente le animazioni create in Flash all'interno della propria applicazione Flex con il minimo sforzo!
Utilizzo di risorse esterne
È possibile incorporare nelle applicazioni diverse risorse, sia integrandole all'interno del file compilato sia caricandole dinamicamente dall'esterno; in questo secondo caso chiaramente i file esterni andranno distribuiti insieme all'applicazione, ma avremo il vantaggio di avere il file principale del nostro progetto più leggero.
Le risorse incorporabili sono immagini (png, jpeg, gif), file swf (completi o solo alcuni componenti della libreria), suoni (mp3), file svg e font. Le immagini possono essere utilizzate all'interno di fogli di stile per stabilire i diversi aspetti di un pulsante.
Listato 3. Definizione di fogli di stile per un pulsante
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
viewSourceURL="src/EmbeddingImagesCSS/index.html"
layout="horizontal" width="270" height="100"
horizontalAlign="center" verticalAlign="middle">
<mx:Style>
Button
{
upSkin: Embed("assets/box_closed.png");
overSkin: Embed("assets/box.png");
downSkin: Embed("assets/box_new.png");
}
</mx:Style>
<mx:Button />
<mx:Text text="Roll over and click the box!" />
</mx:Application>
creiamo un'applicazione con un pulsante che avrà diversi stati a seconda che l'utente ci passi sopra (rollover), lo prema (down) oppure non lo usi (up).
Funzioni ed elementi pronti all'uso
Flex è dedicato alla creazione di RIA. Per questo fornisce strumenti per replicare funzioni e "comportamenti" frequenti nelle applicazioni, ad esempio il drag and drop o la possibilità di rendere modificabili i valori degli elementi (ad esempio una griglia di dati) con un semplice comando. Possiamo modificare i tooltip o l'aspetto al puntatore del mouse, sia utilizzando i cursori messi a disposizione da Flex, sia implementandone di personalizzati da risorse jpg, png, gif, swf o sgv.
Sono inoltre molti gli elementi e i pannelli già pronti utilizzabili con il Flex Builder o comunque tramite il codice MXML, tra cui i già citati Panel, Label, Button.
A questo vanno aggiunti i componenti come i Flex Chartings, che permettono con pochissimi click di avere dei grafici di ottimo livello a rappresentare i dati selezionati. Anche l'integrazione di dati esterna (sia per i grafici che per altri elementi) diventa molto semplice.
Listato 4. Popolare una combobox con i valori di un array
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
viewSourceURL="src/DataProviderArray/index.html"
width="150" height="140" >
<mx:Script>
<![CDATA[
[Bindable]
public var myArray:Array = ["AL", "AK", "AR"];
]]>
</mx:Script>
<mx:ComboBox id="statesCombo" dataProvider="{myArray}"/>
</mx:Application>
Avere compontenti preconfezionati può far pensare ad una omologazione di stile nelle applicazioni Flex. Questo si può ovviare usando fogli di stile per personalizzare i componenti in ogni applicazione.
Flash o Flex ?
Non va dimenticato che anche Flash viene spesso utilizzato per la creazione di Rich Internet Applications, specialmente se utilizzato insieme a linguaggi server-side. Dobbiamo dire però che Flash rende decisamente più complicata la creazione di un'interfaccia. I componenti di Flex sono molto più semplici da usare.
Inoltre con Flex possiamo sempre sfruttare anche elementi creati con altri software, tra cui lo stesso Flash. Questa breve analisi ci sembra sufficiente a dire che Flex è decisamente più adatto alla creazione di applicazioni, fermo restando però che per altri utilizzi, primo su tutti la creazione di animazioni, Flash offra caratteristiche più adeguate.
Flex o soluzioni server-side?
Altro confronto che si può fare è quello tra Flex e le varie tecnologie server-side solitamente utilizzate per la creazione di RIA.
Il vantaggio principale offerto da Flex rispetto a queste soluzioni si trova nel maggior impatto grafico nonché nel fatto che con Flex si può gestire tutto all'interno di un unico progetto mentre per le soluzioni che prevedano output in HTML è necessario aggiornare la pagina o cambiarla.
Dal punto di vista dello sviluppo non va sottovalutato il fatto che con MXML e Actionscript 3 sia molto semplice e veloce creare interfacce ed elementi che prendano dati anche da elementi esterni, velocizzando i tempi di realizzazione.
Conclusioni
Flex è decisamente potente e decisamente settoriale: è adatto infatti alla creazione di applicazioni e servizi e poco altro, ma in questo settore sembra superare i linguaggi concorrenti sotto diversi aspetti (senza contare la possibilità di sfruttare tali linguaggi per scambiare dati).
È una soluzione completa che permette di creare applicazioni Web con un solo linguaggio e all'interno di un solo ambiente di sviluppo, offrendo strumenti sia visuali che di programmazione di altissimo livello insieme ad un set di funzioni completo e alla possibilità di personalizzare ampliamente sia l'aspetto grafico che quello della navigazione.
Grande vantaggio è quello di ottenere un software in grado di girare su qualunque browser, o su qualunque dispositivo che supporti un flash player (ormai diffusissimo) nella versione 9.
Nel settore delle RIA e dell'offerta di servizi ad alta interattività, l'ipotesi di affidarsi a Flex si deve sicuramente prendere in considerazione.
