Ronnie

Ronnie

  • Name: Praveen
  • Favorite Languages: Java, Flex, C++, PERL, Python
  • Website: [not set]
  • Location: Chennai
  • About Me: [not set]

Recent Comments

  • Simple Flex Drag and Drop
    06/07/2010 - 06:17

    Hi Fattest,
    I wanna drag and drop buttons from a list to a canvas. Imagine u have a set of images that u can drag and drop onto a canvas. In place of these images i want buttons. I tried but when i drag and drop, the button disappears from the list. Please let me know how i can just replicate the button in the list onto the canvas when i drag and drop. Please check my code below:

    public function dragButton(e:MouseEvent):void
    {
    if(e.buttonDown)
    {
    var button:Button = e.currentTarget as Button;
    var buttonProxy:Button = new Button();
    buttonProxy.width = button.width;
    buttonProxy.height = button.height;
    var dragSource:DragSource = new DragSource();
    dragSource.addData(button, ‘button’);
    DragManager.doDrag(button, dragSource, e);
    }
    }
    public function dragEnter(event:DragEvent): void
    {
    var target:Canvas = event.currentTarget as Canvas;
    if (event.dragSource.hasFormat(‘button’))
    {
    DragManager.acceptDragDrop(target);
    DragManager.showFeedback(DragManager.COPY);
    }
    }
    public function dragDrop(event:DragEvent): void
    {
    var target:Canvas = event.currentTarget as Canvas;
    var button:Button = event.dragSource.dataForFormat(‘button’) as Button;
    button.x = event.localX;
    button.y = event.localY;
    networkStage.addChild(button);
    }

    <mx:VBox height="100%" width="100%">
                           
    <mx:Accordion width="100%" height="60%" id="Components" selectedIndex="0"
                    historyManagementEnabled="false">
                 
    <mx:HBox id="butt">    
            <mx:Button contextMenu="{buttonMenu}" name="Trans" icon="{transIcon}"
                                                            id="transBut" buttonMode="true" useHandCursor="true" />
            <mx:Button contextMenu="{buttonMenu}" name="IsoTrans" icon="{recIcon}"
                                                            id="recBut" useHandCursor="true" buttonMode="true" />
            <mx:Button contextMenu="{buttonMenu}" name="UP" icon="{linuxIcon}"
                                                            id="linuxBut" useHandCursor="true" buttonMode="true" />
            <mx:Button contextMenu="{buttonMenu}" name="PD" icon="{vmIcon}"
                                                            id="vmBut" useHandCursor="true" buttonMode="true" />
    </mx:HBox>
    </mx:Accordion>

  • Simple Flex Drag and Drop
    04/19/2010 - 03:58

    Hi Fattest,
    I have been able to display the image now on the panel. The changed dropIt() function is as follows:

    private function dropIt(event:MouseEvent):void
    {

    // Get the drag initiator component from the event object.

    var dragInitiator:Image = event.currentTarget as Image;
       
    // Create a DragSource object.

    var dragSource:DragSource = new DragSource();
       
       
    // Create a copy of the image to use as a drag proxy.

    var dragProxy:Image = new Image();
    dragProxy.source = event.currentTarget.source;
    dragProxy.setActualSize(event.currentTarget.width,event.currentTarget.height)
                   
    }

    Now once this image is displayed, i wanna be able to drag them anywhere on the panel, and connect different images by lines/arrows.
    Your insights would be much appreciated. Thanks in advance :)

  • Simple Flex Drag and Drop
    04/19/2010 - 01:37

    Hi Fattest,
    Thx for the reply. After displaying the image, i want to be able to consider it as a component and be able to drag and drop it anywhere in the panel. I also nee d to connect such images by clicking on one image and drag over to the other image and release the mouse. Any insights on this one would be really helpful..
    Thanks in advance :)

  • Simple Flex Drag and Drop
    04/13/2010 - 06:33

    Plz find the entire code below and let me know what i am missing?

    Code:

    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">

    <mx:Script>
            <![CDATA[
           
                    import mx.core.DragSource;
                    import mx.core.IUIComponent;
                    import mx.managers.DragManager;
                    import mx.events.DragEvent;
                    import mx.controls.Alert;
                    import mx.controls.Image;
                    import flash.display.*;
                    import flash.events.MouseEvent;

                   
                   
                    public function init():void{
                                   
                                    // a mouseDown event will start the drag
                                    this.rec.addEventListener(MouseEvent.MOUSE_DOWN, beginDrag);
                                    this.roundRec.addEventListener(MouseEvent.MOUSE_DOWN, beginDrag);
                                    this.linux.addEventListener(MouseEvent.MOUSE_DOWN, beginDrag);
                                   
                                    // a mouseMove event will draw the lines
                                    //this.stage.addEventListener(MouseEvent.MOUSE_MOVE, handleMove);
                                   
                                    // accepting a drag drop operation
                                    this.networkStage.addEventListener(DragEvent.DRAG_ENTER, acceptDrop);
                                   
                                    // handling the drop
                                    this.networkStage.addEventListener(DragEvent.DRAG_DROP, handleDrop);
                                   
                            }
                           
           
                    public function beginDrag(mouseEvent:MouseEvent):void{
                                   
                                   
                                    // the img is the object being dragged(target of the mouse event)
                                    var dragInitiator:Image = mouseEvent.currentTarget as Image;
                                    var dragImg:Image = new Image();
                                    dragImg.source = dragInitiator.source;
                                     
                                    // drag source contains data about what is being dragged  
                                    var dragSource:DragSource = new DragSource();
                                    // add some data to the dragSource
                                    dragSource.addData(dragInitiator, 'img');
                                     
                                    // ask the drag manager to begin the drag  
                                    DragManager.doDrag(dragInitiator, dragSource, mouseEvent, dragImg);
                                   
                            }
                           
                            public function acceptDrop(dragEvent:DragEvent):void{
                                   
                                    var dropTarget:Panel = dragEvent.currentTarget as Panel;
                                     //var dropTarget:IUIComponent = dragEvent.currentTarget as IUIComponent;
                                     var dragSource:DragSource = dragEvent.dragSource;
                                     
                                    // accept the drop
                                    DragManager.acceptDragDrop(dropTarget) ;
                                   
                                    // show feeedback
                                    DragManager.showFeedback(DragManager.LINK);
                                   
                            }
                           
                            public function handleDrop(dragEvent:DragEvent):void{
                                   
                                    //var dragInitiator:Image = dragEvent.dragInitiator;
                                    var dragInitiator:Image = dragEvent.dragSource.dataForFormat('img') as Image;

                                    var dropTarget:Panel = dragEvent.currentTarget as Panel;
                               
                                 
                                    Alert.show(" You dropped the rectangle on the screen");
                               
                                Image(dragEvent.dragInitiator).x =
                       Panel(dragEvent.currentTarget).mouseX;
                   Image(dragEvent.dragInitiator).y =
                       Panel(dragEvent.currentTarget).mouseY;

                                   
                            }
                   
                   
            ]]>
    </mx:Script>





            <mx:Canvas width="100%" height="100%">
            <mx:HBox width="100%" height="100%">
           
                    <mx:Panel width="30%" height="100%" title="">
                            <mx:Accordion width="100%" height="100%" id="Components" selectedIndex="0" historyManagementEnabled="false">
                                    <mx:HBox label="Shapes" horizontalAlign="left" verticalAlign="top" width="100%"
                                     height="100%">
                                            <mx:Image name="Rectangle" source="assets/images/rec.jpg" id="rec"/>
                                            <mx:Image name="Round Rectangle" source="assets/images/roundrec.gif" id="roundRec"/>
                                            <mx:Image name="Linux" source="assets/images/linux.png" id="linux"/>
                                    </mx:HBox>
                                    <mx:HBox label="Links/Arrows" horizontalAlign="left" verticalAlign="top" width="100%"
                                     height="100%">
                                            <mx:Image source="assets/images/link_icon.png" id="link"/>
                                            <mx:Image source="assets/images/ArrowDelta.png" id="arrowDel"/>
                                            <mx:Image source="assets/images/ArrowDiamond.png" id="arrowDiam"/>
                                    </mx:HBox>
                                    <mx:HBox label="Arrows" horizontalAlign="left" verticalAlign="top"
                                     width="100%" height="100%">
                                           
                                    </mx:HBox>
                            </mx:Accordion>
                    </mx:Panel>
                    <mx:Panel id="networkStage" width="100%" height="100%" title="Drawing Stage">
                           
                    </mx:Panel>
                           
            </mx:HBox>
                   
            </mx:Canvas>
           
    </mx:Application>

  • Simple Flex Drag and Drop
    04/13/2010 - 05:29

    I have a list of images in an accordion. I have drag drop enabled all the images. I have a Panel which has been enabled to accept drop. But as i drop the image on the Panel i want to see the image on the Panel. Please find the code changes i have made in handleDrop() function (dragdrop() function equivalent)... How shud i enable the panel to display the image?

    Code :
    handleDrop() function:

    public function handleDrop(dragEvent:DragEvent):void{
                                   
    //var dragInitiator:Image = dragEvent.dragInitiator;

    var dragInitiator:Image = dragEvent.dragSource.dataForFormat('img') as Image;

    var dropTarget:Panel = dragEvent.currentTarget as Panel;
                               
                                 
    Alert.show(" You dropped the image on the screen");
                               
    Image(dragEvent.dragInitiator).x =
                Panel(dragEvent.currentTarget).mouseX;

    Image(dragEvent.dragInitiator).y =
                Panel(dragEvent.currentTarget).mouseY;

                                   
    }

  • Simple Flex Drag and Drop
    04/13/2010 - 03:35

    Hi,
    I want to display the image in the basket once i drag and drop it on the basket. How do i do it?

  • Flex Fun - Advanced DataGrid Topics
    03/01/2010 - 06:27

    Hi,
    Actually i have changed image source and label text as:

    <mx:Image source="{data.setIcons()}" />
    <mx:Label text="{data.type}"/>

    Now the errors are gone. But the datagrid column looks shows only the label but not the image.

  • Flex Fun - Advanced DataGrid Topics
    03/01/2010 - 05:56

    Hi,
    I am trying to use an inline itemrenderer to display an image and a label in a datagrid column. I use a dynamic XML to load the datagrid. But somehow it doesnt seem to work for me. Please let me know where i am commiting a mistake.

    My Datagrid:

    <mx:DataGridColumn>
                                                    <mx:itemRenderer>
                                                            <mx:Component>
                                                            <mx:HBox verticalGap="2">
                                                                    <mx:Image source="{setIcons()}" />
                                                                    <mx:Label text="{errorList.type}"/>
                                                            </mx:HBox>
                                                    </mx:Component>
                                                    </mx:itemRenderer>
                                            </mx:DataGridColumn>

    private function setIcons():String {
                           
                            var image:String;
                            var type:String = errorList.type;
           
                    switch (type) {
                   
                            case "ERROR":
                                    image = "assets\images\error.jpg";
                                    break;
                   
                            case "WARNING":
                                    image = "assets\images\warning.jpg";
                                    break;
                   
                            default:
                                    break;
                   
                    }
                   
                    return image;
                   
                    }

    private function errorReportHandler(event:ResultEvent):void
                {
                    errorList = event.result.sample;
                }

    The errors that i get are:

    1180: Call to a possibly undefined method setIcons.
    1120: Access of undefined property errorList. (errorList is the dataprovider for my datagrid)

Sponsors