Nested View -> Mediator

[xmrcivicboix]

I'm trying to build a photo gallery using this framework and pure AS3. What I have a hard time trying to wrap my head around is registering mediators. I have the main app that looks like this:

:

public class Application extends UIComponent
{
private var facade:ApplicationFacade = ApplicationFacade.getInstance();
public var canvas:MainCanvas;

public function Application()
{
StageUtil.init(this);
RootManager.getInstance().setRoot(this);
facade.notifyObservers(new Notification(ApplicationFacade.STARTUP, this));
stage.addEventListener(Event.RESIZE, applicationResizeHandler);
}

private function applicationResizeHandler(event:Event):void
{
if (canvas != null)
canvas.setSize(stage.stageWidth, stage.stageHeight);
}

public function initialize():void
{
canvas = new MainCanvas(this);
canvas.setSize(stage.stageWidth, stage.stageHeight);
}
}

Then within the MainCanvas I have children components:

MainCanvas->PhotoGallery->ThumbContainer->ThumbCanvas

How would I register ThumbCanvas to a its own mediator having to do:

:

public class ViewPrepCommand extends SimpleCommand implements ICommand
{
override public function execute(notification:INotification):void
{
                        var app:Application = notification.getBody() as Application;
facade.registerMediator(new ThumbCanvasMediator(app.canvas.photogallery.thumbcontainer.thumbcanvas));
}
}


I know there has to be a better way to do this. Please help.

[puremvc]

This is the sticky wicket:

:


facade.registerMediator(new ThumbCanvasMediator(app.canvas.photogallery.thumbcontainer.thumbcanvas));


app.canvas.photogallery.thumbcontainer.thumbcanvas is a little too much information about the app's internals. So the app itself might expose a method called getThumbCanvas(). Let the app be responsible for digging around its own display hierarchy and coming up with the reference. Then you might have:

public class ViewPrepCommand extends SimpleCommand implements ICommand
{
   override public function execute(notification:INotification):void
   {
               var app:Application = notification.getBody() as Application;
               facade.registerMediator(new ThumbCanvasMediator(app.getThumbCanvas()));
      }
   }
}

Another way to handle this is if there is a mediator working with a component higher up the display hierarchy, to let it register the mediator.

So the ViewPrepCommand would pass the app to the ApplicationMediator, who registers a MainCanvasMediator with the app.canvas component. Then the MainCanvasMediator might then create a PhotoGalleryMediator arount the canvas.photogallery component. And so on down the line.

Now these intermediate mediators don't need to be there if they're not really doing anything special with the component they steward. So it would be perfectly fine to have an ApplicationMediator and nothing else along the line until you get to the ThumbCanvasMediator. The ApplicationMediator would respond to the events (make 'em bubble now) from every thing from the ThumbContainer level up.

If you do that and then find that the ApplicationMediator is becoming too bloated because it is dealing with all that stuff in the display hierarchy between the thumbcanvas and the app, then divide and conquer! Add a PhotoGalleryMediator and refactor/move the stuff for handling the photogallery component out of the ApplicationMediator and push it down into the PhotoGalleryMediator.

In short, I like to start with less Mediator granularity and add it as needed. And let the view components expose an API for the Mediators and Commands to get at the things that need mediating without needing to know too much about the guts of the components.

Hope this helps,
-=Cliff>

[xmrcivicboix]

Actually it makes a lot of sense now. While I was waiting for some answers, I did a little experimenting and came up with exactly what you posted. However, it would definitely needs refactoring once it's done.

One question though. Does it matter where you register your mediators? Or does it have to be within a viewPrepCommand?

Thanks again!

[puremvc]

No, its just a handy  place where you register the initial ones. You may dynamically create view components and wrap mediators around them at runtime. Search these forums for 'deferred instantiaton' for more about that.

-=Cliff>

[xmrcivicboix]

I wanted to know what is the best way to chain commands together. The way I have it now is repeatedly send notifications in my ApplicationMediator whenever a handleNotification gets called. I'm not sure if the way this app is setup a good idea. I've attached the source code...

thanks

http://thaihuynh.com/sample.zip

The project I'm working on can be seen here: http://thaihuynh.com/photo/. It's still under development so are quite few errors.

[justSteve]

I'm curious how this app is working for you in the last couple weeks since posting - the online demo seems to have good usability and performance features as far as the previewer/selector goes...have you found resolution with your concern?