<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:views="com.scottmebberson.examples.matelistenersexample.views.*"
    xmlns:maps="com.scottmebberson.examples.matelistenersexample.maps.*"
    layout="vertical" viewSourceURL="srcview/index.html">
    
    <mx:Style source="assets/styles.css" />
    
    <mx:Script>
        <![CDATA[
        
            import com.scottmebberson.examples.matelistenersexample.events.CounterEvent;
            
            [Bindable] private var num : int = 0;
            
            private function incrementNumber () : void
            {
                num++;
                
                var counterEvent : CounterEvent = new CounterEvent(CounterEvent.INCREMENT);
                counterEvent.value = num;
                dispatchEvent(counterEvent);                
            }
            
            private function decrementNumber () : void
            {
                if (num >= 1) num--;
                
                var counterEvent : CounterEvent = new CounterEvent(CounterEvent.DECREMENT);
                counterEvent.value = num;
                dispatchEvent(counterEvent);                
            }
            
            private function resetNumber () : void
            {
                num = 0;
                
                var counterEvent : CounterEvent = new CounterEvent(CounterEvent.RESET);
                counterEvent.value = num;
                dispatchEvent(counterEvent);                
            }
            
        ]]>
    </mx:Script>
    
    <!-- MATE framework integration -->
    <maps:MainEventMap />
    
    <!-- Output the number in the main view -->
    <mx:Label text="The number is: {num}" />
    
    <!-- Controls for updating the number -->
    <mx:HBox>
        <mx:Button label="Increment" click="incrementNumber();" />
        <mx:Button label="Decrement" click="decrementNumber();" />
        <mx:Button label="Reset" click="resetNumber();" />
    </mx:HBox>
    
    <!-- Views for demonstrating different ways to respond to events -->
    <mx:HBox width="100%" paddingTop="10">
        <views:View1 label="View 1" width="100%" />
        <views:View2 label="View 2" width="100%" />
    </mx:HBox>
    
</mx:Application>