Reusable Components using PureMVC

So a while ago we promised to discuss the capabilities of PureMVC mediators and proxies in creating reusable components. But this week an update to the framework makes it easier than ever to use dynamic naming conventions.

Our main beef with the mediators in the last post was that it was inconvenient to name them dynamically as we had to come up with a workaround similar to what was implemented in the proxies.
For any of you not familiar, proxies and mediators are retrieved by name, making it necessary to have unique names for each mediator. The Proxy class lets you supply a unique name:

The Mediator class previously lacked this same naming solution so we had to come up with our own similar way of assigning it:

But now has been updated to include a name as a parameter in the constructor, rendering our solution unneeded. So how does this affect our reusable components you say? Well, we have realized that creating and displaying multiple instances of the same component on screen at the same time requires a little finesse.

First of all, we had to take advantage of using the dynamic names for both mediators and proxies for our component. We based their names on the uid of the viewComponent.
So for example, we often have viewComponents whose uid is something along the lines of Canvas10.ModuleLoader33.Module85, therefore our mediator would be named
Canvas10.ModuleLoader33.Module85Mediator and our proxy would be named Canvas10.ModuleLoader33.Module85Proxy.
This leads to being able to retrieve the mediator and proxy from anywhere that has access to the viewComponent by simply using the following:

Once the mediator and proxy were both established for the component, we thought all was smooth sailing. Until we started listening to notifications and realized that every copy of the component received them no matter which one requested the action.
In other words, component1, component2, and component3 are all of type OurCustomComponent. Component1 calls a method in the proxy and listens for a notification back that it is finished loading data.
Component1 receives the notification, but so do component2 and component3 that also have the notification listed in listNotificationInterests. So how to tell the difference when receiving notifications?

Simple, we used the type property on each notification. We set the type to the mediatorName that was passed from the mediator to the proxy.

Then the proxy made calls to the service to save data and when it finished, it returned the mediatorName as the type in the notification.

Then when the mediator gets the notification back in handleNotification, we check to see if the type matches the name of the mediator. If it does, the notification is meant to be received by this instance of the mediator, if not it is discarded.

Comments

2 Responses to “Reusable Components using PureMVC”


  1. 1 Radek

    Nice article. Exactly what I was looking for.
    Thanks Radek

  2. 2 K

    Very useful.

    Thanks for the post.

Leave a Reply