You can set the height and width of an application container by using explicit pixel values or by using percentage values, where the percentage values are relative to the size of the browser window. By default, the application container sets its height to 375 pixels and its width to 500 pixels in the Standalone Flash Player, and sizes itself to use all available space in a browser.

The following example sets the size of the Application container to one-half of the width and height of the browser window:

 <?xml version="1.0"?> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
	xmlns:mx="library://ns.adobe.com/flex/mx" 
	xmlns:s="library://ns.adobe.com/flex/spark" 
	height="50%" width="50%"> 
 	... 
 </Application>

The advantage of using percentages to specify the size is that Flex can resize your application as the user resizes the browser window. Flex maintains the application container size as a percentage of the browser window as the user resizes it.

If you set the width and height properties of the child components to percentage values, your components can also resize as your application resizes, as the following example shows:

<?xml version="1.0"?> 
<!-- containers\application\AppSizePercent.mxml --> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    width="100%" height="100%">    
    <s:layout> 
        <s:VerticalLayout/> 
    </s:layout> 
    <s:Panel title="Main Application" width="100%" height="100%"> 
        <mx:HDividedBox width="100%" height="100%"> 
            <s:TextArea text="TA1" width="50%" height="100%"/> 
            <mx:VDividedBox width="50%" height="100%"> 
                <s:TextArea text="TA2" width="100%" height="75%"/> 
                <s:TextArea text="TA3" width="100%" height="75%"/> 
            </mx:VDividedBox> 
        </mx:HDividedBox> 
    </s:Panel> 
</s:Application>

The following example uses explicit pixel values to size the application container:

<?xml version="1.0"?> 
<!-- containers\application\AppSizePixel.mxml --> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    width="200" height="150"> 
    <s:layout> 
        <s:VerticalLayout/> 
    </s:layout> 
 
    <mx:Panel title="Main Application"> 
        <mx:TextInput id="mytext" text="Hello"/> 
        <mx:Button id="mybutton" label="Get Weather"/> 
    </mx:Panel> 
</s:Application>

If you want to set a child container to fill the entire application container, the easiest method is to set the child's width and height properties to 100% in MXML. In ActionScript, set the percentWidth and percentHeight properties to 100.

Because the Spark Application container defines 0 pixels of padding around its content area, a child sized to 100% fills the entire area of the container. In the following example, the child VBox container fills the entire application container:

<?xml version="1.0"?> 
<!-- containers\application\AppNoPadding.mxml --> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    width="100%" height="100%"> 
    <s:layout> 
        <s:VerticalLayout/> 
    </s:layout> 
    
    <mx:VBox width="100%" height="100%" backgroundColor="#A9C0E7"> 
        <!-- ... --> 
    </mx:VBox> 
</s:Application>

The MX Application container defines 24 pixels of padding around all four sides of its content area. Therefore, if you want a child to occupy the entire area of the Application container, set the container's padding properties (paddingTop, paddingBottom, paddingLeft, paddingRight) to 0.

The MX Application container has built in support for scroll bars. Therefore, if the children of the MX Application container are sized or positioned such that some or all the component is outside the visible area of the MX Application container, Flex adds scroll bars to the container.

In the following example, the VBox container in the MX Application container is larger than the available space within the Application container, which results in scroll bars:

<?xml version="1.0"?> 
<!-- containers\application\AppVBoxSizeScroll.mxml --> 
<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    width="100" height="100"> 
 
    <mx:VBox width="200" height="200" backgroundColor="#A9C0E7"> 
        <!-- ... --> 
    </mx:VBox> 
</mx:Application>

<?xml version="1.0" encoding="utf-8"?> 
<!-- containers\application\mySkins\MyAppSkin.mxml --> 
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark"> 
 
    <fx:Metadata> 
        [HostComponent("spark.components.Application")] 
    </fx:Metadata> 
    
    <s:states> 
        <s:State name="normal" /> 
        <s:State name="disabled" /> 
    </s:states> 
    
    <!-- fill --> 
    <s:Rect id="backgroundRect" left="0" right="0" top="0" bottom="0"> 
        <s:fill> 
            <s:SolidColor color="0xFFFFFF" /> 
        </s:fill> 
    </s:Rect> 
        
    <s:Scroller height="100%" width="100%"> 
        <s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" />        
    </s:Scroller> 
