<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()">

    <mx:Metadata>
        // a semicolon at the end of this line with throw an error for some reason
        [Event(name='MyCustomEvent', type='events.MyCustomEvent')]
    </mx:Metadata>

    <mx:Script>
        <![CDATA[

            // import the event we want to fire with the button click
            import events.MyCustomEvent;
            import mx.controls.Alert;

            // becomes a property of the button so that it shows up in MXML
            public var state:String;
            [Bindable]
            public var myLabel:String;

            // add an event listener so that the button catches it's own event
            // meant to show how bubbling works
            private function init():void {
                addEventListener(events.MyCustomEvent.MY_CUSTOM_EVENT, function(event:MyCustomEvent):void {
                    Alert.show('hello from component: ' + event.state);
                });
            }

            public function clickMe(e:MouseEvent):void {
                var state:String = state;
                // determines whether the event fired by this
                // instance of the component will bubble
                var bubbleUp:Boolean = bubble.selected;
                dispatchEvent(new MyCustomEvent(state, events.MyCustomEvent.MY_CUSTOM_EVENT, bubbleUp));
            }

        ]]>
    </mx:Script>
    
    <mx:Button label="{myLabel}" click="clickMe(event)" />
    <mx:CheckBox id="bubble" label="Bubble?" left="110" />

</mx:Canvas>