Skip to content
April 16, 2010 / Shrikant Patil

Creating Custom Layouts in flex 4

Flex 4 comes with powerful and lightweight layout rules. In flex 3, there are specific containers which comes with built in layouts  like HBox,VBOX etc. In flex 4 we can specify any standard or custom layout for layout based components like list, group etc. So it is very easy to create custom layouts and reuse them.


Flex 4 comes with following standard layout rules;

  • BasicLayout

Rule : Layouts the children with specified x and y coordinates.

  • TileLayout

Rule : Layouts the children one after another starting from left to right, once end of
available width is reached next element is placed into new row.

  • HorizontalLayout

Rule : Layouts the children one after another starting from left to right.i.e maintains
children in a row.

  • VerticalLayout

Rule : Layouts the children one below another starting from top to bottom i.e maintains
children in column.

Now, if we want a custom layout for our application then we need to create a new layout which can be used as same as standard layouts with containers.

In flex 3, the layout rule and container both are merged, now in flex 4 container is separated by it layout, so we can modify / create new layout for a container without modifying any container class.
We can access the target container which is exiting layout class by using “target” property. Using this property we can get all children of the target container and we can position them in layout class.

Below are the steps to follow to create a custom layout in flex 4:
I am going to create a new layout called as “BottomUpStepLayout” which positions its children in step manner from bottom to top.

  • Create a new layout class which must extend “LayoutBase” or any class which inherited the “LayoutBase” class.
  • Override measure() method to define the childrens dimensions (This is very rare case we need to follow)
  • Override updateDisplayList() method to write the logic for HOTO and WHERE to place the childrens.

In updateDisplayList() method first we get reference of container which is using this layout by property “target“. once we get the reference of target container then we loop through all of the children of the container and position then as required, means as per our custom layout rule.

Below is the source code of “BottomUpStepLayout.as”;


package flexScript
{
	import mx.core.ILayoutElement;

	import spark.components.supportClasses.GroupBase;
	import spark.layouts.supportClasses.LayoutBase;

	//Should extend LayoutBase or any inhereted classes of LayoutBase
	public class SetpLayput extends LayoutBase
	{
		public function SetpLayput()
		{
			super();
		}
		//override measure() method.
		override public function measure():void
		{
			super.measure();
		}
		//override updateDisplayList() method to position
		// each child way we want.
		override public function updateDisplayList(width:Number, height:Number):void
		{
			super.updateDisplayList(width,height);
			//make sure that target i.e container which is using this layout, is not null
			if (!target)
				return;
			//get the reference of target container which is using this layout
			var targetContainer:GroupBase = target;
			//get the count of elements
			var childsCount:int = targetContainer.numElements;
			//start looping through each element i.e each child
			var childX:int = width - 100;
			var childY:int = height - 100;

			for(var i:int = 0; i< childsCount; i++)
			{
				//get the current element
				//NOTE: ILayoutElement interface is used primarily by the layout
				//classes to query, size and position the elements of the GroupBase based containers.
				var currentElement:ILayoutElement = targetContainer.getElementAt(i);
				//use setLayoutBoundsSize method and pass NAN values, so that the element
				//will bet get drawn with its prefered height and width
				currentElement.setLayoutBoundsSize(NaN,NaN);
				//now position the element as you want
				currentElement.setLayoutBoundsPosition(childX,childY);
				childX -= 20;
				childY -= 30;
			}
		}
	}
}

And below application is using the “BottomUpStepLayout” layout. Initially you will see a button on the stage. go on clicking on that button and application go on adding the a button each time. observe how children are added to the container.

</pre>
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication 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:fs="flexScript.*">
<s:layout>
<fs:BottomUpStepLayout/>
</s:layout>
<fx:Script>
<![CDATA[
private function addButton():void
{
var btn:Button = new Button();
addElement(btn);
}
]]>
</fx:Script>
<s:Button label="Add" width="80" height="20" click="addButton()" />
</s:WindowedApplication>
<pre>

comments are impotent for me to keep posting 🙂

package flexScript
{
import mx.core.ILayoutElement;

import spark.components.supportClasses.GroupBase;
import spark.layouts.supportClasses.LayoutBase;

//Should extend LayoutBase or any inhereted classes of LayoutBase
public class SetpLayput extends LayoutBase
{
public function SetpLayput()
{
super();
}
//override measure() method.
override public function measure():void
{
super.measure();
}
//override updateDisplayList() method to position
// each child way we want.
override public function updateDisplayList(width:Number, height:Number):void
{
super.updateDisplayList(width,height);
//make sure that target i.e container which is using this layout, is not null
if (!target)
return;
//get the reference of target container which is using this layout
var targetContainer:GroupBase = target;
//get the count of elements
var childsCount:int = targetContainer.numElements;
//start looping through each element i.e each child
var childX:int = width – 100;
var childY:int = height – 100;

for(var i:int = 0; i< childsCount; i++)
{
//get the current element
//NOTE: ILayoutElement interface is used primarily by the layout
//classes to query, size and position the elements of the GroupBase based containers.
var currentElement:ILayoutElement = targetContainer.getElementAt(i);
//use setLayoutBoundsSize method and pass NAN values, so that the element
//will bet get drawn with its prefered height and width
currentElement.setLayoutBoundsSize(NaN,NaN);
//now position the element as you want
currentElement.setLayoutBoundsPosition(childX,childY);
childX -= 20;
childY -= 30;
}
}
}
}

Advertisements

2 Comments

Leave a Comment
  1. James / Oct 1 2010 7:09 am

    Thanks for article….^^

    • rana / May 20 2011 12:45 pm

      i want to know about the how capture an event ?
      it can possible capture and bubbles at a time an event

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: