Home » Adobe, Flex 4

Flex 4 Spark Group container, layout and the Scroller component

23 August 2010 No Comment

Flex 4 provides new containers that you should use instead of the previous HBox and VBox available in Flex 2 and 3 and the Spark Group is one of the most used to display visual childs.
This container allow you to set the layout property, used to define the rules to display these visual elements and their properties (i.e. gap, alignments, padding and so on).


You can also avoid to define the layout property using some “shortcut group containers” called VGroup and HGroup (see sample below) very similar to the old HBox and VBox:

Following some examples:

<?xml version="1.0" encoding="utf-8"?>
<!-- Groups with different layouts and layout properties -->
<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 />
	</s:layout>
 
 
	<!--HORIZONTAL LAYOUT: setting property layout-->
	<s:Group>
 
		<s:layout>
			<s:HorizontalLayout paddingLeft="100" gap="20" />
		</s:layout>
 
		<s:Button label="One" />
		<s:Button label="Two" />
		<s:Button label="Three" />
		<s:Button label="Four" />
 
	</s:Group>
 
 
	<mx:HRule width="100%" />
 
	<!--HORIZONTAL LAYOUT:  alignment-->
	<s:Group width="100%">
 
		<s:layout>
			<s:HorizontalLayout horizontalAlign="center"/>
		</s:layout>
 
		<s:Button label="One" />
		<s:Button label="Two" />
		<s:Button label="Three" />
		<s:Button label="Four" />
 
	</s:Group>
 
 
 
 
	<!--VERTICAL LAYOUT-->
	<mx:HRule width="100%" />
	<s:Group width="200">
 
		<s:layout>
			<s:VerticalLayout/>
		</s:layout>
 
		<s:Button label="A" />
		<s:Button label="B" />
		<s:Button label="C" />
		<s:Button label="D" />
 
	</s:Group>
 
 
 
	<!--VERTICAL LAYOUT: alignment-->
	<mx:HRule width="100%" />
	<s:Group width="200" >
 
		<s:layout>
			<s:VerticalLayout horizontalAlign="right" />
		</s:layout>
 
		<s:Button label="A" />
		<s:Button label="B" />
		<s:Button label="C" />
		<s:Button label="D" />
 
	</s:Group>
 
 
 
	<!--TILE LAYOUT-->
	<mx:HRule width="100%" />
	<s:Group width="250">
 
		<s:layout>
			<s:TileLayout  />
		</s:layout>
 
		<s:Button label="A" />
		<s:Button label="B" />
		<s:Button label="C" />
		<s:Button label="D" />
		<s:Button label="E" />
		<s:Button label="F" />
		<s:Button label="G" />
		<s:Button label="H" />
	</s:Group>
 
 
 
	<!--Use VGROUP -->
	<mx:HRule width="100%" />
	<s:VGroup width="200" >
 
		<s:Button label="A" />
		<s:Button label="B" />
		<s:Button label="C" />
		<s:Button label="D" />
 
	</s:VGroup>
 
</s:Application>

The result (click to enlarge the picture):
fx4-group-vgroup-layout

The Group container automatically set variableRowHeight to true, a property used to automatically preserve the right amount of space for each visual item in according with their height.
It’s also possible disable this property and manually force a common row height for each item.

<?xml version="1.0" encoding="utf-8"?>
<!-- Use Group Class with and with-no variable rows height -->
<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">
 
 
	<s:layout>
		<s:VerticalLayout />
	</s:layout>
 
 
	<!--Using Group with default properties-->
	<s:Group>
 
		<s:layout>
			<s:VerticalLayout />
		</s:layout>
 
		<s:Label text="Fabio"  />
		<s:Label text="Marco" fontSize="16" />
		<s:Label text="Eric" fontSize="36"/>
		<s:Label text="Max"  />
		<s:Label text="Mike" fontSize="16" />
		<s:Label text="Ivan" fontSize="36"/>
	</s:Group>
 
 
	<mx:HRule width="200" />
 
 
	<!--Disable the variableRowHeight setting a common row height-->
	<s:Group>
 
		<s:layout>
			<s:VerticalLayout variableRowHeight="false" rowHeight="20" />
		</s:layout>
 
 
		<s:Label text="Fabio"  />
		<s:Label text="Marco" fontSize="16" />
		<s:Label text="Eric" fontSize="36"/>
		<s:Label text="Max"  />
		<s:Label text="Mike" fontSize="16" />
		<s:Label text="Ivan" fontSize="36"/>
 
	</s:Group>
 
 
 
