using a callout with a list

corey's Avatar

corey

10 Feb, 2012 07:44 AM

I have a mobile app that when a button is click opens up a callout which I think is essentially a popup.

When the callout opens the contents of the list is not displayed. This list is a mediated group list as it is used elsewhere and works fine. However, when the callout loads the group list doesn't seem to work. I am thinking that the list mediator never gets loaded despite it being loaded automatically.

           mediatorMap.mapView(GroupList, GroupListMediator);

Any tips when using a callout? My pre-robotlegs version of this same callout is here:

Image1

  1. Support Staff 1 Posted by Ondina D.F. on 10 Feb, 2012 11:43 AM

    Ondina D.F.'s Avatar

    Hi Corey,

    A Callout container is like a pop-up TitleWindow container.
    You need to manually create a Mediator for the callout:
    http://knowledge.robotlegs.org/kb/reference-mvcs-implementation/how...

    Have you tried that already and it didn’t work?

  2. Support Staff 2 Posted by Ondina D.F. on 10 Feb, 2012 04:59 PM

    Ondina D.F.'s Avatar

    Take a look at:

    MapViewsCommand

    OpenPopUpCommand : it creates the needed mediators (for SomeCallOutView and ListView)

    Views: SomeView, SomeCallOutView, and ListView

    and their Mediators : SomeMediator, SomeCallOutMediator, ListMediator

    I hope that's helpful. Let me know if you need more info.

  3. 3 Posted by corey on 13 Feb, 2012 08:39 AM

    corey's Avatar

    I have followed your suggestion, however mine differs slightly in that I can't use the addelement to pop the object on the stage.

    I am now able to narrow down the problem. The filterview is not being mediated. Even though I am explicitly mediating it here in a command.

    override public function execute():void{
                var filtercallout:FilterListlayout = new FilterListlayout();
                var filterview:FilterView = new FilterView();
                filtercallout.selectedItems = event.data;
                //var listView:ListView = new ListView();
                this.mediatorMap.createMediator(filtercallout);
                this.mediatorMap.createMediator(filterview);
                filtercallout.open(event.owner as DisplayObjectContainer, true);
            }
    

    Essentially my callout contains a viewnavigator which in turn contains the filterview as the first view.

    `<s:ViewNavigator creationComplete="init()" id="viewNav" width="100%" height="100%"

    firstView="com.lmc.remoteadmin.view.FilterView">
        <s:navigationContent>
            <s:Button label="Cancel" click="close(false)"/>
        </s:navigationContent>
        <s:actionContent>
            <s:Button id="done" label="OK" emphasized="true" click="done_clickHandler(event);" />
        </s:actionContent> 
    
    </s:ViewNavigator>
    

    `

  4. Support Staff 4 Posted by Ondina D.F. on 13 Feb, 2012 01:15 PM

    Ondina D.F.'s Avatar

    That’s a bit tricky and it won’t work in the command, because you’d need ViewNavigator’s activeView for the mapping, and by the time the command creates the mediator for ViewNavigator, its activeView is still null.
    A possible solution would be to map the View(your FilterView) contained in the ViewNavigator within ViewNavigator’s Mediator onRegister(), after the View(FilterView ) has been added to ViewNavigator’s display list. Not a very nice solution, but the only one I can come up with right now. I wonder if there is another(better) solution.

    Using my example, SomeCallOutView would add a CalloutNavigator, which is a ViewNavigator with a firstView set to AnotherView.
    So you’d need a CalloutNavigatorMediator, which will create AnotherMediator for AnotherView.

    • In the command: var someCallOut:SomeCallOutView = new SomeCallOutView();//a Callout container
      var calloutNavigator:CalloutNavigator = new CalloutNavigator();//a ViewNavigator
      mediatorMap.createMediator(someCallOut);
      someCallOut.open(event.popUpOwner, true);
      someCallOut.calloutGroup.addElement(calloutNavigator);
      tmediatorMap.createMediator(calloutNavigator);

    • CalloutNavigator.mxml (ViewNavigator) firstView="com.robotlegs.demos.robotlegsincremental.views.components.AnotherView"

    • AnotherView.mxml // spark.components.View containing a list

    • CalloutNavigatorMediator [Inject] public var view:CalloutNavigator;
      onRegister():
      mediatorMap.createMediator(view.activeView);
      //active view= AnotherView

    I tried it out and it works. Tell me how it goes, and of course, if you find a better solution, please share it with us :)

    Ondina

  5. 5 Posted by corey on 13 Feb, 2012 07:33 PM

    corey's Avatar

    I did finally get it to work with a few exceptions:

    1. the callout.open command needs to be called last otherwise the popup doesn't size the window properly after adding the element.
    public class FilterListOpenCommand extends Command
        {
            [Inject] public var event:FilterListLayoutEvent;
            
            public function FilterListOpenCommand()
            {
                super();
            }
            override public function execute():void{
                var filtercallout:FilterListlayout = new FilterListlayout();
                var calloutnavigator:ListCalloutViewNavigator = new ListCalloutViewNavigator();
                filtercallout.addElement(calloutnavigator);
                this.mediatorMap.createMediator(calloutnavigator);
                this.mediatorMap.createMediator(filtercallout);
                filtercallout.open(event.owner as DisplayObjectContainer, true);
    
    
    
                
            }
        }
    
    1. I am having trouble closing my callout. Below is my code to close it but I keep getting the following error
      Injector is missing a rule to handle injection into property "view"
    public class FilterListCloseCommand extends Command
        {
            [Inject] public var event:FilterListLayoutEvent;
            [Inject] public var view:FilterListlayout;
            [Inject] public var viewnav:ListCalloutViewNavigator;
            
            public function FilterListCloseCommand()
            {
                super();
            }
            override public function execute():void{
                this.mediatorMap.removeMediatorByView(view);
                this.mediatorMap.removeMediatorByView(viewnav);
                view.close();
    
                // inform the user of the selected items
                dispatch(new FilterListLayoutEvent(FilterListLayoutEvent.CHANGE, event.data));
            }
        }
    
  6. Support Staff 6 Posted by Ondina D.F. on 14 Feb, 2012 09:54 AM

    Ondina D.F.'s Avatar

    You can do this:

    Opening command:
    var someCallOutView:SomeCallOutView =injector.instantiate(SomeCallOutView);
    var calloutNavigator:CalloutNavigator = injector.instantiate(CalloutNavigator);
    injector.mapValue( CalloutNavigator, calloutNavigator );
    injector.mapValue( SomeCallOutView, someCallOutView );

    mediatorMap.createMediator(someCallOutView);
    someCallOutView.open(event.popUpOwner, true);
    someCallOutView.calloutGroup.addElement(calloutNavigator);
    mediatorMap.createMediator(calloutNavigator);

    Closing command:
    var calloutNavigator:CalloutNavigator = injector.getInstance(CalloutNavigator);
    var someCallOutView:SomeCallOutView = injector.getInstance(SomeCallOutView);
    mediatorMap.removeMediatorByView(someCallOutView);
    mediatorMap.removeMediatorByView(calloutNavigator);

    (no need to inject the views)

  7. Support Staff 7 Posted by Ondina D.F. on 14 Feb, 2012 09:59 AM

    Ondina D.F.'s Avatar

    On the other hand you can let each interested Mediator listen for the SomePopUpEvent.CLOSE_POPUP event dispatched by the view and perform mediatorMap.removeMediator(this); instead of using a command.

  8. 8 Posted by corey on 14 Feb, 2012 06:06 PM

    corey's Avatar

    Thank ou so much for the help. I probably use the mediator method but its nice to know the command method as well.

  9. corey closed this discussion on 14 Feb, 2012 06:07 PM.

Comments are currently closed for this discussion. You can start a new one.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac