I componenti Spark, il 3D e le altre novità del Flex Framework 4

In questo articolo cercheremo di fornire un'esaustiva presentazione delle principali e più interessanti funzionalità incluse nella nuova versione di Flex nominata come una tipica zuppa della Lousiana: Gumbo. Anche se l'accostamento potrebbe in un primo momento far associare a questa nuova release caratteristiche non prettamente positive, scopriremo durante i prossimi capitoli che la relazione con il tipico piatto Americano è più che altro rappresentata da una nuova e più consistente flessibilità e da una più stretta cooperazione delle varie componenti dell'architettura.

I temi principali

Tre sono le tematiche di rinnovamento sulle quali gli sviluppatori della Adobe hanno concentrato i propri sforzi:

• Design in mind
  Una delle maggiori critiche mosse nei confronti di Flex 3 riguardava la spiccata somiglianza tra le varie applicazioni realizzate con Flex Builder, evidenza della mancata personalizzazione dell'interfaccia (il più delle veniva utilizzato il tema di default). Per ovviare a questo problema Gumbo può contare su di un nuovo sistema di skin, il miglioramento di stati, effetti, layout e l'introduzione di nuovi componenti
• Developer productivity
  Gumbo e Flex Builder 4 sono stati pensati per ridurre al minimo le difficoltà e le lungaggini nel processo di sviluppo di RIA. Le nuove release introducono miglioramenti nelle performance del compilatore, facilitazioni per chi volesse supportare AIR nelle proprie applicazioni e ASDocs per i documenti MXML
• Framework Evolution
  Flex 4 potrà avvalersi delle nuove potenzialità offerte dal Flash Player 10 (effetti 3D, generazione dinamica di suoni, interfacciamento diretto con la scheda video, etc. ) e da quelle della nuova release di AIR 1.5 ( database locale cifrato, etc.)

Nel corso dell'articolo approfondiamo nel dettaglio alcune di queste innovazioni, concentrandoci principalmente sul nuovo modello architetturale, tema che coinvolge i componenti Spark, e su alcuni dei nuovi effetti 3D.

Per poter meglio seguire e provare gli aspetti che tratteremo è molto utile l'installazione della del nuovo Flex Builder, rinominato Flash Builder, che già incorpora Flex 4; in alternativa è possibile configurare un'istanza di Flex Builder 3 per lavorare con Gumbo semplicemente seguendo le indicazioni presenti su Flex Examples.

Nuovi componenti

Nello scegliere i punti cardine su cui si basano le innovazioni di questa nuova versione, Adobe ha privilegiato tutto ciò che potesse migliorare il flusso di lavoro di chi si cimenta nello sviluppo di RIA. Su questo principio si fondano le tre linee guida che hanno determinato la nascita dei componenti Spark:

• Design Friendly: l'architettura di Gumbo prevede una netta separazione fra la parte di presentazione ed i costrutti operativi; proprio per questo è stato ideato un nuovo sistema di skinning che consente di ottenere una profonda personalizzazione delle viste
• Composizione: i componenti Spark possono essere assemblati fra loro, sommandone le funzionalità. Ad esempio potremo creare tre classi figlie di un particolare componente, incrociarle con tre skin che supportino quel componente ed infine presentarle a video su tre diversi layout
• Estensione: tutti i componenti Spark sono stati studiati per essere di facile estensione

Prima di proseguire con la parte teorica, creiamo una piccola applicazione che ci faccia "toccare con mano" quanto enunciato finora; nelle prossime righe estenderemo il componente Button creando un nuovo stato triggered che si attivi alla pressione del bottone e si disattivi ad una seconda pressione.

Cominciamo con il creare un nuovo progetto Flex e, all'interno di questo, una nuova classe DemoButton.as:

package
{
  import spark.components.Button;
  
  public class DemoButton extends spark.components.Button
  {
    [SkinState("triggered")];
    public var btriggered:Boolean;
    
    public function DemoButton() { super(); }
    
    public function trigger():void
    {
      btriggered = ! btriggered;
      invalidateSkinState();
    }
    
    override protected function getCurrentSkinState():String
    {
      if (btriggered) {
        return "triggered";
      } else {
        return super.getCurrentSkinState();
      }
    }
  }
}

Già in queste prime righe di codice è possibile notare alcune peculiarità di questa nuova versione partendo dall'istruzione di import, che richiama la nuova libreria Spark (e non più Halo, anche se le due realtà possono tranquillamente convivere in un progetto Flex 4).

Poco più in basso troviamo la definizione del nuovo stato triggered attraverso l'istruzione SkinState. Ora DemoButton può beneficiare di un nuovo stato che però manca ancora della routine di attivazione; per fare questo costruiamo una funziona trigger che, quando chiamata, inverte lo stato di un flag booleano chiamato btriggered ed obbliga l'applicativo a calcolare nuovamente lo stato dell'oggetto (invocando la funzione InvalidSkinState che azzera la variabile contenente lo stato corrente).

A questo punto ci basta semplicemente sovrascrivere la funzione per il calcolo dello stato corrente includendo anche lo stato triggered che viene ritornato nel caso in cui il flag booleano btriggered sia true.

Questo concetto di Stato è, come vedremo, uno dei punti chiave su cui si fonda la nuova architettura dei componenti in Flex 4. Gli stati sono utilissimi all'interno delle Skin per pilotare le modifiche che un componente deve affrontare a livello di presentazione; per darne prova pratica costruiamo una semplicissima skin per l'oggetto DemoButton facendo in modo che il suo aspetto vari all'ingresso nello stato triggered.

<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
             xmlns:s="library://ns.adobe.com/flex/spark" 
             xmlns:mx="library://ns.adobe.com/flex/halo" >

  <fx:Metadata>
    [HostComponent("DemoButton")]
  </fx:Metadata>
  
  <s:states>
    <s:State name="triggered" />
    <s:State name="up" />
    <s:State name="over" />
    <s:State name="down" />
  </s:states>
  
  <s:Rect radiusX="8" radiusY="8" width="100%" 
          height="100%" includeIn="triggered" >
    <s:stroke>
      <s:Stroke color="#FF0000" alpha="1"/>
    </s:stroke>
  </s:Rect> 
  <s:SimpleText id="labelElement"  
                left="10" right="10" top="2" bottom="2"
                color.triggered="#FF0000">
  </s:SimpleText>
</s:SparkSkin>

In queste poche righe di codice si può osservare un tipico esempio di Skin (anche se mancante di transizioni, che vedremo dopo); cerchiamo di analizzarlo nelle sue componenti principali:

• L'istruzione fx:metadata specifica per quale componente questa skin è stata disegnata
• Il blocco s:states elenca gli stati in cui questa Skin potrà trovarsi (chiaramente è stato aggiunto triggered). Attenzione: la mancata definizione nella skin di uno stato usato dal componente porterà al lancio di un eccezione del tipo ArgumentError durante l'esecuzione dell'applicazione
• Il tag s:Rect (e quanto contiene) fa parte di un nuovo set di specifiche chiamato FXG che dovrebbe sopperire a tutte le necessità di personalizzazione di interfaccia. Le specifiche FXG, che possono essere intese come un'evoluzione del più noto SVG, saranno inoltre il perno ed il formato di interscambio tra Flash Builder e Flash Catalyst: un nuovo prodotto che servirà specificatamente allo sviluppo di UI e potrà attingere nativamente dalla maggior parte delle applicazioni della suite Adobe (Illustrator in primis)
• Infine s:SimpleText descrive il modo in cui visualizzeremo il testo della label del bottone

Notiamo come lo stato triggered compaia altre due volte nel testo oltre che all'interno di <s:states>: nel primo caso viene utilizzato come valore dell'attributo includeIn per indicare che <s:Rect> deve comparire solo in corrispondenza di tale stato; nel secondo viene invece inserito come pedice all'attributo color di <s:SimpleText> per indicare che tale attributo dovrà essere considerato solo mentre l'oggetto si trova in triggered.

Per testare questo piccolo esempio non ci resta che completare il file mxml principale (che avrà il nome del progetto creato precedentemente) includendo il nostro componente:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/halo"
               xmlns:local="*"
               minWidth="640" minHeight="480">
  
  <local:DemoButton id="db1" 
                    label="Un nostro componente" 
                    click="db1.trigger()"
                    skinClass="DemoButtonSkin" />
</s:Application>

Notiamo come i due namespaces (mx ed s, rispettivamente per i componenti Halo e Spark) siano entrambi presenti e possano essere utilizzati in contemporanea sulla stessa applicazione.

Transizioni e 3D

Per concludere questa brevissima panoramica su Flex 4 non ci resta che affrontare il tema delle transizioni e delle nuove potenzialità 3D offerteci dalla decima versione del Flash Player. Quanto scelto dagli sviluppatori Adobe a riguardo della terza dimensione è al contempo semplice e potentissimo: al posto di definire una qualche modalità di switch tra un ambiente 2D ed uno 3D hanno deciso di far sì che ogni applicativo risieda su di un ambiente tridimensionale del quale può , a scelta, non sfruttare la profondità

Ciò significa che anche il nostro esempio precedente risiede in realtà è in 3 dimensioni e che quindi possiamo creare una transizione da e verso lo stato ‘triggered che comporti la rotazione di un quadrato in contemporanea con un suo cambio cromatico.

Per ottenere questo effetto ecco il codice che è stato aggiunto a DemoButtonSkin.mxml

<fx:Declarations>
  <s:MotionPath id="mk">
    <s:KeyFrame time="350" value="180" />
  </s:MotionPath>
  <s:MotionPath id="mkBack">
    <s:KeyFrame time="350" value="0"/>
  </s:MotionPath>
</fx:Declarations>

<s:transitions>
  <s:Transition toState="triggered" >
    <mx:Parallel>
      <s:AnimateTransform duration="350" target="{square}" rotationY="{mk}"/>
      <s:AnimateColor duration="350" target="{squareFill}"/>
    </mx:Parallel>
  </s:Transition>
  
  <s:Transition fromState="triggered" >
    <mx:Parallel>
      <s:AnimateTransform  duration="350" target="{square}" rotationY="{mkBack}"/>
      <s:AnimateColor duration="350" target="{squareFill}"/>
    </mx:Parallel>
  </s:Transition>
</s:transitions>

<s:Rect id="square" x="-40" height="35" width="35">
  <s:fill>
    <s:SolidColor id="squareFill" color="#000000" color.triggered="#FF0000" />
  </s:fill>
</s:Rect>

Analizziamo brevemente le novità introdotte:

• I due oggetti motionPath descrivono l'evoluzione del cambiamento di un valore a seconda dell'istante temporale nel quale ci si trova; nel nostro caso verranno utilizzati per istruire la transizione in merito all'angolazione finale delle due rotazioni
• Il blocco <s:transitions> include l'elenco delle animazioni che intendiamo applicare ai cambiamenti di stato all'interno di DemoButton. In questo esempio sono state definite due transizioni simmetriche tra loro, entrambe operano un fading tra i colori del Fill squareFill dallo stato di partenza a quello di arrivo e una rotazione del rettangolo square seguendo i dettami dei motionPaths definiti precedentemente

L'FXG square è stato creato per il solo scopo di fungere da "cavia" per i nostri esperimenti di transizione; è composto da un quadrato posizionato a 40px dal testo e colorato inizialmente di nero (anche se è stato definito un secondo colore, rosso, che si attiverà al passaggio di stato).

E, con questo, possiamo definire il nostro DemoButton completo. Lo scopo di questa brevissima panoramica è quello di incuriosire e fornire un punto di partenza per sperimentare le nuove funzionalità di questa promettente release di Flex. Il progetto che abbiamo sviluppato (di cui potete vedere una demo qui sotto) è disponibile per il download.

Conclusioni

Credo che Adobe sia riuscita, con Gumbo, a conciliare finalmente un ottimo strumento di sviluppo con le esigenze di design tipiche delle RIA più moderne; intravedo infatti al di sotto di questo elenco di nuove features un disegno più complesso che sottende un nuovo e più strutturato modo di operare e che si concretizzerà con il rilascio del nuovo Flash Builder e della sua annunciata controparte Flash Catalyst.

Conciliando design, composizione ed estensibilità dei propri componenti, Flex 4 apre la strada ad una nuova generazione di Rich Internet Application e, cosa più importante, ad un nuovo e migliore workflow di sviluppo.