| <?xml version="1.0" encoding="UTF-8"?> |
| <!-- |
| Licensed to the Apache Software Foundation (ASF) under one or more |
| contributor license agreements. See the NOTICE file distributed with |
| this work for additional information regarding copyright ownership. |
| The ASF licenses this file to You under the Apache License, Version 2.0 |
| (the "License"); you may not use this file except in compliance with |
| the License. You may obtain a copy of the License at |
| |
| http://www.apache.org/licenses/LICENSE-2.0 |
| |
| Unless required by applicable law or agreed to in writing, software |
| distributed under the License is distributed on an "AS IS" BASIS, |
| WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| See the License for the specific language governing permissions and |
| limitations under the License. |
| --> |
| <!DOCTYPE html |
| PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
| <html lang="en-us" xml:lang="en-us"> |
| <head> |
| <meta name="DC.Type" content="topic"/> |
| <meta name="DC.Title" content="Application containers"/> |
| <meta name="DC.Format" content="XHTML"/> |
| <meta name="DC.Identifier" content="WS2db454920e96a9e51e63e3d11c0bf69084-7ee7_verapache"/> |
| <title>Application containers</title> |
| </head> |
| <body id="WS2db454920e96a9e51e63e3d11c0bf69084-7ee7_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf69084-7ee7_verapache"><!-- --></a> |
| |
| <div> |
| <p>Flex defines the Spark <a href="https://flex.apache.org/asdoc/spark/components/Application.html" target="_blank">Application</a> and |
| MX <a href="https://flex.apache.org/asdoc/mx/core/Application.html" target="_blank">Application</a> containers |
| that let you start adding content to your application without having |
| to explicitly define another container.</p> |
| |
| <p>The application containers support an application preloader that |
| uses a progress bar to show the download progress of an application |
| SWF file. You can override the default progress bar to define your |
| own custom progress bar. For more information, see <a href="flx_app_container_apc.html#WS2db454920e96a9e51e63e3d11c0bf69084-7e3c_verapache">Showing |
| the download progress of an application</a>.</p> |
| |
| </div> |
| |
| <div class="nested1" id="WS2db454920e96a9e51e63e3d11c0bf62d75-7fff_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf62d75-7fff_verapache"><!-- --></a> |
| <h2 class="topictitle2">About the Application container</h2> |
| |
| |
| <div> |
| <p>The first tag in an MXML application is either the <samp class="codeph"><s:Application></samp> tag |
| for the Spark application container, or the <samp class="codeph"><mx:Application></samp> tag |
| for an MX application container. The application container then |
| becomes the default container for any content that you add to your |
| application. </p> |
| |
| <p>The application object, of type <a href="https://flex.apache.org/asdoc/spark/components/Application.html" target="_blank">spark.components.Application</a> or <a href="https://flex.apache.org/asdoc/mx/core/Application.html" target="_blank">mx.core.Application</a>, |
| is the default scope for any ActionScript code in the file. Therefore, |
| the ActionScript keyword <samp class="codeph">this</samp> refers to the application |
| object. </p> |
| |
| <p>You also use the application container to define the initial |
| size of the application. By default, the application sets its height |
| to 375 pixels and its width to 500 pixels. </p> |
| |
| <p>Although you might find it convenient to use an application container |
| as the only container in your application, usually you explicitly |
| define at least one more container before you add any controls to |
| your application. For example, you might use a Panel container as |
| the first child container of the application. </p> |
| |
| <p>The application containers have the following default layout |
| characteristics:</p> |
| |
| |
| <div class="tablenoborder"><table cellpadding="4" cellspacing="0" summary="" frame="border" border="1" rules="all"> |
| |
| |
| |
| <thead align="left"> |
| <tr> |
| <th class="cellrowborder" valign="top" width="NaN%" id="d32070e90"> |
| <p>Characteristic</p> |
| |
| </th> |
| |
| <th class="cellrowborder" valign="top" width="NaN%" id="d32070e96"> |
| <p>Spark Application container</p> |
| |
| </th> |
| |
| <th class="cellrowborder" valign="top" width="NaN%" id="d32070e102"> |
| <p>MX Application container</p> |
| |
| </th> |
| |
| </tr> |
| |
| </thead> |
| |
| <tbody> |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d32070e90 "> |
| <p>Default size</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d32070e96 "> |
| <p>375 pixels high and 500 pixels wide in the |
| Standalone Flash Player, and all available space in a browser.</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d32070e102 "> |
| <p>375 pixels high and 500 pixels wide in the |
| Standalone Flash Player, and all available space in a browser.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d32070e90 "> |
| <p>Child layout</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d32070e96 "> |
| <p>BasicLayout, meaning that you have to explicitly |
| size and position all children. </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d32070e102 "> |
| <p>Vertical column arrangement of children |
| centered in the Application container.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d32070e90 "> |
| <p>Default padding</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d32070e96 "> |
| <p>0 pixels.</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d32070e102 "> |
| <p>24 pixels for the <samp class="codeph">paddingTop</samp>, <samp class="codeph">paddingBottom</samp>, <samp class="codeph">paddingLeft</samp>, |
| and <samp class="codeph">paddingRight</samp> properties.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d32070e90 "> |
| <p>Scroll bars</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d32070e96 "> |
| <p>Added by skinning the container.</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d32070e102 "> |
| <p>Built into the container.</p> |
| |
| </td> |
| |
| </tr> |
| |
| </tbody> |
| |
| </table> |
| </div> |
| |
| </div> |
| |
| <div class="nested2" id="WS2db454920e96a9e51e63e3d11c0bf62d75-7ffe_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf62d75-7ffe_verapache"><!-- --></a> |
| <h3 class="topictitle3">Sizing an application container |
| and its children</h3> |
| |
| |
| <div> |
| <p>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. </p> |
| |
| <p>The following example sets the size of the <a href="https://flex.apache.org/asdoc/spark/components/Application.html" target="_blank">Application</a> container |
| to one-half of the width and height of the browser window: </p> |
| |
| <pre class="codeblock"> <?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" |
| <strong>height="50%" width="50%"</strong>> |
|   ... |
|  </Application></pre> |
| |
| <p>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. </p> |
| |
| <p>If you set the <samp class="codeph">width</samp> and <samp class="codeph">height</samp> properties |
| of the child components to percentage values, your components can |
| also resize as your application resizes, as the following example |
| shows: </p> |
| |
| <pre class="codeblock"><?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></pre> |
| |
| <p>The following example uses explicit pixel values to size the |
| application container: </p> |
| |
| <pre class="codeblock"><?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></pre> |
| |
| <p>If you want to set a child container to fill the entire application |
| container, the easiest method is to set the child's <samp class="codeph">width</samp> and <samp class="codeph">height</samp> properties |
| to 100% in MXML. In ActionScript, set the <samp class="codeph">percentWidth</samp> and <samp class="codeph">percentHeight</samp> properties |
| to 100. </p> |
| |
| <p>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:</p> |
| |
| <pre class="codeblock"><?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></pre> |
| |
| <p>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 (<samp class="codeph">paddingTop</samp>, <samp class="codeph">paddingBottom</samp>, <samp class="codeph">paddingLeft</samp>, <samp class="codeph">paddingRight</samp>) |
| to 0. </p> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested2" id="WSA508AA1B-D2AD-4b42-B840-443CC56DE17D_verapache"><a name="WSA508AA1B-D2AD-4b42-B840-443CC56DE17D_verapache"><!-- --></a> |
| <h3 class="topictitle3">Using scroll bars with the application |
| container</h3> |
| |
| |
| <div> |
| <p>The MX <a href="https://flex.apache.org/asdoc/mx/core/Application.html" target="_blank">Application</a> 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. </p> |
| |
| <p>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:</p> |
| |
| <pre class="codeblock"><?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></pre> |
| |
| <div class="p">To add scroll bars to the Spark <a href="https://flex.apache.org/asdoc/spark/components/Application.html" target="_blank">Application</a> container, |
| define a skin that supports scroll bars. The following example shows |
| a skin in the file MyAppSkin.mxml. This skin modifies the default |
| skin for the Spark Application container, spark.skins.default.ApplicationSkin, |
| to add the Spark Scroller component:<pre class="codeblock"><?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></pre> |
| |
| </div> |
| |
| <div class="p">The following application uses this skin:<pre class="codeblock"><?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></pre> |
| |
| </div> |
| |
| <p>For more information, see <a href="flx_gumboskinning_gs.html#WSDF962B50-1B1B-461d-9454-7680C9532850_verapache">Adding |
| scroll bars to Spark containers</a>.</p> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested2" id="WS2db454920e96a9e51e63e3d11c0bf62d75-7ffd_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf62d75-7ffd_verapache"><!-- --></a> |
| <h3 class="topictitle3">Overriding the default Application |
| container styles</h3> |
| |
| |
| <div> |
| <p>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: </p> |
| |
| |
| <div class="tablenoborder"><table cellpadding="4" cellspacing="0" summary="" frame="border" border="1" rules="all"> |
| |
| |
| |
| <thead align="left"> |
| <tr> |
| <th class="cellrowborder" valign="top" width="NaN%" id="d32070e388"> |
| <p>Property</p> |
| |
| </th> |
| |
| <th class="cellrowborder" valign="top" width="NaN%" id="d32070e394"> |
| <p>Spark Application default value</p> |
| |
| </th> |
| |
| <th class="cellrowborder" valign="top" width="NaN%" id="d32070e400"> |
| <p>MX Application default value</p> |
| |
| </th> |
| |
| </tr> |
| |
| </thead> |
| |
| <tbody> |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d32070e388 "> |
| <div class="p"> |
| <pre class="codeblock">backgroundColor</pre> |
| |
| </div> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d32070e394 "> |
| <p>The color of the Stage area of Adobe<sup>®</sup> Flash<sup>®</sup> Player |
| or Adobe<sup>®</sup> AIR™, which |
| is visible during application loading and initialization. This color |
| is also visible if the application skin does not define any other |
| background color or image. The default value is <samp class="codeph">0xFFFFFF</samp> (white).</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d32070e400 "> |
| <p>The color of the Stage area of Adobe<sup>®</sup> Flash<sup>®</sup> Player or |
| Adobe<sup>®</sup> AIR™, which |
| is visible during application loading and initialization. This color |
| is also visible if the application background is transparent. The |
| default value is <samp class="codeph">0xFFFFFF</samp> (white).</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d32070e388 "> |
| <div class="p"> |
| <pre class="codeblock">backgroundGradientAlphas</pre> |
| |
| </div> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d32070e394 "> |
| <p>Not implemented; define in the container skin.</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d32070e400 "> |
| <p> |
| <samp class="codeph">[1.0, 1.0]</samp>, a fully opaque |
| background.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d32070e388 "> |
| <div class="p"> |
| <pre class="codeblock">backgroundGradientColors</pre> |
| |
| </div> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d32070e394 "> |
| <p>Not implemented; define in the container skin.</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d32070e400 "> |
| <p>undefined, which means background gradient |
| is generated based on the <samp class="codeph">backgroundColor</samp> property. |
| By default, the <samp class="codeph">backgroundColor</samp> property defines |
| a white background.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d32070e388 "> |
| <div class="p"> |
| <pre class="codeblock">backgroundImage</pre> |
| |
| </div> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d32070e394 "> |
| <p>Not implemented; define in the container skin.</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d32070e400 "> |
| <p>A gradient controlled by the <samp class="codeph">backgroundGradientAlphas</samp> and <samp class="codeph">backgroundGradientColors</samp> styles. |
| The default value is <samp class="codeph">mx.skins.halo.ApplicationBackground</samp>.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d32070e388 "> |
| <div class="p"> |
| <pre class="codeblock">backgroundSize</pre> |
| |
| </div> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d32070e394 "> |
| <p>Not implemented; define in the container skin.</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d32070e400 "> |
| <p>100%. When you set this property at 100%, |
| the background image takes up the entire Application container.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d32070e388 "> |
| <div class="p"> |
| <pre class="codeblock">horizontalAlign</pre> |
| |
| </div> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d32070e394 "> |
| <p>Not implemented; set in the layout class |
| associated with the Application container.</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d32070e400 "> |
| <p>Centered.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d32070e388 "> |
| <div class="p"> |
| <pre class="codeblock">paddingBottom</pre> |
| |
| </div> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d32070e394 "> |
| <p>0 pixels.</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d32070e400 "> |
| <p>24 pixels.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d32070e388 "> |
| <div class="p"> |
| <pre class="codeblock">paddingLeft</pre> |
| |
| </div> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d32070e394 "> |
| <p>0 pixels.</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d32070e400 "> |
| <p>24 pixels.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d32070e388 "> |
| <div class="p"> |
| <pre class="codeblock">paddingRight</pre> |
| |
| </div> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d32070e394 "> |
| <p>0 pixels.</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d32070e400 "> |
| <p>24 pixels.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d32070e388 "> |
| <div class="p"> |
| <pre class="codeblock">paddingTop</pre> |
| |
| </div> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d32070e394 "> |
| <p>0 pixels.</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d32070e400 "> |
| <p>24 pixels.</p> |
| |
| </td> |
| |
| </tr> |
| |
| </tbody> |
| |
| </table> |
| </div> |
| |
| <div class="section"><h4 class="sectiontitle">Changing the Spark Application container background</h4> |
| |
| <p>The |
| Spark <samp class="codeph">Application.backgroundColor</samp> style defines |
| the default background color of the Application container during |
| application loading and initialization. If the Application skin |
| does not set a different color, the <samp class="codeph">backgroundColor</samp> style |
| also defines the background color of the application when it is |
| running. The default value is 0xFFFFFF (white). </p> |
| |
| <p>To set the |
| background color of the Spark Application container to something other |
| than a solid color, or to set a background image, you define a skin |
| for the container. For example, the following skin defines a gradient |
| fill for the background of the Application container that goes from |
| blue to gray:</p> |
| |
| <div class="p"> |
| <pre class="codeblock"><?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></pre> |
| |
| </div> |
| |
| <p>You then use the <samp class="codeph">skinClass</samp> style |
| property to apply the skin to the Application, as the following |
| example shows:</p> |
| |
| <div class="p"> |
| <pre class="codeblock"><?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></pre> |
| |
| </div> |
| |
| <p>The next skin example uses |
| the Image control to embed an image for the background of the Application |
| container: </p> |
| |
| <div class="p"> |
| <pre class="codeblock"><?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></pre> |
| |
| </div> |
| |
| <p>For more information on skinning, |
| see <a href="flx_gumboskinning_gs.html#WS53116913-F952-4b21-831F-9DE85B647C8A_verapache">Spark |
| Skinning</a>.</p> |
| |
| </div> |
| |
| <div class="section" id="WS2db454920e96a9e51e63e3d11c0bf62d75-7ffd_verapache__WS2db454920e96a9e51e63e3d11c0bf62d75-7ffc_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf62d75-7ffd_verapache__WS2db454920e96a9e51e63e3d11c0bf62d75-7ffc_verapache"><!-- --></a><h4 class="sectiontitle">Changing |
| the MX Application container background</h4> |
| |
| <p>The Application |
| container <samp class="codeph">backgroundGradientAlphas</samp>, <samp class="codeph">backgroundGradientColors</samp>, |
| and <samp class="codeph">backgroundImage</samp> styles control the container |
| background. By default, these properties define an opaque gray gradient |
| background. </p> |
| |
| <p>You specify an image for the application background |
| by using the <samp class="codeph">backgroundImage</samp> property. If you set |
| both the <samp class="codeph">backgroundImage</samp> property and the <samp class="codeph">backgroundGradientColors</samp> property, |
| Flex ignores <samp class="codeph">backgroundGradientColors</samp>.</p> |
| |
| <p>You |
| can specify a gradient background for the application in two ways:</p> |
| |
| <ol> |
| <li> |
| <p>Set the <samp class="codeph">backgroundGradientColors</samp> property |
| to two values, as in the following example:</p> |
| |
| <p> |
| |
| </p> |
| |
| <pre class="codeblock"> <mx:Application xmlns="http://ns.adobe.com/mxml/2009" |
| backgroundGradientColors="[0x0000FF, 0xCCCCCC]"></pre> |
| |
| <p>Flex |
| calculates the gradient pattern between the two specified values. </p> |
| |
| </li> |
| |
| <li> |
| <p>Set the <samp class="codeph">backgroundColor</samp> property to the |
| desired value, as in the following example:</p> |
| |
| <p> |
| |
| </p> |
| |
| <pre class="codeblock"> <mx:Application xmlns="http://ns.adobe.com/mxml/2009" |
| backgroundColor="red"></pre> |
| |
| <p>Flex sets the gradient |
| background to solid red. </p> |
| |
| <p>To set a solid background to the |
| application by using the <samp class="codeph">backgroundGradientColors</samp> property, |
| specify the same two values to the <samp class="codeph">backgroundGradientColors</samp> property, |
| as the following example shows:</p> |
| |
| <p> |
| |
| </p> |
| |
| <pre class="codeblock"> <mx:Application xmlns="http://ns.adobe.com/mxml/2009" |
| backgroundGradientColors="[#FFFFFF, #FFFFFF]"></pre> |
| |
| <p>This |
| example defines a solid white background.</p> |
| |
| <p>The <samp class="codeph">backgroundColor</samp> property |
| specifies the background color of the Stage area in Flash Player, |
| which is visible during application loading and initialization, |
| and a background gradient while the application is running. By default, |
| the <samp class="codeph">backgroundColor</samp> property is set to <samp class="codeph">0xFFFFFF</samp> (white). </p> |
| |
| <p>If |
| you use the <samp class="codeph">backgroundGradientColors</samp> property to |
| set the application background, set the <samp class="codeph">backgroundColor</samp> property |
| to compliment the <samp class="codeph">backgroundGradientColors</samp> property, |
| as the following example shows: </p> |
| |
| <p> |
| |
| </p> |
| |
| <pre class="codeblock"> <mx:Application xmlns="http://ns.adobe.com/mxml/2009" |
|   <strong>backgroundGradientColors="[0x0000FF, 0xCCCCCC]" </strong> |
|   backgroundColor="0x0000FF"></pre> |
| |
| <p>In this example, |
| you use the <samp class="codeph">backgroundGradientColors</samp> property to set |
| a gradient pattern from a dark blue to gray, and the <samp class="codeph">backgroundColor</samp> property |
| to set the Stage area in Flash Player to dark blue, which is visible during |
| application loading and initialization. </p> |
| |
| </li> |
| |
| </ol> |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested2" id="WSb817c4ad2e650dbf638f754123c979de55-8000_verapache"><a name="WSb817c4ad2e650dbf638f754123c979de55-8000_verapache"><!-- --></a> |
| <h3 class="topictitle3">Adding a control bar area to the |
| application container</h3> |
| |
| |
| <div> |
| <p>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.</p> |
| |
| <p>For the MX <a href="https://flex.apache.org/asdoc/mx/core/Application.html" target="_blank">Application</a> 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 <a href="flx_layouts_lo.html#WS2db454920e96a9e51e63e3d11c0bf69084-7e58_verapache">MX |
| ApplicationControlBar layout container</a>.</p> |
| |
| <p>For the Spark <a href="https://flex.apache.org/asdoc/spark/components/Application.html" target="_blank">Application</a> container, |
| use the <samp class="codeph">controlBarContent</samp> property to define the |
| controls that appear in the control bar area, as the following example shows: </p> |
| |
| <div class="p"> |
| <pre class="codeblock"><?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></pre> |
| |
| </div> |
| |
| <p>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.</p> |
| |
| <p>By default, the controls in the control bar area use horizontal |
| layout. Use the <samp class="codeph">Application.controlBarLayout</samp> property |
| to specify a different layout, as the following example shows:</p> |
| |
| <div class="p"> |
| <pre class="codeblock"><s:controlBarLayout> |
| <s:HorizontalLayout paddingLeft="12" gap="5"/> |
| </s:controlBarLayout></pre> |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested2" id="WSEA3CF5B7-F30B-418c-9C5A-ABEB2A5267A2_verapache"><a name="WSEA3CF5B7-F30B-418c-9C5A-ABEB2A5267A2_verapache"><!-- --></a> |
| <h3 class="topictitle3">Application events</h3> |
| |
| |
| <div> |
| <div class="p">The following events are dispatched only by the application |
| containers:<ul> |
| <li> |
| <p> |
| <samp class="codeph">applicationComplete</samp> Dispatched |
| after the application has been initialized, processed by the LayoutManager, |
| and attached to the display list. This is the last event dispatched |
| during an application's startup sequence. It is later than the application's <samp class="codeph">creationComplete</samp> event, |
| which gets dispatched before the preloader has been removed and |
| the application has been attached to the display list.</p> |
| |
| </li> |
| |
| <li> |
| <p> |
| <samp class="codeph">error</samp> Dispatched when an HTTPService call |
| fails.</p> |
| |
| </li> |
| |
| </ul> |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested2" id="WS2db454920e96a9e51e63e3d11c0bf62d75-7ff9_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf62d75-7ff9_verapache"><!-- --></a> |
| <h3 class="topictitle3">Viewing the application source |
| code</h3> |
| |
| |
| <div> |
| <p>You can use the <samp class="codeph">viewSourceURL</samp> 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 <samp class="codeph">viewSourceURL</samp> property |
| in a new browser window.</p> |
| |
| <p>Set the <samp class="codeph">viewSourceURL</samp> property by using MXML, |
| not ActionScript, as the following example shows:</p> |
| |
| <pre class="codeblock"><?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></pre> |
| |
| <p>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. </p> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested2" id="WS2db454920e96a9e51e63e3d11c0bf62d75-7ff8_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf62d75-7ff8_verapache"><!-- --></a> |
| <h3 class="topictitle3">Specifying options of the Application |
| container</h3> |
| |
| |
| <div> |
| <p>You |
| can specify several options of the application container to control |
| your application. The following table describes these options:</p> |
| |
| |
| <div class="tablenoborder"><table cellpadding="4" cellspacing="0" summary="" frame="border" border="1" rules="all"> |
| |
| |
| |
| <thead align="left"> |
| <tr> |
| <th class="cellrowborder" valign="top" width="NaN%" id="d32070e1086"> |
| <p>Option</p> |
| |
| </th> |
| |
| <th class="cellrowborder" valign="top" width="NaN%" id="d32070e1092"> |
| <p>Type</p> |
| |
| </th> |
| |
| <th class="cellrowborder" valign="top" width="NaN%" id="d32070e1098"> |
| <p>Description</p> |
| |
| </th> |
| |
| </tr> |
| |
| </thead> |
| |
| <tbody> |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d32070e1086 "> |
| <div class="p"> |
| <pre class="codeblock">frameRate</pre> |
| |
| </div> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d32070e1092 "> |
| <p>Number</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d32070e1098 "> |
| <p>Specifies the frame rate of the application, |
| in frames per second. The default value is 24.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d32070e1086 "> |
| <div class="p"> |
| <pre class="codeblock">pageTitle</pre> |
| |
| </div> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d32070e1092 "> |
| <p>String</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d32070e1098 "> |
| <p>Specifies a String that appears in the title |
| bar of the browser. This property provides the same functionality |
| as the HTML <samp class="codeph"><title></samp> tag. </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d32070e1086 "> |
| <div class="p"> |
| <pre class="codeblock">preloader</pre> |
| |
| </div> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d32070e1092 "> |
| <p>String</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d32070e1098 "> |
| <p>Specifies the path of a SWC component class |
| or ActionScript component class that defines a custom progress bar. </p> |
| |
| <p>A |
| SWC component must be in the same directory as the MXML file or |
| in the WEB-INF/flex/user_classes directory of your Flex web application.</p> |
| |
| <p>For |
| more information, see <a href="flx_app_container_apc.html#WS2db454920e96a9e51e63e3d11c0bf69084-7e3c_verapache">Showing |
| the download progress of an application</a>.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d32070e1086 "> |
| <div class="p"> |
| <pre class="codeblock">scriptRecursionLimit</pre> |
| |
| </div> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d32070e1092 "> |
| <p>Number</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d32070e1098 "> |
| <p>Specifies the maximum depth of Flash Player |
| or AIR call stack before Flash Player or AIR stops. This is essentially |
| the stack overflow limit.</p> |
| |
| <p>The default value is 1000.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d32070e1086 "> |
| <div class="p"> |
| <pre class="codeblock">scriptTimeLimit</pre> |
| |
| </div> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d32070e1092 "> |
| <p>Number</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d32070e1098 "> |
| <p>Specifies the maximum duration, in seconds, |
| that an ActionScript event listener can execute before Flash Player |
| or AIR assumes that it has stopped processing and aborts it.</p> |
| |
| <p>The |
| default value is 60 seconds, which is also the maximum allowable |
| value that you can set.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d32070e1086 "> |
| <p> |
| <samp class="codeph">useDirectBlit</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d32070e1092 "> |
| <p>Boolean</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d32070e1098 "> |
| <p>Specifies whether hardware acceleration |
| is used to copy graphics to the screen (if such acceleration is |
| available). </p> |
| |
| <p>This option only applies to applications running |
| in the standalone Flash Player. For applications running in a browser, |
| setting <samp class="codeph">useDirectBlit</samp> to <samp class="codeph">true</samp> is |
| equivalent to setting <samp class="codeph">wmode</samp> to <samp class="codeph">"direct"</samp> in |
| the HTML wrapper. For AIR applications, use the <samp class="codeph">renderMode</samp> application descriptor |
| tag.</p> |
| |
| <p>The default value is <samp class="codeph">false</samp>.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d32070e1086 "> |
| <p> |
| <samp class="codeph">useGPU</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d32070e1092 "> |
| <p>Boolean</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d32070e1098 "> |
| <p>Specifies whether GPU (Graphics Processing |
| Unit) acceleration is used when drawing graphics (if such acceleration |
| is available). </p> |
| |
| <p>This option only applies to applications running |
| in the standalone Flash Player. For applications running in a browser, |
| setting <samp class="codeph">useGPU</samp> to <samp class="codeph">true</samp> is equivalent |
| to setting <samp class="codeph">wmode</samp> to <samp class="codeph">"gpu"</samp> in the |
| HTML wrapper. For AIR applications, use the <samp class="codeph">renderMode</samp> application |
| descriptor tag.</p> |
| |
| <p>The default value is <samp class="codeph">false</samp>.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d32070e1086 "> |
| <div class="p"> |
| <pre class="codeblock">usePreloader</pre> |
| |
| </div> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d32070e1092 "> |
| <p>Boolean</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d32070e1098 "> |
| <p>Specifies whether to disable the application |
| preloader (<samp class="codeph">false</samp>) or not (<samp class="codeph">true</samp>). |
| The default value is <samp class="codeph">true</samp>. To use the default preloader, |
| your application must be at least 160 pixels wide. </p> |
| |
| <p>For more |
| information, see <a href="flx_app_container_apc.html#WS2db454920e96a9e51e63e3d11c0bf69084-7e3c_verapache">Showing |
| the download progress of an application</a>.</p> |
| |
| </td> |
| |
| </tr> |
| |
| </tbody> |
| |
| </table> |
| </div> |
| |
| <div class="note"><span class="notetitle">Note:</span> Properties <samp class="codeph">frameRate</samp>, <samp class="codeph">pageTitle</samp>, <samp class="codeph">preloader</samp>, <samp class="codeph">scriptRecursionLimit</samp>, |
| and <samp class="codeph">usePreloader</samp>, cannot be set in ActionScript; they |
| must be set in MXML code.</div> |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested1" id="WS2db454920e96a9e51e63e3d11c0bf69084-7e3a_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf69084-7e3a_verapache"><!-- --></a> |
| <h2 class="topictitle2">About the application object</h2> |
| |
| |
| <div> |
| <p>Flex |
| compiles your application into a SWF file that contains a single |
| application object, of type spark.components.Application or mx.core.Application. |
| In most cases, your application has one application object. Some |
| applications use the SWFLoader control to add more applications.</p> |
| |
| <p>An application object has the following characteristics:</p> |
| |
| <ul> |
| <li> |
| <p>The file defining the application object is the first |
| file loaded by the application.</p> |
| |
| </li> |
| |
| <li> |
| <p>You can refer to the application object as <samp class="codeph">mx.core.FlexGlobals.topLevelApplication</samp> from |
| anywhere in the application.</p> |
| |
| </li> |
| |
| <li> |
| <p>If you load multiple nested applications by using the SWFLoader |
| control, you can access the scope of each higher application in |
| the nesting hierarchy by using <samp class="codeph">parentApplication</samp>, <samp class="codeph">parentApplication</samp>.<samp class="codeph">parentApplication</samp>, |
| and so on.</p> |
| |
| </li> |
| |
| </ul> |
| |
| </div> |
| |
| <div class="nested2" id="WS2db454920e96a9e51e63e3d11c0bf69084-7e37_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf69084-7e37_verapache"><!-- --></a> |
| <h3 class="topictitle3">About documents</h3> |
| |
| |
| <div> |
| <div class="p"> |
| Every |
| MXML file used in an application is referred to as a <em>document class</em>. |
| For example, you define an MXML file named MyForm.mxml that contains |
| the following code: <pre class="codeblock"><?xml version="1.0"?> |
| <mx:Form xmlns:mx="library://ns.adobe.com/flex/mx"> |
| … |
| </mx:Form></pre> |
| |
| </div> |
| |
| <p>MyForm.mxml is the document class and instances of MyForm.mxml |
| are referred to as <em>documents</em>. An MXML file that includes |
| the <samp class="codeph"><s:Application></samp> or <samp class="codeph"><mx:Application></samp> tag |
| is the document class that defines the application object. MXML |
| files that omit the <samp class="codeph"><s:Application></samp> or <samp class="codeph"><mx:Application></samp> tag |
| are custom controls.</p> |
| |
| <p>A document has the following characteristics:</p> |
| |
| <ul> |
| <li> |
| <p>All MXML files that an application uses are document |
| classes, including the MXML file that includes the <samp class="codeph"><s:Application></samp> or <samp class="codeph"><mx:Application></samp> tag.</p> |
| |
| </li> |
| |
| <li> |
| <p>Custom ActionScript component files are document classes.</p> |
| |
| </li> |
| |
| <li> |
| <p>The Flex compiler cannot compile a SWF file from a file that |
| does not contain the <samp class="codeph"><s:Application></samp> or <samp class="codeph"><mx:Application></samp> tag.</p> |
| |
| </li> |
| |
| <li> |
| <p>You can access the scope of a document's parent document |
| by using <samp class="codeph">parentDocument</samp>, <samp class="codeph">parentDocument</samp>.<samp class="codeph">parentDocument</samp>, |
| and so on.</p> |
| |
| </li> |
| |
| <li> |
| <p>Flex provides a <samp class="codeph">UIComponent.isDocument</samp> property |
| so that you can detect if any given object is a document. </p> |
| |
| </li> |
| |
| </ul> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested2" id="WS2db454920e96a9e51e63e3d11c0bf62d75-7ff5_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf62d75-7ff5_verapache"><!-- --></a> |
| <h3 class="topictitle3">Accessing document and application |
| scopes</h3> |
| |
| |
| <div> |
| <p>In |
| your application's main MXML file, the file that contains the <samp class="codeph"><s:Application></samp> or <samp class="codeph"><mx:Application></samp> tag, |
| you can access the methods and properties of the application object |
| by using the <samp class="codeph">this</samp> 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 <samp class="codeph">this</samp> 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.</p> |
| |
| <p>Flex provides the following properties that you can use to access |
| parent documents:</p> |
| |
| <dl> |
| |
| <dt class="dlterm">mx.core.FlexGlobals.topLevelApplication</dt> |
| |
| <dd> |
| <p>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.</p> |
| |
| </dd> |
| |
| |
| |
| <dt class="dlterm">mx.core.UIComponent.parentDocument</dt> |
| |
| <dd> |
| <p>The parent document of the current document. You can use <samp class="codeph">parentDocument.parentDocument</samp> to |
| walk up the tree of multiple documents.</p> |
| |
| </dd> |
| |
| |
| |
| <dt class="dlterm">mx.core.UIComponent.parentApplication</dt> |
| |
| <dd> |
| <p>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 <samp class="codeph">parentApplication.parentApplication</samp> to walk |
| up the tree of multiple applications.</p> |
| |
| </dd> |
| |
| |
| </dl> |
| |
| <div class="section" id="WS2db454920e96a9e51e63e3d11c0bf62d75-7ff5_verapache__WS2db454920e96a9e51e63e3d11c0bf69084-7eff_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf62d75-7ff5_verapache__WS2db454920e96a9e51e63e3d11c0bf69084-7eff_verapache"><!-- --></a><h4 class="sectiontitle">Using |
| the mx.core.FlexGlobals.topLevelApplication property</h4> |
| |
| <p>To access properties |
| and methods of the top-level application object from anywhere in |
| your application, you can use the <samp class="codeph">topLevelApplication</samp> property |
| of the FlexGlobals class. For example, you define an application |
| that contains the method, as the following code shows: </p> |
| |
| <pre class="codeblock"><?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></pre> |
| |
| <p>You can then use the <samp class="codeph">FlexGlobals.topLevelApplication</samp> property |
| in the ButtonMXML.mxml component to reference the <samp class="codeph">doSomething()</samp> method, as |
| the following example shows:</p> |
| |
| <pre class="noswf"><?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></pre> |
| |
| <p>The <samp class="codeph">topLevelApplication</samp> property |
| is especially useful in applications that have one or more custom |
| MXML or ActionScript components that each use a shared set of data. |
| At the application level, you often store shared information and |
| provide utility functions that any of the components can access.</p> |
| |
| <p>For |
| example, suppose that you store the user's name at the application |
| level and implement a utility function, <samp class="codeph">getSalutation()</samp>, |
| which returns the string "Hi, <em>userName</em>". The following example |
| MyApplication.mxml file shows the application source that defines |
| the <samp class="codeph">getSalutation()</samp> method:</p> |
| |
| <pre class="codeblock"><?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></pre> |
| |
| <p>To access the <samp class="codeph">userName</samp> and |
| call the <samp class="codeph">getSalutation()</samp> method in your MXML components, |
| you can use the <samp class="codeph">topLevelApplication</samp> property, as |
| the following example from the MyComponent.mxml component shows:</p> |
| |
| <pre class="noswf"><?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></pre> |
| |
| <p>In this example, clicking |
| the Button control executes the <samp class="codeph">getSalutation()</samp> function |
| to populate the Label control. </p> |
| |
| </div> |
| |
| <div class="section" id="WS2db454920e96a9e51e63e3d11c0bf62d75-7ff5_verapache__WS2db454920e96a9e51e63e3d11c0bf69084-7efe_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf62d75-7ff5_verapache__WS2db454920e96a9e51e63e3d11c0bf69084-7efe_verapache"><!-- --></a><h4 class="sectiontitle">Using |
| the parentDocument property</h4> |
| |
| <p>To access the parent document of an object, |
| you can use the <a href="https://flex.apache.org/asdoc/mx/core/Application.html#parentDocumentation" target="_blank">parentDocument</a> property. |
| The parent document is the object that contains the current object. |
| All classes that inherit from the UIComponent class have a <samp class="codeph">parentDocument</samp> property. </p> |
| |
| <p>In |
| the following example, the application references the custom AccChildObject.mxml |
| component: </p> |
| |
| <pre class="codeblock"><?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></pre> |
| |
| <p>In this example, the application |
| is the parent document of the AccChildObject.mxml component. The |
| following code from the AccChildObject.mxml component uses the <samp class="codeph">parentDocument</samp> property |
| to define an Accordion container that is slightly smaller than the |
| Application container:</p> |
| |
| <pre class="noswf"><?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></pre> |
| |
| <p>You use the <samp class="codeph">parentDocument</samp> property |
| in MXML scripts to go up a level in the chain of parent documents. |
| You can use the <samp class="codeph">parentDocument</samp> to walk this chain |
| by using multiple <samp class="codeph">parentDocument</samp> properties, as |
| the following example shows: </p> |
| |
| <pre class="codeblock"> parentDocument.parentDocument.doSomething();</pre> |
| |
| <p>The <samp class="codeph">parentDocument</samp> property |
| of the application object is a reference to the application.</p> |
| |
| <p>The <samp class="codeph">parentDocument</samp> is |
| typed as Object so that you can access properties and methods on |
| ancestor document objects without casting.</p> |
| |
| <p>Every UIComponent |
| class has an <samp class="codeph">isDocument</samp> property that is set to <samp class="codeph">true</samp> if that |
| UIComponent class is a document object, and <samp class="codeph">false</samp> if |
| it is not. </p> |
| |
| <p>If |
| a UIComponent class is a document object, it has a <samp class="codeph">documentDescriptor</samp> property. |
| This is a reference to the descriptor at the top of the generated descriptor |
| tree in the generated document class.</p> |
| |
| <p>For example, suppose |
| that AddressForm.mxml component creates a subclass of the Form container |
| to define an address form, and the MyApp.mxml component creates |
| two instances of it: <samp class="codeph"><AddressForm id="shipping"></samp> and <samp class="codeph"><AddressForm id="billing"></samp>. </p> |
| |
| <p>In |
| this example, the shipping object is a document object. Its <samp class="codeph">documentDescriptor</samp> property |
| corresponds to the <samp class="codeph"><mx:Form></samp> tag at the top |
| of the AddressForm.mxml file (the definition of the component), |
| while its descriptor corresponds to the <samp class="codeph"><AddressForm id="shipping"></samp> tag |
| in MyApp.mxml file (an instance of the component).</p> |
| |
| <p>Walking |
| the document chain by using the <samp class="codeph">parentDocument</samp> property |
| is similar to walking the application chain by using the <samp class="codeph">parentApplication</samp> property.</p> |
| |
| </div> |
| |
| <div class="section" id="WS2db454920e96a9e51e63e3d11c0bf62d75-7ff5_verapache__WS2db454920e96a9e51e63e3d11c0bf62d75-7ff2_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf62d75-7ff5_verapache__WS2db454920e96a9e51e63e3d11c0bf62d75-7ff2_verapache"><!-- --></a><h4 class="sectiontitle">Using |
| the parentApplication property</h4> |
| |
| <p>Applications can load other applications; |
| therefore, you can have a hierarchy of applications, similar to |
| the hierarchy of documents within each application. Every UIComponent |
| class has a <samp class="codeph">parentApplication</samp> read-only property |
| that references the application object in which the object exists. |
| The <samp class="codeph">parentApplication</samp> property of an application |
| object is never itself; it is either the application object into |
| which it was loaded, or it is <samp class="codeph">null</samp> (for the application |
| object).</p> |
| |
| <p>Walking the application chain by using the <samp class="codeph">parentApplication</samp> property |
| is similar to walking the document chain by using the <samp class="codeph">parentDocument</samp> property.</p> |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested1" id="WS2db454920e96a9e51e63e3d11c0bf69084-7e3c_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf69084-7e3c_verapache"><!-- --></a> |
| <h2 class="topictitle2">Showing the download progress of |
| an application</h2> |
| |
| |
| <div> |
| <p>The |
| application containers support an application preloader that uses |
| a download progress bar to show the download and initialization |
| progress of an application SWF file. By default, the application |
| preloader is enabled. The preloader tracks how many bytes have been |
| downloaded and continually updates the progress bar. </p> |
| |
| <p>The download progress bar displays information about two different |
| phases of the application: the download phase and the initialization |
| phase. The application container's <samp class="codeph">creationComplete</samp> event |
| dismisses the preloader. </p> |
| |
| <div class="p">Flex includes two download progress bar classes: the <a href="https://flex.apache.org/asdoc/mx/preloaders/SparkDownloadProgressBar.html" target="_blank">SparkDownloadProgressBar</a> (Spark) |
| and the <a href="https://flex.apache.org/asdoc/mx/preloaders/DownloadProgressBar.html" target="_blank">DownloadProgressBar</a> (MX). |
| The following image shows the Spark download progress bar: <div class="figborder"><span class="figdesc">A. Spark download progress bar. B. Initialization progress |
| track. C. Download progress track. </span> |
| |
| <img src="images/apc_spark_dpb.png"/> |
| </div> |
| |
| </div> |
| |
| <p>When the SWF file is downloading, download progress track expands. |
| When the application is initializing, the initilization progress |
| track expands. The SparkDownloadProgressBar class does not contain |
| text.</p> |
| |
| <p>The following example shows the MX download progress bar during |
| the initialization phase: </p> |
| |
| <div class="figborder"> |
| <img src="images/apc_preloader.png" alt="The download progress bar during the initialization phase"/> |
| </div> |
| |
| <p>The MX download progress bar supports text. The bar displays |
| the text "Downloading app" during the SWF download. It displays |
| the text "Initializing app" during application initialization.</p> |
| |
| <p>The download progress bar is not displayed if the SWF file is |
| on your local host or if it is already cached. If the SWF file is |
| not on your local host and is not cached, the progress bar is displayed |
| if less than half of the application is downloaded after 700 milliseconds |
| of downloading.</p> |
| |
| </div> |
| |
| <div class="nested2" id="WS8b1c39bd7e9fc36417a8e8de12e0c196733-8000_verapache"><a name="WS8b1c39bd7e9fc36417a8e8de12e0c196733-8000_verapache"><!-- --></a> |
| <h3 class="topictitle3">Adding a splash screen</h3> |
| |
| |
| <div> |
| <p>As an alternative to the preloader, you can display a splash |
| screen instead. The splash screen appears during the time of application |
| startup. </p> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested2" id="WS4b4ddee4904fe779244d563b12208c2f104-8000_verapache"><a name="WS4b4ddee4904fe779244d563b12208c2f104-8000_verapache"><!-- --></a> |
| <h3 class="topictitle3">Setting the download progress bar |
| class</h3> |
| |
| |
| <div> |
| <p>By default, an Application container uses the SparkDownloadProgressBar |
| class. To configure the Application container to use the MX class, |
| DownloadProgressBar, use the <samp class="codeph">preloader</samp> property |
| as the following example shows:</p> |
| |
| <pre class="codeblock"> <s:Application ... preloader="mx.preloaders.DownloadProgressBar"></pre> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested2" id="WS2db454920e96a9e51e63e3d11c0bf62d75-7ff0_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf62d75-7ff0_verapache"><!-- --></a> |
| <h3 class="topictitle3">Disabling the download progress |
| bar</h3> |
| |
| |
| <div> |
| <p>To |
| disable the download progress bar, set the <samp class="codeph">usePreloader</samp> property |
| of the Application container to <samp class="codeph">false</samp>, as the following |
| example shows: </p> |
| |
| <pre class="codeblock"> <s:Application ... usePreloader="false"></pre> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested2" id="WS2db454920e96a9e51e63e3d11c0bf62d75-7fef_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf62d75-7fef_verapache"><!-- --></a> |
| <h3 class="topictitle3">Creating a custom progress bar</h3> |
| |
| |
| <div> |
| <p>To create a custom download progress bar, you can create |
| a subclass of the SparkDownloadProgressBar or DownloadProgressBar |
| class, or create a subclass of the <a href="https://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/Sprite.html" target="_blank">flash.display.Sprite</a> class |
| that implements the <a href="https://flex.apache.org/asdoc/mx/preloaders/IPreloaderDisplay.html" target="_blank">mx.preloaders.IPreloaderDisplay</a> interface. </p> |
| |
| <p>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. </p> |
| |
| <p>To use a custom download progress bar class, you set the <samp class="codeph">preloader</samp> 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 <samp class="codeph">preloader</samp> value; otherwise, |
| you specify the class name. </p> |
| |
| <p>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: </p> |
| |
| <pre class="codeblock"> <s:Application ... preloader="myComponents.mybars.CustomBar"></pre> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested2" id="WS2db454920e96a9e51e63e3d11c0bf62d75-7fee_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf62d75-7fee_verapache"><!-- --></a> |
| <h3 class="topictitle3">Download progress bar events</h3> |
| |
| |
| <div> |
| <p>The operation of the download progress bar is defined by |
| a set of events. These events are dispatched by the <a href="https://flex.apache.org/asdoc/mx/preloaders/Preloader.html" target="_blank">Preloader</a> class. |
| The <a href="https://flex.apache.org/asdoc/mx/preloaders/SparkDownloadProgressBar.html" target="_blank">SparkDownloadProgressBar</a> and <a href="https://flex.apache.org/asdoc/mx/preloaders/DownloadProgressBar.html" target="_blank">DownloadProgressBar</a> classes |
| defines an event listener for all these events.</p> |
| |
| <p>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. </p> |
| |
| <p>The following table describes the download progress bar events:</p> |
| |
| |
| <div class="tablenoborder"><table cellpadding="4" cellspacing="0" summary="" frame="border" border="1" rules="all"> |
| |
| |
| <thead align="left"> |
| <tr> |
| <th class="cellrowborder" valign="top" width="NaN%" id="d32070e2096"> |
| <p>Event</p> |
| |
| </th> |
| |
| <th class="cellrowborder" valign="top" width="NaN%" id="d32070e2102"> |
| <p>Description</p> |
| |
| </th> |
| |
| </tr> |
| |
| </thead> |
| |
| <tbody> |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d32070e2096 "> |
| <div class="p"> |
| <pre class="codeblock">ProgressEvent.PROGRESS</pre> |
| |
| </div> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d32070e2102 "> |
| <p>Dispatched when the application SWF file |
| is being downloaded. The first <samp class="codeph">PROGRESS</samp> event signifies the |
| beginning of the download process.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d32070e2096 "> |
| <div class="p"> |
| <pre class="codeblock">Event.COMPLETE</pre> |
| |
| </div> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d32070e2102 "> |
| <p>Dispatched when the SWF file has finished |
| downloading. Either zero or one <samp class="codeph">COMPLETE</samp> event |
| is dispatched.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d32070e2096 "> |
| <div class="p"> |
| <pre class="codeblock">FlexEvent.INIT_COMPLETE</pre> |
| |
| </div> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d32070e2102 "> |
| <p>Dispatched when the application finishes |
| initialization. This event is always dispatched once, and is the |
| last event that the Preloader dispatches. </p> |
| |
| <p>The download progress |
| bar must dispatch a <samp class="codeph">COMPLETE</samp> event after it has |
| received an <samp class="codeph">INIT_COMPLETE</samp> event. The <samp class="codeph">COMPLETE</samp> event |
| informs the Preloader that the download progress bar has completed |
| all operations and can be dismissed. </p> |
| |
| <p>The download progress |
| bar can perform additional tasks, such as playing an animation, |
| after receiving an <samp class="codeph">INIT_COMPLETE</samp> event, and before |
| dispatching the COMPLETE event. Dispatching the COMPLETE event should |
| be the last action of the download progress bar.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d32070e2096 "> |
| <div class="p"> |
| <pre class="codeblock">FlexEvent.INIT_PROGRESS</pre> |
| |
| </div> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d32070e2102 "> |
| <p>Dispatched when the application completes |
| an initialization phase, as defined by calls to the <samp class="codeph">measure()</samp>, <samp class="codeph">commitProperties()</samp>, |
| or <samp class="codeph">updateDisplayList()</samp> methods. This event describes the |
| progress of the application in the initialization phase.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d32070e2096 "> |
| <div class="p"> |
| <pre class="codeblock">RSLEvent.RSL_ERROR</pre> |
| |
| </div> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d32070e2102 "> |
| <p>Dispatched when a Runtime Shared Library |
| (RSL) fails to load. </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d32070e2096 "> |
| <div class="p"> |
| <pre class="codeblock">RSLEvent.RSL_LOADED</pre> |
| |
| </div> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d32070e2102 "> |
| <p>Dispatched when an RSL finishes loading. |
| The total bytes and total loaded bytes are included in the event |
| object. This event is dispatched for every RSL that is successfully |
| loaded. </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d32070e2096 "> |
| <div class="p"> |
| <pre class="codeblock">RSLEvent.RSL_PROGRESS</pre> |
| |
| </div> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d32070e2102 "> |
| <p>Dispatched when an RSL is being downloaded. |
| The first progress event signifies the beginning of the RSL download. </p> |
| |
| <p>The |
| event object for this event is of type RSLEvent. </p> |
| |
| </td> |
| |
| </tr> |
| |
| </tbody> |
| |
| </table> |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested2" id="WS2db454920e96a9e51e63e3d11c0bf62d75-7fed_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf62d75-7fed_verapache"><!-- --></a> |
| <h3 class="topictitle3">Creating a simple download progress |
| bar class</h3> |
| |
| |
| <div> |
| <p>The easiest way to create your own download progress bar |
| is to create a subclass of the <a href="https://flex.apache.org/asdoc/mx/preloaders/SparkDownloadProgressBar.html" target="_blank">SparkDownloadProgressBar</a> or <a href="https://flex.apache.org/asdoc/mx/preloaders/DownloadProgressBar.html" target="_blank">DownloadProgressBar</a> class, |
| and then modify it for your application requirements. </p> |
| |
| <div class="p">The following example shows a custom download progress bas based |
| on the SparkDownloadProgressbar class. This class overrides the |
| getter methods for the <samp class="codeph">SparkDownloadProgressbar.backgroundImage</samp> and <samp class="codeph">SparkDownloadProgressbar.backgroundSize</samp> properties |
| to show an image during application download and inititialization: <pre class="codeblock">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; |
| } |
| } |
| |
| }</pre> |
| |
| </div> |
| |
| <div class="p">The following application uses this custom class: <pre class="codeblock"><?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></pre> |
| |
| </div> |
| |
| <p>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:</p> |
| |
| <pre class="codeblock">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; |
| } |
| } |
| |
| }</pre> |
| |
| <p>You can use your custom class in an application, as the following |
| example shows:</p> |
| |
| <pre class="codeblock"><?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></pre> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested2" id="WS2db454920e96a9e51e63e3d11c0bf62d75-7fec_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf62d75-7fec_verapache"><!-- --></a> |
| <h3 class="topictitle3">Creating an advanced subclass of |
| the DownloadProgressBar class</h3> |
| |
| |
| <div> |
| <p>In the following example, you create a subclass of the <a href="https://flex.apache.org/asdoc/mx/preloaders/DownloadProgressBar.html" target="_blank">DownloadProgressBar</a> 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.</p> |
| |
| <pre class="codeblock">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)); |
| } |
| } |
| }</pre> |
| |
| <p>You can use your custom class in a application, as the following |
| example shows:</p> |
| |
| <pre class="codeblock"><?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></pre> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested2" id="WS2db454920e96a9e51e63e3d11c0bf62d75-7feb_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf62d75-7feb_verapache"><!-- --></a> |
| <h3 class="topictitle3">Creating a subclass of Sprite as |
| a download progress bar</h3> |
| |
| |
| <div> |
| <p>You can define a custom download progress bar as a subclass |
| of the <a href="https://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/Sprite.html" target="_blank">Sprite</a> 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. </p> |
| |
| <p>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. </p> |
| |
| <p>The following example displays a SWF file as the download progress |
| bar. This class must implement the IPreloaderDisplay interface.</p> |
| |
| <pre class="codeblock">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 { |
| } |
| } |
| }</pre> |
| |
| <p/> |
| |
| </div> |
| |
| </div> |
| |
| <div> |
| <p><strong>Navigation</strong></p> |
| <p><a href="index.html">Using Flex</a> » <a href="flx_p3_building_ui.html">Building the user interface</a></p> |
| </div> |
| |
| <p>Adobe and Adobe Flash Player are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries and are used by permission from Adobe. No other license to the Adobe trademarks are granted.</p> |
| </div> |
| |
| |
| </body> |
| </html> |
