从fx：component flex在AS内部调用函数

Question

This one is probably really simple, but I can't find online an answer. Heres what I have:

<fx:Script>
        <![CDATA[
            protected function DestIsAirport(event:MouseEvent):void {
                navigator.pushView(AirportSelector);
            }
            protected function DestIsAddress(event:MouseEvent):void {
                navigator.pushView(DestinationInfoView);
            }
        ]]>
</fx:Script>

and then I have a pop up container just below that and it looks like this:

<fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
        <fx:Component className="DestAlert">
            <s:SkinnablePopUpContainer x="50" y="200">
                <s:TitleWindow title="Destination">
                    <s:VGroup horizontalAlign="center" verticalAlign="middle" paddingTop="8" paddingBottom="8" paddingLeft="8" paddingRight="8" gap="5" width="100%">
                        <s:Label text="Is your destination an airport?"/>
                    </s:VGroup>
                    <s:HGroup horizontalAlign="center" verticalAlign="middle" paddingTop="40" paddingBottom="8" gap="5" width="100%">
                        <s:Button label="Yes" bottom="10" left="10" width="100" fontSize="16" click="DestIsAirport(event)"/>
                        <s:Button label="No" bottom="10" right="10" width="100" fontSize="16" click="DestIsAddress(event)"/>
                    </s:HGroup>
                </s:TitleWindow>
            </s:SkinnablePopUpContainer>
        </fx:Component>
    </fx:Declarations>

I want the two buttons to run different functions from the AS3 script. This produces an error: 1180: Call to a possibly undefined method DestIsAddress. 1180: Call to a possibly undefined method DestIsAirport.

How do I get those buttons to run those two functions?

Entire source file:

<?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="Enter Pick Up Address">

    <fx:Script>
        <![CDATA[
            protected function button1_clickHandler(event:MouseEvent):void
            {
                navigator.popView();
            }
            protected function DestIsAirport(event:MouseEvent):void {
                navigator.pushView(AirportSelector);
            }
            protected function DestIsAddress(event:MouseEvent):void {
                navigator.pushView(DestinationInfoView);
            }
        ]]>
    </fx:Script>
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
        <fx:Component className="DestAlert">
            <s:SkinnablePopUpContainer x="50" y="200">
                <s:TitleWindow title="Destination">
                    <s:VGroup horizontalAlign="center" verticalAlign="middle" paddingTop="8" paddingBottom="8" paddingLeft="8" paddingRight="8" gap="5" width="100%">
                        <s:Label text="Is your destination an airport?"/>
                    </s:VGroup>
                    <s:HGroup horizontalAlign="center" verticalAlign="middle" paddingTop="40" paddingBottom="8" gap="5" width="100%">
                        <s:Button label="Yes" bottom="10" left="10" width="100" fontSize="16" click="close()"/>
                        <s:Button label="No" bottom="10" right="10" width="100" fontSize="16" click="close()"/>
                    </s:HGroup>
                </s:TitleWindow>
            </s:SkinnablePopUpContainer>
        </fx:Component>
    </fx:Declarations>
    <s:actionContent>
        <s:Button label="Back" click="button1_clickHandler(event)"/>
    </s:actionContent>
    <s:TextInput top="6" horizontalCenter="-1" prompt="Address Line 1"/>
    <s:TextInput top="47" horizontalCenter="-1" prompt="Address Line 2"/>
    <s:RadioButton top="90" label="IL - Illinois" horizontalCenter="-94"/>
    <s:RadioButton top="90" label="WI - Wisconsin" horizontalCenter="72"/>
    <s:SpinnerListContainer bottom="60" width="320" height="211" horizontalCenter="0">
        <s:SpinnerList width="317" height="100%" labelField="data" selectedIndex="0">
            <s:ArrayList>
                <fx:Object data=""></fx:Object>
                <fx:Object data="Abbott Park"></fx:Object>
                <fx:Object data="Addison"></fx:Object>
                <fx:Object data="Algonquin"></fx:Object>
                <fx:Object data="Alsip"></fx:Object>

    </s:ArrayList>
        </s:SpinnerList>
    </s:SpinnerListContainer>
    <s:Button bottom="10" width="302" label="Next" click="(new DestAlert()).open(this, false)"
              fontSize="24" horizontalCenter="0"/>
</s:View>

Answer 1

The declarations section is only meant for things the user isn't going to see. You need to do a couple of things.

1. Take the component in the declarations section and move it into it's own file.
2. Show an instance of the component via a popup manager.

Additionally, it's important to note that the component and the parent are going to be in completely different scopes. However, after creating a new instance of the popup component, you can use your reference to it to add listeners. The component can then dispatch events that this class can listen to, which then call the functions.

This gets more complicated because the popupmanager is a static class and will have no relation to the code you've added here. Let me know if this needs more explanation, because I almost feel like a picture is in order.

Answer 2

Why not creating a separate action script/mxml file? That would easily solve that issue.