3 Replies Latest reply on Jun 2, 2010 6:55 AM by cjolif-Fc6gNO

    Design work flow diagram using flex..

    satyasuppu Level 1

      Hi,

       

       

         Please tell me whether solution for this issue is feasible or not..

       

       

         Design a work fllow diagram using flex and save this diagram in xml format according to the changes u did on diagram..

       

        Drag data from the datagrid and drop it on canvas as taxt value..After droping it ,need to connect these values with arrows using mouse..Like this neeed to design a diagram .when i click on the save button it shoud save the sequence of vlaues which user has dragged and creadted the sequence we need to save..

       

      Please tell me whether it is feasible in fiex...
      I tried this..but didn't find any solution for this..i can drag data from grid to canvas..but not able to connect these values using arrows with the mouse.(design a diagram)..

       

      Please help me on this issue...

       

      Below is the code which i did for dragiing the data from grid to canvas....Iam bot able to connect these values with arrows..

       

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="absolute" name="Drag and Drop Tutorial"
        creationComplete="init()" >
        <mx:Script>
          <![CDATA[
            import mx.controls.Image;
            import mx.core.DragSource;
            import mx.core.IUIComponent;
            import mx.managers.DragManager;
            import mx.events.DragEvent;
            import mx.controls.Alert;
            import mx.controls.Text;
            import flash.geom.Point;
           
            import mx.rpc.events.FaultEvent;
            import mx.rpc.events.ResultEvent;
            import mx.collections.ArrayCollection;
            import oracle.ondemand.diagrammer.*;
            private var templateLine:Link;
            [Bindable]
            private var pictureData:ArrayCollection = new ArrayCollection([
              {JobName:"A"},{JobName:"B"},{JobName:"C"}, {JobName:"D"},{JobName:"E"},{JobName:"F"},{JobName:"G"}]);

       

            public function init():void
            {
              // a mouseDown event will start the drag     
              list.dataProvider = pictureData;
                   // accepting a drag/drop operation...
              this.area.addEventListener( DragEvent.DRAG_ENTER, acceptDrop );
              // handling the drop...
              this.area.addEventListener( DragEvent.DRAG_DROP, handleDrop );
             // this.area.addEventListener(Event.ADDED, handleAdded);
              //this.area.addEventListener(Event.REMOVED, handleRemoved);
             
            }
            public function get isLinking():Boolean {
                  return this.templateLine.fromNode != null;
              }
            public function beginDrag( mouseEvent:MouseEvent ):void
            {
                 
              var dragInitiator:Text = mouseEvent.currentTarget as Text;
              var dragSource:DragSource = new DragSource();
             // dsource.addData(this, 'node');
              dragSource.addData(this.mouseX, 'mouseX');
              dragSource.addData(this.mouseY, 'mouseY');
              //parent.addChild(dragImg);
              //dragSource.addData(mouseEvent.currentTarget.text, "txt");
              var dragProxy:Text=new Text();
              dragProxy.text = mouseEvent.currentTarget.text;
             // Alert.show("Text isss"+dragProxy.text);
             dragProxy.setActualSize(mouseEvent.currentTarget.width,mouseEvent.currentTarget.height)
           
              // ask the DragManger to begin the drag
              DragManager.doDrag( dragInitiator, dragSource, mouseEvent, dragProxy );       
           
            }
           
            public function acceptDrop( dragEvent:DragEvent ):void
            {
              if (dragEvent.dragSource.hasFormat("items"))
              {
                DragManager.showFeedback( DragManager.COPY );
                DragManager.acceptDragDrop(Canvas(dragEvent.currentTarget));
              }
            }
           
            public function handleDrop( dragEvent:DragEvent ):void
            {
              var dragInitiator:IUIComponent = dragEvent.dragInitiator;
              var dropTarget:IUIComponent = dragEvent.currentTarget as IUIComponent;
              var items:Array  = dragEvent.dragSource.dataForFormat("items") as Array;
              var pt:Point = new Point(dragEvent.localX, dragEvent.localY); 
              pt = dragEvent.target.localToContent(pt);
              var img:Text = new Text();
                img.x=dragEvent.localX;   img.y=dragEvent.localY;
             // img.x=pt.x - Number(dragEvent.dragSource.dataForFormat("mouseX"));
                //img.y=pt.y - Number(dragEvent.dragSource.dataForFormat("mouseY"));
              img.width = 50;
              img.height=50;
              // img.fontSize=20;     // img.source="assets/" + items[0].id + ".png";
              img.text=items[0].JobName.toString();

       

              img.addEventListener(MouseEvent.MOUSE_MOVE,beginDrag);
              area.addChild(img);
             
            }     
           
            public var xOff:Number;
            public var yOff:Number;
           
          ]]>
        </mx:Script>


        <mx:DataGrid id="list" width="152" height="200" labelField="JobName"
          dragEnabled="true" dataProvider="{pictureData}" mouseDown="beginDrag(event)" dragMoveEnabled="true" y="109" x="39"/>
          <!--<mx:columns>
            <mx:DataGridColumn dataField="id" id="code"/>
            <mx:DataGridColumn id="picture" draggable="true" >
              <mx:itemRenderer>
                <mx:Component>
                  <mx:Image source="assets/{data.id}.png" mouseDown="outerDocument.beginDrag(event)"/>
                </mx:Component>
              </mx:itemRenderer>
            </mx:DataGridColumn>
          </mx:columns>
        </mx:DataGrid>-->
        <mx:Canvas id="area" width="730" height="520"
          backgroundColor="white" dragDrop="handleDrop(event)"   x="209" y="10">
         
         
        </mx:Canvas>
      </mx:Application>

       

       

       

      Thanks in advance.....

        • 1. Re: Design work flow diagram using flex..
          TanweerHq Level 2

          Try this. I have added few lines in your code. Now it will draw lines between the items as soon as u drop them in canvas.

           

          <?xml version="1.0" encoding="utf-8"?>
          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
            layout="absolute" name="Drag and Drop Tutorial"
            creationComplete="init()" >
            <mx:Script>
              <![CDATA[
                import mx.controls.Image;
                import mx.core.DragSource;
                import mx.core.IUIComponent;
                import mx.managers.DragManager;
                import mx.events.DragEvent;
                import mx.controls.Alert;
                import mx.controls.Text;
                import flash.geom.Point;
              
                import mx.rpc.events.FaultEvent;
                import mx.rpc.events.ResultEvent;
                import mx.collections.ArrayCollection;
               /*  import oracle.ondemand.diagrammer.*;
                private var templateLine:Link; */
                [Bindable]
                private var pictureData:ArrayCollection = new ArrayCollection([
                  {JobName:"A"},{JobName:"B"},{JobName:"C"}, {JobName:"D"},{JobName:"E"},{JobName:"F"},{JobName:"G"}]);

           

           

           

                public function init():void
                {
                  // a mouseDown event will start the drag    
                  list.dataProvider = pictureData;
                       // accepting a drag/drop operation...
                  this.area.addEventListener( DragEvent.DRAG_ENTER, acceptDrop );
                  // handling the drop...
                  this.area.addEventListener( DragEvent.DRAG_DROP, handleDrop );
                 // this.area.addEventListener(Event.ADDED, handleAdded);
                  //this.area.addEventListener(Event.REMOVED, handleRemoved);
                }
                public function get isLinking():Boolean {
                      return false;//this.templateLine.fromNode != null;
                  }
                public function beginDrag( mouseEvent:MouseEvent ):void
                {
                    
                  var dragInitiator:Text = mouseEvent.currentTarget as Text;
                  var dragSource:DragSource = new DragSource();
                 // dsource.addData(this, 'node');
                  dragSource.addData(this.mouseX, 'mouseX');
                  dragSource.addData(this.mouseY, 'mouseY');
                  //parent.addChild(dragImg);
                  //dragSource.addData(mouseEvent.currentTarget.text, "txt");
                  var dragProxy:Text=new Text();
                  dragProxy.text = mouseEvent.currentTarget.text;
                 // Alert.show("Text isss"+dragProxy.text);
                 dragProxy.setActualSize(mouseEvent.currentTarget.width,mouseEvent.currentTarget .height)
              
                  // ask the DragManger to begin the drag
                  DragManager.doDrag( dragInitiator, dragSource, mouseEvent, dragProxy );      
              
                }
              
                public function acceptDrop( dragEvent:DragEvent ):void
                {
                  if (dragEvent.dragSource.hasFormat("items"))
                  {
                    DragManager.showFeedback( DragManager.COPY );
                    DragManager.acceptDragDrop(Canvas(dragEvent.currentTarget));
                  }
                }
              
               var pt:Point;
                public function handleDrop( dragEvent:DragEvent ):void
                {
                  var dragInitiator:IUIComponent = dragEvent.dragInitiator;
                  var dropTarget:IUIComponent = dragEvent.currentTarget as IUIComponent;
                  var items:Array  = dragEvent.dragSource.dataForFormat("items") as Array;
                  pt = new Point(dragEvent.localX, dragEvent.localY);
                  pt = dragEvent.target.localToContent(pt);
                  var img:Text = new Text();
                    img.x=dragEvent.localX;   img.y=dragEvent.localY;
                 // img.x=pt.x - Number(dragEvent.dragSource.dataForFormat("mouseX"));
                    //img.y=pt.y - Number(dragEvent.dragSource.dataForFormat("mouseY"));
                  img.width = 50;
                  img.height=50;
                  // img.fontSize=20;     // img.source="assets/" + items[0].id + ".png";
                  img.text=items[0].JobName.toString();

           

           

           

                  img.addEventListener(MouseEvent.MOUSE_MOVE,beginDrag);
                  area.addChild(img);
                 
                  pt.x = pt.x+5;
                  pt.y = pt.y+10;
                     
                  if(area.getChildren().length>1){
                      end = pt;
                      drawLine();
                      start = end;
                  }
                  else{
                      start = pt;
                  }
                
                }    
              
                public var xOff:Number;
                public var yOff:Number;
              
              protected function drawLine() : void
                  {
                      var g:Graphics = ui.graphics;
                      //g.clear();

                      var lt:Number = 2;

           

                      g.lineStyle(lt, 0xAADDFF, 0.5);
                      createLine(g, start, end, false);
                  }
                 
                  public static function createLine(g:Graphics, start:Point, end:Point,
                                                  dashed:Boolean = false, dashLength:Number = 10):void {
                      g.moveTo(start.x, start.y);
                      g.lineTo(end.x, end.y);
                  }
                     
              ]]>
            </mx:Script>

           


            <mx:DataGrid id="list" width="152" height="200" labelField="JobName"
              dragEnabled="true" dataProvider="{pictureData}" mouseDown="beginDrag(event)" dragMoveEnabled="true" y="217" x="28"/>
              <!--<mx:columns>
                <mx:DataGridColumn dataField="id" id="code"/>
                <mx:DataGridColumn id="picture" draggable="true" >
                  <mx:itemRenderer>
                    <mx:Component>
                      <mx:Image source="assets/{data.id}.png" mouseDown="outerDocument.beginDrag(event)"/>
                    </mx:Component>
                  </mx:itemRenderer>
                </mx:DataGridColumn>
              </mx:columns>
            </mx:DataGrid>-->
            <mx:UIComponent width="700" height="320"  id="ui" x="199" y="217"/>
            <mx:Canvas id="area" width="700" height="320" alpha="0.5"
              backgroundColor="white" dragDrop="handleDrop(event)"   x="199" y="217">
            
            
            </mx:Canvas>
           

          </mx:Application>

           

          Message was edited by: TanweerHq >> edited drawLine function

          1 person found this helpful
          • 2. Re: Design work flow diagram using flex..
            satyasuppu Level 1

            Hi,

             

            Thank you very much for your help..

             

            I neeed to design a workflow diagram using flex and save this diagram in xml  format according to the diagram u drawn on UI.

            what needs be done iss::

             

              Drag all data  from the datagrid and drop it on canvas as taxt value..After droping it  ,need to connect these values with arrows using mouse..i.e design a workflow diagram.These should be one stating point,so that we can identify the start of the diagram..and Stop point....Like this neeed  to design a diagram .when i click on the save button it shoud save the  sequence of vlaues which user has dragged and creadted the sequence we  need to save in xml and save it in DB....

             

            Please  tell me whether it is feasible in fiex or not.......

             

            Thanks alot inadvance...

            • 3. Re: Design work flow diagram using flex..
              cjolif-Fc6gNO

              Hi,

               

              This is perfectly feasible. Actually several libraries will help you to

              achieve this. Including IBM ILOG Elixir Enteprise. Check

               

              http://www-01.ibm.com/software/integration/visualization/elixir-enterprise/

               

              and in particular:

               

              http://visunetdemos.demos.ibm.com/diagramdemos/bpmeditor/bpmeditor.html

               

              Hope this helps,

               

              Christophe

               

               

               

               

              From:

              satyasuppu <forums@adobe.com>

              To:

              Christophe Jolif/France/IBM@IBMFR

              Date:

              31/05/2010 11:24

              Subject:

              Re: Design work flow diagram using flex..

               

               

               

               

              Hi,

               

              Thank you very much for your help..

               

              I neeed to design a workflow diagram using flex and save this diagram in

              xml  format according to the diagram u drawn on UI.

              what needs be done iss::

               

                Drag all data  from the datagrid and drop it on canvas as taxt

              value..After droping it  ,need to connect these values with arrows using

              mouse..i.e design a workflow diagram.These should be one stating point,so

              that we can identify the start of the diagram..and Stop point....Like this

              neeed  to design a diagram .when i click on the save button it shoud save

              the  sequence of vlaues which user has dragged and creadted the sequence

              we  need to save in xml and save it in DB....

               

              Please  tell me whether it is feasible in fiex or not.......

               

              Thanks alot inadvance...