• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 782
  • Last Modified:

Need to create collapsible panel...

Need to create collapsible panel...

Plz refer below link which is similar to what i am looking for...
http://flexonblog.wordpress.com/2008/01/25/smoothing-the-resizing-of-layouts-in-flex-with-effects/
Below is the sample code.Plz change accordingly.
Also i am sharing some sample image file for your reference.

Thanks ,
Alam
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" applicationComplete="init()" >


<mx:Script>
		<![CDATA[
		
		import flash.net.FileReference;
		import mx.controls.Menu;
		import flash.display.Stage;		
		import mx.events.MenuEvent;
		import mx.controls.Alert;
		import mx.events.ListEvent;
		import mx.managers.DragManager;
        import mx.core.DragSource;
        import mx.events.DragEvent;	
		import DrawingClasses.Designer;
		
		[Bindable]
		[Embed(source="/images2/line.png")] 
		public var linePicture:Class; 
		[Bindable]
		[Embed(source="/images2/box.png")] 
		public var boxPicture:Class;
		
		[Bindable]
		public var xm:XML = 
		<AbstractComponentTemplate></AbstractComponentTemplate>;
		
		public var compType:XML = 
			<ComponentTemplateDescriptor>
				<Owner>BackTesting</Owner>
				<Name>Component</Name>
				<Version>1</Version>
			</ComponentTemplateDescriptor>;

		
		[Bindable]
        private var cm:ContextMenu;		

		public var xm1:XML;
			
		public var loopparent:Array = new Array();
		
		private var mouseTarget:DisplayObject;
		private var xOff:Number;
		private var yOff:Number;	
		private var designer:Designer = new Designer();   
		private var i:int;
		private var j:int;
		
		private function init():void
		{
			designer.setDesignArea(designArea);			
			
			var cmi1:ContextMenuItem = new ContextMenuItem("Properties", true);
            cmi1.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, contextMenuItem_propertiesSelect);
			
			var cmi2:ContextMenuItem = new ContextMenuItem("View XML", true);
			cmi2.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, contextMenuItem_viewXMLSelect);
			
			var cmi3:ContextMenuItem = new ContextMenuItem("Saved Components", true);
			cmi3.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, contextMenuItem_savedListSelect);			

			cm = new ContextMenu();
			cm.hideBuiltInItems();
			cm.customItems = [cmi1, cmi2, cmi3];
			cm.addEventListener(ContextMenuEvent.MENU_SELECT, contextMenu_menuSelect);
		}
		
		private function contextMenu_menuSelect(evt:ContextMenuEvent):void {
                
        }

		private function contextMenuItem_propertiesSelect(evt:ContextMenuEvent):void {
				vDivProp.width = 260;				
				//vDivProp.moveDivider(0, 400);
				//accrWinProp.label = "Two Way Split - Properties";				
				//accrWinProp.selectedIndex = 1;
        }
		
		private function contextMenuItem_viewXMLSelect(evt:ContextMenuEvent):void {                
				viewstack1.selectedIndex = 1;
        }
		
		private function contextMenuItem_savedListSelect(evt:ContextMenuEvent):void {                
				accrWinComp.selectedIndex = 1;
        }		


		
		[Bindable]
		private var propValue:String = "Component";
		
        private function itemClickEvent(event:ListEvent):void {
			var propKey:String = dgProp.selectedItem.@key;
			
			if (propKey == "name") {
				propValue = dgProp.selectedItem.propvalue;				
			}
        }
		
		[Bindable]
		private var sourceXML:XML = 
		<order>
			<!--This is a comment. -->
			<?PROC_INSTR sample ?>
			<item id='1'>
				<menuName>burger</menuName>
				<price>3.95</price>
			</item>
			<item id='2'>
				<menuName>fries</menuName>
				<price>1.45</price>
			</item>
		</order>;
		
		[Bindable]
		private var savedComp:Array=['ComponentTemplate', 
		'iv85341.EquityCash.v1', 
		'ra92724.ThreeWaySplit.EU.US.OTHERS.v1',
		'ra92724.TwoWaySplit.EU.OTHERS.v1',
		'ra92724.TwoWaySplit.US.OTHERS.v1',
		'iv85341.VanillaNode.v1',
		'iv85341.ReadGmrFs.v1'
		];
    
    	[Bindable]
    	private var propData:XML = 
    		<properties>
    			<prop key="name">
    				<propvalue>Component</propvalue>
					<itemRenderer>mx.controls.NumericStepper</itemRenderer>
    			</prop>
    			<prop key="Version">
    				<propvalue>1.0</propvalue>
					<itemRenderer>mx.controls.NumericStepper</itemRenderer>
    			</prop>
    			<prop key="Owner">
    				<propvalue>iv85341</propvalue>
					<itemRenderer>mx.controls.NumericStepper</itemRenderer>
    			</prop>
    			<prop key="width">
    				<propvalue>250</propvalue>
					<itemRenderer>mx.controls.NumericStepper</itemRenderer>
    			</prop>
    			<prop key="height">
    				<propvalue>300</propvalue>
					<itemRenderer>mx.controls.NumericStepper</itemRenderer>
    			</prop>    			
    			<prop key="X-Pos">
    				<propvalue>40</propvalue>
					<itemRenderer>mx.controls.NumericStepper</itemRenderer>
    			</prop>
    			<prop key="Y-Pos">
    				<propvalue>20</propvalue>
					<itemRenderer>mx.controls.NumericStepper</itemRenderer>
    			</prop>
    		</properties>;
			
			private function rightClick(event:MouseEvent):void
			{
				Alert.show("Properties ..." + event.currentTarget, "Open");
			}
			
			
			// Draging Code Starts Here
			private var curDate:Date = new Date();
			private var dateList:XMLList = null;
			
			public function pictureDragDrop(event:DragEvent):void {	 
				
				//Alert.show (" com = " + event.dragSource.dataForFormat("key"));
				var nodeName:String = event.dragSource.dataForFormat("key").toString(); //txtInput1.text;
				var nodeValue:String = "";
				if (nodeValue == "")
				{
					if (xm == <AbstractComponentTemplate></AbstractComponentTemplate>)	
					{						
						xm.appendChild(compType);
						dateList = new XMLList("<DateCreated>" + curDate + "</DateCreated>");
						xm.appendChild(dateList);						
						dateList = new XMLList("<DateModified>" + curDate + "</DateModified>");
						xm.appendChild(dateList);
						
						xm1 = XML("<" + nodeName + "></" + nodeName + ">");
						xm.appendChild(xm1);
					}
					else
					{						
						i++;
						xm1 = XML("<" + nodeName + "></" + nodeName + ">");
						
						xm.appendChild(xm1); 
						//loopparent.push(xmlarray:xm1);
					
						loopparent[i] = xm1;						
					}
				}
				else
				{
					
					
					var xmlList:XMLList = new XMLList("<" + nodeName + ">" + nodeValue + "</" + nodeName + ">");
					
					if (xm1 == null)
					{					
						xm.appendChild(xmlList); 
					}
					else
					{
						for (j = i; j>0; j--)
						{
					 
						(loopparent[j]).appendChild(xmlList); 
						
						//Alert.show("alert");
						}					
				
					}
				}
				var x:int = event.currentTarget.mouseX - xOff;
				var y:int = event.currentTarget.mouseY - yOff;  
				if(event.dragSource.dataForFormat("key") == "box")
				{
					designer.addBox(x, y); 	
				}   
				else  if(event.dragSource.dataForFormat("key") == "circle")
				{
					designer.addCircle(x, y);
				}
				else
				{
					designer.addRectangle(x, y);
				}
			
				//txtInput1.text = "";
				//txtInput2.text = "";
			}
			
			// this method gets x and y coordinate of template box image
			private function myoffset(img:Image):void {
				xOff = img.mouseX;
				yOff = img.mouseY;
			}
			
			// this method does acceptable draging box image
			public function pictureDragEnter(event:DragEvent):void{
				DragManager.acceptDragDrop(Canvas(event.target));        
			}
			
			// this method supply drag box when mouse move on the design area 
			private function dragPicture1(event:MouseEvent, img1:Image,format:String):void{
				var dragInitiator:Image=Image(event.currentTarget);
				var ds:DragSource = new DragSource();
				var imageProxy:Image = new Image();
				imageProxy.source = img1.source;	    
				imageProxy.height= 150;
				imageProxy.width= 150;
				ds.addData(format,"key");
				
				DragManager.doDrag(dragInitiator, ds, event,imageProxy, 0, 0, 1.00);
			}      
			// this method works when click on the line button 
			// it is make enable to draw line
			public function doDrawEnable():void {
				
				designer.setIsDrawEnable(true);			
							
			}
			
			private var fileRef:FileReference;

			public function createXML():void {
				var fileName:String = "component.xml";
                fileRef = new FileReference();
				fileRef.browse();
			}
			
			// Draging code ends here
		
		]]>
	</mx:Script>


	<mx:Fade id="theEffect"/>
	<mx:Resize id="resizeEffect" />

	<mx:ApplicationControlBar dock="true">		
		<mx:Image source="@Embed(source='images/Openfile.gif')" toolTip="Open" useHandCursor="true" buttonMode="true" mouseChildren="false" click="createXML()" />
		<mx:Image source="@Embed(source='images/Savefile.gif')" toolTip="Save" useHandCursor="true" buttonMode="true" mouseChildren="false" click="createXML()" />
		
		<mx:Image source="@Embed(source='images/Undo.gif')" toolTip="Undo" useHandCursor="true" buttonMode="true" mouseChildren="false" />
		<mx:Image source="@Embed(source='images/Redo.gif')" toolTip="Redo" useHandCursor="true" buttonMode="true" mouseChildren="false" />
		<mx:Image source="@Embed(source='images/Delete.gif')" toolTip="Delete" useHandCursor="true" buttonMode="true" mouseChildren="false" />	
		<mx:Image source="@Embed(source='images/Print.gif')" toolTip="Print" useHandCursor="true" buttonMode="true" mouseChildren="false" />
			
		<mx:Spacer width="100%" />
		<mx:Label text="BackTesting" fontWeight="bold" fontSize="16" />
	</mx:ApplicationControlBar>
	
	
	<mx:HDividedBox width="100%" height="100%">
		<mx:VDividedBox height="100%" width="20%">			
				<mx:Panel title="Drawing Components" width="100%" height="100%" layout="vertical" >
						<mx:Accordion id="accrWinComp" x="51" y="35" width="100%" height="100%">
								<mx:Panel label="Nodes" width="100%" height="100%" layout="vertical" borderThicknessTop="-20" paddingTop = "20" paddingLeft = "20" >
									<mx:Image id="box" toolTip="TwoWay Split" useHandCursor="true" buttonMode="true" source="@Embed(source='images2/box.png')" mouseMove="dragPicture1(event, box, 'box');myoffset(box);" width="28" height="28" ></mx:Image>
									<mx:Image id="rectangle" toolTip="MultiWay Split" useHandCursor="true" buttonMode="true" source="@Embed(source='images2/rectangle.png')" mouseMove="dragPicture1(event, rectangle, 'rectangle');myoffset(rectangle);" width="28" height="28" ></mx:Image>
									<mx:Image id="circle" toolTip="Reader" useHandCursor="true" buttonMode="true"  source="@Embed(source='images2/circle.png')" mouseMove="dragPicture1(event, circle, 'circle');myoffset(circle);" width="28" height="28" ></mx:Image>
									
									<mx:Image id="line" toolTip="Line" useHandCursor="true" buttonMode="true" source="@Embed(source='images2/line.png')" click="doDrawEnable()" width="28" height="28"  x="279" y="10"></mx:Image>
									
									<!--<mx:Image id="dottedline" source="@Embed(source='images2/dottedline.png')" click="doDrawEnable()" width="28" height="35"  x="279" y="10"></mx:Image>
		
									<mx:Label text="Name" x="350" y="10"/>
									<mx:TextInput id="txtInput1" width="50" height="28" x="400" y="10"/>
									<mx:Label text="Value" x="470" y="10"/>
									<mx:TextInput id="txtInput2" width="50" height="28" x="510" y="10"/>-->
								</mx:Panel>
								<mx:Panel label="Saved Components" width="100%" height="100%" borderThicknessTop="-20">
									<mx:List height="100%" width="100%" dataProvider="{savedComp}" />									
								</mx:Panel>
						</mx:Accordion>		
				</mx:Panel>
		</mx:VDividedBox>
		<mx:VDividedBox height="100%" width="80%">
			
				<mx:HDividedBox width="100%" height="100%">				
					<mx:Canvas width="100%" height="100%" >
					
						<mx:TabBar x="0" y="10" dataProvider="viewstack1" />
	
						<mx:ViewStack id="viewstack1" width="100%" height="100%" y="32">

							<mx:Canvas backgroundColor="#ffffff" borderColor="0xB7BABC" borderStyle="solid" borderThickness="7" label="{propValue}" id="designArea" contextMenu="{cm}" dragEnter="pictureDragEnter(event)" dragDrop="pictureDragDrop(event)" width="100%" height="100%" >	
								
							</mx:Canvas>
							
							<mx:Panel id="pnlXML" label="XML" width="100%" height="100%" showEffect="{theEffect}" >
								<mx:ControlBar width="100%" barColor="#FF22CC">
									<mx:Spacer width="100%"/>
									<mx:Button id="btnSave" label="Save" useHandCursor="true" buttonMode="true" mouseChildren="false" click="createXML()" />					
								</mx:ControlBar>
								<mx:TextArea fontSize="12" wordWrap="false" textIndent="8" id="txtAreaXML" text="{xm}" width="100%" height="100%" editable="false" />								
							</mx:Panel>
							
						</mx:ViewStack>
						
					</mx:Canvas>
				</mx:HDividedBox>		
			
		</mx:VDividedBox>
		
		<mx:VDividedBox id="vDivProp" height="100%" width="0%" resizeEffect="{resizeEffect}" >
			<mx:Panel title="Component Properties" width="100%" height="100%" layout="vertical" >
				<!--<mx:Accordion id="accrWinProp" x="51" y="35" width="100%" height="100%">	-->							
								
								<mx:Panel id="accrCon2" title="Component Properties" width="100%" height="100%">
									
									<mx:DataGrid id="dgProp" dataProvider="{propData.prop}" height="100%" width="100%" editable="true" itemClick="itemClickEvent(event);">
										<mx:columns>
											<mx:DataGridColumn dataField="@key" headerText="Property" editable="false" />
											<mx:DataGridColumn dataField="propvalue" headerText="Value" editable="true" />																		
										</mx:columns>
									</mx:DataGrid>
									
								</mx:Panel>
								
					<!--</mx:Accordion>-->
			</mx:Panel>
		</mx:VDividedBox>
		
	</mx:HDividedBox>
	
	
	

	
