Close a Callout inside a View in Flex

Question

I have this ViewNavigator inside a callout and the callout displays a view inside it using firstView="views.ListMenusHomeView" . Now how can I close the callout from ListMenusHomeView? Hope someone can help.

Here is my code for the callout:

<?xml version="1.0" encoding="utf-8"?>
<s:Callout xmlns:fx="http://ns.adobe.com/mxml/2009" 
           xmlns:s="library://ns.adobe.com/flex/spark"
           contentBackgroundAppearance="none"
           height="300" width="300"> 
    <fx:Declarations>
        <fx:XML id="menu" source="xmldata/menu2.xml" /> 
    </fx:Declarations>

    <fx:Script>
        <![CDATA[

            import spark.events.PopUpEvent;
            protected function back(event:MouseEvent):void {

                if(viewNav.length>1)
                    viewNav.popView();
            }


        ]]>
    </fx:Script>

    <s:ViewNavigator id="viewNav" width="100%" height="100%" firstView="views.ListMenusHomeView">
        <s:navigationContent>
            <s:Button label="Back" click="back(event)"/>
        </s:navigationContent>
        <s:actionContent>
            <s:Button label="Cancel" click="close(false)"  emphasized="true"/>
        </s:actionContent>
    </s:ViewNavigator>

</s:Callout>

You see that there is a ViewNavigator which holds the ListMenusHomeView. This is the code for the ListMenusHomeView.

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" title="Main Menu" creationComplete="onCreationComplete()">

<fx:Declarations>
    <fx:XML id="menu" source="xmldata/menu2.xml" /> 
</fx:Declarations>

<fx:Script>
    <![CDATA[

        import com.adobe.serializers.xml.XMLDecoder;

        import mx.collections.ArrayCollection;

        import spark.events.IndexChangeEvent;

        [Bindable]
        private var dataArray:ArrayCollection = new ArrayCollection();  

        private var object:DataArray = new DataArray();

        private function onCreationComplete() : void{

            var decoder:XMLDecoder = new XMLDecoder();
            var resultObj:Object = decoder.decode(menu);    

            dataArray = object.onCreationComplete(menu, menu.menuitem, resultObj, resultObj.menuitem); 

        }

        protected function list1_changeHandler(event:IndexChangeEvent):void
        {

        }



    ]]>
</fx:Script>

<s:List id="tileLayout"
        width="100%" height="100%"
        verticalScrollPolicy="off" horizontalScrollPolicy="on"
        pageScrollingEnabled="true" dataProvider="{dataArray}"
        itemRenderer="renderers.iconList2" change="list1_changeHandler(event)">
    <s:layout>
        <s:TileLayout orientation="columns" requestedRowCount="3" 

                      verticalGap="20" horizontalGap="20"/>

    </s:layout>

</s:List>

Now I want to close MyCallout whenever I click an icon inside ListMenusHomeView. The function list1_changeHandler(event:IndexChangeEvent) is responsible for that one.

What should I do?

Answer 1

The Callout class has a close() method, so you basically just need to access the ListMenusHomeViews parentDocument (which would be your "viewNav" ViewNavigator) and its parentDocument, which should be your ListMenusHomeView.

I haven't tested it but you might fiddle around with the parentDocument, parent and owner properties to access the correct object. Try them with a simple trace and you'll be up and running in no time.