Flex Examples » allowTrackClick http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Preventing a user from clicking the track on an HSlider control in Flex http://blog.flexexamples.com/2008/12/27/preventing-a-user-from-clicking-the-track-on-an-hslider-control-in-flex/ http://blog.flexexamples.com/2008/12/27/preventing-a-user-from-clicking-the-track-on-an-hslider-control-in-flex/#comments Sun, 28 Dec 2008 07:52:31 +0000 Peter deHaan http://blog.flexexamples.com/2008/12/27/preventing-a-user-from-clicking-the-track-on-an-hslider-control-in-flex/ The following example shows how you can prevent a user from clicking on the track of a Flex HSlider control by setting the Boolean allowTrackClick property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/12/27/preventing-a-user-from-clicking-the-track-on-an-hslider-control-in-flex/ --> <mx:Application name="HSlider_allowTrackClick_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white">   <mx:ApplicationControlBar dock="true"> <mx:Form styleName="plain"> <mx:FormItem label="allowTrackClick:"> [...]]]> The following example shows how you can prevent a user from clicking on the track of a Flex HSlider control by setting the Boolean allowTrackClick property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/12/27/preventing-a-user-from-clicking-the-track-on-an-hslider-control-in-flex/ -->
<mx:Application name="HSlider_allowTrackClick_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="allowTrackClick:">
                <mx:CheckBox id="checkBox"
                        selected="true" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>
 
    <mx:HSlider id="slider"
            allowTrackClick="{checkBox.selected}" />
 
</mx:Application>

View source is enabled in the following example.

You can also set the allowTrackClick property using ActionScript, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/12/27/preventing-a-user-from-clicking-the-track-on-an-hslider-control-in-flex/ -->
<mx:Application name="HSlider_allowTrackClick_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:Script>
        <![CDATA[
            private function checkBox_change(evt:Event):void {
                slider.allowTrackClick = checkBox.selected;
            }
        ]]>
    </mx:Script>
 
    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="allowTrackClick:">
                <mx:CheckBox id="checkBox"
                        selected="true"
                        change="checkBox_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>
 
    <mx:HSlider id="slider" />
 
</mx:Application>
 
]]> http://blog.flexexamples.com/2008/12/27/preventing-a-user-from-clicking-the-track-on-an-hslider-control-in-flex/feed/ 5 Customing the Flex HSlider and VSlider controls http://blog.flexexamples.com/2007/09/11/customing-the-flex-hslider-and-vslider-controls/ http://blog.flexexamples.com/2007/09/11/customing-the-flex-hslider-and-vslider-controls/#comments Wed, 12 Sep 2007 06:46:47 +0000 Peter deHaan http://blog.flexexamples.com/2007/09/11/customing-the-flex-hslider-and-vslider-controls/ The following example shows how you can customize several properties and styles in the Flex HSlider control.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2007/09/11/customing-the-flex-hslider-and-vslider-controls/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" verticalAlign="middle" backgroundColor="white" creationComplete="init();">   <mx:Style> .MyDataTip { backgroundAlpha: 1.0; backgroundColor: haloBlue; color: white; fontWeight: bold; } </mx:Style>   <mx:Script> <![CDATA[ private function init():void { slider.labels = [slider.minimum, slider.maximum]; [...]]]> The following example shows how you can customize several properties and styles in the Flex HSlider control.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/11/customing-the-flex-hslider-and-vslider-controls/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="horizontal"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init();">
 
    <mx:Style>
        .MyDataTip {
            backgroundAlpha: 1.0;
            backgroundColor: haloBlue;
            color: white;
            fontWeight: bold;
        }
    </mx:Style>
 
    <mx:Script>
        <![CDATA[
            private function init():void {
                slider.labels = [slider.minimum, slider.maximum];
            }
        ]]>
    </mx:Script>
 
    <mx:ApplicationControlBar dock="true">
        <mx:Form>
            <mx:FormItem label="allowTrackClick:">
                <mx:CheckBox id="allowTrackClickCh" selected="true" />
            </mx:FormItem>
            <mx:FormItem label="invertThumbDirection:">
                <mx:CheckBox id="invertThumbDirectionCh" />
            </mx:FormItem>
            <mx:FormItem label="showTrackHighlight:">
                <mx:CheckBox id="showTrackHighlightCh"
                        selected="true" />
            </mx:FormItem>
            <mx:FormItem label="showDataTip:">
                <mx:CheckBox id="showDataTipCh"
                        selected="true" />
            </mx:FormItem>
            <mx:FormItem label="dataTipPlacement:">
                <mx:ComboBox id="dataTipPlacementCB"
                        selectedIndex="2">
                    <mx:dataProvider>
                        <mx:Array>
                            <mx:Object label="left" />
                            <mx:Object label="right" />
                            <mx:Object label="top" />
                            <mx:Object label="bottom" />
                        </mx:Array>
                    </mx:dataProvider>
                </mx:ComboBox>
            </mx:FormItem>
            <mx:FormItem label="dataTipPrecision:">
                <mx:NumericStepper id="dataTipPrecisionNS"
                        minimum="0"
                        maximum="3"
                        value="2" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>
 
    <mx:HSlider id="slider"
            invertThumbDirection="{invertThumbDirectionCh.selected}"
            minimum="-10"
            maximum="20"
            tickInterval="5"
            liveDragging="true"
            showDataTip="{showDataTipCh.selected}"
            showTrackHighlight="{showTrackHighlightCh.selected}"
            dataTipPlacement="{dataTipPlacementCB.selectedItem.label}"
            allowTrackClick="{allowTrackClickCh.selected}"
            dataTipPrecision="{dataTipPrecisionNS.value}"
            dataTipStyleName="MyDataTip" />
 
</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2007/09/11/customing-the-flex-hslider-and-vslider-controls/feed/ 29 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