</s:Application>

The result:
fx4-variablerowheight

It’s also possible define a scrollbar using the Scroller components

<?xml version="1.0" encoding="utf-8"?>
<!-- Group with and with-no variable rows height -->
<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">
 
 
	<s:layout>
		<s:HorizontalLayout  gap="50"/>
	</s:layout>
 
 
	<!--Classic Group container-->
	<s:Group  width="200" height="100">
 
		<s:layout>
			<s:VerticalLayout />
		</s:layout>
 
		<s:Button label="A" />
		<s:Button label="B" />
		<s:Label text="Simple Label" />
		<s:Button label="D" />
		<s:Button label="E" />
		<s:Button label="F" />
		<s:Button label="G" />
		<s:Button label="H" />
		<s:Button label="I" />
		<s:Button label="J" />
		<s:Button label="K" />
		<s:Button label="M" />
 
	</s:Group>
 
 
	<!--Apply a Scroller-->
	<s:Scroller width="200" height="100">
		<s:Group>
 
			<s:layout>
				<s:VerticalLayout />
			</s:layout>
 
				<s:Button label="A" />
				<s:Button label="B" />
				<s:Label text="Simple Label" />
				<s:Button label="D" />
				<s:Button label="E" />
				<s:Button label="F" />
				<s:Button label="G" />
				<s:Button label="H" />
				<s:Button label="I" />
				<s:Button label="J" />
				<s:Button label="K" />
				<s:Button label="M" />
 
		</s:Group>
	</s:Scroller>
 
</s:Application>

The result:
fx4-scroller

The Group component doesn’t support the new Spark skinning available in Flex 4 (like for example the SkinnableContainer), so to skin the Group you should use MXML graphic, like in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- 
Set a background to the group.
NOTE: it only works well with a BasicLayout
 
-->
<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>
 
 
	<s:Group width="200" height="150">
 
		<!--Draw a round rectangle as background-->
		<s:Rect bottom="0" top="0" left="0" right="0" radiusX="5" radiusY="5" width="100%" height="100%" >
			<s:stroke>
				<s:LinearGradientStroke weight="1" scaleMode="normal" />
			</s:stroke>
			<s:fill>
				<s:LinearGradient>
					<s:GradientEntry color="0x999999" />
				</s:LinearGradient>
			</s:fill>
		</s:Rect>
 
 
		<s:Group width="100%" >
 
			<s:layout>
				<s:VerticalLayout paddingTop="10" 
					horizontalAlign="center" />
			</s:layout>
 
 
			<s:Button label="Button 1"/>
			<s:Button label="Button 2"/>
			<s:Button label="Button 3"/>
			<s:Button label="Button 4"/>
			<s:Button label="Button 5"/>
		</s:Group>
 
	</s:Group>
 
</s:Application>

The result:
fx4-group-mxmlgraphics

And naturally it’s possible combines scroller with MXML graphic like in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- Set a background to the group adding a scroller -->
<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>
 
 
	<s:Group width="200" height="150">
 
		<s:Rect bottom="0" top="0" left="0" right="0" radiusX="5" radiusY="5" width="100%" height="100%" >
			<s:stroke>
				<s:LinearGradientStroke weight="1" scaleMode="normal" />
			</s:stroke>
			<s:fill>
				<s:LinearGradient>
					<s:GradientEntry color="0x999999" />
				</s:LinearGradient>
			</s:fill>
		</s:Rect>
 
		<s:Scroller width="100%" height="100%">
			<s:Group >
				<s:layout>
					<s:VerticalLayout paddingTop="10" paddingRight="10"
						horizontalAlign="center" />
				</s:layout>
 
 
				<s:Button label="Button 1"/>
				<s:Button label="Button 2"/>
				<s:Button label="Button 3"/>
				<s:Button label="Button 4"/>
				<s:Button label="Button 5"/>
				<s:Button label="Button 6"/>
				<s:Button label="Button 7"/>
				<s:Button label="Button 8"/>
				<s:Button label="Button 9"/>
				<s:Button label="Button 10"/>
			</s:Group>
		</s:Scroller>
	</s:Group>
 
</s:Application>

The result:
fx4-scrollerandmxmlgraphic

This sample is part of the training course “Flash Builder 4 and Flex 4″ available only in italian language on my website: http://www.fabiobiondi.com

Leave your response!

Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

Be nice. Keep it clean. Stay on topic. No spam.

You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

This is a Gravatar-enabled weblog. To get your own globally-recognized-avatar, please register at Gravatar.