Drag & Drop - From List to VideoDisplay

 实现将List列表中的视频flv文件通过拖动的方式，即直接用鼠标将要播放的文件拖动到VideoDisplay中就可以播放。

JsonList.mxml:

<? xml version = " 1.0 "  encoding = " utf-8 " ?>
<!-- This demo just presents how to get the data from a json data file and to display them 
in  a datagird. -->

<!-- Use creationComplete property to set HTTPService to start when the page is created. -->
< mx:Application xmlns:mx = " http://www.adobe.com/2006/mxml "  layout = " absolute "
    creationComplete = " service.send() " >
    
     <!-- In HTTPService the url can be local file or web file:
    web:http: // weblogs.macromedia.com/mesh/mashedpotato.json
    relative local file:potato.json
    absolute local file(windows):C:potato.json -->
     < mx:HTTPService id = " service "  resultFormat = " text "
        url = " List.json "
        result = " onJsonLoad(event) "   />
     < mx:List id = " movieList "  height = " 100% "  rowHeight = " 120 "  width = " 220 "  itemRenderer = " ListItem "
         doubleClickEnabled = " true "  doubleClick = " onDoubleClick() "  dragEnabled = " true " ></ mx:List >         
     < mx:Script >
         <! [CDATA[
            import mx.controls.VideoDisplay;
            import mx.rpc.events.ResultEvent;
            import mx.collections.ArrayCollection;
            import mx.core.DragSource;
            import mx.managers.DragManager;
            import mx.events. * ;
             /*
            To Use the JSON Library,you must add the source of the library to the project
            by the following way:
                1)Right click on the project and select the properties;
                2)Then select the Flex Build Path window;
                3)Select Source Path label,click add source folder button,Browse to the source
                folder of the library which is the src folder in the library zipped file.
                (Of course you need to unzip it first.)Then click OK button,that's ok.
                
            I don not know why when I just add the swc file of the library which is the compiled
            library file like dll in windows applications,the builder always notify me that "unable
            to load SWC corelib.swc:multiple points".So I have to use the above way. 
             */
            import com.adobe.serialization.json.JSON;
            import com.adobe.utils.StringUtil;
            
            public  var  dp:ArrayCollection;
             /*
            This method is called when the HTTPService is finished,that's to say the data has
            been got to the client.So in this function,what you should do is to format the data
            you get.
             */
            private  function  onJsonLoad(event:ResultEvent): void
            {
                 // get the raw data and convert it to String
                
                 // delete the white space in the string.
                 var  rawData:String = String(event.result);
                trace(rawData);
                 var  tmpStr:Array;
                 /*
                tmpStr=rawData.split(' ');
                rawData=tmpStr.join("");
                 */
                tmpStr = rawData.split( ' ' );
                rawData = tmpStr.join( "" );
                trace(rawData);
                tmpStr = rawData.split( ' ' );
                rawData = tmpStr.join( "" );
                trace(rawData);
                tmpStr = rawData.split( ' ' );
                rawData = tmpStr.join( "" );
                trace(rawData);
                 // Use statci method of JSON,decode,to decode the string format data to Array.
                 var  arr:Array = (JSON.decode(rawData) as Array);
                
                 // Create a new ArrayCollection object to pass the de-serialized data.
                 // As ArrayCollection works better as dataProvider and they can be watched for chagnes.
                 // var dp:ArrayCollection=new ArrayCollection(arr);
                dp = new  ArrayCollection(arr);
                
                 // Set the dataProvider of the DataGrid,grid.Then the data will be listed in it.
                 // grid.dataProvider=dp;
                movieList.dataProvider = dp;
            }

             /*
            By double click to play the selected movie!
             */
            private  function  onDoubleClick(): void
            {
                 if (mainPlayer.source != null )
                    mainPlayer.stop();
                 // //ONE way to get the ListItem data from List.
                 var  sel:Object = dp.getItemAt(movieList.selectedIndex);
                mainPlayer.source = sel.url;
                trace(mainPlayer.source);
                mainPlayer.play();
            }
            
             /*
            By drop item to the VideoDisplay to play the movie!
            Because the List is a list-based component,that's to say,the List has a dragEnable
            property which will do all the drag-drop operation need in place of you when it is
            set true.I use the List with drag-drop proxy enabled.Then implement the drag & drop
            event handler of the VideoDisplay component.As the list passed the whole item of
            the list through proxy,however,what I needed is just the url of the item,I must 
            process the data passed to VideoDisplay before using.
             */
            
             // Called when user drag an item to VideoDisplay.
            private  function  dragEnterHandler(event:DragEvent): void
            {
                 // Get the target
                 var  target:VideoDisplay = VideoDisplay(event.currentTarget);
                 /*
                Judge whether it is a valide item.Here there is just one kind of drag
                operation,so the judge condition is always true.
                 */
                 if ((List(event.dragInitiator)).selectedItem != null )
                {
                     /*
                    Notice here the param you give to the acceptDragDrop()
                    function is the target which will accept the dragged here item,
                    not the source where the dragged item came from!
                     */
                    DragManager.acceptDragDrop(target);
                }
            }
            
             // Called when user drop an ListItem object to VideoDisplay by release the mouse.
            private  function  dragDrop(event:DragEvent): void
            {
                 if (mainPlayer.source != null )
                {
                    mainPlayer.stop();
                }
                 // Get the url from the drag-drop proxy.
                 var  lst:List = List(event.dragInitiator);
                 // //SECOND way to get ListItem data from List.
                 var  src:Object = lst.selectedItem as Object;
                 var  str:String = src.url;
                mainPlayer.source = str;
                trace(mainPlayer.source);
                mainPlayer.play();
            }
        ]] >
     </ mx:Script >
     < mx:VideoDisplay  id = " mainPlayer "  x = " 228 "  y = " 10 "  width = " 249 "  height = " 202 "  bufferTime = " 1 "
         dragEnter = " dragEnterHandler(event); "
         dragDrop = " dragDrop(event); " />
     <!-- The next two component is to  try  dragging items between Lists.More need to add is 
    when dropped,judge whether the item is  in  the target list or not ! IF  in  ignore the drop
    operation. -->
     < mx:HorizontalList x = " 228 "  y = " 413 "  height = " 156 "  width = " 320 "  dropEnabled = " true "  columnWidth = " 210 "  itemRenderer = " ListItem " ></ mx:HorizontalList >
     < mx:TileList x = " 228 "  y = " 220 "  height = " 185 "  width = " 320 "  itemRenderer = " ListItem "  rowHeight = " 110 "  columnWidth = " 210 "  dropEnabled = " true " ></ mx:TileList >

