Flex4Fun

In ActionScript, you can use use the following constants to set this property:ProgressBarMode.EVENT, ProgressBarMode.POLLED, and ProgressBarMode.MANUAL. The default value is ProgressBarMode.EVENT.This property can be used as the source for data binding.

Specifies the method used to update the bar. Use one of the following values in MXML:

• event The control specified by the source property must dispatch progress and completed events. The ProgressBar uses these events to update its status.
• polled The source property must specify an object that exposes getBytesLoaded() and getBytesTotal()  methods. The ProgressBar control calls these methods to update its status.
• manual You manually update the ProgressBar status. In this mode you specify the maximum and minimum  properties and use the setProgress() property method to specify the status. This mode is often used when the indeterminate  property is true.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   viewSourceURL="srcview/index.html">
	<s:layout>
		<s:VerticalLayout horizontalAlign="center"
						  verticalAlign="middle"/>
	</s:layout>
	<fx:Script>
		<![CDATA[
			import mx.controls.ProgressBarMode;
			protected function button1_clickHandler(event:MouseEvent):void
			{
				this.img.load("http://www.flex4fun.com/ws/test.jpg");
			}
			protected function img_progressHandler(event:ProgressEvent):void
			{
				this.pg.visible=true;
				this.pg.setProgress(event.bytesLoaded, event.bytesTotal);
				this.img.addEventListener(Event.COMPLETE, onComplete);
			}

			private function onComplete(event:Event):void
			{
				this.pg.visible=false;
				this.btn.enabled=true;
			}

			protected function button2_clickHandler(event:MouseEvent):void
			{
				this.img.scaleContent=false;
			}

			protected function button3_clickHandler(event:MouseEvent):void
			{
				this.img.width=100;
				this.img.height=100;
				this.img.maintainAspectRatio=false;
			}
		]]>
	</fx:Script>

	<s:BorderContainer width="300"
					   height="300">
		<s:layout>
			<s:BasicLayout/>
		</s:layout>
		<mx:Image progress="img_progressHandler(event)"
				  autoLoad="false"
				  id="img"
				  scaleContent="true"
				  width="300"
				  height="300"/>
		<mx:ProgressBar x="50"
						y="140"
						width="200"
						labelPlacement="center"
						id="pg"
						visible="false"
						mode="{ProgressBarMode.MANUAL}"
						showEffect="Fade"
						hideEffect="Fade"/>
	</s:BorderContainer>
	<s:HGroup>
		<s:Button label="Load Image"
				  click="button1_clickHandler(event)"/>
		<s:Button label="Change scaleContent"
				  click="button2_clickHandler(event)"
				  enabled="{this.img.width==100}"/>
		<s:Button label="Change maintainAspectRatio"
				  click="button3_clickHandler(event)"
				  enabled="false"
				  id="btn"/>
	</s:HGroup>
</s:Application>

Demo and Source

Originally posted 2010-07-17 11:57:15.