We help IT Professionals succeed at work.

Check out our new AWS podcast with Certified Expert, Phil Phillips! Listen to "How to Execute a Seamless AWS Migration" on EE or on your favorite podcast platform. Listen Now

x

Need to highlight an image when user drag and drop in canvas

naveenm_006
naveenm_006 asked
on
Medium Priority
648 Views
Last Modified: 2012-05-11
I have two canvas.First Canvas contains some images and second canvas it's like design view where we drag and drop an image.
Here i need to highlight an image when user drag and drop in canvas. Only the image which we are dragging and dropping should be highlight.
Below is the code which i am sharing.Also if possible add dotted line next to line image.

Thanks

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initApp()">
	<mx:Script>
		<![CDATA[
			import DrawingClasses.Designer;
			import mx.core.DragSource;
			import mx.managers.DragManager;
			import mx.events.DragEvent;
			import com.adobe.viewsource.ViewSource;
			import mx.controls.Alert;
			
			[Bindable]
			[Embed(source = "/Images/xml.png")] 
			public var xmlIcon:Class; 
			[Bindable]
			[Embed(source="/Images/line.png")] 
			public var linePicture:Class; 
			[Bindable]
			[Embed(source="/Images/box.png")] 
			public var boxPicture:Class; 
			
			private var xOff:Number;
			private var yOff:Number;	  
			private var designer:Designer = new Designer();   
			public var xm:XML = <Relyon></Relyon>;
			public function initApp():void{
				designer.setDesignArea(designArea);
			}
			// this methods sets x,y coordinate of new box
			public function pictureDragDrop(event:DragEvent):void {	 
				var nodeName:String = txtInput1.text;
				var nodeValue:String = txtInput2.text;
				var xmlList:XMLList =new XMLList("<"+nodeName+">"+nodeValue+"</"+nodeName+">");
				xm.appendChild(xmlList); 
				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 function createXML():void {
				var fileName:String = "demo.xml";
                var fileRef:FileReference = new FileReference();
				fileRef.save(xm, fileName);
				
			}
		]]>
	</mx:Script>
	<mx:Canvas id="MainArea" width="100%" height="100%">
		<mx:Image id="box" source="@Embed(source='Images/box.png')" mouseMove="dragPicture1(event, box, 'box');myoffset(box);" width="28" height="28" x="84" y="6"></mx:Image>
		<mx:Image id="circle" source="@Embed(source='Images/circle.png')" mouseMove="dragPicture1(event, circle, 'circle');myoffset(circle);" width="28" height="28" x="120" y="8"></mx:Image>
		<mx:Image id="rectangle" source="@Embed(source='Images/rectangle.png')" mouseMove="dragPicture1(event, rectangle, 'rectangle');myoffset(rectangle);" width="28" height="28" x="160" y="10"></mx:Image>
		<mx:Label text="Name" x="350" y="10"/>
		<mx:TextInput id="txtInput1" width="50" height="28" x="400" y="10"/>
		<mx:Label text="Value" x="470" y="10"/>
		<mx:TextInput id="txtInput2" width="50" height="28" x="510" y="10"/>
		<mx:TextInput id="txtInput3" width="50" height="28" x="875" y="10"/>
		<mx:Label text="Drag this picture on the gray area" x="10" y="36"></mx:Label>
		<mx:Canvas id="lineContanier" width="28" height="28" backgroundColor="#c0c0c0" x="279" y="10">
		</mx:Canvas>
		<mx:Label text="Click for draw line between two box" x="225" y="36"></mx:Label>
		<mx:ComboBox x="750" y="15">
			<mx:dataProvider>
				<mx:Array>
					<mx:String> Rectangle </mx:String>
					<mx:String> Circle </mx:String>
					<mx:String> Square </mx:String>
				</mx:Array>
			</mx:dataProvider>
		</mx:ComboBox>
		
		
		
		<mx:Image source="{xmlIcon}" useHandCursor="true" buttonMode="true" click="createXML()" x="620" y="0" /> 
		
		<mx:Canvas id="designArea" dragEnter="pictureDragEnter(event)" dragDrop="pictureDragDrop(event)" top="55" width="100%" height="100%" backgroundColor="#c0c0c0">      
		</mx:Canvas>
		<mx:Image id="line" source="@Embed(source='Images/line.png')" width="28" height="28" click="doDrawEnable()" x="279" y="10"></mx:Image>
	</mx:Canvas>
</mx:Application>
Box.as
package DrawingClasses
{
	public class Box extends Shape
	{
		[Bindable]
		[Embed(source="/Images/box.png")] 
		public var boxPicture:Class; 
		
		public function Box() {
			this.source = boxPicture;   
		}
	}
}

Circle.as
package DrawingClasses
{
	public class Circle extends Shape
	{
		[Bindable]
		[Embed(source="/Images/circle.png")] 
		public var circlePicture:Class; 
		
		public function Circle(){
			this.source = circlePicture;   
		}
	}
}

Designer.as
package DrawingClasses
{
	import flash.net.URLRequestHeader;
	import mx.collections.ArrayCollection;
	import mx.containers.Canvas;
	import flash.events.MouseEvent;
	import mx.core.UIComponent;
	import mx.rpc.events.AbstractEvent;
	import mx.controls.Alert;
	
	public class Designer
	{
		private var boxes:ArrayCollection = new ArrayCollection();
		private var circles:ArrayCollection = new ArrayCollection();
		private var rectangles:ArrayCollection = new ArrayCollection();
		private var lines:ArrayCollection = new ArrayCollection();
		private var designArea:Canvas;
		private var isDrawEnable:Boolean = false;
		private var isDrawing:Boolean = false;
		private var templateLine:Line;
		private var currentFromShape:Shape;
		private var currentToShape:Shape;
		
		// designer is a manager class. 
		public function Designer(){        
			templateLine = new Line();
			templateLine.name="templateLine";
			templateLine.visible = false;
		}
		public function setIsDrawEnable(value:Boolean):void{
			this.isDrawEnable = value;
		}
		public function getIsDrawEnable():Boolean{
			return this.isDrawEnable;
		}
		public function setCurrentFromShape(value:Shape):void{
			this.currentFromShape = value;      
		}
		public function setCurrentToShape(value:Shape):void{
			this.currentToShape = value;  
		}

		public function getBoxList():ArrayCollection{
			return boxes;
		}
		public function getCircleList():ArrayCollection{
			return circles;
		}
		public function getRectangleList():ArrayCollection{
			return rectangles;
		}	
		public function getLineList():ArrayCollection{
			return lines;
		}
		private function getId(type:String):String{
			var idString:String  = type + Math.round(Math.random()*10000).toString();
			return idString;
		}
		
		// set design area and adding desing area events.    
		public function setDesignArea(value:Canvas):void{
			this.designArea = value;
			designArea.addChild(templateLine);      
			designArea.addEventListener(MouseEvent.MOUSE_MOVE,mouseMove);
			designArea.addEventListener(MouseEvent.MOUSE_UP,mouseUp);
		}
		// this method checks mouse up event on the box or not .
		// if not cancel drawing. 
		// if there is no excpation add lines
		public function mouseUp(event:MouseEvent):void{
			if (isDrawEnable){
				try{
					if (Box(event.currentTarget)!= null){
						addLine();
					}                  
				}
				catch(e:Error){
					cancelDrawing();          
				}        
			}      
		}
		//when mouse move on the design area drawing template line if isDrawing true
		public function mouseMove(event:MouseEvent):void{
			if (isDrawing){
				drawLine();  
			}
		}
		// create box 
		public function addBox(x:int, y:int):void{
			var newBox:Box = new Box();
			var id:String = getId("Box");
			newBox.setDesigner(this);
			newBox.create(x,y,id);
			boxes.addItem(newBox);     
			designArea.addChild(newBox);
		}
		// create circle
		public function addCircle(x:int, y:int):void{
			var newCircle:Circle = new Circle();
			var id2:String = getId("Circle");
			newCircle.setDesigner(this);
			newCircle.create(x,y,id2);
			circles.addItem(newCircle);
			designArea.addChild(newCircle);
		}
		// create rectangle
		public function addRectangle(x:int, y:int):void{
			var newRectangle:Rectangle= new Rectangle();
			var id3:String = getId("Rectangle");
			newRectangle.setDesigner(this);
			newRectangle.create(x,y,id3);
			rectangles.addItem(newRectangle);
			designArea.addChild(newRectangle);
		} 
		// this method works when mouse down on the box 
		// it sets first point coordinae of template line
		public function prepareDrawing():void{    
			if (isDrawEnable){
				templateLine.graphics.clear();
				templateLine.setX1(designArea.mouseX);
				templateLine.setY1(designArea.mouseY);
				templateLine.visible = true;
				isDrawing = true;      
			}  
		}
		// this methods set second coordinate of template line and draw
		public function drawLine():void{   
			if (isDrawing){
				templateLine.setX2(designArea.mouseX);
				templateLine.setY2(designArea.mouseY);
				templateLine.draw();
			}
		}
		
		// this methods create new line and add line to box and designer
		public function addLine():void{ 
			if (isDrawing){
				var newLine:Line = new Line();
				newLine.setId(getId("Line"));
				newLine.setFromShape(currentFromShape);
				newLine.setToShape(currentToShape);
				newLine.draw();        
				currentFromShape.addFromLine(newLine);
				currentToShape.addToLine(newLine);          
				lines.addItem(newLine);
				designArea.addChild(newLine);
				templateLine.visible = false;        
				isDrawEnable = false;
				isDrawing = false;        
			}
			else{
				cancelDrawing();
			}
		}
		// this methods cancel drawing
		public function cancelDrawing():void{
			templateLine.visible = false;
			isDrawEnable = false;
			isDrawing = false;
		}
	}
}

Designer.as
package DrawingClasses
{
	import flash.events.MouseEvent;
	import mx.core.UIComponent;
		
	public class Line extends UIComponent
	{
		private var thicknessNumber:uint = 2;
		private var alphaNumber:uint = 4.0;
		private var arrowWidth:int = 4;
		private var arrowHeight:int = 8;
		// x1,y1,x2,y2 this points are coordinate of line first point x,y and second 
		// poind x,y  positions on the screen
		private var x1:int;
		private var y1:int;
		private var x2:int;
		private var y2:int;
		private var color:uint = 0x000000;
		//  this box referance for find line distance
		private var fromShape:Shape;
		private var toShape:Shape;
		//  this boolean variable understand selection on,off    
		private var isSelect:Boolean=false;
		
		public function Line(){
			super();
			this.addEventListener(MouseEvent.CLICK,mouseClick);
		}
		public function setFromShape(value:Shape):void{
			this.fromShape = value;
		}
		public function setToShape(value:Shape):void{
			this.toShape = value;
		}
		public function getX1():int{
			return this.x1;
		}
		public function setX1(value:int):void{
			this.x1 = value;
		}
		public function getY1():int{
			return this.y1;
		}
		public function setY1(value:int):void{
			this.y1 = value;
		}
		public function getX2():int{
			return this.x2;
		}
		public function setX2(value:int):void{		
			this.x2 = value;
		}
		public function getY2():int{
			return this.y2;
		}
		public function setY2(value:int):void{
			this.y2 = value;
		}
		public function setId(value:String):void{
			this.id = value;
		}
		public function getId():String{
			return this.id;
		}
		public function clear():void{
			graphics.clear();
		}
		public function mouseClick(event:MouseEvent):void{
			select();
		}
		//  this method select line 
		public function select():void{
			if (!this.isSelect){
				this.color = 0xff0000;
				this.isSelect = true;
			}
			else{
				this.color = 0x000000;
				this.isSelect = false;
			}
			draw();
		}
		//  this method draw line on UIComponent graphics. 
		public function draw():void{
			if(name != "templateLine"){
				calculateCoordinate();
			}
			graphics.clear();
			//this transparent line for easy selection
			graphics.lineStyle(8,color,0.0);
			graphics.moveTo(getX1(),getY1());
			graphics.lineTo(getX2(),getY2());
			//this is real line
			graphics.lineStyle(thicknessNumber,color,alphaNumber);
			graphics.moveTo(getX1(),getY1());
			graphics.lineTo(getX2(),getY2());
			createArrow();
		}
		//Draw the arrow
		public function createArrow():void{
			var angle:Number = Math.atan2(getY2()-getY1(), getX2()-getX1());
			graphics.lineTo(getX2()-arrowHeight*Math.cos(angle)-arrowWidth*Math.sin(angle),
				getY2()-arrowHeight*Math.sin(angle)+arrowWidth*Math.cos(angle));
			graphics.lineTo(getX2(), getY2());
			graphics.lineTo(getX2()-arrowHeight*Math.cos(angle)+arrowWidth*Math.sin(angle),	
				getY2()-arrowHeight*Math.sin(angle)-arrowWidth*Math.cos(angle));										
		}
		
		//this method find which way "from" box sides.
		public function getDrawDirection():String{
			var drawDirection :String;
			var boxFromX2:int = fromShape.getX()+fromShape.getWidth();
			var boxFromY2:int = fromShape.getY()+fromShape.getHeight();
			var boxToX2:int = toShape.getX()+toShape.getWidth();
			var boxToY2:int = toShape.getY()+toShape.getHeight();
			
			if (fromShape.getX()>boxToX2 && boxFromY2<toShape.getY()){
				drawDirection = "RIGHT_TOP";
			}
			else if (fromShape.getX()>boxToX2 && fromShape.getY()>boxToY2){
				drawDirection  = "RIGHT_BOTTOM";
			}
			else if (boxFromX2<toShape.getX() && fromShape.getY()>boxToY2){
				drawDirection  = "LEFT_BOTTOM";
			}
			else if (boxFromX2<toShape.getX() && boxFromY2<toShape.getY()){
				drawDirection  = "LEFT_TOP";
			}
			else if (fromShape.getX()>boxToX2){
				drawDirection  = "RIGHT";
			}
			else if (boxFromY2<toShape.getY()){
				drawDirection  = "TOP";
			}
			else if (fromShape.getY()>boxToY2){
				drawDirection  = "BOTTOM";
			}
			else if (boxFromX2<toShape.getX()){
				drawDirection  = "LEFT";
			}
			return drawDirection;
		}
		//this methos calculate coordinate for draw line. it use two side of box distance
		private function calculateCoordinate():void{
			var drawDirection:String = getDrawDirection();
			var boxFromX2:int = fromShape.getX()+fromShape.getWidth();
			var boxFromY2:int = fromShape.getY()+fromShape.getHeight();
			var boxToX2:int = toShape.getX()+toShape.getWidth();
			var boxToY2:int = toShape.getY()+toShape.getHeight();
			var diffY:int = 0;
			var diffX:int = 0;
			
			if (drawDirection =="BOTTOM" || drawDirection =="TOP")
			{
				if (fromShape.getX()<=toShape.getX() && boxFromX2>=boxToX2){					
					diffX =(toShape.getWidth())/2;
					diffX = toShape.getX() + diffX;				
				}
				else if (fromShape.getX()>toShape.getX() && boxFromX2>boxToX2){					
					diffX =(boxToX2 - fromShape.getX())/2;
					diffX = fromShape.getX() + diffX;				
				}
				else if (fromShape.getX()<toShape.getX() && boxFromX2<boxToX2){					
					diffX =(boxFromX2 - toShape.getX())/2;
					diffX = toShape.getX() + diffX;				
				}
				else if (fromShape.getX()>toShape.getX() && boxFromX2<boxToX2){					
					diffX =(fromShape.getWidth())/2;
					diffX = fromShape.getX() + diffX;
				}
				if (diffX == 0){
					diffX = fromShape.getX() + (fromShape.getWidth()/2);
				}
			}
			if (drawDirection =="RIGHT" || drawDirection =="LEFT" ){				
				if (fromShape.getY()<=toShape.getY() && boxFromY2>=boxToY2){				
					diffY =(boxToY2 - toShape.getY())/2;					
					diffY = toShape.getY() + diffY;						
				}
				else if (fromShape.getY()>toShape.getY() && boxFromY2>boxToY2){					
					diffY =(boxToY2 - fromShape.getY())/2;
					diffY = fromShape.getY() + diffY;
				}
				else if (fromShape.getY()<toShape.getY() && boxFromY2<boxToY2){					
					diffY =(boxFromY2 - toShape.getY())/2;
					diffY = toShape.getY() + diffY;								
				}
				else if (fromShape.getY()>toShape.getY() && boxFromY2<boxToY2){					
					diffY =(fromShape.getHeight())/2;
					diffY = fromShape.getY() + diffY;															
				}				
			}
			switch (drawDirection ){
				case "RIGHT_BOTTOM":
					this.x1 = fromShape.getX()+diffX;
					this.y1 = fromShape.getY();
					this.x2 = boxToX2;
					this.y2 = boxToY2-diffY;				
					break;
				case "RIGHT_TOP":
					this.x1 = fromShape.getX();
					this.y1 = boxFromY2-diffY;
					this.x2 = boxToX2-diffX;
					this.y2 = toShape.getY();				
					break;
				case "LEFT_BOTTOM":
					this.x1 = boxFromX2-diffX;
					this.y1 = fromShape.getY() ;
					this.x2 = toShape.getX();
					this.y2 = boxToY2-diffY;				
					break;					
				case "LEFT_TOP":
					this.x1 = boxFromX2;
					this.y1 = boxFromY2-diffY;
					this.x2 = toShape.getX()+diffX;
					this.y2 = toShape.getY();				
					break;					
				case "RIGHT":
					this.x1 = fromShape.getX();
					this.y1 = diffY;
					this.x2 = boxToX2;
					this.y2 = diffY;			
					break;
				case "TOP":
					this.x1 = diffX;
					this.y1 = boxFromY2;
					this.x2 = diffX;
					this.y2 = toShape.getY();				
					break;
				case "BOTTOM":
					this.x1= diffX;
					this.y1= fromShape.getY();
					this.x2= diffX;
					this.y2= boxToY2;				
					break;
				case "LEFT":
					this.x1= boxFromX2;
					this.y1= diffY;
					this.x2= toShape.getX();
					this.y2= diffY;	
					break;
			}
		}
	}
}


Rectangle.as
package DrawingClasses
{
	public class Rectangle extends Shape
	{
		[Bindable]
		[Embed(source="/Images/rectangle.png")] 
		public var rectanglePicture:Class; 
		
		public function Rectangle() {
			this.source = rectanglePicture;   
			
		}
	}
}

Shape.as

package DrawingClasses
{
	import flash.events.MouseEvent;
	
	import mx.collections.ArrayCollection;
	import mx.controls.Image;
	
	public class Shape extends Image
	{
		private var designer:Designer;
		//  this line refrence arrays for drawing this box lines especialy when box moving
		private var fromLines:ArrayCollection = new ArrayCollection();
		private var toLines:ArrayCollection = new ArrayCollection();

		public function Shape() {
			super();
		}
		
		public function addFromLine(fromLine:Line):void {
			this.fromLines.addItem(fromLine);
		}
		public function addToLine(toLine:Line):void {
			this.toLines.addItem(toLine);
		}
		public function getFromLines():ArrayCollection {
			return this.fromLines;
		}
		public function getToLines():ArrayCollection {
			return this.toLines;
		}
		public function getWidth():int {
			return this.width;
		}
		public function getHeight():int {
			return this.height;
		}
		public function getX():int {
			return this.x;
		}
		public function getY():int {
			return this.y;
		}
		public function setDesigner(value:Designer):void {
			this.designer = value;
		}

		// when box create from Image Class adding this events for listening mouse movement 
		public function create(x:int,y:int,id:String):void {
			this.x = x;
			this.y = y;
			this.id = id;
			this.addEventListener(MouseEvent.MOUSE_DOWN,mouseDown);
			this.addEventListener(MouseEvent.MOUSE_MOVE,mouseMove);
			this.addEventListener(MouseEvent.MOUSE_UP,mouseUp);
		}

		// mouse down event define start drawing line or draging box 
		//if line button click before, it sets mouse coordinate as firt points of line
		//if line button dosen't click it sets dragable of box
		private function mouseDown(event:MouseEvent):void {
			if (!designer.getIsDrawEnable()){
				this.startDrag();  
			}
			else{
				designer.prepareDrawing(); 
				designer.setCurrentFromShape(this);
				
			}      
		}
		//mouse move events works when box draging 
		//if this box has line this methods draws it
		private function mouseMove(event:MouseEvent):void {
			if (fromLines.length>0){
				drawFromLines();  
			}
			if (toLines.length>0){
				drawToLines();  
			}        
		}
		// this medthods draw "from direction" lines with updated coordinate 
		public function drawFromLines():void {
			for (var i:int=0;i<fromLines.length;i++){
				Line(fromLines[i]).draw();
			}
		}
		// this medthods draw "to direction" lines with updated coordinate 
		public function drawToLines():void {
			for (var i:int=0;i<toLines.length;i++){
				Line(toLines[i]).draw();
			}
		}
		
		//mouse up events define stop box dragging or finish drawing line
		//if finish drawing line it sets mouse coordinate as last points of line  
		//if stop draging it sets stop drag 
		private function mouseUp(event:MouseEvent):void {
			if (!designer.getIsDrawEnable()){
				this.stopDrag();
			}
			else{  
				designer.setCurrentToShape(this);
				designer.addLine();
			}      
		}

	}
}

Open in new window

box.png
circle.png
line.png
rectangle.png
xml.png
Comment
Watch Question

Author

Commented:
added new tag(flash)
Top Expert 2011

Commented:
Create DragImage.as class

package DrawingClasses
{
	import flash.display.CapsStyle;
	import flash.display.GradientType;
	import flash.display.Graphics;
	import flash.display.JointStyle;
	import flash.display.SpreadMethod;
	import flash.events.MouseEvent;
	import flash.geom.Matrix;
	
	import mx.controls.Image;
	import mx.core.DragSource;
	import mx.events.DragEvent;
	import mx.managers.DragManager;

	public class DragImage extends Image
	{
		private var gap:uint = 5;
		private var isDrag:Boolean = false;

		public function DragImage(){
			super();
			addEventListener(MouseEvent.MOUSE_DOWN, doDragStart);
			addEventListener(DragEvent.DRAG_COMPLETE, endDragHandler);
		}
		
		private function endDragHandler(event:DragEvent):void{
			isDrag = false;
			invalidateDisplayList();
		}

		private function doDragStart(event:MouseEvent):void 
		{
			isDrag = true;
			invalidateDisplayList();

			var dragInitiator:DragImage = event.currentTarget as DragImage;
			var dragSource:DragSource = new DragSource();
			var imageProxy:Image = new Image();
			imageProxy.source = source;
			imageProxy.height= 150;
			imageProxy.width= 150;
			dragSource.addData(id, "key");
			DragManager.doDrag(dragInitiator, dragSource, event, imageProxy, 0, 0, 1.00);
		}

		override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
		{
			var g:Graphics = graphics;
			g.clear();

			super.updateDisplayList(unscaledWidth, unscaledHeight);

			trace(this + "+++++"+ isDrag);
			if(isDrag == true){
				var gradientBoxMatrix:Matrix = new Matrix(); 
				gradientBoxMatrix.createGradientBox(4, 4, Math.PI/4, 2, 2); 
				g.lineStyle(2, 0x000000,0.5,false, "normal", CapsStyle.ROUND, JointStyle.ROUND, 2); 
				g.lineGradientStyle(GradientType.LINEAR, [0x000000, 0x000000], [1, 0], [0, 100], gradientBoxMatrix, SpreadMethod.REPEAT); 
				g.drawRect(-gap, -gap, unscaledWidth + (gap * 2), unscaledHeight + (gap * 2));
			}
		}
	}
}

Open in new window



and update MXML file

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initApp()" xmlns:DrawingClasses="DrawingClasses.*">
	<mx:Script>
		<![CDATA[
			import DrawingClasses.Designer;
			import mx.core.DragSource;
			import mx.managers.DragManager;
			import mx.events.DragEvent;
			import com.adobe.viewsource.ViewSource;
			import mx.controls.Alert;
			
			[Bindable]
			[Embed(source = "/Images/xml.png")] 
			public var xmlIcon:Class; 
			[Bindable]
			[Embed(source="/Images/line.png")] 
			public var linePicture:Class; 
			[Bindable]
			[Embed(source="/Images/box.png")] 
			public var boxPicture:Class; 
			
			private var xOff:Number;
			private var yOff:Number;	  
			private var designer:Designer = new Designer();   
			public var xm:XML = <Relyon></Relyon>;
			public function initApp():void{
				designer.setDesignArea(designArea);
			}
			// this methods sets x,y coordinate of new box
			public function pictureDragDrop(event:DragEvent):void {	 
				var nodeName:String = txtInput1.text;
				var nodeValue:String = txtInput2.text;
				var xmlList:XMLList =new XMLList("<"+nodeName+">"+nodeValue+"</"+nodeName+">");
				xm.appendChild(xmlList); 
				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 works when click on the line button 
			// it is make enable to draw line
			public function doDrawEnable():void{
				designer.setIsDrawEnable(true);
			}
			private function createXML():void {
				var fileName:String = "demo.xml";
				var fileRef:FileReference = new FileReference();
				fileRef.save(xm, fileName);
				
			}
		]]>
	</mx:Script>
	<mx:Canvas id="MainArea" width="100%" height="100%">
		<DrawingClasses:DragImage id="box" source="@Embed(source='Images/box.png')" mouseMove="myoffset(box);" width="28" height="28" x="84" y="6"/>
		<DrawingClasses:DragImage id="circle" source="@Embed(source='Images/circle.png')" mouseMove="myoffset(circle);" width="28" height="28" x="120" y="6"/>
		<DrawingClasses:DragImage id="rectangle" source="@Embed(source='Images/rectangle.png')" mouseMove="myoffset(rectangle);" width="28" height="28" x="160" y="6"/>
		<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:TextInput id="txtInput3" width="50" height="28" x="875" y="10"/>
		<mx:Label text="Drag this picture on the gray area" x="10" y="36"></mx:Label>
		<mx:Canvas id="lineContanier" width="28" height="28" backgroundColor="#c0c0c0" x="279" y="10">
		</mx:Canvas>
		<mx:Label text="Click for draw line between two box" x="225" y="36"></mx:Label>
		<mx:ComboBox x="750" y="15">
			<mx:dataProvider>
				<mx:Array>
					<mx:String> Rectangle </mx:String>
					<mx:String> Circle </mx:String>
					<mx:String> Square </mx:String>
				</mx:Array>
			</mx:dataProvider>
		</mx:ComboBox>
		
		
		
		<mx:Image source="{xmlIcon}" useHandCursor="true" buttonMode="true" click="createXML()" x="620" y="0" /> 
		
		<mx:Canvas id="designArea" dragEnter="pictureDragEnter(event)" dragDrop="pictureDragDrop(event)" top="55" width="100%" height="100%" backgroundColor="#c0c0c0">      
		</mx:Canvas>
		<mx:Image id="line" source="@Embed(source='Images/line.png')" width="28" height="28" click="doDrawEnable()" x="279" y="10"></mx:Image>
	</mx:Canvas>
</mx:Application>

Open in new window

Top Expert 2011
Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION

Author

Commented:
How to generate xml file in the below format
I am supplying nodename and and node value through input fields in the browser.

<root>
<first><firstchild>10</firstchild></first>
<second>20</second>
</root>

Also i am sharing the attachement.
could you plz tell me the sol for this query as i need urgently.

Thanks
Naveen.


flowcahart.bmp
Top Expert 2011

Commented:
That is new question :)

Close this one and open a new question.

By the way upload your code to searchforge or I like http://code.google.com/hosting/createProject

And Experts will able to upload from Google SVN server
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.