Flex 4: creare un layout da zero

4 dicembre 2009

Creare un layout da zero

Dopo questo breve intervallo teorico e introduttivo cominciamo ad approfondire il tema dei layout in Flex 4 creandone uno completamente nostro: PerspectiveLayout. L’obiettivo di questo layout è disporre gli elementi secondo una linea di fuga distanziandoli sull’asse z uno dall’altro con l’idea di ottenere un effetto di profondità esteticamente convincente.

Per prima cosa creiamo un nuovo progetto Flex e inseriamo nel file MXML alcuni elementi che fungeranno da cavie per il nostro esperimento: in questo caso si tratta di alcune immagini, scaricabili qui, all’interno di un tag <s:list>:

<?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:flex4layouts="it.html.flash.flex4layouts.*">
               
  <s:List id="list" width="100%" height="100%"
          labelField="label"
          itemRenderer="spark.skins.spark.DefaultComplexItemRenderer">

    <s:layout>
      <s:VerticalLayout/>
    </s:layout>
    
    <s:dataProvider>
      <s:ArrayList>
        <s:BitmapImage source="number1.jpg"/>
        <s:BitmapImage source="number2.jpg"/>
        <s:BitmapImage source="number3.jpg"/>
        <s:BitmapImage source="number4.jpg"/>
        <s:BitmapImage source="number5.jpg"/>
      </s:ArrayList>
    </s:dataProvider>
  
  </s:List>
</s:Application>

Prima di proseguire eseguiamo il progetto per certificare la disposizione verticale degli elementi.

Il prossimo passo consiste nel creare la classe che rappresenta il layout (Flash Builder: File -> New -> ActionScript Class); impostiamola con i seguenti parametri:

ParametroValore
Packagearbitrario, possiamo scegliere ad esempio it.html.flash.flex4layouts
NamePerspectiveLayout
Superclassspark.layouts.supportClasses.LayoutBase

Premendo il pulsante Finish verrà generato un nuovo file PerspectiveLayout.as contenente quel poco codice necessario a effettuare gli import necessari, dichiarare la classe e descriverne il costruttore. A questo punto non ci resta che sovrascrivere la funzione ‘updateDisplayList’ che abbiamo ereditato da LayoutBase modificandola a nostro piacimento in modo che operi sugli elementi suscettibili a questo layout.

Per ottenere l’effetto desiderato è necessario invocare su ogni oggetto in interesse il metodo setLayoutMatrix3D(m) specificando nella variabile m una matrice che descrive le trasformazioni che vogliamo applicare. A seguire il codice risultante:

package it.html.flash.flex4layouts
{
  import flash.geom.Matrix3D;
  import flash.geom.Vector3D;
  import mx.core.ILayoutElement;
  import mx.core.IVisualElement;
  import spark.layouts.supportClasses.LayoutBase;
  
  public class PerspectiveLayout extends LayoutBase
  {
    override public function updateDisplayList(width:Number, height:Number) : void
    {
      for (var i:int = 0; i < target.numElements; i++)
      {
        var element:ILayoutElement = target.getVirtualElementAt(i);
        var m3d:Matrix3D = new Matrix3D();
        
        m3d.appendTranslation(
          (target.numElements-i)*5 + 50,
          100,
          (target.numElements-i)*50
        );
        
        m3d.appendRotation(-30,Vector3D.X_AXIS);
        element.setLayoutMatrix3D(m3d,false);
      }
    }
  }
}

Come possiamo notare la variabile m3d, che contiene un'istanza della classe Matrix3D, mette a disposizione una serie di metodi (appendTranslation, appendRotation e appendScale) utilissimi nel mascherare la complessità che dovremmo affrontare impostando manualmente i valori di una matrice di trasformazione.

Per ammirare il risultato del nostro impegno non ci resta che modificare la dichiarazione di layout sostituendo a <s:VerticalLayout/> il nostro <flex4layouts:PerspectiveLayout/> ed eseguire il progetto.

Nella seconda parte dell'articolo vedremo come aggiungere un aspetto dinamico al nostro layout.

Se vuoi aggiornamenti su Flex 4: creare un layout da zero inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su Flex 4: creare un layout da zero

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