Futurescale, Inc. PureMVC Home

The PureMVC Framework Code at the Speed of Thought


Over 10 years of community discussion and knowledge are maintained here as a read-only archive.

New discussions should be taken up in issues on the appropriate projects at https://github.com/PureMVC

Pages: [1]
Print
Author Topic: dispatch MouseEvent from view component  (Read 12062 times)
purevwx
Newbie
*
Posts: 6


View Profile Email
« on: May 18, 2009, 01:46:38 »

hi all,

i listen for a mouseclick event in a mediator. I used an approach i found in the EmployeeAdmin example to dispatch an event from the view component.  Images are rendered fine and the component is clickable but flashplayer complains that flash.events::Event@23f47041 cannot be converted to flash.events.MouseEvent. I also tried to dispatch an MouseEvent, but it doesn't work. Here's my component code:

:
<?xml version="1.0" encoding="utf-8"?>

<mx:Box xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="80" direction="horizontal">
<mx:Metadata>
[Event('click')]
</mx:Metadata>

<mx:Script>
<![CDATA[
public static const CLICK:String = 'click';

// send the named event
private function sendEvent( eventName:String ):void
{
dispatchEvent( new Event( eventName, true ) );
}
]]>
</mx:Script>
<mx:Repeater id="rp">
<mx:Image source="{rp.currentItem}" buttonMode="true" width="60" height="60" click="sendEvent( CLICK )"/>
</mx:Repeater>
</mx:Box>

I'm really stuck at the moment and i don't know if theres a "best practice" to manage this. Anybody can help me out?

regards!
« Last Edit: May 18, 2009, 02:44:12 by purevwx » Logged
Ondina
Sr. Member
****
Posts: 86


View Profile Email
« Reply #1 on: May 19, 2009, 12:31:12 »

First of all, even if that's not the cause of your problem, it's a good practice not to use  event's types that could cause a name collision with the generic  flex/flash events (click, change,  add, initialize.. e.t.c.)

Then I would suggest that you take a look at your mediator again.
There you probably have something like this:
override public function onRegister( ):void
{
myView.addEventListener( MyView.CLICK, onImageClick );
}
private function onImageClick ( event: MouseEvent ): void
{
//do something
}

You have to change it to event:Event because the  MyView.CLICK isn't a MouseEvent.

But if you have to keep “MouseEvent” as the event type in your mediator's event-handler, you can do this in your view to make it work:

private function sendEvent( eventName:String ):void
{
dispatchEvent( new MouseEvent( eventName, true ) );
}

Ondina
Logged

~ Ondina ~
Jason MacDonald
Sr. Member
****
Posts: 243


View Profile Email
« Reply #2 on: May 19, 2009, 06:07:42 »

Maybe I'm missing something but, why recreate another Mouse event? Why not just pass through the original mouse event? The example you took from is more if you want a way of identifying which item was clicked and to dispatch custom events based on that knowledge.

In the case of just listening for a click event try:

:
<?xml version="1.0" encoding="utf-8"?>

<mx:Box xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="80" direction="horizontal">
<mx:Script>
<![CDATA[

// send the event up since it doesn't bubble by default
private function sendEvent( event:MouseEvent):void
{
dispatchEvent(event);
}
]]>
</mx:Script>
<mx:Repeater id="rp">
<mx:Image source="{rp.currentItem}" buttonMode="true" width="60" height="60" click="sendEvent(event)"/>
</mx:Repeater>
</mx:Box>

Logged
Ondina
Sr. Member
****
Posts: 86


View Profile Email
« Reply #3 on: May 19, 2009, 07:28:54 »

No, Jason, you are not missing anything :)

There was an event type coercion error(Event->MouseEvent) and I meant to say that a  flash.events.Event cannot be handled as a flash.events.MouseEvent.

I'm sorry for the misleading :
dispatchEvent( new MouseEvent( eventName, true ) );

The idea was that you should dispatch the event that your handler-method can handle. I didn't mean to say that you have to recreate the event. Sorry for that.

But in your example how would you add an eventListener in the mediator, if you don't define a type for the event in your view?

Maybe like this?
public static const IMG_CLICKED:String = 'imageClicked';

<mx:Image source="{rp.currentItem}" buttonMode="true" width="60" height="60" click="dispatchEvent(new Event(IMG_CLICKED, true))" />

(bubbles=true)

Ondina
Logged

~ Ondina ~
Jason MacDonald
Sr. Member
****
Posts: 243


View Profile Email
« Reply #4 on: May 19, 2009, 08:23:59 »

