Newtriks LTD

Interactive Development specialising in web-applications

Handling Popup Logic in PureMVC *Update*

I have since re-structured some of my logic in handling popups in a Flex application using PureMVC. If you refer to my previous post you will see that I have a PopManager that extends PopUpManager and the core logic to handle opening and closing Popups was via the Mediator. I have now ripped this logic out so it is handled by a Command and popups can now be opened/closed via a notification, cleaner, simpler and more logical to PureMVC.

Here is a summary of how to handle popups more efficiently enabling multiple popup window types i.e. image popups, form popups etc. note Multicore SWC used:

PopManager

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

public class PopManager extends PopUpManager
{

public static function openPopUpWindow( facade:Facade, 
                                                                        ComponentClass:Class, 
                                                                        MediatorClass:Class, 
                                                                        modal:Boolean, 
                                                                        x:Number, y:Number, 
                                                                        name:String, 
                                                                        centre:Boolean ):void
{
  var window:IFlexDisplayObject = PopUpManager.createPopUp( Application.application as Sprite, 
                                                                                                        ComponentClass, modal );
      
  facade.registerMediator( new MediatorClass( window ) );
          
  if( centre != true )
  {
      window.x = x;
      window.y = y;
  }
  else
  {
      PopUpManager.centerPopUp( window );
  }       
  window.name = name;
          
}
      
public static function closePopUpWindow( facade:Facade, 
                                                                 window:IFlexDisplayObject, 
                                                                 mediatorName:String ):void
{
  PopUpManager.removePopUp( window );
  facade.removeMediator( mediatorName );
}

}

HandlePopCommand

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

public class HandlePopCommand extends SimpleCommand implements ICommand
{
  override public function execute( note:INotification ):void
  {
      var pop:PopInstanceVO  = new PopInstanceVO();
      var pop_registered:Boolean;
      var openData:PopDataVO = note.getBody() as PopDataVO;

      switch ( note.getType() as String )
      {
          case ResourceConstants.OPEN_POP:
              switch ( openData.type )
              {
                  case ResourceConstants.CUSTOM_POP:
                      pop_registered = facade.hasMediator( CustomPopMediator.NAME );      
                      if( !pop_registered )
                      {
                          PopManager.openPopUpWindow( ApplicationFacade.getInstance( this.multitonKey ), 
                                          CustomPop, 
                                          CustomPopMediator, 
                                          true, 
                                              0, 0, 
                                          "custom_pop", 
                                          true );
                      }
                      setPopData( CustomPopMediator.NAME, openData );
                      break;
              }
              break;
                  
          case ResourceConstants.CLOSE_POP:
              switch ( note.getBody() as String )
              {
                  case ResourceConstants.CUSTOM_POP:
                      pop_registered = facade.hasMediator( CustomPopMediator.NAME );
                      if( pop_registered )
                      {
                          var customPopMed:CustomPopMediator = facade.retrieveMediator( CustomPopMediator.NAME ) as CustomPopMediator;
                          
                          pop.window            = customPopMed.getViewComponent() as IFlexDisplayObject;
                          pop.mediator          = CustomPopMediator.NAME;
                              
                          PopManager.closePopUpWindow( ApplicationFacade.getInstance( this.multitonKey ), pop.window, pop.mediator );
                      }
                      break;
              }
              break;
      }
  }
      
  private function setPopData( name:String, data:PopDataVO ):void
  {
      switch ( name )
      {
          case "CustomPopMediator":
              if( facade.hasMediator( CustomPopMediator.NAME ) )
              {
                  var med:CustomPopMediator = 
                                                        facade.retrieveMediator( CustomPopMediator.NAME ) as CustomPopMediator;
                  med.popData = data; 
              }
              break;
      }
  }
}

CustomPopMediator

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

public class CustomPopMediator extends Mediator implements IMediator
{
  public static const NAME:String = 'CustomPopMediator';

  private var __popData:PopDataVO;

  public function CustomPopMediator( viewComponent:Object )
  {
      super( NAME, viewComponent );
  }

        public function set popData( val:PopDataVO ):void
        {
          __popData = val;
  }

  override public function onRegister():void
  {
      pop.addEventListener( CustomPopMediator.CLOSE_POP, onClose );
  }
      
  protected function onClose( e:Event ):void
  {
      sendNotification( ApplicationFacade.HANDLE_POP, ResourceConstants.CUSTOM_POP, ResourceConstants.CLOSE_POP );
  }
      
  protected function get pop():CustomPop
  {
      return viewComponent as CustomPop;
  }
  
}

PopDataVO

1
2
3
4
5
6
7
8

public class PopDataVO
{
  public var type:String;
  public var title:String;
  public var body:Object;
      
  public function PopDataVO(){}
}

PopInstanceVO

1
2
3
4
5
6
7
8
9
10

public class PopInstanceVO
{
  public var window:IFlexDisplayObject;
  public var mediator:String;
  public var name:String;
  public var x:Number;
  public var y:Number;
      
  public function PopInstanceVO(){}
}

CustomPop is simply an mxml component extending TitleWindow.

You can now call out CustomPop like so:

1
2
3
4
5

var pObj:PopDataVO = new PopDataVO();
pObj.type                 = ResourceConstants.CUSTOM_POP;
pObj.body                = "newtriks.com";

sendNotification( ApplicationFacade.HANDLE_POP, pObj, ResourceConstants.OPEN_POP );

And then close it like so:

1

sendNotification( ApplicationFacade.HANDLE_POP, ResourceConstants.CUSTOM_POP, ResourceConstants.CLOSE_POP );

Dont forget to get to grips with the basics of PureMVC read my post here: http://www.newtriks.com/?p=352

Comments