Flex Examples » mode http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Pausing the animation in an indeterminate ProgressBar control http://blog.flexexamples.com/2007/10/31/pausing-the-animation-in-an-indeterminate-progressbar-control/ http://blog.flexexamples.com/2007/10/31/pausing-the-animation-in-an-indeterminate-progressbar-control/#comments Thu, 01 Nov 2007 02:57:25 +0000 Peter deHaan http://blog.flexexamples.com/2007/10/31/pausing-the-animation-in-an-indeterminate-progressbar-control/ The following example shows how you can pause the indeterminate animation in a Flex ProgressBar control by setting the mode property to “polled” or “manual”. You can resume the animation by setting the mode back to “event”.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2007/10/31/pausing-the-animation-in-an-indeterminate-progressbar-control/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" [...]]]> The following example shows how you can pause the indeterminate animation in a Flex ProgressBar control by setting the mode property to “polled” or “manual”. You can resume the animation by setting the mode back to “event”.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/10/31/pausing-the-animation-in-an-indeterminate-progressbar-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:ApplicationControlBar dock="true">
        <mx:Form>
            <mx:FormItem label="mode:">
                <mx:ComboBox id="comboBox">
                    <mx:dataProvider>
                        <mx:Array>
                            <mx:Object label="event" />
                            <mx:Object label="polled" />
                            <mx:Object label="manual" />
                        </mx:Array>
                    </mx:dataProvider>
                </mx:ComboBox>
            </mx:FormItem>
            <mx:FormItem label="indeterminate:">
                <mx:CheckBox id="checkBox" selected="true" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:ProgressBar id="progressBar"
            indeterminate="{checkBox.selected}"
            mode="{comboBox.selectedItem.label}" />

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2007/10/31/pausing-the-animation-in-an-indeterminate-progressbar-control/feed/ 3 Setting the ProgressBar control’s labelPlacement, mode, and conversion properties http://blog.flexexamples.com/2007/08/07/setting-the-progressbar-controls-labelplacement-mode-and-conversion-properties/ http://blog.flexexamples.com/2007/08/07/setting-the-progressbar-controls-labelplacement-mode-and-conversion-properties/#comments Wed, 08 Aug 2007 05:44:27 +0000 Peter deHaan http://blog.flexexamples.com/2007/08/07/setting-the-progressbar-controls-labelplacement-mode-and-conversion-properties/ Here was a neat trick I learnt today. You can set a ProgressBar control’s labelPlacement property to “center” and have it appear within the progress bar itseslf. Pretty handy!

And just because that alone wasn’t really an interesting entry, I created a second progress bar which uses “polled” mode to determine how much of an [...]]]> Here was a neat trick I learnt today. You can set a ProgressBar control’s labelPlacement property to “center” and have it appear within the progress bar itseslf. Pretty handy!

And just because that alone wasn’t really an interesting entry, I created a second progress bar which uses “polled” mode to determine how much of an FLV has loaded (it monitors the bytesLoaded and bytesTotal properties of the UI object specified in the source parameter, which in this case is the VideoDisplay control). Finally I tweaked the label property to add the units (kilobytes) and set the conversion property to 1024 to convert from bytes to kilobytes. Whew!

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:VideoDisplay id="videoDisplay"
            source="http://www.helpexamples.com/flash/video/water.flv"
            playheadUpdate="playheadTime.setProgress(videoDisplay.playheadTime, videoDisplay.totalTime)"
            minWidth="160"
            minHeight="120"  />

    <mx:ProgressBar id="progressBar"
            width="{videoDisplay.width}"
            mode="polled"
            source="{videoDisplay}"
            label="%1 of %2 KB loaded (%3%%)"
            conversion="1024"
            labelPlacement="center" />

    <mx:ProgressBar id="playheadTime"
            width="{videoDisplay.width}"
            mode="manual" label="%1 / %2"
            labelPlacement="center" />

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2007/08/07/setting-the-progressbar-controls-labelplacement-mode-and-conversion-properties/feed/ 0