</s:Skin>

<?xml version="1.0"?> 
<!-- containers\application\AppSparkScroll.mxml --> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    width="150" height="150" 
    skinClass="mySkins.MyAppSkin"> 
    <s:layout> 
        <s:VerticalLayout/> 
    </s:layout> 
 
    <mx:VBox width="200" height="200" backgroundColor="#A9C0E7"> 
        <!-- ... --> 
    </mx:VBox>  
    
    <mx:VBox width="200" height="200" backgroundColor="#000000"> 
        <!-- ... --> 
    </mx:VBox> 
</s:Application>

For more information, see Adding scroll bars to Spark containers.

By default, the application containers have the following properties and style properties that define the visual aspects of the application and differ from the default container values:

backgroundColor

backgroundGradientAlphas

backgroundGradientColors

backgroundImage

backgroundSize

horizontalAlign

paddingBottom

paddingLeft

paddingRight

paddingTop

<?xml version="1.0" encoding="utf-8"?> 
<!-- containers\application\mySkins\MyAppBackgroundSkin.mxml --> 
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark"> 
 
    <fx:Metadata> 
        [HostComponent("spark.components.Application")] 
    </fx:Metadata> 
    
    <s:states> 
        <s:State name="normal" /> 
        <s:State name="disabled" /> 
    </s:states> 
 
    <!-- Define a gradient fill for the background of the Application container. -->    
    <s:Rect id="backgroundRect" left="0" right="0" top="0" bottom="0"> 
        <s:fill> 
            <s:LinearGradient> 
                <s:entries> 
                    <s:GradientEntry color="0x0000FF" ratio="0.00" alpha="0.5"/> 
                    <s:GradientEntry color="0xCCCCCC" ratio="0.5" alpha="0.5"/> 
                </s:entries> 
            </s:LinearGradient> 
        </s:fill> 
    </s:Rect> 
                
    <s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" /> 
</s:Skin>

<?xml version="1.0"?> 
<!-- containers\application\AppSparkBackground.mxml --> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    skinClass="mySkins.MyAppBackgroundSkin"> 
    <s:layout> 
        <s:VerticalLayout/> 
    </s:layout> 
    
</s:Application>

<?xml version="1.0" encoding="utf-8"?> 
<!-- containers\application\mySkins\MyAppBackgroundImageSkin.mxml --> 
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark"> 
 
    <fx:Metadata> 
        [HostComponent("spark.components.Application")] 
    </fx:Metadata> 
    
    <s:states> 
        <s:State name="normal" /> 
        <s:State name="disabled" /> 
    </s:states> 
    
    <!-- Use an Image control to embed an image for the 
            background of the Application container. -->    
    <mx:Image source="@Embed(source='logo.jpg')" 
        left="0" right="0" top="0" bottom="0" 
        maintainAspectRatio="false" /> 
        
    <s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" />        
</s:Skin>

An application control bar contains a group of controls outside of the main content area of an application container. The control bar is always visible, and cannot be scrolled like other container children.

For the MX Application container, create a control bar area by adding the ApplicationControlBar container as a child of the MX Application container. For more information and examples, see MX ApplicationControlBar layout container.

For the Spark Application container, use the controlBarContent property to define the controls that appear in the control bar area, as the following example shows:

<?xml version="1.0" encoding="utf-8"?> 
<!-- containers\application\AppSparkCB.mxml --> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    width="600"> 
    <s:layout> 
        <s:VerticalLayout/> 
    </s:layout> 
    <s:controlBarContent> 
        <mx:MenuBar height="100%" 
            dataProvider="{menuXML}" 
            labelField="@label" 
            showRoot="true"/> 
        <mx:HBox paddingBottom="5" 
            paddingTop="5"> 
            <mx:ComboBox dataProvider="{cmbDP}"/> 
            <mx:Spacer width="100%"/> 
            <mx:TextInput id="myTI" text=""/> 
            <mx:Button id="srch1" 
                label="Search" 
                click="Alert.show('Searching');"/> 
        </mx:HBox> 
    </s:controlBarContent> 
    
    <fx:Script> 
        <![CDATA[ 
            import mx.controls.Alert; 
        ]]> 
    </fx:Script> 
    
    <fx:Declarations> 
        <fx:XMLList id="menuXML"> 
            <fx:menuitem label="File"> 
                <fx:menuitem label="New" data="New"/> 
                <fx:menuitem label="Open" data="Open"/> 
                <fx:menuitem label="Save" data="Save"/> 
                <fx:menuitem label="Exit" data="Exit"/> 
            </fx:menuitem> 
            <fx:menuitem label="Edit"> 
                <fx:menuitem label="Cut" data="Cut"/> 
                <fx:menuitem label="Copy" data="Copy"/> 
                <fx:menuitem label="Paste" data="Paste"/> 
            </fx:menuitem> 
            <fx:menuitem label="View"/> 
        </fx:XMLList> 
        
        <fx:Array id="cmbDP"> 
            <fx:String>Item 1</fx:String> 
            <fx:String>Item 2</fx:String> 
            <fx:String>Item 3</fx:String> 
        </fx:Array> 
    </fx:Declarations> 
    
    <s:Button label="Button"/> 
    <mx:TextArea width="300" height="200"/>        
</s:Application>

The location and appearance of the control bar area of the Spark Application container is determined by the spark.skins.spark.ApplicationSkin class, the skin class for the Spark Application container. By default, the ApplicationSkin class defines the control bar area to appear at the top of the content area of the Application container with a grey background. Create a custom skin to change the default appearance of the control bar.

By default, the controls in the control bar area use horizontal layout. Use the Application.controlBarLayout property to specify a different layout, as the following example shows:

<s:controlBarLayout> 
	<s:HorizontalLayout paddingLeft="12" gap="5"/> 
</s:controlBarLayout>

You can use the viewSourceURL property of the application containers to specify a URL to the application's source code. If you set this property, Flex adds a View Source menu item to the application's context menu, which you open by right-clicking anywhere in your application. Select the View Source menu item to open the URL specified by the viewSourceURL property in a new browser window.

Set the viewSourceURL property by using MXML, not ActionScript, as the following example shows:

<?xml version="1.0"?> 
<!-- containers\application\AppSourceURL.mxml --> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    viewSourceURL="assets/AppSourceURL.txt"> 
    <s:layout> 
        <s:VerticalLayout/> 
    </s:layout> 
 
    <s:Button label="Click Me"/> 
</s:Application>

You typically deploy your source code not as an MXML file, but as a text or HTML file. In this example, the source code is in the file AppSourceURL.txt. If you use an HTML file to represent your source code, you can add formatting and coloring to make it easier to read.

You can specify several options of the application container to control your application. The following table describes these options:

frameRate

pageTitle

preloader

scriptRecursionLimit

scriptTimeLimit

usePreloader

<?xml version="1.0"?> 
<mx:Form xmlns:mx="library://ns.adobe.com/flex/mx"> 
	… 
</mx:Form>

MyForm.mxml is the document class and instances of MyForm.mxml are referred to as documents. An MXML file that includes the <s:Application> or <mx:Application> tag is the document class that defines the application object. MXML files that omit the <s:Application> or <mx:Application> tag are custom controls.

A document has the following characteristics:

• All MXML files that an application uses are document classes, including the MXML file that includes the <s:Application> or <mx:Application> tag.

• Custom ActionScript component files are document classes.

• The Flex compiler cannot compile a SWF file from a file that does not contain the <s:Application> or <mx:Application> tag.

• You can access the scope of a document's parent document by using parentDocument, parentDocument.parentDocument, and so on.

• Flex provides a UIComponent.isDocument property so that you can detect if any given object is a document.

In your application's main MXML file, the file that contains the <s:Application> or <mx:Application> tag, you can access the methods and properties of the application object by using the this keyword. However, in custom ActionScript and MXML components, event listeners, or external ActionScript class files, Flex executes in the context of those components and classes, and the this keyword refers to the current document and not to the application object. You cannot refer to a control or method in the application from one of these child documents without specifying the location of the parent document.

