EventListeners - Communicate Between Components

classic Classic list List threaded Threaded
6 messages Options
Reply | Threaded
Open this post in threaded view
|

EventListeners - Communicate Between Components

Bilbosax
So say I have an MXML component called Main.mxml and another called
Customers.mxml.  From Customers.mxml, I dispatch an event like so:

     var f:Event = new Event("newCustomerRegistered", true);
     dispatchEvent(f);

In my Flex way of doing things, if I wanted to catch that event in the
Main.mxml, I attached a listener to the  systemManager.stage like so:

     systemManager.stage.addEventListener("newCustomerRegistered",
updateDatabase);


systemManager.stage was a base that all events from all components could be
heard as they bubbled up and I loved it.  But I don't find it in Royale.
How can I attach a listener to my Main.mxml in Royale so that it can hear
events dispatched from all other components?



--
Sent from: http://apache-royale-users.20374.n8.nabble.com/
Reply | Threaded
Open this post in threaded view
|

Re: EventListeners - Communicate Between Components

Carlos Rovira-2
Hi Bilbo,

You need to send events with bubble param to true. That will make the event go up all the dom chain and reach Main.mxml
But you don't need a system manager anymore like in Flex. In Flex we had things hanging from a root component, but also popupmanager was disconnected from root.
In Royale all hangs from root and simplifies that.

You can see our TodoMVC example that use that extensively from differente subcomponents or from item renderers:

Jewel version:

Jewel+Crux version:

TodoMVC Running version:

HTH


El mié, 27 ene 2021 a las 20:26, Bilbosax (<[hidden email]>) escribió:
So say I have an MXML component called Main.mxml and another called
Customers.mxml.  From Customers.mxml, I dispatch an event like so:

     var f:Event = new Event("newCustomerRegistered", true);
     dispatchEvent(f);

In my Flex way of doing things, if I wanted to catch that event in the
Main.mxml, I attached a listener to the  systemManager.stage like so:

     systemManager.stage.addEventListener("newCustomerRegistered",
updateDatabase);


systemManager.stage was a base that all events from all components could be
heard as they bubbled up and I loved it.  But I don't find it in Royale.
How can I attach a listener to my Main.mxml in Royale so that it can hear
events dispatched from all other components?



--
Sent from: http://apache-royale-users.20374.n8.nabble.com/


--
Carlos Rovira
Apache Member & Apache Royale PMC
Apache Software Foundation

Reply | Threaded
Open this post in threaded view
|

Re: EventListeners - Communicate Between Components

Bilbosax
This post was updated on .
Brilliant, Carlos.  Thanks.

I ran a little test and was easily able to catch events that bubbled UP from
a component to the Main.mxml.  But what if I wanted to dispatch an event
from Main.mxml DOWN that I want a component below it to catch?  In Flex, you could do this
by adding an eventlistener to the systemmanger.stage.
Is there a way to do anything like this in Royale?



--
Sent from: http://apache-royale-users.20374.n8.nabble.com/
Reply | Threaded
Open this post in threaded view
|

Re: EventListeners - Communicate Between Components

Bilbosax
Or how about components that aren’t related in a tree at all, components that
exists side by side? For instance, my app will have several central
components that exist in several states in the main app. One has the job of
collecting search criteria and calling remoteobject services. Another
component will be an image and data viewer for the data. Once the first
component collects the data, it will dispatch an event that the data is
collected and processed. The main app will switch states to the viewer
component, and the viewer component will download the images and format the
appropriate data displays. But the data component and the viewer are totally
separate and an event sent by one would not bubble up through the other. How
can I send an event DOWN, or to an unrelated component that will not share
“bubbling” with the sending component?

In Flex it was simple, every component could just listened to the stage.
What can I do in Royale to hear events from unrelated components?



--
Sent from: http://apache-royale-users.20374.n8.nabble.com/
Reply | Threaded
Open this post in threaded view
|

Re: EventListeners - Communicate Between Components

Carlos Rovira-2
In reply to this post by Bilbosax
Hi,

For that you need to add a listener that uses capture. Remember the 3 phases in event processing "capture-target-bubble"
But use to add a concrete listener for a concrete event from a component, instead of use capture.

Moreover, in real apps, we really don't do that either, we use frameworks like Crux. Please check presentations here:


in Concrete this:

Where I talk about using Crux


In "Event Handling" and "The Controller" slides, you can see the Crux style through metadata:

[EventHandler(event="TodoEvent.ADD_TODO_ITEM", properties="todo")]
public function addTodoItem(todo:TodoVO):void { 
    model.allItems.addItem(todo); 
   saveDataToLocal(); 
   updateInterface();
}

So in short, you have a Controller (MVC typical app design), where you have the controller methods that are "annotated" with metadata. Crux know about that events and is capable to listen from views (since crux knows about the views and can listen). So when a concrete event is thrown from a view the controller is capable to run a particular method.

HTH


El vie, 29 ene 2021 a las 21:26, Bilbosax (<[hidden email]>) escribió:
Brilliant, Carlos.  Thanks.

I ran a little test and was easily able to catch events that bubbled up from
a component to the Main.mxml.  But what if I wanted to dispatch an event
from Main.mxml that I want a component below it to catch?



--
Sent from: http://apache-royale-users.20374.n8.nabble.com/


--
Carlos Rovira
Apache Member & Apache Royale PMC
Apache Software Foundation

Reply | Threaded
Open this post in threaded view
|

Re: EventListeners - Communicate Between Components

Carlos Rovira-2
In reply to this post by Bilbosax
I think the response I just did a few minutes ago is valid for this too.
In the end all views and components are hanging in a DOM tree (*ALL*), and although you can listen for concrete components and methods, I think if you go in a manual mode, you'll end doing some spaghetti code in the end. So I recommend you add Crux to the mix, it's an amazing way to structure and organize code with metodologic and communicate different parts. Far simpler than other microframeworks like Cairngorm, and less invasive in your code. Check the TODOMVC-CRUX example where the code is a very good way to see a full small app with all things. 

If you also use AMF and RemoteObject Crux gives you a very good way to handle calls and responses from back end services too. That part is not implemented in TodoMVC but if you go that way I can give you some code for you to use

HTH

Carlos



El dom, 31 ene 2021 a las 8:20, Bilbosax (<[hidden email]>) escribió:
Or how about components that aren’t related in a tree at all, components that
exists side by side? For instance, my app will have several central
components that exist in several states in the main app. One has the job of
collecting search criteria and calling remoteobject services. Another
component will be an image and data viewer for the data. Once the first
component collects the data, it will dispatch an event that the data is
collected and processed. The main app will switch states to the viewer
component, and the viewer component will download the images and format the
appropriate data displays. But the data component and the viewer are totally
separate and an event sent by one would not bubble up through the other. How
can I send an event DOWN, or to an unrelated component that will not share
“bubbling” with the sending component?

In Flex it was simple, every component could just listened to the stage.
What can I do in Royale to hear events from unrelated components?



--
Sent from: http://apache-royale-users.20374.n8.nabble.com/


--
Carlos Rovira
Apache Member & Apache Royale PMC
Apache Software Foundation