Flex 4 e i Layout

4 dicembre 2009

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:

LayoutDescrizione
BasicLayoutviene implementato di default dall’applicazione e si comporta in modo completamente trasparente delegando ai posizionamenti assoluti dei singoli elementi l’onere di presiedere la disposizione dell’interfaccia
HorizontalLayoutcome suggerito dal nome, questo layout dispone gli elementi orizzontalmente uno a fianco del successivo ignorando le proprietà spaziali dei singoli oggetti, come ad esempio gli attributi ‘x‘ e ‘y
VerticalLayoutesattamente come il precedente ma questa volta la disposizione viene fatta automaticamente sull’asse delle ordinate
TileLayoutequivale, nella sua implementazione standard, ad un HorizontalLayout con in più la peculiarità di andare a capo di riga nel momento in le dimensioni dell’oggetto da posizionare superino quelle dello spazio residuo nella riga corrente

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>.

Se vuoi aggiornamenti su Flex 4 e i Layout inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su Flex 4 e i Layout

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy