customize control

gistfile1.txt

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:fx="http://ns.adobe.com/mxml/2009" 
		 xmlns:s="library://ns.adobe.com/flex/spark" 
		 xmlns:mx="library://ns.adobe.com/flex/mx" initialize="loadPage()" borderStyle="solid" styleName="container">

	<fx:Script>
		<![CDATA[
			import mx.containers.HBox;
			import mx.controls.Alert;
			import mx.controls.Image;
			import mx.controls.Label;
			import mx.controls.LinkButton;
			import mx.controls.Spacer;
			import mx.skins.halo.HaloBorder;
			
			[Bindable]
			public var title:String;
			[Bindable]
			public var link:String;
			[Bindable]
			public var linkHandler:Function;
			[Bindable]
			public var helpId:String;
			[Bindable]
			public var collapsable:Boolean = false;
			
			[Bindable]
			public var collapseHandler:Function;
			[Bindable]
			public var uncollapseHandler:Function;
			
			[Embed(source="assets/rightArrow.png")]
			private var RIGHT_ARROW:Class;
			[Embed(source="assets/leftArrow.png")]
			private var LEFT_ARROW:Class;
			[Embed(source="assets/help.png")]
			private var HELP_ICON:Class;
			
			private var collapsed:Boolean = false;
			private var leftArrow:Image;
			private var titlebar:HBox;
			private function loadPage():void
			{
				
				titlebar = new HBox();
				titlebar.styleName="titlebar";
				titlebar.percentWidth=100;
				titlebar.height = 30;
				var titlelabel:Label = new Label();
				titlelabel.text = title;
				titlelabel.styleName="titlelabel";
				titlebar.addChild(titlelabel);
				
				var spacer:Spacer = new Spacer();
				spacer.percentWidth = 100;				
				titlebar.addChild(spacer);
				
				if(link != null)
				{
					var linkbutton:LinkButton = new LinkButton();
					linkbutton.label = link;
					linkbutton.styleName="linkbutton";
					if(linkHandler != null)
						linkbutton.addEventListener(MouseEvent.CLICK, linkHandler);
					titlebar.addChild(linkbutton);
				}
				
				if(collapsable)
				{
					var arrow:Image = new Image();
					arrow.source=RIGHT_ARROW;
					arrow.buttonMode = true;
					arrow.addEventListener(MouseEvent.CLICK, collapseClickHandler);
					titlebar.addChild(arrow);
					
					leftArrow = new Image();
					leftArrow.source = LEFT_ARROW;
					leftArrow.buttonMode = true;
					leftArrow.addEventListener(MouseEvent.CLICK, collapseClickHandler);
				}
				
				if(helpId != null)
				{
					var image:Image = new Image();
					image.source=HELP_ICON;
					image.addEventListener(MouseEvent.CLICK, onHelpClicked);
					image.buttonMode = true;
					titlebar.addChild(image);
				}
				
				this.addChildAt(titlebar,0);
				//vcontainer.addElement(this.getElementAt(1));
			}
			
			private function onHelpClicked(e:Event):void
			{
				Alert.show(helpId);
			}			
			
			private function collapseClickHandler(e:Event):void
			{
				if(collapsed )
				{
					if( uncollapseHandler != null)
					{
						uncollapseHandler.call();
						titlebar.removeChild(leftArrow);
					}
				}
				else 
				{
					if(collapseHandler != null)
					{
						collapseHandler.call();
						titlebar.addChildAt(leftArrow,0);
					}
				}
					
				collapsed = !collapsed;

			}
		]]>
	</fx:Script>
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
		
	
	</fx:Declarations>
	<fx:Style>
		@namespace s "library://ns.adobe.com/flex/spark";
		@namespace mx "library://ns.adobe.com/flex/mx";
		
		.linkbutton{
			text-decoration: underline;
			font-size: 10px;
		}
		.titlebar{
			/*background-color: blue;*/
			backgroundAlpha: 0.5;
			background-color: #AAA;
			borderColor: #DDDDDD;
			borderStyle: solid;
			color: red;
			vertical-align: middle;
			padding-left: 3px;
			padding-right: 5px;
		}
		.titlelabel{
			color: black;
			font-weight: bold;			
			font-size: 12px;
		}
		.container{
			border-style: solid;
			border-color: black;
			corner-radius: 0;
			
		}
		
	</fx:Style>
	
</mx:VBox>