Flex 创建Web WorkFlow设计器的几个条件

1、做整体设计

理解工作流的几大要素，工作流基本原理。

2、熟悉Flex画图原理

可以包装成几个类如：ArrowLine带箭头的类，FlowIcon图片资源，FoldLine折线，LineBase线基类

如：ArrowLine的源码

package classes
{
 import flash.geom.Point;
 public class ArrowLine extends LineBase
 {
  public function ArrowLine()
  {
  }
  private var _lineSJColor: uint=0x000000;//线条颜色
  private var _sjSJColor: uint=0xFF0033;//三角颜色
  public function get lineSJColor(): uint{
   return _lineSJColor;
  }
  
  public function set lineSJColor(value: uint): void{
   this._lineSJColor = value;
  }
  
  public override function render():Boolean
  {
   var ifBol:Boolean=false;
   try 
   {   
    this.graphics.clear();//清除前面画的东东
    //画线
    this.graphics.lineStyle(thickness, lineColor);   
    var pointLength:int=this.points.length;
    for(var i:int=0;i<pointLength;i++)
    {
     var tCurPoint:Point=this.points[i] as Point;
     var tNextPoint:Point=null;
     if(i+1<pointLength)
     {
      tNextPoint=this.points[i+1] as Point;
      
     }
     if(i==0)
     {
      this.graphics.moveTo(tCurPoint.x, tCurPoint.y);
     }
     if(tNextPoint!=null)
     {
      this.graphics.lineTo(tNextPoint.x, tNextPoint.y);
     } 
     if(pointLength>2)
     { 
      trace(tCurPoint.x.toString()+"__" + tCurPoint.y.toString());
     }           
     if(i==pointLength-1)
     {
      //在线条尾部画小三角形
      this.graphics.moveTo(tCurPoint.x, tCurPoint.y);
      this.graphics.beginFill(this._sjSJColor);
      this.graphics.lineTo(tCurPoint.x-7,tCurPoint.y-5);
      this.graphics.lineTo(tCurPoint.x-7,tCurPoint.y+5);
      this.graphics.lineTo(tCurPoint.x,tCurPoint.y);
      this.graphics.endFill();     
     }
    }
    this.pCanvas.addChild(this); 
    ifBol=true;
   }catch(e:Error)   
   {       
    trace(e.message);
   }
   return ifBol;      
  }   
 }
}

3、组织Flex与其他语言结合

如：与JS结合达到Flex与服务端交互的目的，不建议用Flex自己的数据交互，有局限性。

