Layout dinamici con Flex 4

11 dicembre 2009

Un layout dinamico

In questo parte dell’articolo impareremo come rendere il nostro layout un pò più dinamico facendo in modo che uno slider posto sulla scena possa controllarne l’orientamento degli elementi. Incominciamo inserendo il componente HSlider all’interno del file MXML aggiungendo il seguente codice appena dopo la chiusura del tag </s:List>:

<s:HSlider 	id="axisSlider" 
            minimum="-30" 
            maximum="30" 
            value="10" 
            liveDragging="true" 
            width="300" />

Il passo successivo consiste nel fare in modo che PerspectiveLayout possa essere influenzato da una variabile che poi andremo a gestire a livello di interfaccia; questo si traduce semplicemente nel creare una funzione setter che porti il nome che vogliamo dare all’attributo dinamico:

// Aggiungere questa funzione all'interno della classe PerspectiveLayout

private var _angle:Number = 0;
public function set axisAngle(value:Number):void
{
  _angle = value;
  
  var layoutTarget:GroupBase = target;
  if (layoutTarget)
  {
    layoutTarget.invalidateSize();
    layoutTarget.invalidateDisplayList();
  }
}

Le ultime due istruzioni di questa funzione obbligano l’interprete a ricalcolare il layout a fronte della modifica del valore dell’attributo che abbiamo deciso essere dinamico (il nome dell’attributo corrisponde al nome della funzione, in questo caso axisAngle); questa operazione contempla anche che l’interprete chiami la funzione updateDisplayList che ora andremo a modificare in modo che sia influenzata dalla variabile _angle appena valorizzata.

Per le semplici finalità di questo articolo, e per ottenere un effetto accattivante, è sufficiente sostituire con _angle il -30 passato come parametro alla funzione m3d.appendRotation ottenendo il seguente codice:

  m3d.appendRotation(_angle,Vector3D.X_AXIS);

Come ultimo tocco non ci resta che aggiungere la valorizzazione dell’attributo axisAngle all’interno della dichiarazione del layout nel file MXML, modifichiamo quindi il codice tra i tag <s:layout> in modo da ottenere:

<s:layout>
	<flex4layouts:PerspectiveLayout axisAngle="{axisSlider.value}"/>
</s:layout>

Eseguiamo il progetto e proviamo a spostare lo slider posizionato in alto per ammirare il frutto del nostro impegno:

Conclusioni

L’introduzione dei Layout ha segnato un grande passo avanti per quanto riguarda il paradigma di progettazione delle interfaccie nel mondo Flex, dall’anno prossimo sarà infatti possibile scorporare completamente la parte di presentazione da quella di business logic e, con l’aiuto di altre nuove features come ad esempio le Skin, riuscire finalmente a trasformare l’approccio a questa tecnologia ad oggi ancora troppo condizionata dai suoi passati come Flash.

Sono già disponibili sulla rete alcuni layout tridimensionali preconfezionati (ad esempio qui e qui) e spero che nel 2010 altri ne vengano creati fino alla realizzazione di un vero proprio database condiviso di layout e skin a disposizione della comunità di sviluppatori.

Prima di salutarvi vi ricordo che, allegato a questo articolo, troverete un archivio compresso contenente i sorgenti dell’applicativo descritto.

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

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