</mx:Application>

Open in new window

Demo.bmp
0
alamflex
Asked:
alamflex
  • 5
  • 4
1 Solution
 
alamflexAuthor Commented:
when ever user clicks on the collapsible button it should close.By default it shows close button.
Whenever user clicks on close button window should close.

I need to implement this functionality for both the left and right panels.

You can also refer to this link.
http://workflowflash.com/12860/flex-sliding-drawer-mask-and-move-effect.php

Thanks
Alam.
0
 
dgofmanCommented:
I am using collapse/expand panel for one view but you need two.

I can share my code you can fix yourself easy

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" applicationComplete="init()" xmlns:local="*" >
	
	<mx:Style>
		CustomDividedBox{
			dividerAffordance:10;
			dividerBorderColor:#3387A7;
			dividerFillColors:#ffffff,#bad2f0;
			collapseBoxDividerSkin: Embed(source="assets.swf",symbol="CollapseBoxDividerSkin");
			expandBoxDividerSkin: Embed(source="assets.swf",symbol="ExpendBoxDividerSkin");
		}
	</mx:Style>
	<mx:Script>
		<![CDATA[
			import DrawingClasses.Designer;
			
			import mx.controls.Alert;
			import mx.core.DragSource;
			import mx.core.UIComponent;
			import mx.events.DragEvent;
			import mx.events.ListEvent;
			import mx.managers.DragManager;
			
			[Bindable]
			[Embed(source="/Images/line.png")] 
			public var linePicture:Class; 
			[Bindable]
			[Embed(source="/Images/box.png")] 
			public var boxPicture:Class;
			
			[Bindable]
			public var xm:XML = 
				<AbstractComponentTemplate></AbstractComponentTemplate>;
			
			public var compType:XML = 
				<ComponentTemplateDescriptor>
					<Owner>BackTesting</Owner>
					<Name>Component</Name>
					<Version>1</Version>
				</ComponentTemplateDescriptor>;
			
			
			[Bindable]
			private var cm:ContextMenu;		
			
			public var xm1:XML;
			
			public var loopparent:Array = new Array();
			
			private var mouseTarget:DisplayObject;
			private var xOff:Number;
			private var yOff:Number;	
			private var designer:Designer = new Designer();   
			private var i:int;
			private var j:int;
			
			private function init():void
			{
				designer.setDesignArea(designArea);			
				
				var cmi1:ContextMenuItem = new ContextMenuItem("Properties", true);
				cmi1.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, contextMenuItem_propertiesSelect);
				
				var cmi2:ContextMenuItem = new ContextMenuItem("View XML", true);
				cmi2.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, contextMenuItem_viewXMLSelect);
				
				var cmi3:ContextMenuItem = new ContextMenuItem("Saved Components", true);
				cmi3.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, contextMenuItem_savedListSelect);			
				
				cm = new ContextMenu();
				cm.hideBuiltInItems();
				cm.customItems = [cmi1, cmi2, cmi3];
				cm.addEventListener(ContextMenuEvent.MENU_SELECT, contextMenu_menuSelect);
			}
			
			private function contextMenu_menuSelect(evt:ContextMenuEvent):void {
				
			}
			
			private function contextMenuItem_propertiesSelect(evt:ContextMenuEvent):void {
				//panelRight.width = 260;				
				//vDivProp.moveDivider(0, 400);
				//accrWinProp.label = "Two Way Split - Properties";				
				//accrWinProp.selectedIndex = 1;
			}
			
			private function contextMenuItem_viewXMLSelect(evt:ContextMenuEvent):void {                
				viewstack1.selectedIndex = 1;
			}
			
			private function contextMenuItem_savedListSelect(evt:ContextMenuEvent):void {                
				accrWinComp.selectedIndex = 1;
			}		
			
			
			
			[Bindable]
			private var propValue:String = "Component";
			
			private function itemClickEvent(event:ListEvent):void {
				var propKey:String = dgProp.selectedItem.@key;
				
				if (propKey == "name") {
					propValue = dgProp.selectedItem.propvalue;				
				}
			}
			
			[Bindable]
			private var sourceXML:XML = 
				<order>
					<!--This is a comment. -->
					<?PROC_INSTR sample ?>
					<item id='1'>
						<menuName>burger</menuName>
						<price>3.95</price>
					</item>
					<item id='2'>
						<menuName>fries</menuName>
						<price>1.45</price>
					</item>
				</order>;
				
				[Bindable]
				private var savedComp:Array=['ComponentTemplate', 
				'iv85341.EquityCash.v1', 
				'ra92724.ThreeWaySplit.EU.US.OTHERS.v1',
				'ra92724.TwoWaySplit.EU.OTHERS.v1',
				'ra92724.TwoWaySplit.US.OTHERS.v1',
				'iv85341.VanillaNode.v1',
				'iv85341.ReadGmrFs.v1'
				];
			
				[Bindable]
				private var propData:XML = 
					<properties>
						<prop key="name">
							<propvalue>Component</propvalue>
							<itemRenderer>mx.controls.NumericStepper</itemRenderer>
						</prop>
						<prop key="Version">
							<propvalue>1.0</propvalue>
							<itemRenderer>mx.controls.NumericStepper</itemRenderer>
						</prop>
						<prop key="Owner">
							<propvalue>iv85341</propvalue>
							<itemRenderer>mx.controls.NumericStepper</itemRenderer>
						</prop>
						<prop key="width">
							<propvalue>250</propvalue>
							<itemRenderer>mx.controls.NumericStepper</itemRenderer>
						</prop>
						<prop key="height">
							<propvalue>300</propvalue>
							<itemRenderer>mx.controls.NumericStepper</itemRenderer>
						</prop>    			
						<prop key="X-Pos">
							<propvalue>40</propvalue>
							<itemRenderer>mx.controls.NumericStepper</itemRenderer>
						</prop>
						<prop key="Y-Pos">
							<propvalue>20</propvalue>
							<itemRenderer>mx.controls.NumericStepper</itemRenderer>
						</prop>
					</properties>;
						
						private function rightClick(event:MouseEvent):void
						{
						Alert.show("Properties ..." + event.currentTarget, "Open");
			}
			
			
			// Draging Code Starts Here
			private var curDate:Date = new Date();
			private var dateList:XMLList = null;
			
			public function pictureDragDrop(event:DragEvent):void {	 
			
			//Alert.show (" com = " + event.dragSource.dataForFormat("key"));
			var nodeName:String = event.dragSource.dataForFormat("key").toString(); //txtInput1.text;
			var nodeValue:String = "";
			if (nodeValue == "")
			{
			if (xm == <AbstractComponentTemplate></AbstractComponentTemplate>)	
				{						
				xm.appendChild(compType);
				dateList = new XMLList("<DateCreated>" + curDate + "</DateCreated>");
				xm.appendChild(dateList);						
				dateList = new XMLList("<DateModified>" + curDate + "</DateModified>");
				xm.appendChild(dateList);
				
				xm1 = XML("<" + nodeName + "></" + nodeName + ">");
				xm.appendChild(xm1);
				}
				else
					{						
					i++;
				xm1 = XML("<" + nodeName + "></" + nodeName + ">");
				
				xm.appendChild(xm1); 
				//loopparent.push(xmlarray:xm1);
				
				loopparent[i] = xm1;						
				}
				}
				else
					{
					
					
					var xmlList:XMLList = new XMLList("<" + nodeName + ">" + nodeValue + "</" + nodeName + ">");
				
				if (xm1 == null)
				{					
				xm.appendChild(xmlList); 
				}
				else
					{
					for (j = i; j>0; j--)
						{
						
						(loopparent[j]).appendChild(xmlList); 
						
						//Alert.show("alert");
						}					
						
						}
						}
						var x:int = event.currentTarget.mouseX - xOff;
						var y:int = event.currentTarget.mouseY - yOff;  
						if(event.dragSource.dataForFormat("key") == "box")
						{
						designer.addBox(x, y); 	
						}   
						else  if(event.dragSource.dataForFormat("key") == "circle")
						{
						designer.addCircle(x, y);
						}
						else
							{
							designer.addRectangle(x, y);
						}
						
						//txtInput1.text = "";
						//txtInput2.text = "";
						}
						
						// this method gets x and y coordinate of template box image
						private function myoffset(img:Image):void {
						xOff = img.mouseX;
						yOff = img.mouseY;
						}
						
						// this method does acceptable draging box image
						public function pictureDragEnter(event:DragEvent):void{
						DragManager.acceptDragDrop(Canvas(event.target));        
						}
						
						// this method supply drag box when mouse move on the design area 
						private function dragPicture1(event:MouseEvent, img1:Image,format:String):void{
						var dragInitiator:Image=Image(event.currentTarget);
						var ds:DragSource = new DragSource();
						var imageProxy:Image = new Image();
						imageProxy.source = img1.source;	    
						imageProxy.height= 150;
						imageProxy.width= 150;
						ds.addData(format,"key");
						
						DragManager.doDrag(dragInitiator, ds, event,imageProxy, 0, 0, 1.00);
						}      
						// this method works when click on the line button 
						// it is make enable to draw line
						public function doDrawEnable():void {
						
						designer.setIsDrawEnable(true);			
						
						}
						
						private var fileRef:FileReference;
						
						public function createXML():void {
						var fileName:String = "component.xml";
						fileRef = new FileReference();
						fileRef.browse();
						}
						
						// Draging code ends here
						
						
						private function onExpand(event:Event):void{
							if(event.target.dividerIndex == 1){
								panelRight.width = 0;
							}else{
								panelLeft.width = 300;
							}
						}
						
						private function onCollapse(event:Event):void{
							if(event.target.dividerIndex == 1){
								panelRight.width = 400;
							}else{
								panelLeft.width = 0;
							}
						}
		]]>
	</mx:Script>
	
	
	<mx:Fade id="theEffect"/>
	<mx:Resize id="resizeEffect" />
	
	<mx:ApplicationControlBar dock="true">		
		<mx:Image toolTip="Open" useHandCursor="true" buttonMode="true" mouseChildren="false" click="createXML()" />
		<mx:Image toolTip="Save" useHandCursor="true" buttonMode="true" mouseChildren="false" click="createXML()" />
		
		<mx:Image toolTip="Undo" useHandCursor="true" buttonMode="true" mouseChildren="false" />
		<mx:Image toolTip="Redo" useHandCursor="true" buttonMode="true" mouseChildren="false" />
		<mx:Image toolTip="Delete" useHandCursor="true" buttonMode="true" mouseChildren="false" />	
		<mx:Image toolTip="Print" useHandCursor="true" buttonMode="true" mouseChildren="false" />
		
		<mx:Spacer width="100%" />
		<mx:Label text="BackTesting" fontWeight="bold" fontSize="16" />
	</mx:ApplicationControlBar>
	
	
	<local:CustomDividedBox width="100%" height="100%" direction="horizontal" expand="onExpand(event)" collapse="onCollapse(event)">
		<mx:VDividedBox id="panelLeft" height="100%">
			<mx:Panel title="Drawing Components" width="100%" height="100%" layout="vertical" >
				<mx:Accordion id="accrWinComp" x="51" y="35" width="100%" height="100%">
					<mx:Panel label="Nodes" width="100%" height="100%" layout="vertical" borderThicknessTop="-20" paddingTop = "20" paddingLeft = "20" >
						<mx:Image id="box" toolTip="TwoWay Split" useHandCursor="true" buttonMode="true" source="@Embed(source='Images/box.png')" mouseMove="dragPicture1(event, box, 'box');myoffset(box);" width="28" height="28" ></mx:Image>
						<mx:Image id="rectangle" toolTip="MultiWay Split" useHandCursor="true" buttonMode="true" source="@Embed(source='Images/rectangle.png')" mouseMove="dragPicture1(event, rectangle, 'rectangle');myoffset(rectangle);" width="28" height="28" ></mx:Image>
						<mx:Image id="circle" toolTip="Reader" useHandCursor="true" buttonMode="true"  source="@Embed(source='Images/circle.png')" mouseMove="dragPicture1(event, circle, 'circle');myoffset(circle);" width="28" height="28" ></mx:Image>
						
						<mx:Image id="line" toolTip="Line" useHandCursor="true" buttonMode="true" source="@Embed(source='Images/line.png')" click="doDrawEnable()" width="28" height="28"  x="279" y="10"></mx:Image>
						
						<!--<mx:Image id="dottedline" source="@Embed(source='Images/dottedline.png')" click="doDrawEnable()" width="28" height="35"  x="279" y="10"></mx:Image>
						
						<mx:Label text="Name" x="350" y="10"/>
						<mx:TextInput id="txtInput1" width="50" height="28" x="400" y="10"/>
						<mx:Label text="Value" x="470" y="10"/>
						<mx:TextInput id="txtInput2" width="50" height="28" x="510" y="10"/>-->
					</mx:Panel>
					<mx:Panel label="Saved Components" width="100%" height="100%" borderThicknessTop="-20">
						<mx:List height="100%" width="100%" dataProvider="{savedComp}" />									
					</mx:Panel>
				</mx:Accordion>		
			</mx:Panel>
		</mx:VDividedBox>
		<mx:VDividedBox height="100%" width="100%">
			
			<mx:HDividedBox width="100%" height="100%">				
				<mx:Canvas width="100%" height="100%" >
					
					<mx:TabBar x="0" y="10" dataProvider="viewstack1" />
					
					<mx:ViewStack id="viewstack1" width="100%" height="100%" y="32">
						
						<mx:Canvas backgroundColor="#ffffff" borderColor="0xB7BABC" borderStyle="solid" borderThickness="7" label="{propValue}" id="designArea" contextMenu="{cm}" dragEnter="pictureDragEnter(event)" dragDrop="pictureDragDrop(event)" width="100%" height="100%" >	
							
						</mx:Canvas>
						
						<mx:Panel id="pnlXML" label="XML" width="100%" height="100%" showEffect="{theEffect}" >
							<mx:ControlBar width="100%" barColor="#FF22CC">
								<mx:Spacer width="100%"/>
								<mx:Button id="btnSave" label="Save" useHandCursor="true" buttonMode="true" mouseChildren="false" click="createXML()" />					
							</mx:ControlBar>
							<mx:TextArea fontSize="12" wordWrap="false" textIndent="8" id="txtAreaXML" text="{xm}" width="100%" height="100%" editable="false" />								
						</mx:Panel>
						
					</mx:ViewStack>
					
				</mx:Canvas>
			</mx:HDividedBox>		
			
		</mx:VDividedBox>
		
		<mx:VDividedBox id="panelRight" height="100%" width="0" resizeEffect="{resizeEffect}" >
			<mx:Panel title="Component Properties" width="100%" height="100%" layout="vertical" >
				<!--<mx:Accordion id="accrWinProp" x="51" y="35" width="100%" height="100%">	-->							
				
				<mx:Panel id="accrCon2" title="Component Properties" width="100%" height="100%">
					
					<mx:DataGrid id="dgProp" dataProvider="{propData.prop}" height="100%" width="100%" editable="true" itemClick="itemClickEvent(event);">
						<mx:columns>
							<mx:DataGridColumn dataField="@key" headerText="Property" editable="false" />
							<mx:DataGridColumn dataField="propvalue" headerText="Value" editable="true" />																		
						</mx:columns>
					</mx:DataGrid>
					
				</mx:Panel>
				
				<!--</mx:Accordion>-->
			</mx:Panel>
		</mx:VDividedBox>
		
	</local:CustomDividedBox>
	
	
	
	
	
