I componenti del Flex Framework sono scritti secondo una logica Object Oriented, un componente può estenderne un altro e implementare una o più interfacce secondo i canoni della programmazione ad oggetti.
Non tutti i componenti sono visibili all'utente, alcuni componenti sono infatti di supporto ad altri, ma di proprio non visualizzano nulla. Quasi tutti i componenti infine possono essere inseriti in maniera dichiarativa (come tag) nei file MXML o dichiarati da sorgente all'interno di classi o funzioni ActionScript.
Con Flash Builder 4, Adobe ha privilegiato il design delle interfacce visuali introducendo un salto di qualità senza precedenti in questo campo, Flash Builder supporta un nuovo standard di salvataggio file, l'FXP che condivide con tutti i prodotti Adobe di grafica creativa.
All'interno dei file FXP i componenti grafici vengono scomposti in primitive FXG (Quadrati, cerchi, linee, testo, etc.) secondo principi simili all'SVG per la grafica vettoriale. Questo ci permette di creare l'interfaccia della nostra applicazione in Photoshop o in Illustrator e importarla in maniera nativa in Flash Builder.
Grazie al ponte con Flash Catalyst, poi, abbiamo a disposizione uno strumento ancor più interattivo per elaborare interfacce e comportamenti.
Anche i componenti in Flex 4 hanno subito alcune modifiche, necessarie all'integrazione con gli altri prodotti Adobe. Questo consente ai nuovi componenti di avere uno stato (selezionato, premuto, ect.) disaccopiato dagli stati della pagina dei componenti con SDK precedente.
I nuovi componenti, avendo lo stesso nome di quelli precedenti, sono stati registrati con un nuovo namespace: Spark. Questo spiega l'aggiunta, nell'header del file MXML, del riferimento xmlns:s="library://ns.adobe.com/flex/spark" e del relativo prefisso <s:.
I controlli degli SDK precedenti, sono ancora presenti in Flash Builder e appartengono al namespace classico xmlns:mx="library://ns.adobe.com/flex/halo con il prefisso <mx:.
Non tutti i componenti Halo hanno un equivalente Spark come nel caso del componente RichTextEditor; e non tutti i nuovi componenti Spark hanno un equivalente Halo. Possiamo comunque scegliere di utilizzare entrambi i tipi di componente, i componenti Spark infatti derivano dai componenti Halo.
Al momento, nei file applicazione dei progetti Flex, sono referenziati entrambi i namespace; questo consente di utilizzare i due tipi di componente all'interno dei nostri progetti. Adobe, in ogni caso, raccomanda quando possibile di utilizzare sempre e solo i componenti Spark. In questa guida ci concentreremo principalmente su questo tipo di componente.
I componenti Spark possono essere raggruppati in contenitori a formare componenti più complessi. All'interno dei contenitori si possono utilizzare indistintamente tutti i controlli che implementino una delle due classi IUIComponent o IGraphicElement. Quest'ultimi sono detti primitive FXG.
Nota: le primitive FXG non sono presenti all'interno della finestra componenti.
Quando inseriamo una primitiva nel codice sorgente, sulla pagina o all'interno di un contenitore e poi passate al modo design, la primitiva verrà correttamente visualizzata dalla finestra proprietà ed è comunque visibile sulla finestra Outline (a patto che abbia un posizionamento e dimensione congrua).
La scrittura di componenti basati su queste primitive va quindi fatta a mano o attraverso programmi quali Flash Catalyst, appositamente creato allo scopo. I componenti primitivi utilizzabili sono:
- BitmapImage;
- Ellipse;
- Graphic;
- Line;
- Path;
- Rect;
- RichEditableText;
- RichText
- SimpleText
- VideoElement
Questi elementi, in genere, sono assemblati all'interno di un componente contenitore quale il componente Group.
Le peculiarità più rilevanti dei componenti Spark rispetto a quelli Halo: sono la gestione interna degli stati del componente e il disaccoppiamento degli stati dagli skin del componente.
Infine il tipo applicazione con cui viene creato un progetto Flex, per default, non appartiene più allo spazio nomi Halo (mx:Application) ma allo spazio nomi Spark (s:Application).
