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

How to show particular symbol when a button is pressed?

How to show particular symbol when a button is pressed?
For Eg:
If you look in to paintbrush when ever we select a line button corresponding a star icon appears in the drawing area.
How can we do this in flex.
Plz find below attachement for your reference.
Demo.doc
0
alamflex
Asked:
alamflex
  • 2
  • 2
1 Solution
 
deepanjandasCommented:
Add a MouseEvent.MOUSE_DOWN listener to a button on press of which you want to display the symbol.

In the event handler create a symbol and add it to stage using addChild();

Warm Regards
Deepanjan Das
0
 
alamflexAuthor Commented:
Can you share me the full code. or add necessary changes to my code.
0
 
alamflexAuthor Commented:
Can you share me the full code. or add necessary changes to my code.
<?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;
		import mx.managers.CursorManager;
 
            [Bindable]
            [Embed(source="/images2/pencil.png")]
            private var PencilIcon:Class;

			private var cursorID:int;


		[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 {
				accrCon2.label = "Two Way Split - Properties";				
				accrWin.selectedIndex = 1;
        }
		
		private function contextMenuItem_viewXMLSelect(evt:ContextMenuEvent):void {                
				viewstack1.selectedIndex = 1;
        }
		
		private function contextMenuItem_savedListSelect(evt:ContextMenuEvent):void {                
				accrWin.selectedIndex = 0;
        }
		
		[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:HDividedBox width="100%" height="100%">
		<mx:VDividedBox height="100%" width="20%">			
				<mx:Panel title="Drawing Components" width="100%" height="100%" layout="vertical" >
						
								<mx:Panel title="Nodes" width="100%" height="100%" layout="vertical">
									<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" x="84" y="6"></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" x="160" y="10"></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" x="120" y="8"></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:Button  toggle="true"  buttonMode="true" useHandCursor="true"  id="line" icon="@Embed(source='/images2/line.png')"  keyDown='Alert.show("key pressed");' click="doDrawEnable()" width="28" height="28"/>
																						
		
									<!--<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>
		</mx:VDividedBox>
		<mx:VDividedBox height="100%" width="60%">
			
				<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 height="100%" width="20%">
			<mx:Panel title="Saved Components and Properties" width="100%" height="100%" layout="vertical" >
				<mx:Accordion id="accrWin" x="51" y="35" width="100%" height="100%">
				
								<mx:Canvas label="Saved Components" width="100%" height="100%">
									<mx:List height="100%" width="100%" dataProvider="{savedComp}" />									
								</mx:Canvas>
								
								<mx:Canvas id="accrCon2" label="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:Canvas>
								
					</mx:Accordion>
			</mx:Panel>
		</mx:VDividedBox>
		
	</mx:HDividedBox>
	
	
	<mx:ApplicationControlBar dock="true">		
		<mx:Image source="images/Openfile.gif" toolTip="Open" useHandCursor="true" buttonMode="true" mouseChildren="false" click="createXML()" />
		<mx:Image source="images/Savefile.gif" toolTip="Save" useHandCursor="true" buttonMode="true" mouseChildren="false" click="createXML()" />
		
		<mx:Image source="images/Undo.gif" toolTip="Undo" useHandCursor="true" buttonMode="true" mouseChildren="false" />
		<mx:Image source="images/Redo.gif" toolTip="Redo" useHandCursor="true" buttonMode="true" mouseChildren="false" />
		<mx:Image source="images/Delete.gif" toolTip="Delete" useHandCursor="true" buttonMode="true" mouseChildren="false" />	
		<mx:Image 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:Application>

Open in new window

0
 
deepanjandasCommented:
So which is the button you want to press and which is the instance you want to add in your code?

Warm Regards
Deepanjan Das
0

Featured Post

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.

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