Creating custom timers by extending the Timer class

In a previous example, “Creating timers using the Timer class”, we saw how to create simple timers using the Timer class and listening for the timer and timerComplete events.

The following examples show how you can extend the Timer class to add methods and properties to the Timer object, which allow you to pass additional data to the event handlers.

Full code after the jump.

The following example shows a custom timer class, DataTimer, which extends the Timer class and adds an additional property, data:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/02/20/creating-custom-timers-by-extending-the-timer-class/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init();">

    <mx:Script>
        <![CDATA[
            import mx.utils.UIDUtil;

            private var timer:DataTimer;

            private function init():void {
                timer = new DataTimer(1000);
                timer.data.startTime = getTimer();
                timer.data.uid = UIDUtil.createUID();
                timer.addEventListener(TimerEvent.TIMER, timer_timer);
                timer.start();
            }

            private function timer_timer(evt:TimerEvent):void {
                var tmr:DataTimer = evt.currentTarget as DataTimer;
                var obj:Object = new Object();
                obj.currentCount = tmr.currentCount;
                obj.delay = tmr.delay;
                obj.repeatCount = tmr.repeatCount;
                obj.running = tmr.running;
                obj.startTime = tmr.data.startTime;
                obj.uuid = tmr.data.uid;
                arrColl.addItemAt(obj, 0);
            }
        ]]>
    </mx:Script>

    <mx:ArrayCollection id="arrColl" />

    <mx:DataGrid id="dataGrid"
            dataProvider="{arrColl}"
            width="100%"
            rowCount="10"
            verticalGridLines="false"
            verticalScrollPolicy="on">
        <mx:columns>
            <mx:DataGridColumn dataField="currentCount" />
            <mx:DataGridColumn dataField="repeatCount" />
            <mx:DataGridColumn dataField="delay" />
            <mx:DataGridColumn dataField="running" />
            <mx:DataGridColumn dataField="startTime"
                    headerText="startTime (*)" />
            <mx:DataGridColumn dataField="uuid"
                    headerText="uuid (*)" />
        </mx:columns>
    </mx:DataGrid>

</mx:Application>

View DataTimer.as

/**
 * http://blog.flexexamples.com/2008/02/20/creating-custom-timers-by-extending-the-timer-class/
 */
package {
    import flash.utils.Timer;

    public class DataTimer extends Timer {
        private var _data:Object;

        public function DataTimer(delay:Number, repeatCount:int=0) {
            super(delay, repeatCount);
            _data = {};
        }

        public function get data():Object {
            return _data;
        }

        public function set data(value:Object):void {
            _data = value;
        }
    }
}

View source is enabled in the following example.

The following example shows a custom timer class, DynamicTimer, which extends the Timer class and allows you to dynamically add any additional methods and properties:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/02/20/creating-custom-timers-by-extending-the-timer-class/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init();">

    <mx:Script>
        <![CDATA[
            import mx.utils.UIDUtil;

            private var timer:DynamicTimer;

            private function init():void {
                timer = new DynamicTimer(1000);
                timer.startTime = getTimer();
                timer.uuid = UIDUtil.createUID();
                timer.addEventListener(TimerEvent.TIMER, timer_timer);
                timer.start();
            }

            private function timer_timer(evt:TimerEvent):void {
                var tmr:DynamicTimer = evt.currentTarget as DynamicTimer;
                var obj:Object = new Object();
                obj.currentCount = tmr.currentCount;
                obj.delay = tmr.delay;
                obj.repeatCount = tmr.repeatCount;
                obj.running = tmr.running;
                obj.startTime = tmr.startTime;
                obj.uuid = tmr.uuid;
                arrColl.addItemAt(obj, 0);
            }
        ]]>
    </mx:Script>

    <mx:ArrayCollection id="arrColl" />

    <mx:DataGrid id="dataGrid"
            dataProvider="{arrColl}"
            width="100%"
            rowCount="10"
            verticalGridLines="false"
            verticalScrollPolicy="on">
        <mx:columns>
            <mx:DataGridColumn dataField="currentCount" />
            <mx:DataGridColumn dataField="repeatCount" />
            <mx:DataGridColumn dataField="delay" />
            <mx:DataGridColumn dataField="running" />
            <mx:DataGridColumn dataField="startTime"
                    headerText="startTime (*)" />
            <mx:DataGridColumn dataField="uuid"
                    headerText="uuid (*)" />
        </mx:columns>
    </mx:DataGrid>

</mx:Application>

View DataTimer.as

/**
 * http://blog.flexexamples.com/2008/02/20/creating-custom-timers-by-extending-the-timer-class/
 */
package {
    import flash.utils.Timer;

    public dynamic class DynamicTimer extends Timer {
        public function DynamicTimer(delay:Number, repeatCount:int=0) {
            super(delay, repeatCount);
        }
    }
}

View source is enabled in the following example.