<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white" viewSourceURL="srcview/index.html">

    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.controls.dataGridClasses.DataGridColumn;

            private var interval:uint;

            private function startInt():void {
                interval = setInterval(getTime, 1000); // 1 second

                startButton.enabled = false;
                stopButton.enabled = true;
            }

            private function stopInt():void {
                if (interval) {
                    clearInterval(interval);
                    Alert.show("Interval stopped.");

                    startButton.enabled = true;
                    stopButton.enabled = false;
                }
            }

            private function getTime():void {
                arrColl.addItemAt({date:new Date(), timer:getTimer()}, 0);
            }

            private function date_labelFunc(item:Object, col:DataGridColumn):String {
                var dat:Date = item.date as Date;
                return dat.toTimeString();
            }

            private function timer_labelFunc(item:Object, col:DataGridColumn):String {
                return numberFormatter.format(item.timer);
            }
        ]]>
    </mx:Script>

    <mx:NumberFormatter id="numberFormatter"
            useThousandsSeparator="true" />

    <mx:ArrayCollection id="arrColl" />

    <mx:ApplicationControlBar dock="true">
        <mx:Button id="startButton"
                label="start interval"
                click="startInt();" />
        <mx:Button id="stopButton"
                label="stop interval"
                enabled="false"
                click="stopInt();" />
    </mx:ApplicationControlBar>

    <mx:DataGrid id="list"
            dataProvider="{arrColl}"
            verticalScrollPolicy="on"
            width="300">
        <mx:columns>
            <mx:DataGridColumn dataField="date"
                    headerText="date:"
                    labelFunction="date_labelFunc"
                    width="200" />
            <mx:DataGridColumn dataField="timer"
                    headerText="timer (ms):"
                    labelFunction="timer_labelFunc"
                    textAlign="right"
                    width="100" />
        </mx:columns>
    </mx:DataGrid>

</mx:Application>