flex-extensions RadioGroup, CheckGroup and Group template samples

GroupTemplateSamples.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
	xmlns:mx="http://www.adobe.com/2006/mxml" 
	xmlns:fe="http://www.codecatalyst.com/2011/flex-extensions">
	
	<mx:Style>
		
		CheckGroup
		{
			padding-left: 10;
			padding-right: 10;
			padding-top: 10;
			padding-bottom: 10;
		}
		
		RadioGroup
		{
			padding-left: 10;
			padding-right: 10;
			padding-top: 10;
			padding-bottom: 10;
		}
		
		Group
		{
			padding-left: 10;
			padding-right: 10;
			padding-top: 10;
			padding-bottom: 10;
		}
		
	</mx:Style>
	
	<mx:Script>
		<![CDATA[
			
			[Bindable]
			/**
			 * Items.
			 */
			protected var items:Array = 
				[ 
					"One",
					"Two",
					"Three",
					"Four"
				];
			
			[Bindable]
			/**
			 * Selected items.
			 */
			protected var selectedItems:Array = null;
			
			[Bindable]
			/**
			 * Selected item.
			 */
			protected var selectedItem:Object = null;
			
			/**
			 * Handle RadioGroup Event.CHANGE.
			 */
			protected function radioGroup_changeHandler( event:Event ):void
			{
				trace( "RadioGroup - selectedItem: " + radioGroup.selectedItem );
				
				selectedItem = radioGroup.selectedItem;
			}
			
			/**
			 * Handle RadioGroup test Button MouseEvent.CLICK.
			 */
			protected function radioGroupTestButton_clickHandler( event:Event ):void
			{
				selectedItem = "Two";
			}
			
			/**
			 * Handle CheckGroup Event.CHANGE.
			 */
			protected function checkGroup_changeHandler( event:Event ):void
			{
				trace( "CheckGroup - selectedItems: " + checkGroup.selectedItems );
				
				selectedItems = checkGroup.selectedItems;
			}
			
			/**
			 * Handle CheckGroup test Button MouseEvent.CLICK.
			 */
			protected function checkGroupTestButton_clickHandler( event:Event ):void
			{
				selectedItems = [ "Two", "Four" ];	
			}
			
		]]>
	</mx:Script>
	
	<mx:HBox>
		
		<mx:Panel
			title="RadioGroup Test"
			width="200" height="300">
		
			<fe:RadioGroup
				id="radioGroup"
				dataProvider="{ items }"
				selectedItem="{ selectedItem }"
				change="radioGroup_changeHandler( event )">
				<fe:itemRenderer>
					<mx:Component>
						<mx:RadioButton 
							label="{ data }" />
					</mx:Component>
				</fe:itemRenderer>
			</fe:RadioGroup>
		
			<mx:ControlBar>
				
				<mx:Button
					id="radioGroupTestButton"
					label="Test"
					click="radioGroupTestButton_clickHandler( event )" />
				
			</mx:ControlBar>
		
		</mx:Panel>
	
		<mx:Panel
			title="RadioGroup Test"
			width="200" height="300">
		
			<fe:CheckGroup
				id="checkGroup"
				dataProvider="{ items }"
				selectedItems="{ selectedItems }"
				change="checkGroup_changeHandler( event )">
				<fe:itemRenderer>
					<mx:Component>
						<mx:CheckBox
							label="{ data }" />
					</mx:Component>
				</fe:itemRenderer>
			</fe:CheckGroup>
			
			<mx:ControlBar>
				
				<mx:Button
					id="checkGroupTestButton"
					label="Test"
					click="checkGroupTestButton_clickHandler( event )" />
				
			</mx:ControlBar>
			
		</mx:Panel>
		
		<mx:Panel
			title="Group Test"
			width="200" height="300">
			
			<fe:Group
				id="group"
				dataProvider="{ items }">
				<fe:itemRenderer>
					<mx:Component>
						<mx:Label
							text="{ data }" />
					</mx:Component>
				</fe:itemRenderer>
			</fe:Group>
			
			<mx:ControlBar />
			
		</mx:Panel>
		
	</mx:HBox>
	
</mx:Application>