Flash  »  Articoli  »  Flex 

In attesa della prima release stabile di Flex 4 possiamo impratichirci con alcune delle novità già annunciate e disponibili nella beta dell'SDK. In questo articolo ci focalizzeremo sui layout, interessantissima funzionalità che introduce la possibilità (finalmente!) di scorporare completamente il layer di presentazione da quello di logica funzionale consentendoci perfino di incidere in modo marcato sulle metafore di interazione della nostra applicazione senza scomodarne le funzionalità.

La sessione sarà molto pratica e focalizzata sulla creazione di un certo numero di esempi, ognuno volto ad evidenziare alcune specifiche peculiarità di queste nuove API. È consigliata l'installazione dell'ultima versione di Flex Builder, ora rinominato in Flash Builder, la cui beta è disponibile per Mac e Windows.

La teoria dei Layout

Come potete aver intuito, anche perché questo termine è utilizzato con significato simile in altre tecnologie, un layout in Flex specifica come deve comportarsi il meccanismo di disposizione degli oggetti all'interno di un'applicazione. Questo però non si riduce al funzionamento classico, tipico del celeberrimo GridLayout delle awt di Java, che comporta solo l'imposizione di alcune costrizioni e automatismi nel posizionamento degli elementi ma ad un interessante e potentissimo meccanismo che nasce dalla combinazione di coordinate spaziali e variabili definite dall'utente, consentendoci di implementare logiche di collocazione che variano nel tempo o al variare di specifici parametri.

I layout che Flex mette a disposizione sono quattro, scorriamoli brevemente:

Per testare questi quattro layout possiamo costruire una piccolissima applicazione (Flash Builder: File -> New -> Flex Project) contenente il seguente codice:

<?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" minWidth="1024" minHeight="768">
               
  <s:layout>
    <s:BasicLayout/>
  </s:layout>
  
  <s:Button label="prova layout 1"/>
  <s:Button label="prova layout 2"/>
  <s:Button label="prova layout 3"/>
  
</s:Application>

ed eseguirla sostituendo di volta in volta la dichiarazione sul layout da usare con una delle quattro a disposizione.

È anche possibile specificare un layout per una particolare porzione della nostra applicazione includendo gli oggetti che ci interessano e la dichiarazione del layout in un tag <s:group>.

Altri articoli

Altre guide

Altre newsletter