Flex Callout Container List Item Selection Issue - Disable Automatic Pop-Up

Question

I'm having an issue with CalloutButtons & containers in flash. I have successfully created a callout button which brings up a scrollable list of items. When an item is selected, the corresponding image should show up in the main view.

But for some reason, there seems to be 2 callouts being brought up - and when I scroll down the menu, one instance closes and passes on the data (Which is the previous stored data, because no data has been selected yet this time).... And when I do actually select an item, the list closes, but doesn't call the closeHandler again.

The problem seems to be that Flex automatically creates a callout container when a calloutButton is clicked. How can I disable this?

Or replace it with mine...

Thanks

Edit - Here's my code:

PrimaryCallout.mxml

<?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"
           xmlns:weapons="services.weapons.*">
    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;
            import assets.dataFiles.Loadout;
            import spark.events.IndexChangeEvent;

            protected function list_creationCompleteHandler(event:FlexEvent):void
            {
                getDataResult.token = weapons.getData();
            }

            protected function list_ChangeHandler(event:IndexChangeEvent):void
            {   
                close(false);
                Loadout.primaryImage    = list.selectedItem.ImgID;
                Loadout.primaryTitle    = list.selectedItem.WeapName;

            }

        ]]>
    </fx:Script>
    <fx:Declarations>
        <s:CallResponder id="getDataResult"/>
        <weapons:Weapons id="weapons"/>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>

        <s:List id="list" width="240" height="100%" change="list_ChangeHandler(event)"
                creationComplete="list_creationCompleteHandler(event)"
                labelField="WeapName">
            <s:AsyncListView list="{getDataResult.lastResult}"/>
        </s:List>
</s:Callout>

LoadoutView.mxml

    <?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"
        xmlns:weapons="services.weapons.*"
        xmlns:callouts="views.callouts.*"
        title="Loadout">
    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;

            import spark.events.DropDownEvent;

            import assets.dataFiles.Loadout;
            import views.callouts.PrimaryCallout;



            protected function calloutbutton1_openHandler(event:MouseEvent):void
            {
                var primaryCallout:PrimaryCallout = new PrimaryCallout();

                primaryCallout.open(primary, true);
            }


            protected function list_creationCompleteHandler(event:FlexEvent):void
            {
                getDataResult.token = weapons.getData();
                //weaponImage.source = "assets/weapons/{Loadout.primaryImage}";
            }

            protected function primary_closeHandler(event:DropDownEvent):void
            {
                //primary.label = Loadout.primaryTitle;
                weaponImage.source      = "assets/weapons/"+ (Loadout.primaryImage);

            }

        ]]>
    </fx:Script>
    <fx:Declarations>
        <s:CallResponder id="getDataResult"/>
        <weapons:Weapons id="weapons"/>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>

    <s:Image x="0" y="0" width="100%" height="100%" scaleMode="stretch" smooth="true"
             source="assets/06iOS.jpg"/>
    <s:CalloutButton id="primary" x="10" y="10" height="56" label="Primary" fontStyle="normal"
                     fontWeight="normal" lineThrough="false"
                     click="calloutbutton1_openHandler(event)" textDecoration="none" close="primary_closeHandler(event)"/>
    <s:Image id="weaponImage" x="10" y="74" width="240" height="105"
             source="assets/weapons/{data.ImgID}"/>
</s:View>

Answer 1

Thanks for the code. The reason for your two Callout instances is that you are using a CalloutButton plus a separate Callout. Given that the CalloutButton creates its own instance of Callout you end up having both the CalloutButton's default Callout, plus the one you created yourself.

What you need to change is either use your PrimaryCallout with a generic Button (which would require you to handle the open/close actions yourself) or use the CalloutButton's default Callout instead.