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

Collapsible Panel Buttons not functioning properly

Collapsible Panel Buttons not functioning properly.

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.

Provide me with some sample code.

Thanks,
Alam.
Main.mxml
---------
<?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;
						import mx.managers.CursorManagerPriority;
						import mx.managers.CursorManager;
						
						import mx.core.IFlexDisplayObject;
						import mx.core.mx_internal;
						import mx.events.FlexEvent;
      
					//	[Embed("/cursors/cc.png")]
					//	private var customCursor:Class;
                        
						
						[Embed(source="Images/image1.png")]
						[Bindable] private var defaultImg:Class;
						[Embed(source="Images/image2.png")]
						[Bindable] private var overImg:Class;
			
						[Bindable] private var isOver:Boolean = false;
						
                        [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 {                
                                viewstack.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 function showCursor():void
												//{
												//CursorManager.setCursor(customCursor,CursorManagerPriority.HIGH,3,2);
												//}
                                                
                                                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;
                                                }
												
					protected function changeIconSize(event:FlexEvent):void
                  {
                        var button:Button = event.target as Button;
                        var icon:IFlexDisplayObject = button.mx_internal::currentIcon;
                        icon.width = 15;
                        icon.height = 15;
                        button.invalidateDisplayList();
                  }

												
                ]]>
        </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="250" 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"  source="{isOver ? overImg : defaultImg}"  mouseOver="isOver = true"  mouseOut="isOver = false" toolTip="TwoWay Split" useHandCursor="true" buttonMode="true"  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 label="Show Cursor" click="showCursor()" x="10" y="59" width="115"/>-->

                                                <!--<mx:Button id="line" toggle="true" icon="@Embed(source='Images/line.png')" toolTip="Line" useHandCursor="true" buttonMode="true" click="doDrawEnable()" width="28" height="28"  x="279" y="10"></mx:Button>-->
												 <mx:Button id="line" toggle="true" paddingLeft="1" paddingRight="1" icon="@Embed(source='Images/line.png')" toolTip="Line" 
												useHandCursor="true" buttonMode="true" click="doDrawEnable()" creationComplete="changeIconSize(event)"/>
                                          </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="viewstack"/>
                                        
                                        <mx:ViewStack id="viewstack" 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>  


CustomDividedBox.as
-------------------
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

assets.swf
box.png
circle.png
line.png
rectangle.png
0
alamflex
Asked:
alamflex
  • 4
  • 3
1 Solution
 
alamflexAuthor Commented:
PFA
demo.bmp
0
 
dgofmanCommented:
Here is my workaround.

Modified your exapnd and collapse functions

private function onExpand(event:Event):void {
							if (event.currentTarget == div1) {
								panelRight.width = 0;
							}else{
								panelLeft.width = 200;
							}
						}
						
						private function onCollapse(event:Event):void{
							if(event.currentTarget == div1){
								panelRight.width = 260;
							}else{
								panelLeft.width = 0;
							}
						}

Open in new window

0
 
dgofmanCommented:
Change MXML declaration for Collapsed panels

	<local:CustomDividedBox id="div1" width="100%" height="100%" direction="horizontal" expand="onExpand(event)" collapse="onCollapse(event)">
		<local:CustomDividedBox id="div2" 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"  source="{isOver ? overImg : defaultImg}"  mouseOver="isOver = true"  mouseOut="isOver = false" toolTip="TwoWay Split" useHandCursor="true" buttonMode="true"  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 label="Show Cursor" click="showCursor()" x="10" y="59" width="115"/>-->
							
							<!--<mx:Button id="line" toggle="true" icon="@Embed(source='Images/line.png')" toolTip="Line" useHandCursor="true" buttonMode="true" click="doDrawEnable()" width="28" height="28"  x="279" y="10"></mx:Button>-->
							<mx:Button id="line" toggle="true" paddingLeft="1" paddingRight="1" icon="@Embed(source='Images/line.png')" toolTip="Line" 
									   useHandCursor="true" buttonMode="true" click="doDrawEnable()" creationComplete="changeIconSize(event)"/>
						</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="viewstack"/>
						
						<mx:ViewStack id="viewstack" 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>
		</local:CustomDividedBox>
		<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>

Open in new window

0
Improve Your Query Performance Tuning

In this FREE six-day email course, you'll learn from Janis Griffin, Database Performance Evangelist. She'll teach 12 steps that you can use to optimize your queries as much as possible and see measurable results in your work. Get started today!

 
alamflexAuthor Commented:
Thanks for your solution.I also have another problem with collapsible panel.
After drag and drop images into drawing area and if you right click properties it will open properties panel.But again if you want to close properties panel we need to clcik the button twice to close the properties panel.Also direction is not changing accordingly.
can you plz reslove this issue.

Thanks,
Alam.
0
 
dgofmanCommented:
its already resolved check my solution
0
 
alamflexAuthor Commented:
The solution which you have provided is working fine but this is another problem which i am facing problem. When i drag and drop images into drawing area and if you right click properties it will open properties panel.But again if you want to close properties panel we need to clcik the button twice to change the direction then only it will close the properties panel.Also direction is not changing accordingly.

Can you try at your end once and plz let me know the solution.

Thanks,
Alam.

0
 
dgofmanCommented:
private function contextMenuItem_propertiesSelect(evt:ContextMenuEvent):void {
  div1.state = (div1.state == CustomDividedBox.COLLAPSE ? CustomDividedBox.EXPAND : CustomDividedBox.COLLAPSE);
}
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Managing Security & Risk at the Speed of Business

Gartner Research VP, Neil McDonald & AlgoSec CTO, Prof. Avishai Wool, discuss the business-driven approach to automated security policy management, its benefits and how to align security policy management with business processes to address today's security challenges.

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