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"}
]