</mx:Application> 

Open in new window


package 
{
	import flash.display.DisplayObject;
	import flash.display.GradientType;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.geom.Matrix;
	
	import mx.containers.BoxDirection;
	import mx.containers.DividedBox;
	import mx.containers.dividedBoxClasses.BoxDivider;
	import mx.controls.ToolTip;
	import mx.core.mx_internal;
	import mx.managers.CursorManager;
	import mx.managers.CursorManagerPriority;
	import mx.managers.ToolTipManager;

	use namespace mx_internal;

	[Style(name="collapseBoxDividerSkin", type="Class", format="EmbeddedFile", inherit="no")]
	
	[Style(name="expandBoxDividerSkin", type="Class", format="EmbeddedFile", inherit="no")]
	
	[Event(name="collapse", type="flash.events.Event")]
	
	[Event(name="expand", type="flash.events.Event")]

	[Event(name="stateChange", type="flash.events.Event")]
	
	public class CustomDividedBox extends DividedBox
	{
		private var cursorID:int = CursorManager.NO_CURSOR;
		
		public static const COLLAPSE:String = "collapse";
		public static const EXPAND:String = "expand";
		
		public static const OPEN_RIGHT:String = "right";
		public static const OPEN_LEFT:String = "left";
		
		public var dividerIndex:Number;

		private var _openDirection:String = OPEN_RIGHT;
		
		private var _state:String;
		private var _dividerWidth:Number;
		private var _knobToolTip:ToolTip;
	
		[Bindable]
		[Inspectable(enumeration="collapse,expand", defaultValue="collapse")]
		public function get state():String{
			return _state;
		}
		
		public function set state(value:String):void{
			if(_state != value){
				_state = value;
				dispatchEvent(new Event("stateChange"));
				changeDivider();
			}
		}
		[Bindable]
		[Inspectable(enumeration="right,left", defaultValue="right")]
		public function get openDirection():String{
			return _openDirection;
		}
		public function set openDirection(value:String):void{
			_openDirection = value;
		}
		
		public function get dividerWidth():Number{
			return _dividerWidth;
		}
		
		public function set dividerTooltip(value:String):void{
			if(_knobToolTip)
				ToolTipManager.destroyToolTip(_knobToolTip);
			_knobToolTip = ToolTipManager.createToolTip(value, 0, 0) as ToolTip;
			_knobToolTip.visible = false;
		}
		
		protected function changeDivider():void{
			if(openDirection == OPEN_LEFT){
				if(state == COLLAPSE){
					setStyle("dividerSkin", getStyle("expandBoxDividerSkin"));
					dispatchEvent(new Event(COLLAPSE));
				}else{
					setStyle("dividerSkin", getStyle("collapseBoxDividerSkin"));
					dispatchEvent(new Event(EXPAND));
				}
			}else{
				if(state == COLLAPSE){
					setStyle("dividerSkin", getStyle("collapseBoxDividerSkin"));
					dispatchEvent(new Event(COLLAPSE));
				}else{
					setStyle("dividerSkin", getStyle("expandBoxDividerSkin"));
					dispatchEvent(new Event(EXPAND));
				}
			}
		}
		
		override protected function childrenCreated():void{
			super.childrenCreated();
			direction = BoxDirection.HORIZONTAL;
			changeDivider();
		}
		
		override mx_internal function startDividerDrag(divider:BoxDivider, trigger:MouseEvent):void
		{
			if(divider.numChildren > 0){
				var child:DisplayObject = divider.getChildAt(0);
				dividerIndex = child.parent.parent.getChildIndex(child.parent);
				if(child.hitTestPoint(stage.mouseX, stage.mouseY) == false){
					super.startDividerDrag(divider, trigger);
				}else{
					var newState:String = (getStyle("dividerSkin") == getStyle("collapseBoxDividerSkin") ? EXPAND : COLLAPSE);
					if(openDirection == OPEN_RIGHT){
						state = newState;
					}else{
						state = (newState == EXPAND ? COLLAPSE : EXPAND);
					}
				}
			}
		}
		
		override mx_internal function changeCursor(divider:BoxDivider):void
		{
			if (cursorID == CursorManager.NO_CURSOR && divider.numChildren > 0)
			{
				var child:DisplayObject = divider.getChildAt(0);
				if(child.hitTestPoint(stage.mouseX, stage.mouseY) == false){
					var cursorClass:Class = isVertical() ?
											getStyle("verticalDividerCursor") as Class :
											getStyle("horizontalDividerCursor") as Class;
	
					cursorID = CursorManager.setCursor(cursorClass,
													   CursorManagerPriority.HIGH, 0, 0);
				}else if(_knobToolTip){
					_knobToolTip.move(stage.mouseX + 10, stage.mouseY + 10);
					_knobToolTip.visible = true;
				}
			}
		}
		
		override mx_internal function restoreCursor():void
		{
			if(_knobToolTip){
				_knobToolTip.visible = false;
			}
			if (cursorID != CursorManager.NO_CURSOR)
			{
				CursorManager.removeCursor(cursorID);
				cursorID = CursorManager.NO_CURSOR;
			}
		}
		
		override protected function updateDisplayList(unscaledWidth:Number,
                                                  unscaledHeight:Number):void
    	{
    		super.updateDisplayList(unscaledWidth, unscaledHeight);
			
			var fillColors:Array = getStyle("dividerFillColors");
            var borderColor:Number = getStyle("dividerBorderColor");
            var matrix:Matrix = new Matrix();
            var fillType:String = GradientType.LINEAR;
        	var alphas:Array = [1, 1];
        	var ratios:Array = [0, 255];
        	
        	if(fillColors == null || isNaN(borderColor))
        		return;

            for(var i:int=0;i < numDividers;i++) {
                var divider:BoxDivider = getDividerAt(i);
				_dividerWidth = divider.getStyle("dividerAffordance");
                
                graphics.clear();
                graphics.lineStyle(1, borderColor);
                if(direction == BoxDirection.VERTICAL){
                    matrix.createGradientBox(divider.width, _dividerWidth, Math.PI/2, divider.x, divider.y);
					graphics.beginGradientFill(fillType, fillColors, alphas, ratios, matrix);
                    graphics.drawRect(divider.x, divider.y, divider.width, _dividerWidth);
                }else{
                	matrix.createGradientBox(_dividerWidth, divider.height, 0, divider.x, divider.x);
					graphics.beginGradientFill(fillType, fillColors, alphas, ratios, matrix);
                    graphics.drawRect(divider.x, divider.y, _dividerWidth, divider.height);
                }
                graphics.endFill();               
            }    
    	}
	}
}