Flex provides the following properties that you can use to access parent documents:

mx.core.FlexGlobals.topLevelApplication

The top-level application object, regardless of where in the document tree your object executes. This object is of type spark.components.Application or mx.core.Application.

mx.core.UIComponent.parentDocument

The parent document of the current document. You can use parentDocument.parentDocument to walk up the tree of multiple documents.

mx.core.UIComponent.parentApplication

The Application object in which the current object exists. Applications can load other applications, therefore, you can access the immediate parent application by using this property. You can use parentApplication.parentApplication to walk up the tree of multiple applications.

<?xml version="1.0"?> 
<!-- containers\application\AppDoSomething.mxml --> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:MyComps="myComponents.*"> 
    <s:layout> 
        <s:VerticalLayout/> 
    </s:layout> 
    
    <fx:Script> 
        <![CDATA[ 
            import mx.controls.Alert; 
        
            // Open an Alert control. 
            public function doSomething():void { 
                Alert.show("The doSomething() method was called."); 
            } 
        ]]> 
    </fx:Script> 
    
    <!-- Include the ButtonMXML.mxml component. --> 
    <MyComps:ButtonMXML/> 
</s:Application>

<?xml version="1.0"?> 
<!-- containers\application\myComponents\ButtonMXML.mxml --> 
<s:SkinnableContainer xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark"> 
    <s:layout> 
        <s:HorizontalLayout/> 
    </s:layout> 
    
    <fx:Script> 
        <![CDATA[ 
            // To refer to the members of the Application class, 
            // you must import mx.core.Application. 
            import mx.core.FlexGlobals; 
        ]]> 
    </fx:Script> 
 
    <s:Button  label="MXML Button" 
        click="FlexGlobals.topLevelApplication.doSomething();"/> 
</s:SkinnableContainer>

<?xml version="1.0"?> 
<!-- containers\application\AppSalutation.mxml --> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:MyComps="myComponents.*"> 
    <s:layout> 
        <s:VerticalLayout/> 
    </s:layout> 
    
    <fx:Script> 
        <![CDATA[ 
            public var userName:String="SMG"; 
            
            public function getSalutation():String { 
                return "Hi, " + userName; 
            } 
        ]]> 
    </fx:Script> 
 
    <!-- Include the ButtonGetSalutation.mxml component. --> 
    <MyComps:ButtonGetSalutation/>    
    
</s:Application>

<?xml version="1.0"?> 
<!-- containers\application\myComponents\ButtonGetSalutation.mxml --> 
<s:SkinnableContainer xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    width="100%" height="100%"> 
    <s:layout> 
        <s:VerticalLayout/> 
    </s:layout> 
 
    <fx:Script> 
        <![CDATA[ 
            /* To refer to the members of the Application class, 
               you must import mx.core.Application. */ 
            import mx.core.FlexGlobals;            
        ]]> 
    </fx:Script> 
 
    <mx:Label id="myL"/> 
    <s:Button label="Click Me" 
        click="myL.text=FlexGlobals.topLevelApplication.getSalutation();"/> 
</s:SkinnableContainer>

<?xml version="1.0"?> 
<!-- containers\application\AppParentDocument.mxml --> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:MyComps="myComponents.*" 
    width="100%" height="100%"> 
    <s:layout> 
        <s:VerticalLayout/> 
    </s:layout> 
 
    <!-- Include the AccChildObject.mxml component. --> 
    <MyComps:AccChildObject/> 
 
</s:Application>

<?xml version="1.0"?> 
<!-- containers\application\myComponents\AccChildObject.mxml --> 
<mx:Accordion xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    width="{parentDocument.width*.80}" 
    height="{parentDocument.height*.50}"> 
    
    <mx:HBox label="Child HBox"/> 
    
</mx:Accordion>

 parentDocument.parentDocument.doSomething();

As an alternative to the preloader, you can display a splash screen instead. The splash screen appears during the time of application startup.

By default, an Application container uses the SparkDownloadProgressBar class. To configure the Application container to use the MX class, DownloadProgressBar, use the preloader property as the following example shows:

 <s:Application ... preloader="mx.preloaders.DownloadProgressBar">