如下：

  import classes.*;
  
  import com.adobe.serialization.json.JSON;
  
  import flash.events.MouseEvent;
  import flash.external.*;
  import flash.ui.ContextMenu;
  
  import mx.controls.Menu;
  import mx.events.MenuEvent;
    
  public var pFlowModel:FlowModel;
  public var command:String;//新建：new，编辑：edit
  public var rightMenu:Menu;
  public var selectedFlowNode:FlowNode=null;  
  
  private function initApp():void
  {
   hideRightMenu();
   initMenu();
   initEvents();
   ExternalInterface.addCallback("setCommand",_setCommand);
   ExternalInterface.addCallback("loadNods",_loadNods);
   ExternalInterface.addCallback("addParallelNode",_addParallelNode);
   ExternalInterface.addCallback("addCountersign",_addCountersign);
   ExternalInterface.addCallback("addSeries",_addSeries); 
   _initJs();
  }  
    
     private function showMenu(x:Number,y:Number):void
     {   
      rightMenu.show(x,y);
     } 
    
     private function hidenMenu(icon:FlowIcon):void
     {
   rightMenu.hide();
     }               
             
        private function menuHandler(event:MenuEvent):void
        {
            if(event.item.@label=="增加节点")
            {                                          
               ExternalInterface.call("showAddNodeWindow");              
            }else if(event.item.@label=="删除节点")
            {
           
            }else if(event.item.@label=="替换节点")
            {
           
            }else if(event.item.@label=="节点属性")
            {
            
            }else if(event.item.@label=="刷新") 
            {
             this.Refresh();
            }
        }
       
        private function _deleteNode():void
        {
       
        }
        private function _addParallelNode(strAry:String):void
        {                              
         var ary:Array=(JSON.decode(strAry,false) as Array);
         var tNodes:Array=new Array(); 
         for(var i:int=0;i<ary.length;i++)
         {       
          var o:Object=ary[i] as Object;
          var pNodeName:String=o.Caption as String;
          var pNode:FlowNode=this.pFlowModel.newFlowNode(pNodeName);
          tNodes[tNodes.length++]=pNode;
          
         }
         this.pFlowModel.addParallel(this.selectedFlowNode,tNodes);        
         this.pFlowModel.Refresh();
        }
        private function _addCountersign(strAry:String):void
        {                              
         var ary:Array=(JSON.decode(strAry,false) as Array);
         var tNodes:Array=new Array(); 
         for(var i:int=0;i<ary.length;i++)
         {       
          var o:Object=ary[i] as Object;
          var pNodeName:String=o.Caption as String;
          var pNode:FlowNode=this.pFlowModel.newFlowNode(pNodeName);
          tNodes[tNodes.length++]=pNode;
         }
         tNodes[tNodes.length++]=this.selectedFlowNode;
         this.pFlowModel.addCountersign(this.selectedFlowNode,tNodes);        
         this.pFlowModel.Refresh();
        }       
        private function _addSeries(strAry:String):void
        {                              
         var ary:Array=(JSON.decode(strAry,false) as Array);
         var tNodes:Array=new Array(); 
         for(var i:int=0;i<ary.length;i++)
         {       
          var o:Object=ary[i] as Object;
          var pNodeName:String=o.Caption as String;
          var pNode:FlowNode=this.pFlowModel.newFlowNode(pNodeName);
          tNodes[tNodes.length++]=pNode;
         }
         this.pFlowModel.addSeries(this.selectedFlowNode,tNodes);        
         this.pFlowModel.Refresh();
        }                     
        private function hideRightMenu():void
        {
   var contextMenu : ContextMenu = new ContextMenu();
   contextMenu.hideBuiltInItems();       
        }       
  
  public function _initJs():void{
              ExternalInterface.call("initWorkFlowFlashEvent");                           
        }
       
        private function initEvents():void
        {
         //this.FlowCanvas.addEventListener(MouseEvent.CLICK,onFLowCanvasClick);
        }
       
        private function initMenu():void
        {
   rightMenu= Menu.createMenu(this.FlowCanvas, rightFlowMenuData, false);
      rightMenu.labelField="@label"
      rightMenu.addEventListener("itemClick", menuHandler);       
        }
       
        private function onFLowCanvasClick(e:MouseEvent):void
        {         
   if(this.pFlowModel!=null)
   {          
          if(this.pFlowModel.getSelectedFlowNode())
          {
           showMenu(e.stageX,e.stageY);
          }
      }
        }
       
        public function _setCommand(tCommand:String):void
        {
         command=tCommand;
        }
        public function _loadNods(strAry:String):void
        {                           
         var ary:Array=(JSON.decode(strAry,false) as Array);   
         pFlowModel=new FlowModel();
         pFlowModel.onIconMouseOut=onIconMouseOut;
         pFlowModel.onIconMouseUp=onIconMouseUp;
         pFlowModel.pCanvas=this.FlowCanvas;
         pFlowModel.Caption="测试任务流程";
         pFlowModel.load(ary);
         pFlowModel.Refresh();
        }
  
  private function Refresh():void
  {
   this.pFlowModel.Refresh(); 
   //Alert.show("刷新结束");  
  }  
  
  private function onIconMouseOut(sender:FlowNode,e:MouseEvent):void
  {
   
  }
  
  private function onIconMouseUp(sender:FlowNode,e:MouseEvent):void
  {
   if(sender.pNodeType==1)
   {
    this.selectedFlowNode=sender;
    showMenu(e.stageX,e.stageY);
   }
  }