Open in new window

0
 
dgofmanCommented:
You need also my assets.swf file I am attaching FLA compile and drop SWF into your src directory
assets.fla
0
Cyber Threats to Small Businesses (Part 1)

This past May, Webroot surveyed more than 600 IT decision-makers at medium-sized companies to see how these small businesses perceived new threats facing their organizations.  Read what Webroot CISO, Gary Hayslip, has to say about the survey in part 1 of this 2-part blog series.

 
dgofmanCommented:
0
 
alamflexAuthor Commented:
Thanks for your reply.I need to apply same functionality to left hand pane also as with right hand pane.
Here i need to move the panel not hiding the pane suddenly.There should be some moment like with right hand pane.Plz change accordingly and send me the updated code.

Thanks,
Alam.
0
 
dgofmanCommented:
Hi Alam,
May be you can ask experts to fix my probelm if you wil not het answer in one-two days I will try to fix for you. But currently I am busy till Sunday.
Sorry,
David
0
 
alamflexAuthor Commented:
can u try to remove the right hand panel bar.
Here i don't require bar which appears on right hand panel.
If you see for left hand panel there is no bar exists.For right hand panel i don't require that bar.
You can see that in red color.

Plz find below screenshot.

Also plz find below updated code

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" applicationComplete="init()" xmlns:local="*" >
        
        <mx:Style>
                CustomDividedBox{
                        dividerAffordance:10;
                        dividerBorderColor:#3387A7;
                        dividerFillColors:#ffffff,#bad2f0;
                        collapseBoxDividerSkin: Embed(source="assets.swf",symbol="CollapseBoxDividerSkin");
                        expandBoxDividerSkin: Embed(source="assets.swf",symbol="ExpendBoxDividerSkin");
                }
        </mx:Style>
        <mx:Script>
                <![CDATA[
                        import DrawingClasses.Designer;
                        
                        import mx.controls.Alert;
                        import mx.core.DragSource;
                        import mx.core.UIComponent;
                        import mx.events.DragEvent;
                        import mx.events.ListEvent;
                        import mx.managers.DragManager;
                        
                        
                        [Bindable]
                        [Embed(source="/Images/line.png")] 
                        public var linePicture:Class; 
                        [Bindable]
                        [Embed(source="/Images/box.png")] 
                        public var boxPicture:Class;
                        
                        [Bindable]
                        public var xm:XML = 
                                <AbstractComponentTemplate></AbstractComponentTemplate>;
                        
                        public var compType:XML = 
                                <ComponentTemplateDescriptor>
                                        <Owner>BackTesting</Owner>
                                        <Name>Component</Name>
                                        <Version>1</Version>
                                </ComponentTemplateDescriptor>;
                        
                        
                        [Bindable]
                        private var cm:ContextMenu;             
                        
                        public var xm1:XML;
                        
                        public var loopparent:Array = new Array();
                        
                        private var mouseTarget:DisplayObject;
                        private var xOff:Number;
                        private var yOff:Number;        
                        private var designer:Designer = new Designer();   
                        private var i:int;
                        private var j:int;
                        
                        private function init():void
                        {
                                designer.setDesignArea(designArea);                     
                                
                                var cmi1:ContextMenuItem = new ContextMenuItem("Properties", true);
                                cmi1.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, contextMenuItem_propertiesSelect);
                                
                                var cmi2:ContextMenuItem = new ContextMenuItem("View XML", true);
                                cmi2.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, contextMenuItem_viewXMLSelect);
                                
                                var cmi3:ContextMenuItem = new ContextMenuItem("Saved Components", true);
                                cmi3.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, contextMenuItem_savedListSelect);                      
                                
                                cm = new ContextMenu();
                                cm.hideBuiltInItems();
                                cm.customItems = [cmi1, cmi2, cmi3];
                                cm.addEventListener(ContextMenuEvent.MENU_SELECT, contextMenu_menuSelect);
                        }
                        
                        private function contextMenu_menuSelect(evt:ContextMenuEvent):void {
                                
                        }
                        
                        private function contextMenuItem_propertiesSelect(evt:ContextMenuEvent):void {
                                panelRight.width = 260;         
        
					        Alert.show("properties");
                                //vDivProp.moveDivider(0, 400);
                                //accrWinProp.label = "Two Way Split - Properties";                             
                                //accrWinProp.selectedIndex = 1;
                        }
                        
                        private function contextMenuItem_viewXMLSelect(evt:ContextMenuEvent):void {                
                                viewstack1.selectedIndex = 1;
                        }
                        
                        private function contextMenuItem_savedListSelect(evt:ContextMenuEvent):void {                
                                accrWinComp.selectedIndex = 1;
                        }               
                        
                        
                        
                        [Bindable]
                        private var propValue:String = "Component";
                        
                        private function itemClickEvent(event:ListEvent):void {
                                var propKey:String = dgProp.selectedItem.@key;
                                
                                if (propKey == "name") {
                                        propValue = dgProp.selectedItem.propvalue;                              
                                }
                        }
                        
                        [Bindable]
                        private var sourceXML:XML = 
                                <order>
                                        <!--This is a comment. -->
                                        <?PROC_INSTR sample ?>
                                        <item id='1'>
                                                <menuName>burger</menuName>
                                                <price>3.95</price>
                                        </item>
                                        <item id='2'>
                                                <menuName>fries</menuName>
                                                <price>1.45</price>
                                        </item>
                                </order>;
                                
                                [Bindable]
                                private var savedComp:Array=['ComponentTemplate', 
                                'iv85341.EquityCash.v1', 
                                'ra92724.ThreeWaySplit.EU.US.OTHERS.v1',
                                'ra92724.TwoWaySplit.EU.OTHERS.v1',
                                'ra92724.TwoWaySplit.US.OTHERS.v1',
                                'iv85341.VanillaNode.v1',
                                'iv85341.ReadGmrFs.v1'
                                ];
                        
                                [Bindable]
                                private var propData:XML = 
                                        <properties>
                                                <prop key="name">
                                                        <propvalue>Component</propvalue>
                                                        <itemRenderer>mx.controls.NumericStepper</itemRenderer>
                                                </prop>
                                                <prop key="Version">
                                                        <propvalue>1.0</propvalue>
                                                        <itemRenderer>mx.controls.NumericStepper</itemRenderer>
                                                </prop>
                                                <prop key="Owner">
                                                        <propvalue>iv85341</propvalue>
                                                        <itemRenderer>mx.controls.NumericStepper</itemRenderer>
                                                </prop>
                                                <prop key="width">
                                                        <propvalue>250</propvalue>
                                                        <itemRenderer>mx.controls.NumericStepper</itemRenderer>
                                                </prop>
                                                <prop key="height">
                                                        <propvalue>300</propvalue>
                                                        <itemRenderer>mx.controls.NumericStepper</itemRenderer>
                                                </prop>                          
                                                <prop key="X-Pos">
                                                        <propvalue>40</propvalue>
                                                        <itemRenderer>mx.controls.NumericStepper</itemRenderer>
                                                </prop>
                                                <prop key="Y-Pos">
                                                        <propvalue>20</propvalue>
                                                        <itemRenderer>mx.controls.NumericStepper</itemRenderer>
                                                </prop>
                                        </properties>;
                                                
                                                private function rightClick(event:MouseEvent):void
                                                {
                                                Alert.show("Properties ..." + event.currentTarget, "Open");
                        }
                        
                        
                        // Draging Code Starts Here
                        private var curDate:Date = new Date();
                        private var dateList:XMLList = null;
                        
                        public function pictureDragDrop(event:DragEvent):void {  
                        
                        //Alert.show (" com = " + event.dragSource.dataForFormat("key"));
                        var nodeName:String = event.dragSource.dataForFormat("key").toString(); //txtInput1.text;
                        var nodeValue:String = "";
                        if (nodeValue == "")
                        {
                        if (xm == <AbstractComponentTemplate></AbstractComponentTemplate>)      
                                {                                               
                                xm.appendChild(compType);
                                dateList = new XMLList("<DateCreated>" + curDate + "</DateCreated>");
                                xm.appendChild(dateList);                                               
                                dateList = new XMLList("<DateModified>" + curDate + "</DateModified>");
                                xm.appendChild(dateList);
                                
                                xm1 = XML("<" + nodeName + "></" + nodeName + ">");
                                xm.appendChild(xm1);
                                }
                                else
                                        {                                               
                                        i++;
                                xm1 = XML("<" + nodeName + "></" + nodeName + ">");
                                
                                xm.appendChild(xm1); 
                                //loopparent.push(xmlarray:xm1);
                                
                                loopparent[i] = xm1;                                            
                                }
                                }
                                else
                                        {
                                        
                                        
                                        var xmlList:XMLList = new XMLList("<" + nodeName + ">" + nodeValue + "</" + nodeName + ">");
                                
                                if (xm1 == null)
                                {                                       
                                xm.appendChild(xmlList); 
                                }
                                else
                                        {
                                        for (j = i; j>0; j--)
                                                {
                                                
                                                (loopparent[j]).appendChild(xmlList); 
                                                
                                                //Alert.show("alert");
                                                }                                       
                                                
                                                }
                                                }
                                                var x:int = event.currentTarget.mouseX - xOff;
                                                var y:int = event.currentTarget.mouseY - yOff;  
                                                if(event.dragSource.dataForFormat("key") == "box")
                                                {
                                                designer.addBox(x, y);   
                                                }   
                                                else  if(event.dragSource.dataForFormat("key") == "circle")
                                                {
                                                designer.addCircle(x, y);
                                                }
                                                else
                                                        {
                                                        designer.addRectangle(x, y);
                                                }
                                                
                                              }
                                                
                                                // this method gets x and y coordinate of template box image
                                                private function myoffset(img:Image):void {
                                                xOff = img.mouseX;
                                                yOff = img.mouseY;
                                                }
                                                
                                                // this method does acceptable draging box image
                                                public function pictureDragEnter(event:DragEvent):void{
                                                DragManager.acceptDragDrop(Canvas(event.target));        
                                                }
                                                
                                                // this method supply drag box when mouse move on the design area 
                                                private function dragPicture1(event:MouseEvent, img1:Image,format:String):void{
                                                var dragInitiator:Image=Image(event.currentTarget);
                                                var ds:DragSource = new DragSource();
                                                var imageProxy:Image = new Image();
                                                imageProxy.source = img1.source;            
                                                imageProxy.height= 150;
                                                imageProxy.width= 150;
                                                ds.addData(format,"key");
                                                
                                                DragManager.doDrag(dragInitiator, ds, event,imageProxy, 0, 0, 1.00);
                                                }      
                                                // this method works when click on the line button 
                                                // it is make enable to draw line
                                                public function doDrawEnable():void {
                                                
                                                designer.setIsDrawEnable(true);                 
                                                
                                                }
                                                
                                                private var fileRef:FileReference;
                                                
                                                public function createXML():void {
                                                var fileName:String = "component.xml";
                                                fileRef = new FileReference();
                                                fileRef.browse();
                                                }
                                                
                                                // Draging code ends here
                                                
                                                
                                                private function onExpand(event:Event):void {
                                                         if (event.target.dividerIndex == 1) {
                											//Alert.show("hi");
                                                                panelRight.width = 0;
                                                        }else{
                                                                panelLeft.width = 200;
                                                        } 
                                                         //       panelLeft.width=this.screen.width-100;
                                                }
                                                
                                                private function onCollapse(event:Event):void{
                                                         if(event.target.dividerIndex == 1){
                                                                panelRight.width = 260;
                                                        }else{
                                                                panelLeft.width = 0;
                                                        }
                                                         
                                              //   panelLeft.width=(this.width)/60;
                                                }
                                                
                ]]>
        </mx:Script>
        
        
        <mx:Fade id="theEffect"/>
        <mx:Resize id="resizeEffect" />
        
        <mx:ApplicationControlBar dock="true">          
                <mx:Image toolTip="Open" useHandCursor="true" buttonMode="true" mouseChildren="false" click="createXML()" />
                <mx:Image toolTip="Save" useHandCursor="true" buttonMode="true" mouseChildren="false" click="createXML()" />
                
                <mx:Image toolTip="Undo" useHandCursor="true" buttonMode="true" mouseChildren="false" />
                <mx:Image toolTip="Redo" useHandCursor="true" buttonMode="true" mouseChildren="false" />
                <mx:Image toolTip="Delete" useHandCursor="true" buttonMode="true" mouseChildren="false" />      
                <mx:Image toolTip="Print" useHandCursor="true" buttonMode="true" mouseChildren="false" />
                
                <mx:Spacer width="100%" />
                <mx:Label text="BackTesting" fontWeight="bold" fontSize="16" />
        </mx:ApplicationControlBar>
        
        <mx:Resize duration="500" id="r1"/>
        <local:CustomDividedBox width="100%" height="100%" direction="horizontal" expand="onExpand(event)" collapse="onCollapse(event)">
                <mx:VDividedBox id="panelLeft" height="100%" width="20%" resizeEffect="r1">
                        <mx:Panel title="Drawing Components" width="100%" height="100%" layout="vertical" >
                                <mx:Accordion id="accrWinComp" x="51" y="35" width="100%" height="100%">
                                        <mx:Panel label="Nodes" width="100%" height="100%" layout="vertical" borderThicknessTop="-20" paddingTop = "20" paddingLeft = "20" >
                                                <mx:Image id="box" toolTip="TwoWay Split" useHandCursor="true" buttonMode="true" source="@Embed(source='Images/box.png')" mouseMove="dragPicture1(event, box, 'box');myoffset(box);" width="28" height="28" ></mx:Image>
                                                <mx:Image id="rectangle" toolTip="MultiWay Split" useHandCursor="true" buttonMode="true" source="@Embed(source='Images/rectangle.png')" mouseMove="dragPicture1(event, rectangle, 'rectangle');myoffset(rectangle);" width="28" height="28" ></mx:Image>
                                                <mx:Image id="circle" toolTip="Reader" useHandCursor="true" buttonMode="true"  source="@Embed(source='Images/circle.png')" mouseMove="dragPicture1(event, circle, 'circle');myoffset(circle);" width="28" height="28" ></mx:Image>
                                                
                                                <mx:Button toggle="true" id="line" toolTip="Line" useHandCursor="true" buttonMode="true" icon="@Embed(source='Images/line.png')" click="doDrawEnable()" width="28" height="28"  x="279" y="10"></mx:Button>
                                          </mx:Panel>
                                        <mx:Panel label="Saved Components" width="100%" height="100%" borderThicknessTop="-20">
                                                <mx:List height="100%" width="100%" dataProvider="{savedComp}" />                                                                       
                                        </mx:Panel>
                                </mx:Accordion>         
                        </mx:Panel>
                </mx:VDividedBox>
                <mx:VDividedBox id="mp" height="100%" width="100%">
                        
                        <mx:HDividedBox width="100%" height="100%">                             
                                <mx:Canvas width="100%" height="100%" >
                                        
                                        <mx:TabBar x="0" y="10" dataProvider="viewstack1" />
                                        
                                        <mx:ViewStack id="viewstack1" width="100%" height="100%" y="32">
                                                
                                                <mx:Canvas backgroundColor="#ffffff" borderColor="0xB7BABC" borderStyle="solid" borderThickness="7" label="{propValue}" id="designArea" contextMenu="{cm}" dragEnter="pictureDragEnter(event)" dragDrop="pictureDragDrop(event)" width="100%" height="100%" >   
                                                        
                                                </mx:Canvas>
                                                
                                                <mx:Panel id="pnlXML" label="XML" width="100%" height="100%" showEffect="{theEffect}" >
                                                        <mx:ControlBar width="100%" barColor="#FF22CC">
                                                                <mx:Spacer width="100%"/>
                                                                <mx:Button id="btnSave" label="Save" useHandCursor="true" buttonMode="true" mouseChildren="false" click="createXML()" />                                        
                                                        </mx:ControlBar>
                                                        <mx:TextArea fontSize="12" wordWrap="false" textIndent="8" id="txtAreaXML" text="{xm}" width="100%" height="100%" editable="false" />                                                           
                                                </mx:Panel>
                                                
                                        </mx:ViewStack>
                                        
                                </mx:Canvas>
                        </mx:HDividedBox>               
                        
                </mx:VDividedBox>
                
                <mx:VDividedBox id="panelRight" height="100%" width="0" resizeEffect="{resizeEffect}" >
                        <!--<mx:Panel title="Component Properties" width="100%" height="100%" layout="vertical" >
                                <mx:Accordion id="accrWinProp" x="51" y="35" width="100%" height="100%">    -->                                                     
                                
                                <mx:Panel id="accrCon2" title="Component Properties" width="100%" height="100%">
                                        
                                        <mx:DataGrid id="dgProp" dataProvider="{propData.prop}" height="100%" width="100%" editable="true" itemClick="itemClickEvent(event);">
                                                <mx:columns>
                                                        <mx:DataGridColumn dataField="@key" headerText="Property" editable="false" />
                                                        <mx:DataGridColumn dataField="propvalue" headerText="Value" editable="true" />                                                                                                                                          
                                                </mx:columns>
                                        </mx:DataGrid>
                                        
                                </mx:Panel>
                                
                                <!--</mx:Accordion>
                        </mx:Panel>-->
                </mx:VDividedBox>
                
        </local:CustomDividedBox>
                
