Build a Drag-and-Drop XML Image Viewer – DragManager
Sunday, May 2nd, 2010 - 12:08 pm - Action Script 3.0, Flex 3, Flex 3 Action Script 3 Tutorial, Flex XML
All of the informations about the images showcased in the gallery are stored in an XML file. Create an xml file that follows this structure and save it as datas.xml in the src directory :
<?xml version="1.0"?> <gallery> <image>marilyn1.jpg</image> <image>marilyn2.jpg</image> <image>marilyn3.jpg</image> <image>marilyn4.jpg</image> <image>marilyn5.jpg</image> </gallery>
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
horizontalAlign="center"
backgroundGradientAlphas="[1.0, 1.0]"
backgroundGradientColors="[#FFFFFF, #FFFFFF]"
creationComplete="service.send()">
<mx:Script>
<![CDATA[
import mx.core.DragSource;
import mx.collections.ArrayCollection;
import mx.rpc.events.ResultEvent;
import mx.events.DragEvent;
import mx.managers.DragManager;
[Bindable]
private var images:ArrayCollection;
private function serviceHandler(event:ResultEvent):void{
images = event.result.gallery.image;
}
private function initiateDrag(event:MouseEvent,value:String):void{
var dragInitiator:Image= event.currentTarget as Image;
var dragSource:DragSource = new DragSource();
dragSource.addData(value, 'value');
var dragProxy:Image = new Image();
dragProxy.source = event.currentTarget.source;
dragProxy.width = 100 ;
dragProxy.height = 100 ;
DragManager.doDrag(dragInitiator, dragSource, event, dragProxy);
}
private function dragEnterHandler(event:DragEvent):void {
var dropTarget:VBox =event.currentTarget as VBox;
if (event.dragSource.hasFormat('value')) {
DragManager.acceptDragDrop(dropTarget);
}
}
private function dragDropHandler(event:DragEvent):void {
var value:String = event.dragSource.dataForFormat('value') as String;
bigImage.source = "assets/big/"+value;
}
]]>
</mx:Script>
<mx:HTTPService id="service" url="datas.xml" result="serviceHandler(event)"/>
<mx:Label text="Drag a thumbnail image inside the black box and drop it to display its bigger version"/>
<mx:HBox>
<mx:Repeater dataProvider="{images}" id="rep">
<mx:Image source="assets/thumbs/{rep.currentItem}"
mouseMove="initiateDrag(event,event.currentTarget.getRepeaterItem())" />
</mx:Repeater>
</mx:HBox>
<mx:VBox width="340" height="350" backgroundColor="#000000"
horizontalAlign="center" verticalAlign="middle"
dragEnter="dragEnterHandler(event)"
dragDrop="dragDropHandler(event)">
<mx:Image id="bigImage" showBusyCursor="true"/>
</mx:VBox>
</mx:Application>

