• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 642
  • 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
Simplify Active Directory Administration

Administration of Active Directory does not have to be hard.  Too often what should be a simple task is made more difficult than it needs to be.The solution?  Hyena from SystemTools Software.  With ease-of-use as well as powerful importing and bulk updating capabilities.

 
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

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

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