</mx:Application>

Open in new window

demo.bmp
0
 
alamflexAuthor Commented:
if you observe the output. when i click on right hand collapse panel button.The direction for left hand collapse panel changes and again i need to click to get the correct direction. This is same with the case of left hand collapse panel button. when i click on left hand collapse panel button.The direction for right hand collapse panel also changes and again i need to click to get the correct direction.

Could you plz solve my problem.
0
 
alamflexAuthor Commented:
Below is my updated CustomDividedBox.as file



package  
{
	
	import flash.display.DisplayObject;
	import flash.display.GradientType;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.geom.Matrix;
	
	import mx.containers.BoxDirection;
	import mx.containers.DividedBox;
	import mx.containers.dividedBoxClasses.BoxDivider;
	import mx.controls.ToolTip;
	import mx.core.mx_internal;
	import mx.managers.CursorManager;
	import mx.managers.CursorManagerPriority;
	import mx.managers.ToolTipManager;

	use namespace mx_internal;

	[Style(name="collapseBoxDividerSkin", type="Class", format="EmbeddedFile", inherit="no")]
	
	[Style(name="expandBoxDividerSkin", type="Class", format="EmbeddedFile", inherit="no")]
	
	[Event(name="collapse", type="flash.events.Event")]
	
	[Event(name="expand", type="flash.events.Event")]

	[Event(name="stateChange", type="flash.events.Event")]
	
	public class CustomDividedBox extends DividedBox
	{
		private var cursorID:int = CursorManager.NO_CURSOR;
		
		public static const COLLAPSE:String = "collapse";
		public static const EXPAND:String = "expand";
		
		public static const OPEN_RIGHT:String = "right";
		public static const OPEN_LEFT:String = "left";
		
		public var dividerIndex:Number;

		private var _openDirection:String = OPEN_RIGHT;
		
		private var _state:String;
		private var _dividerWidth:Number;
		private var _knobToolTip:ToolTip;
	
		[Bindable]
		[Inspectable(enumeration="collapse,expand", defaultValue="collapse")]
		public function get state():String{
			return _state;
		}
		
		public function set state(value:String):void{
			if(_state != value){
				_state = value;
				dispatchEvent(new Event("stateChange"));
				changeDivider();
			}
		}
		[Bindable]
		[Inspectable(enumeration="right,left", defaultValue="right")]
		public function get openDirection():String{
			return _openDirection;
		}
		public function set openDirection(value:String):void{
			_openDirection = value;
		}
		
		public function get dividerWidth():Number{
			return _dividerWidth;
		}
		
		public function set dividerTooltip(value:String):void{
			if(_knobToolTip)
				ToolTipManager.destroyToolTip(_knobToolTip);
			_knobToolTip = ToolTipManager.createToolTip(value, 0, 0) as ToolTip;
			_knobToolTip.visible = false;
		}
		
		protected function changeDivider():void{
			if(openDirection == OPEN_LEFT){
				if(state == COLLAPSE){
					setStyle("dividerSkin", getStyle("expandBoxDividerSkin"));
					dispatchEvent(new Event(COLLAPSE));
				}else{
					setStyle("dividerSkin", getStyle("collapseBoxDividerSkin"));
					dispatchEvent(new Event(EXPAND));
				}
			}else{
				if(state == COLLAPSE){
					setStyle("dividerSkin", getStyle("collapseBoxDividerSkin"));
					dispatchEvent(new Event(COLLAPSE));
				}else{
					setStyle("dividerSkin", getStyle("expandBoxDividerSkin"));
					dispatchEvent(new Event(EXPAND));
				}
			}
		}
		
		override protected function childrenCreated():void{
			super.childrenCreated();
			direction = BoxDirection.HORIZONTAL;
			changeDivider();
		}
		
		override mx_internal function startDividerDrag(divider:BoxDivider, trigger:MouseEvent):void
		{
			if(divider.numChildren > 0){
				var child:DisplayObject = divider.getChildAt(0);
				dividerIndex = child.parent.parent.getChildIndex(child.parent);
				if(child.hitTestPoint(stage.mouseX, stage.mouseY) == false){
					super.startDividerDrag(divider, trigger);
				}else{
					var newState:String = (getStyle("dividerSkin") == getStyle("collapseBoxDividerSkin") ? EXPAND : COLLAPSE);
					if(openDirection == OPEN_RIGHT){
						state = newState;
					}else{
						state = (newState == EXPAND ? COLLAPSE : EXPAND);
					}
				}
			}
		}
		
		override mx_internal function changeCursor(divider:BoxDivider):void
		{
			if (cursorID == CursorManager.NO_CURSOR && divider.numChildren > 0)
			{
				var child:DisplayObject = divider.getChildAt(0);
				if(child.hitTestPoint(stage.mouseX, stage.mouseY) == false){
					var cursorClass:Class = isVertical() ?
											getStyle("verticalDividerCursor") as Class :
											getStyle("horizontalDividerCursor") as Class;
	
					cursorID = CursorManager.setCursor(cursorClass,
													   CursorManagerPriority.HIGH, 0, 0);
				}else if(_knobToolTip){
					_knobToolTip.move(stage.mouseX + 10, stage.mouseY + 10);
					_knobToolTip.visible = true;
				}
			}
		}
		
		override mx_internal function restoreCursor():void
		{
			if(_knobToolTip){
				_knobToolTip.visible = false;
			}
			if (cursorID != CursorManager.NO_CURSOR)
			{
				CursorManager.removeCursor(cursorID);
				cursorID = CursorManager.NO_CURSOR;
			}
		}
		
		override protected function updateDisplayList(unscaledWidth:Number,
                                                  unscaledHeight:Number):void
    	{
    		super.updateDisplayList(unscaledWidth, unscaledHeight);
			
			var fillColors:Array = getStyle("dividerFillColors");
            var borderColor:Number = getStyle("dividerBorderColor");
          //  var matrix:Matrix = new Matrix();
            var fillType:String = GradientType.LINEAR;
        	var alphas:Array = [1, 1];
        	var ratios:Array = [0, 255];
        	
        	if(fillColors == null || isNaN(borderColor))
        		return;

            for(var i:int=0;i < numDividers;i++) {
                var divider:BoxDivider = getDividerAt(i);
				_dividerWidth = divider.getStyle("dividerAffordance");
                
                graphics.clear();
                graphics.lineStyle(1, borderColor);
                if(direction == BoxDirection.VERTICAL){
                   // matrix.createGradientBox(divider.width, _dividerWidth, Math.PI/2, divider.x, divider.y);
					//graphics.beginGradientFill(fillType, fillColors, alphas, ratios, matrix);
                    graphics.drawRect(divider.x, divider.y, divider.width, _dividerWidth);
                }else{
                	//matrix.createGradientBox(_dividerWidth, divider.height, 0, divider.x, divider.x);
					//graphics.beginGradientFill(fillType, fillColors, alphas, ratios, matrix);
                    graphics.drawRect(divider.x, divider.y, _dividerWidth, divider.height);
                }
                graphics.endFill();               
            }    
    	}
	}
}

Open in new window

0

Featured Post

Meet the Family that is Made for Collaboration

The TeamConnect Family product group as part of the Sennheiser for Business Portfolio comprising high-quality, technically well-conceived meeting solutions for business communication – designed for any meeting room and any meeting situation.

  • 5
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now