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
alamflexAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Apache Flex

From novice to tech pro — start learning today.