Welcome, Guest. Please login or register.
Did you miss your activation email?
31 Jul 2010, 11:18:37 UTC
Forum home
+  flexdeveloper.eu Forum
|-+  Flex and ActionScript 3.0
| |-+  ActionScript 3.0 (Moderators: JMWhittaker, Jan K, thewarpedcoder, James)
| | |-+  addEventlistener zu <mx:image> Tag dynamisch per Funktion!?
« previous next »
Pages: [1] Print
Author Topic: addEventlistener zu <mx:image> Tag dynamisch per Funktion!? (Read 692 times)
Bettina
Newbie FD
*
Posts: 9


I'm new in this but i try my very best :-)


« on: 09 Mar 2010, 12:21:03 UTC »

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.

  
Code:
   <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)

Code:
<?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')}&#13;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>

 
Logged
flexy
flexdeveloper.eu
Guru/Addict FD
*****
Posts: 3,155


Recovering Coffee Addict & Adobe Expert


WWW
« Reply #1 on: 10 Mar 2010, 10:13:08 UTC »

I think you might it easier to use a TileList control for this.

http://livedocs.adobe.com/flex/3/langref/mx/controls/TileList.html
Logged

Bettina
Newbie FD
*
Posts: 9


I'm new in this but i try my very best :-)


« Reply #2 on: 10 Mar 2010, 12:39:58 UTC »

I think you might it easier to use a TileList control for this.

http://livedocs.adobe.com/flex/3/langref/mx/controls/TileList.html

I did this as on of my first ideas, but i could not find out how to solve the nasty presentation that occurs in the very different width of my displayed pictures. All pictures have a fixed height but a different width and I would like to display them one beside another without any gab and keep always the same fix height. I checked HorizontalList too but always it's the same problem by the static width for the pictures!?

Did I overlook something with this components?
Logged
meenakshi
Newbie FD
*
Posts: 56


« Reply #3 on: 16 Mar 2010, 05:34:22 UTC »

I think you might it easier to use a TileList control for this.

http://livedocs.adobe.com/flex/3/langref/mx/controls/TileList.html

I did this as on of my first ideas, but i could not find out how to solve the nasty presentation that occurs in the very different width of my displayed pictures. All pictures have a fixed height but a different width and I would like to display them one beside another without any gab and keep always the same fix height. I checked HorizontalList too but always it's the same problem by the static width for the pictures!?

Did I overlook something with this components?

u can use itemrenderer in tile list.it might solve your problem.
Logged
Pages: [1] Print
« previous next »
Share this on: Twitter Twitter Del.icio.us del.icio.us Digg Digg
Jump to:

©2006-2010 Flexdeveloper.eu/Jodie O'Rourke. All rights reserved.
Adobe®, Adobe® Flash™, Adobe® AIR™ and Adobe® Flex™ are registered trademarks of Adobe Systems Incorporated in the United States and other countries. All rights reserved.

Powered by SMF 1.1.11 | SMF © 2006-2009, Simple Machines LLC