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.