Flex 4 Custom Layout

Lately I have been playing a lot with Flex 4. There are so many new great features and I hope to talk about them more in the future. Today I want to talk about layouts and more specifically creating your own custom layouts. Layouts are now separated from the components themselves which not only makes the components lighter but gives us more granular control over our layout. We can control the layout of our application <?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/mx"> <s:layout> <s:VerticalLayout paddingTop="50" paddingLeft="50"/> </s:layout> </s:Application> Or for a container <?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/mx"> <s:Group> <s:layout> <s:VerticalLayout paddingTop="50" paddingLeft="50"/> </s:layout> <s:Button label="Button 1"/> <s:Button label="Button 2"/> </s:Group> </s:Application>

When using layouts in Flex 4 you will basically be working with the 4 built in layouts.

• BasicLayout
• HorizontalLayout
• VerticalLayout
• TileLayout

These layouts are great for most situations but you may find yourself in need of a custom layout. Luckily for us Flex 4 makes it incredibly easy to create our own. Today we are going to create a RandomLayout class. This will take all of the elements in the layouts parent container and give them a random x and y coordinate on the screen. To do this we are going to create a new RandomLayout class that extends the LayoutBase class. package { import spark.layouts.supportClasses.LayoutBase; public class RandomLayout extends LayoutBase { public function RandomLayout() { super(); } } } We have two methods in the LayoutBase class that we want to override, measure and updateDisplayList. package { import spark.layouts.supportClasses.LayoutBase; public class RandomLayout extends LayoutBase { public function RandomLayout() { super(); } override public function measure():void { super.measure(); } override public function updateDisplayList(width:Number, height:Number):void { super.updateDisplayList(width,height); } } }

Now that we have the shell of our new layout we can talk about what it takes to actually create the layout. In the updateDisplayListMethod the first thing we need to do is figure out how many children we are working with. The LayoutBase class that we extended exposes a property called target. With this we can figure out the number of children. In my example we will be scattering images on a page so imagine the children as images. var count:int = target.numElements; var layoutElement:ILayoutElement; Next we are going to loop through each of these children and do a number of things. First we get the actual element that we are working with and set the bounds for the element. By using NaN as size arguments we are telling the method to use its preferred size. Next I am getting the size of the element or in my case the image size. The reason for this pretty important to our layout. We don't want the x or y position to ever cut off our image so if say the layout bounds size (the max x+y bounds) for total size minus the size of our children then we will never have them running off the screen. for(var i:int = 0; i < count; i++){ // get the current layout element layoutElement = target.getElementAt(i); //resize the eletement to its preferred size by passing NaN for w/h layoutElement.setLayoutBoundsSize(NaN,NaN); // Width of the element var elWidth:Number = layoutElement.getLayoutBoundsWidth(); // Height of the element var elHeight:Number = layoutElement.getLayoutBoundsHeight(); // we needed to know the height and with of the element // so we can subtract that from the width (x must be less than w-elementWidth) var x:Number = getRandom(0,target.width - elWidth); var y:Number = getRandom(0,target.height- elHeight); layoutElement.setLayoutBoundsPosition(x,y); }

Finally I have a convinent method for grabbing a random number between 0 and the max bounds. private function getRandom(min:Number,max:Number):Number { var rand:Number; rand = Math.round( Math.random()*(max - min) ) + min; return rand; } Now I can go back to my main application component and do something like this. <?xml version="1.0" encoding="utf-8"?> <s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:layout="org.adobeug.layout.*" width="100%" height="100%"> <s:layout> <layout:RandomLayout/> </s:layout> <mx:Image source="@Embed('images/png128/Ae128.png')"/> <mx:Image source="@Embed('images/png128/Ai128.png')"/> <mx:Image source="@Embed('images/png128/Br128.png')"/> <mx:Image source="@Embed('images/png128/Ct128.png')"/> <mx:Image source="@Embed('images/png128/Dw128.png')"/> <mx:Image source="@Embed('images/png128/En128.png')"/> <mx:Image source="@Embed('images/png128/Fl128.png')"/> <mx:Image source="@Embed('images/png128/Id128.png')"/> <mx:Image source="@Embed('images/png128/Lr128.png')"/> <mx:Image source="@Embed('images/png128/Ol128.png')"/> <mx:Image source="@Embed('images/png128/Pr128.png')"/> <mx:Image source="@Embed('images/png128/Ps128.png')"/> <mx:Image source="@Embed('images/png128/Sb128.png')"/> <mx:Image source="@Embed('images/png128/zAcrobat128.png')"/> </s:Group>

If you run the program you will get something that looks like this. You can click on the image to see a live demo. If you refresh the page you will notice a new random position is calculated for each of the children.

As you can see Flex 4 layouts are incredibly easy to build even for a newbie like myself. Here is the final code for the RandomLayout Class. package org.adobeug.layout { import mx.core.ILayoutElement; import mx.utils.ObjectUtil; import spark.layouts.supportClasses.LayoutBase; public class RandomLayout extends LayoutBase { public function RandomLayout() { super(); } override public function measure():void { super.measure(); } override public function updateDisplayList(width:Number, height:Number):void { super.updateDisplayList(width,height); if(target){ var count:int = target.numElements; var layoutElement:ILayoutElement; for(var i:int = 0; i < count; i++){ // get the current layout element layoutElement = target.getElementAt(i); //resize the eletement to its preferred size by passing NaN for w/h layoutElement.setLayoutBoundsSize(NaN,NaN); // Width of the element var elWidth:Number = layoutElement.getLayoutBoundsWidth(); // Height of the element var elHeight:Number = layoutElement.getLayoutBoundsHeight(); // we needed to know the height and with of the element // so we can subtract that from the width (x must be less than w-elementWidth) var x:Number = getRandom(0,target.width - elWidth); var y:Number = getRandom(0,target.height- elHeight); layoutElement.setLayoutBoundsPosition(x,y); } } } private function getRandom(min:Number,max:Number):Number { var rand:Number; rand = Math.round( Math.random()*(max - min) ) + min; return rand; } } }

This entry was posted on August 13, 2010 at 9:16 AM and has received 5198 views. Comments 1 | Print this entry.