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: <mx:Application … layout="absolute">. 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
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 LayoutVerticalLayout: 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]
[/xml]
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]
[/xml]
Layout über ActionScript ändern
Dank der neuen Klassen lässt sich das Layout der Anwendung auch über ActionScript bestimmen:
[xml]
[/xml]
Mehr zum Thema Flex 4 unter „Gumbo-Wochen” auf www.video-flash.de
[ad]