Hallo Flexdevelopers,
Ich komme nicht weiter und verstehe gerade nicht ganz wo ich ansetzen muss!?
Vielleicht hat jemand eine Idee und kann mir helfen?
Vereinfacht gesagt habe ich folgendes <mx:Image> Tag innerhalb eines <mx:Repeater> welcher mit url's aus einer XML Datei gefüttert wird und die dortigen Bilder in einer <mx:HBox> anzeigt.
<mx:Image
id="myImage"
scaleY=".50"
scaleX=".50"
source="{photos.currentItem.attribute('url')}"
horizontalAlign="left"
creationComplete="ini(event)"
completeEffect="{fadeIn}"
dragDrop="true"
>
Das funktioniert soweit auch wunderbar. Nun möchte ich aber gerne innerhalb dieser HList DragAndDrop ermöglichen und zwar so, dass die Bilder innerhalb dieser einen HList per DragAndDrop in ihrer Reihenfolge verändert werden können (also nicht von hier in irgendeinen anderen Container sondern in dem selben als target)
Deshalb würde ich jetzt auf jedes Bild einen eventListener setzen, der bei creationComplete() eine ini() aufruft, welche die notwendigen eventListener added. Der Aufruf klappt auch, aber wenn ich dann die eventListener zuweisen möchte gibt es zwar keine Fehlermeldung aber anspringen tun sie dann auch nicht. Wenn ich einen eventListener direkt im <mx:image> Tag zuweise - statt der Funktion ini() geht das. Da ich aber für das DragAndDrop mehrere brauche wollte ich das elegant mit der ini() lösen!?
Wenn ich mir in der ini() mit trace(evt.target) ausgebe bekomme ich für jedes Bild die Adresse des Arrays, das der repeater (!?) anlegt - das ist aber ja nicht die Objektreferenz oder!? ist das der Grund weshalb die eventListener nicht reagieren? Und wie kann man das sonst machen damit es funktioniert!?
Der Vollständigkeit wegen hier noch mal der gesamte Code (es ist eine Komponente, die in meine Applikation eingebunden wird)
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%">
<mx:Script>
<![CDATA[
import mx.core.Application;
import mx.utils.UIDUtil;
import mx.core.DragSource;
import mx.core.IUIComponent;
import mx.managers.DragManager;
import mx.events.DragEvent;
[Bindable]
private var _dataFeed:XML;
private var _categoryIdRef:String;
public function set dataFeed(value:XML):void
{
if (_dataFeed == value)
return;
_dataFeed = value;
}
public function set categoryIdRef(value:String):void
{
if (_categoryIdRef == value)
return;
_categoryIdRef = value;
}
private function dataFilter(XMLobj:XML):XMLList
{
var newXMLList:XMLList;
for each (var value:XML in XMLobj.contents.content) {
if (value.attribute('categoryIdRef')==_categoryIdRef) {
trace("***"+value.picture);
newXMLList=value.picture;
}
}
return newXMLList;
}
]]>
</mx:Script>
<mx:Fade id="fadeIn" duration="3000" alphaFrom="0" alphaTo="1"/>
<mx:Fade id="fadeOut" duration="3000" alphaFrom="1" alphaTo="0"/>
<mx:HBox id="x23" horizontalAlign="center" horizontalGap="2"
backgroundColor="0x333333"
width="100%" height="90%"
paddingTop="2"
paddingBottom="2">
<mx:Repeater
id="photos"
dataProvider="{dataFilter(_dataFeed)}"
recycleChildren="true">
<mx:Box
id="myElement"
mouseChildren="false"
backgroundColor="0x333333">
<mx:Script>
<![CDATA[
import mx.events.FlexEvent;
private function ini(evt:Event):void {
evt.target.addEventListener( MouseEvent.MOUSE_DOWN, beginDrag );
evt.target.addEventListener( DragEvent.DRAG_ENTER, acceptDrop );
evt.target.addEventListener( DragEvent.DRAG_DROP, handleDrop );
}
public function beginDrag( mouseEvent:MouseEvent ):void {
var dragInitiator:IUIComponent = mouseEvent.currentTarget as IUIComponent;
var dragSource:DragSource = new DragSource();
DragManager.doDrag( dragInitiator, dragSource, mouseEvent, null );
}
public function acceptDrop( dragEvent:DragEvent ):void {
var dropTarget:IUIComponent = dragEvent.currentTarget as IUIComponent;
DragManager.acceptDragDrop( dropTarget );
}
public function handleDrop( dragEvent:DragEvent ):void {
var dragInitiator:IUIComponent = dragEvent.dragInitiator;
var dropTarget:IUIComponent = dragEvent.currentTarget as IUIComponent;
}
]]>
</mx:Script>
<mx:Image
id="myImage"
scaleY=".50"
scaleX=".50"
source="{photos.currentItem.attribute('url')}"
horizontalAlign="left"
toolTip="ID: {photos.currentItem.attribute('id')} URL: {photos.currentItem.attribute('url')}"
creationComplete="ini(event)"
completeEffect="{fadeIn}"
dragDrop="true">
</mx:Image>
<mx:Text text="ID: {photos.currentItem.attribute('id')}"/>
<mx:TextInput text="{photos.currentItem.attribute('label')}"/>
</mx:Box>
</mx:Repeater>
</mx:HBox>
</mx:Canvas>