All I was trying to say was if you wanted to listen for a Mouse event in the mediator that was generated on an image you don't need a custom event to do so. If you WANT a custom event than you would have to do as you described above but looking at his example he was just testing that one was clicked (the use of event name click lead me to believe he didn't want a custom event name per image).

In my example you would simply listen for the bubbled mouse event in the mediator, you don't even need the sendEvent function because the click even bubbles up from the image. However, if the event did not bubble my example is how you can pass it up to the parent (in the case that Image was a custom component that dispatched an event that didn't bubble).

This is all he needs in the mediator to listen for an image click assuming he doesn't need custom event names.

:
... mediator

override public function onRegister():void {

    // assuming the component was named mediatorComponent
    mediatorComponent.addEventListener(MouseEvent.CLICK, mouseClickHandler, false, 0, true);

}

Again, perhaps I was mislead by the example he gave and he does indeed need custom event names, in which case ignore my post :)
« Last Edit: May 19, 2009, 08:26:17 by Jason MacDonald » Logged
Ondina
Sr. Member
****
Posts: 86


View Profile Email
« Reply #5 on: May 19, 2009, 08:52:47 »

But just to be a bore..., adding the eventListener like this

mediatorComponent.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler, false, 0, true);

would lead to handling every MouseEvent in the view.
Right?

As for the bubbling from an image-click you are right.

Again, perhaps I was mislead by the example he gave and he does indeed need custom event names
Yes it's hard to say from just a fragment of code.
Well, we both tried to help  :)

Ondina
Logged

~ Ondina ~
purevwx
Newbie
*
Posts: 6


View Profile Email
« Reply #6 on: May 19, 2009, 04:20:53 »

first of all, thanks for your response! It works now. I use the approach with the MouseEvent-Listener, because i hope that would enough for me. I used the custom event when i started this thread, because it was the only sample code if found for dispatching events from a view component (employeeAdmin demo). Now i ended up with that in the Mediator

:
override public function onRegister():void
{
assetPreview.addEventListener( MouseEvent.CLICK, onClick);
}


As you said, it listens for the event, no matter if i redispatch the MouseEvent or not. Which seems normal, because the listener is added to the whole view component. Is there a way to add the listener for each image only? Maybe i then get better results on the clicked target (the loader object)?

If thats not possible, i refer to Jason:
The example you took from is more if you want a way of identifying which item was clicked and to dispatch custom events based on that knowledge.

How would you do that with custom events?
« Last Edit: May 19, 2009, 04:31:55 by purevwx » Logged
isragaytan
Full Member
***
Posts: 22


View Profile Email
« Reply #7 on: May 19, 2009, 05:11:48 »

Let me take this...

In order to work with CUSTOM events, your view has to dispatch the proper CUSTOM event to the Mediator.

So in our CUSTOM event we could have a chunk of code like this...

:
package events
{
import flash.events.Event;
public class CustomEvent extends Event
{

public var yourProperty:String;

public function CustomEvent (yourProperty,type:String)
{
                       //Important thing here its that has to bubbles with the second parameter set equal to true :D
super(type,true,true);
this.yourProperty=yourProperty;
}

override public function clone():Event{

return new CustomEvent (yourProperty,type);
}

}

}

Its really important that in the super function inside the constructor the second parameter its gonna set to true. (Bubbling stuff) Other wise it couldnt work.

Now on your component we have to dispatch the proper CUSTOM event. Dont forget in the top of your component add the metatag event with the custom event like this..

:
<mx:Metadata>
    [Event("CustomEvent",type="events.CustomEvent")]
</mx:Metadata>

Now we have to dispatch the CUSTOM event in a function , lets say that a button clicks and activates this function:

private function sendEvent():void{

      //Instantiate the custom event
      var evtObj:CustomEvent=new CustomEvent(yourVarValue,"CustomEvent");



}






Logged
isragaytan
Full Member
***
Posts: 22


View Profile Email
« Reply #8 on: May 19, 2009, 05:18:49 »

Sorry i sent before it was ended..

So lets continue...

:

private function sendEvent():void{

      //Instantiate the custom event
      var evtObj:CustomEvent=new CustomEvent(yourVarValue,"CustomEvent");

      //dispatch the Event
      dispatchEvent(evtObj);

}


Now in your Mediator.....

:

override public function onRegister():void{


yourComponentReference.addEventListener("CustomEvent",handleCustomEvent);
}

private function handleCustomEvent(evt:CustomEvent):void{
           
                 trace(evt.yourProperty);
}


Hope it helps!
Logged
Pages: [1]
Print