New Features in Flex 4.0

January 18, 2011

Component Layout

Layout determines how the child components have to be sized and placed in a Parent Component. In Spark Component architecture the Layout mechanism is decoupled from the individual component. ie.we can set the layout of the component declaratively in MXML or can be modified at runtime. All the predefined layouts can be found in the package Spark.layouts.package.

Some examples of Layouts are

BasicLayout
HorizontalLayout
VerticalLayout
TileLayout

Example:Let us look at how we can modify the Layout of a Group to Vertical

<?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" minWidth="955" minHeight="600">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
 
	<fx:Script>
		<![CDATA[
			import spark.layouts.HorizontalLayout;
			import spark.layouts.VerticalLayout;
 
			var vert:Boolean=false;
			function callme()
			{
 
				if(vert==true)
				{
 
					mygroup.layout=new VerticalLayout();
				}
				if(vert==false)
				{
					mygroup.layout=new HorizontalLayout();
				}
 
 
			}
 
 
		]]>
	</fx:Script>
 
<s:Group x="10" y="20" width="200" height="200" id="mygroup">
 
<s:Label x="10" y="10" text="A group whose Layout is changed to Vertical or Horizontal on clicking the Buttons"/>
<s:Button x="10" y="50" label="Vertical" click="vert=true;callme()"/>
<s:Button x="90" y="50" label="Horizontal" click="vert=false;callme()"/>
</s:Group>
</s:Application>

Output:The initial Screen.The component placed as per the x,y coordinates mentioned.