To disable the download progress bar, set the usePreloader property of the Application container to false, as the following example shows:

 <s:Application ... usePreloader="false">

To create a custom download progress bar, you can create a subclass of the SparkDownloadProgressBar or DownloadProgressBar class, or create a subclass of the flash.display.Sprite class that implements the mx.preloaders.IPreloaderDisplay interface.

You can implement a download progress bar component as a SWC component or an ActionScript component. A custom download progress bar component that extends the Sprite class should not use any of the standard Flex components because it would load too slowly to be effective. Do not implement a download progress bar as an MXML component because it also would load too slowly.

To use a custom download progress bar class, you set the preloader property of the application container to the path of a SWC component class or ActionScript component class. A SWC component must be in the same directory as the MXML file or in a directory on the classpath of your application. An ActionScript component can be in one of those directories or in a subdirectory of one of those directories. When a class is in a subdirectory, you specify the subdirectory location as the package name in the preloader value; otherwise, you specify the class name.

The code in the following example specifies a custom download progress bar called CustomBar that is located in the myComponents/mybars directory below the application's root directory:

 <s:Application ... preloader="myComponents.mybars.CustomBar">

The operation of the download progress bar is defined by a set of events. These events are dispatched by the Preloader class. The SparkDownloadProgressBar and DownloadProgressBar classes defines an event listener for all these events.

Within your custom class, you can optionally override the default behavior of the event listener. If you create a custom download progress bar as a subclass of the Sprite class, define an event listener for each of these events.

The following table describes the download progress bar events:

ProgressEvent.PROGRESS

Event.COMPLETE

FlexEvent.INIT_COMPLETE

FlexEvent.INIT_PROGRESS

RSLEvent.RSL_ERROR

RSLEvent.RSL_LOADED

RSLEvent.RSL_PROGRESS

The easiest way to create your own download progress bar is to create a subclass of the SparkDownloadProgressBar or DownloadProgressBar class, and then modify it for your application requirements.

package myComponents 
{ 
    import mx.preloaders.*; 
    import flash.events.ProgressEvent; 
 
    public class SparkDownloadProgressBarSubClassMin extends SparkDownloadProgressBar 
    { 
        public function SparkDownloadProgressBarSubClassMin() {   
            super(); 
        } 
        
        // Embed the background image.     
        [Embed(source="logo.jpg")] 
        [Bindable] 
        public var imgCls:Class; 
 
        // Override to set a background image.     
        override public function get backgroundImage():Object{ 
            return imgCls; 
        } 
        
        // Override to set the size of the background image to 100%.     
        override public function get backgroundSize():String{ 
            return "100%"; 
        } 
        
        // Override to return true so progress bar appears 
        // during initialization.       
        override protected function showDisplayForInit(elapsedTime:int, 
            count:int):Boolean { 
                return true; 
        } 
 
        // Override to return true so progress bar appears during download.     
        override protected function showDisplayForDownloading( 
            elapsedTime:int, event:ProgressEvent):Boolean { 
                return true; 
        } 
    } 
 
}

<?xml version="1.0"?> 
<!-- containers\application\SparkMainDPBMin.mxml --> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    preloader="myComponents.SparkDownloadProgressBarSubClassMin"> 
    <s:layout> 
        <s:VerticalLayout/> 
    </s:layout> 
 
    <!-- Add a couple of controls that don't do anything. --> 
    <s:Button label="Click Me"/> 
    <s:TextInput text="This is a TextInput control."/> 
</s:Application>

The Spark download progress bar does not support text, but the MX one does. The next example creates a subclass of the MX DownloadProgressBar class to define custom strings for the download progress bar, and set the minimum time that it appears, as the following example shows:

package myComponents 
{ 
    import mx.preloaders.*; 
    import flash.events.ProgressEvent; 
 
    public class DownloadProgressBarSubClassMin extends DownloadProgressBar 
    { 
        public function DownloadProgressBarSubClassMin() 
        {   
            super(); 
            // Set the download label. 
            downloadingLabel="Downloading app..." 
            // Set the initialization label. 
            initializingLabel="Initializing app..." 
            // Set the minimum display time to 2 seconds. 
            MINIMUM_DISPLAY_TIME=2000; 
        } 
        
        // Override to return true so progress bar appears 
        // during initialization.       
        override protected function showDisplayForInit(elapsedTime:int, 
            count:int):Boolean { 
                return true; 
        } 
 
        // Override to return true so progress bar appears during download.     
        override protected function showDisplayForDownloading( 
            elapsedTime:int, event:ProgressEvent):Boolean { 
                return true; 
        } 
    } 
 
}

You can use your custom class in an application, as the following example shows:

<?xml version="1.0"?> 
<!-- containers\application\MainDPBMin.mxml --> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    preloader="myComponents.DownloadProgressBarSubClassMin"> 
    <s:layout> 
        <s:VerticalLayout/> 
    </s:layout> 
    <!-- Add a couple of controls that don't do anything. --> 
    <s:Button label="Click Me"/> 
    <s:TextInput text="This is a TextInput control."/> 
</s:Application>

In the following example, you create a subclass of the DownloadProgressBar class to display text messages that describe the status of the downloading and initialization of the application. This example defines event listeners for the events dispatched by the download progress bar to write the messages to flash.text.TextField objects.

package myComponents 
{ 
 
    import flash.display.*; 
    import flash.text.*; 
    import flash.utils.*; 
    import flash.events.*; 
    import mx.preloaders.*; 
    import mx.events.*; 
 
    public class MyDownloadProgressBar extends DownloadProgressBar 
    { 
        // Define a TextField control for text messages 
        // describing the download progress of the application. 
        private var progressText:TextField; 
        
        // Define a TextField control for the final text message. 
        // after the application initializes. 
        private var msgText:TextField; 
    
        public function MyDownloadProgressBar() 
        {   
            super(); 
 
            // Configure the TextField for progress messages. 
            progressText = new TextField(); 
            progressText.x = 10;    
            progressText.y = 90; 
            progressText.width = 400; 
            progressText.height = 400; 
        
            addChild(progressText); 
        
            // Configure the TextField for the final message. 
            msgText = new TextField(); 
            msgText.x = 10; 
            msgText.y = 10; 
            msgText.width = 400; 
            msgText.height = 75; 
            
            addChild(msgText); 
        } 
    
        // Define the event listeners for the preloader events. 
        override public function set preloader(preloader:Sprite):void { 
            // Listen for the relevant events 
            preloader.addEventListener( 
                ProgressEvent.PROGRESS, myHandleProgress);   
            preloader.addEventListener( 
                Event.COMPLETE, myHandleComplete); 
 
            preloader.addEventListener( 
                FlexEvent.INIT_PROGRESS, myHandleInitProgress); 
            preloader.addEventListener( 
                FlexEvent.INIT_COMPLETE, myHandleInitEnd); 
        } 
    
        // Event listeners for the ProgressEvent.PROGRESS event. 
        private function myHandleProgress(event:ProgressEvent):void { 
            progressText.appendText("\n" + "Progress l: " + 
                event.bytesLoaded + " t: " + event.bytesTotal); 
        } 
    
        // Event listeners for the Event.COMPLETE event. 
        private function myHandleComplete(event:Event):void { 
            progressText.appendText("\n" + "Completed"); 
        } 
    
        // Event listeners for the FlexEvent.INIT_PROGRESS event. 
        private function myHandleInitProgress(event:Event):void { 
            progressText.appendText("\n" + "App Init Start"); 
        } 
    
        // Event listeners for the FlexEvent.INIT_COMPLETE event. 
        private function myHandleInitEnd(event:Event):void { 
            msgText.appendText("\n" + "App Init End"); 
            
            var timer:Timer = new Timer(2000,1); 
            timer.addEventListener(TimerEvent.TIMER, dispatchComplete); 
            timer.start(); 
        } 
        
        // Event listener for the Timer to pause long enough to 
        // read the text in the download progress bar. 
        private function dispatchComplete(event:TimerEvent):void { 
            dispatchEvent(new Event(Event.COMPLETE)); 
        } 
    } 
}

You can use your custom class in a application, as the following example shows:

<?xml version="1.0"?> 
<!-- containers\application\MainDPB.mxml --> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    preloader="myComponents.MyDownloadProgressBar"> 
    <s:layout> 
        <s:VerticalLayout/> 
    </s:layout> 
 
    <!-- Add a couple of controls that don't do anything. --> 
    <s:Button label="Click Me"/> 
    <s:TextInput text="This is a TextInput control."/> 
</s:Application>

You can define a custom download progress bar as a subclass of the Sprite class. By implementing your download progress bar as a subclass of Sprite, you can create a custom look and feel to it, rather than overriding the behavior built into the DownloadProgressBar class.

One common use for this type of download progress bar is to have it display a SWF file during application initialization. For example, you could display a SWF file that shows a running clock, or other type of image.

The following example displays a SWF file as the download progress bar. This class must implement the IPreloaderDisplay interface.

package myComponents 
{ 
    import flash.display.*; 
    import flash.utils.*; 
    import flash.events.*; 
    import flash.net.*; 
    import mx.preloaders.*; 
    import mx.events.*; 
    
    public class MyDownloadProgressBarSWF extends Sprite 
        implements IPreloaderDisplay 
    { 
        // Define a Loader control to load the SWF file. 
        private var dpbImageControl:flash.display.Loader; 
    
        public function MyDownloadProgressBarSWF() {   
            super();        
        } 
        
        // Specify the event listeners. 
        public function set preloader(preloader:Sprite):void { 
            // Listen for the relevant events 
            preloader.addEventListener( 
                ProgressEvent.PROGRESS, handleProgress); 
            preloader.addEventListener( 
                Event.COMPLETE, handleComplete); 
    
            preloader.addEventListener( 
                FlexEvent.INIT_PROGRESS, handleInitProgress); 
            preloader.addEventListener( 
                FlexEvent.INIT_COMPLETE, handleInitComplete); 
        } 
        
        // Initialize the Loader control in the override 
        // of IPreloaderDisplay.initialize(). 
        public function initialize():void { 
            dpbImageControl = new flash.display.Loader();       
            dpbImageControl.contentLoaderInfo.addEventListener( 
                Event.COMPLETE, loader_completeHandler); 
            dpbImageControl.load(new URLRequest("assets/dpbSWF.swf"));         
        } 
 
        // After the SWF file loads, set the size of the Loader control. 
        private function loader_completeHandler(event:Event):void 
        { 
            addChild(dpbImageControl); 
            dpbImageControl.width = 50; 
            dpbImageControl.height= 50; 
            dpbImageControl.x = 100; 
            dpbImageControl.y = 100; 
        }   
        
        // Define empty event listeners. 
        private function handleProgress(event:ProgressEvent):void { 
        } 
        
        private function handleComplete(event:Event):void { 
        } 
        
        private function handleInitProgress(event:Event):void { 
        } 
        
        private function handleInitComplete(event:Event):void { 
            var timer:Timer = new Timer(2000,1); 
            timer.addEventListener(TimerEvent.TIMER, dispatchComplete); 
            timer.start();      
        } 
    
        private function dispatchComplete(event:TimerEvent):void { 
            dispatchEvent(new Event(Event.COMPLETE)); 
        } 
 
        // Implement IPreloaderDisplay interface 
    
        public function get backgroundColor():uint { 
            return 0; 
        } 
        
        public function set backgroundColor(value:uint):void { 
        } 
        
        public function get backgroundAlpha():Number { 
            return 0; 
        } 
        
        public function set backgroundAlpha(value:Number):void { 
        } 
        
        public function get backgroundImage():Object { 
            return undefined; 
        } 
        
        public function set backgroundImage(value:Object):void { 
        } 
        
        public function get backgroundSize():String { 
            return ""; 
        } 
        
        public function set backgroundSize(value:String):void { 
        } 
    
        public function get stageWidth():Number { 
            return 200; 
        } 
        
        public function set stageWidth(value:Number):void { 
        } 
        
        public function get stageHeight():Number { 
            return 200; 
        } 
        
        public function set stageHeight(value:Number):void { 
        } 
    } 
}