Flex Examples » DateFormatter http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Scrubbing an FLV using the VideoDisplay control and a slider http://blog.flexexamples.com/2007/08/02/scrubbing-an-flv-using-the-videodisplay-control-and-a-slider/ http://blog.flexexamples.com/2007/08/02/scrubbing-an-flv-using-the-videodisplay-control-and-a-slider/#comments Thu, 02 Aug 2007 15:04:00 +0000 Peter deHaan http://blog.flexexamples.com/2007/08/02/scrubbing-an-flv-using-the-videodisplay-control-and-a-slider/ In yet *another* post about the VideoDisplay control, this time we look at formatting playback times using the DateFormatter class/tag, creating a basic scrubber using an HSlider control, and applying a mildly annoying Zoom effect to the video.

Also, we tweak the slider control (or more accurately HSlider) and prevent users from clicking on the [...]]]> In yet *another* post about the VideoDisplay control, this time we look at formatting playback times using the DateFormatter class/tag, creating a basic scrubber using an HSlider control, and applying a mildly annoying Zoom effect to the video.

Also, we tweak the slider control (or more accurately HSlider) and prevent users from clicking on the slider track (thanks to the allowTrackClick property, we set the liveDragging property to false to make sure we arent needlessly seeking around the video every time the slider thumb moves, and finally we invert the thumb arrow for no other reason than I didn’t know you could do that so easily.

Oh, and I also created a faux looping video by using the autoRewind property, and calling the play() method in the rewind event handler.

Full code after the jump.

View MXML

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

    <mx:Script>
        <![CDATA[
            private function formatTime(item:Date):String {
                return dateFormatter.format(item);
            }

            private function videoDisplay_playheadUpdate():void {
                /* If playhead time is 0, set to 100ms so the DateFormatter doesnt return an empty string. */
                var pT:Number = videoDisplay.playheadTime || 0.1;
                var tT:Number = videoDisplay.totalTime;

                /* Convert playheadTime and totalTime from seconds to milliseconds and create new Date objects. */
                var pTimeMS:Date = new Date(pT * 1000);
                var tTimeMS:Date = new Date(tT * 1000);

                timeLabel.text = formatTime(pTimeMS) + " / " + formatTime(tTimeMS);
            }

            private function slider_thumbPress():void {
                videoDisplay.pause();
            }

            private function slider_thumbRelease():void {
                videoDisplay.playheadTime = slider.value;
                videoDisplay.play();
            }

            private function videoDisplay_ready():void {
                videoDisplay.visible = true;
                controlBar.visible = true;
            }
        ]]>
    </mx:Script>

    <!-- Only show minutes and seconds. -->
    <mx:DateFormatter id="dateFormatter" formatString="NN:SS" />

    <mx:Zoom id="zoom" />

    <mx:Panel title="{videoDisplay.source.split('/').pop()} ({videoDisplay.state})">
        <mx:VideoDisplay id="videoDisplay" visible="false" showEffect="{zoom}"
            playheadUpdate="videoDisplay_playheadUpdate()"
            ready="videoDisplay_ready()"
            rewind="videoDisplay.play()"
            source="http://www.helpexamples.com/flash/video/cuepoints.flv" />

        <mx:ControlBar id="controlBar" visible="false">
            <mx:HSlider id="slider" width="100%"
                allowTrackClick="false"
                invertThumbDirection="true"
                liveDragging="false"
                maximum="{videoDisplay.totalTime}"
                minimum="0"
                thumbPress="slider_thumbPress()"
                thumbRelease="slider_thumbRelease()"
                tickInterval="1"
                value="{videoDisplay.playheadTime}" />
            <mx:Label id="timeLabel" textAlign="right" />
        </mx:ControlBar>
    </mx:Panel>

</mx:Application>

View source enabled in the following example.

 
]]> http://blog.flexexamples.com/2007/08/02/scrubbing-an-flv-using-the-videodisplay-control-and-a-slider/feed/ 13 Calculating the number of days between two selected dates in a DateChooser control http://blog.flexexamples.com/2007/07/31/calculating-the-number-of-days-between-two-selected-dates-in-a-datechooser-control/ http://blog.flexexamples.com/2007/07/31/calculating-the-number-of-days-between-two-selected-dates-in-a-datechooser-control/#comments Wed, 01 Aug 2007 04:54:09 +0000 Peter deHaan http://blog.flexexamples.com/2007/07/31/calculating-the-number-of-days-between-two-selected-dates-in-a-datechooser-control/ Here’s a marginally more interesting sample. I was playing around with the DateChooser (calendar) control and the selectableRange property and figured I’d make a simple application to calculate the differences between two selected dates. The example creates a selectable range of dates from the current date to current date plus 1 year. Users can select [...]]]> Here’s a marginally more interesting sample. I was playing around with the DateChooser (calendar) control and the selectableRange property and figured I’d make a simple application to calculate the differences between two selected dates. The example creates a selectable range of dates from the current date to current date plus 1 year. Users can select any single or range of dates between the start date and end date, and Flex calculates the number of days the user selected using some basic math.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application name="DateChooser_selectableRange_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:Script>
        <![CDATA[
            import mx.controls.dataGridClasses.DataGridColumn;
 
            /* Number of milliseconds in a day. (1000 milliseconds per second * 60 seconds per minute * 60 minutes per hour * 24 hours per day) */
            private const MS_PER_DAY:uint = 1000 * 60 * 60 * 24;
 
            [Bindable]
            private var startDate:Date = new Date();
 
            [Bindable]
            private var endDate:Date = new Date(startDate.fullYear + 1, startDate.month, startDate.date);
 
            /* Default label function for the DataGrid. Basically just calls the DateFormatter on the current column's contents. */
            private function cellDateFormatter(item:Object, column:DataGridColumn):String {
                var columnDataField:String = column.dataField;
                return dateFormatter.format(item[columnDataField]);
            }
 
            /* Custom label function for the last column. Calculates the number of days between the start date and end date. */
            private function calculateDays(item:Object, column:DataGridColumn):String {
                var tempDate:Date = new Date(item.rangeEnd - item.rangeStart);
                return Math.round((tempDate.time / MS_PER_DAY) + 1).toString();
            }
        ]]>
    </mx:Script>
 
    <mx:DateFormatter id="dateFormatter" formatString="MMM D, YYYY" />
 
    <mx:HBox>
        <mx:DateChooser id="dateChooser" selectableRange="{{rangeStart:startDate, rangeEnd:endDate}}" allowMultipleSelection="true" />
 
        <mx:DataGrid id="selDates" dataProvider="{dateChooser.selectedRanges}" labelFunction="cellDateFormatter" verticalScrollPolicy="on" height="{dateChooser.height}">
            <mx:columns>
                <mx:DataGridColumn dataField="rangeStart" headerText="Range Start:" />
                <mx:DataGridColumn dataField="rangeEnd" headerText="Range End:" />
                <mx:DataGridColumn labelFunction="calculateDays" headerText="Number Days:" />
            </mx:columns>
        </mx:DataGrid>
    </mx:HBox>
 
</mx:Application>

View source enabled in the following example.

 
]]> http://blog.flexexamples.com/2007/07/31/calculating-the-number-of-days-between-two-selected-dates-in-a-datechooser-control/feed/ 26 Formatting dates using the DateFormatter http://blog.flexexamples.com/2007/07/30/formatting-dates-using-the-dateformatter/ http://blog.flexexamples.com/2007/07/30/formatting-dates-using-the-dateformatter/#comments Tue, 31 Jul 2007 05:11:47 +0000 Peter deHaan http://blog.flexexamples.com/2007/07/30/formatting-dates-using-the-dateformatter/ Another basic little example showing how to format the text in a DateField control using the DateFormatter and the DateField control’s labelFunction property. This entry also shows the pretty basic trick of creating a separate ActionScript class file that holds the day names as constants so you don’t constantly have to think whether Monday is [...]]]> Another basic little example showing how to format the text in a DateField control using the DateFormatter and the DateField control’s labelFunction property. This entry also shows the pretty basic trick of creating a separate ActionScript class file that holds the day names as constants so you don’t constantly have to think whether Monday is day 0 or day 1 (hint: it is day 1).

Full code after the jump.

View MXML

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

    <mx:Script>
        <![CDATA[
            private function doLabel(item:Date):String {
                return dateFormatter.format(item);
            }
        ]]>
    </mx:Script>

    <mx:DateFormatter id="dateFormatter" formatString="MMM D, YYYY"/>

    <mx:DateField todayColor="red" labelFunction="doLabel" firstDayOfWeek="{Days.MONDAY}" />

</mx:Application>

Days.as

// ActionScript file
package {
    public class Days {
        public static const SUNDAY:uint = 0;
        public static const MONDAY:uint = 1;
        public static const TUESDAY:uint = 2;
        public static const WEDNESDAY:uint = 3;
        public static const THURSDAY:uint = 4;
        public static const FRIDAY:uint = 5;
        public static const SATURDAY:uint = 6;
    }
}

View source enabled in the following example

 
]]> http://blog.flexexamples.com/2007/07/30/formatting-dates-using-the-dateformatter/feed/ 2