</ mx:Application >

ListItem.mxml:

<? xml version = " 1.0 "  encoding = " utf-8 " ?>
< mx:HBox xmlns:mx = " http://www.adobe.com/2006/mxml "  width = " 200 "  height = " 100 "  verticalAlign = " middle "
     >
     < mx:VideoDisplay id = " player "  x = " 0 "  y = " 0 "  width = " 100 "  height = " 100 "  source = " {data.url} "  autoPlay = " false " />
     < mx:Label id = " lbName "  text = " {data.name} "  textAlign = " center " />
</ mx:HBox >

List.json:

[
    { " name " : " Movie 1 " , " url " : " http://58.211.2.168/v2blog/2007/03/31/1175351546716-converted.flv " },
    { " name " : " Movie 2 " , " url " : " http://58.211.2.168/v2blog/2007/03/31/1175352233124-converted.flv " },
    { " name " : " Movie 3 " , " url " : " http://58.211.2.168/v2blog/2007/04/16/1176714833764-converted.flv " },
    { " name " : " Movie 4 " , " url " : " D:/NwpuVideo/Project/video/1.flv " },
    { " name " : " Export " , " url " : " D:/Video Course/Flex/export.flv " },
    { " name " : " Fuse " , " url " : " D:/Video Course/Flex/fuse.flv " },
    { " name " : " Loader " , " url " : " D:/Video Course/Flex/loader.flv " }
]