Im dritten Beitrag zu Flex 4 geht es um das Layout, also die Anordnung der Komponenten einer Anwendung. Im Gegensatz zu früheren Flex-Versionen sind die verschiedenen Layouts nun in eigene Klassen gewandert.

Layout einer Anwendung in Flex 3

In Flex 3 wird das Layout einer Flex-Anwendung über die Eigenschaft layout geregelt, z.B. so: . Es kann zwischen den drei Layoutverianten absolut, vertikal und horizontal gewählt werden.

Beim absoluten Layout werden alle Elemente mit x- und y-Koordinaten versehen und dadurch ausgehend von der linken oberen Ecke auf der Bühne platziert. Auf der untenstehenden Abbildung liegen deshalb die beiden Buttons übereinander, da keine Positionsangaben gemacht wurden und beide somit bei (0/0) platziert werden.

Beim horizontalen und vertikalen Layout werden Komponenten automatisch neben- bzw. untereinander aufgereiht.

Drei neue Klassen für die Layouts in Flex 4

Flex 4 Layouts

Die drei möglichen Werte absolute,vertical und horizontal aus Flex 3 werden im Flex 4 SDK durch drei Klassen abgelöst, die das Interface ILayout implementieren:

  • BasicLayout: Absolutes Layout (default)
  • HorizontalLayout: Horizontales Layout
  • VerticalLayout: Vertikales Layout

Vom Prinzip ändert sich also nichts, nur die Syntax ist neu. Ein vertikales Layout sieht als MXML-Code z.B. folgendermaßen aus:

XML:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. :Application name="MyDemoApp"
  3.         xmlns:fx="http://ns.adobe.com/mxml/2009"
  4.         xmlns:s="library://ns.adobe.com/flex/spark"
  5.         xmlns:mx="library://ns.adobe.com/flex/halo"
  6.        >
  7.    
  8.     :layout>
  9.         :VerticalLayout />
  10.     :layout>
  11.      
  12.     :Button label="Button #1 (Spark)" />
  13.     :Button label="Button #2 (Halo)" />
  14.  
  15. :Application>

Noch ein Hinweis zum Default-Fall: Ist kein spezielles Layout angegeben, wird immer das BasicLayout verwendet.

Abstand zwischen den Elementen (gap)

Möchte man zwischen den Komponenten einen Abstand erzeugt, kann hierzu die Eigenschaft gap geändert werden. So entsteht, je nach Layout, einen horizontale oder vertikale Lücke.

XML:
  1. :layout>
  2.     :HorizontalLayout gap="50" />
  3. :layout>

Layout über ActionScript ändern

Dank der neuen Klassen lässt sich das Layout der Anwendung auch über ActionScript bestimmen:

XML:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. :Application name="MyDemoApp"
  3.         xmlns:fx="http://ns.adobe.com/mxml/2009"
  4.         xmlns:s="library://ns.adobe.com/flex/spark"
  5.         xmlns:mx="library://ns.adobe.com/flex/halo"
  6.         initialize="init()"
  7.        >
  8.        
  9.         :Script>
  10.            
  11.                 import spark.layout.HorizontalLayout
  12.                 private var myLayout:HorizontalLayout;
  13.            
  14.                 public function init():void {
  15.                     myLayout = new HorizontalLayout();
  16.                     myLayout.gap = 150;
  17.                     this.layout = myLayout;
  18.                 }
  19.             ]]>
  20.         :Script>
  21.  
  22.     :Button label="Button #1" />
  23.     :Button label="Button #2" />
  24.     :Button label="Button #3" />
  25.  
  26. :Application>

Mehr zum Thema Flex 4 unter „Gumbo-Wochen” auf www.video-flash.de