2 Replies Latest reply on Feb 24, 2010 7:15 AM by msparker64

    Speed Issues

    msparker64

      Greetings and Salutations,

       

      I'm having speed issues with my Adobe AIR application. From what I've read on the web, AIR is supposed to be fast at drawing graphics. I am writing an application which has multiple screens. On one of the screens I have a tab (SuperNavigator) which has a canvas on it. That canvas has a series of other canvases (built with a repeater) that have graphics in them. I am having speed issues when I have more than 50 of these children canvases. I've tried running it without the graphics (code below is without the graphics) to see how it performs. When I have 954 of these canvases being drawn it takes about 2.5 minutes to draw. This is unacceptable and I'm wondering if this is something I've induced or if AIR was never meant to handle such a large amount of canvases (actually this isn't a large amount, in a real world environment there could be a lot more). I've included relevant clips from the code. There are a couple empty boxes that in the real application will hold graphics.

       

      The class withing the Tab Navigator is a canvas.

       

      In the action Script (the setter line takes 2.5 minutes to get past) (it's binding to the repeater that seems to be my problem).

      [Bindable]

       

      private

      private

       

      var _assetList:Array;

       

       

       

       

      [

      Bindable]

       

      public function get timelineAssetList():Array{

       

           return this._assetList;

      }

       

       

       

      public function set timelineAssetList(ac:Array):void{

       

           this._assetList = ac;

      }

       

       

       

       

       

       

      The MXML code that is being bound to:

       

       

      <mx:Canvas id="labelCanvas" left="0" right="0" top="0" height="65" verticalScrollPolicy="off" scroll="scrolling(event)">

       

           <mx:HBox horizontalGap="1" left="10" right="10" top="10">

       

       

       

                <mx:Spacer width="2"/>

       

       

       

       

                 <mx:Canvas width="{getHeaderWidth()}" height="40" borderStyle="solid" borderColor="{StaticVariables.borderColor.getColorUint()}" horizontalCenter="0">

       

                 <PastDataView:ColorBarScale id="scale" bottom="10"/>

       

       

       

           </mx:Canvas>

       

       

       

       

       

                <mx:Canvas width="20" height="40">

       

       

       

                     <mx:Spacer width="20" />

       

       

       

                </mx:Canvas>

       

       

       

       

           </mx:HBox>

       

       

       

      </mx:Canvas>

       

      <mx:Canvas id="assetCanvas" left="0" right="0" bottom="0" top="65" scroll="scrolling(event)">

       

       

       

           <mx:VBox y="10" right="16" left="10" verticalGap="0">

       

       

       

       

                <mx:Repeater id="assetRepeater" dataProvider="{timelineAssetList}">

       

       

       

                     <mx:HRule width="100%"/>

                     <PastDataView:ColorBarBar

       

      id="barArray" width="100%" height="170" asset="{assetRepeater.currentItem}"/>

       

       

                </mx:Repeater>

       

       

       

       

           </mx:VBox>

       

       

       

      </mx:Canvas>

       

       

      The ColorBarBar consists of:

       

      <?xml version="1.0" encoding="utf-8"?>

      <mx:Canvas

       

      xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300" xmlns:PastDataView="org.XXXXXX.CenterScreen.PastDataView.*" horizontalScrollPolicy="off" click="clicked()">

       

           [

      Bindable]

       

           public static var _colorBarHeight:int = StaticVariables.colorBarHeight;

       

           [

      Bindable]

       

           private var _asset:Object;

       

           [

      Bindable]

       

           public function set asset(a:Object):void{

       

                this._asset = a;

                getBackgroundColor();

           }

       

       

       

           public function get asset():Object{

       

                return _asset;

           }

          

       

           private function getBackgroundColor():void {

       

                var color:String = asset.color;

       

                if (color == null) color = "Black";

       

       

                if( color.toLowerCase() == "blue" ) {

                     lblAssetTag.setStyle(

      "color", 0x1674cc);

                     lblAsset.setStyle(

      "color", 0x1674cc);

                }

      else if( color.toLowerCase() == "red" ) {

                     lblAssetTag.setStyle(

      "color", 0xe35353);

                     lblAsset.setStyle(

      "color", 0xe35353);

                }

      else if(color.toLowerCase() == "grey" || color.toLowerCase() == "gray") {

                     lblAssetTag.setStyle(

      "color", 0xe55555);

                     lblAsset.setStyle(

      "color", 0xe55555);

                }

      else { // give it a default color

                     lblAssetTag.setStyle(

      "color", 0x000000);

                     lblAsset.setStyle(

      "color", 0x000000);

                }

           }

       

       

           private function calculateActivityRepeaterHeight():int{

       

                return this.height-50-_colorBarHeight;

           }

       

       

           public function clicked():void{

                dispatchEvent(

      new SelectAssetEvent(this._asset, false, false, true));

           }

       

           ]]>

           </mx:Script>

       

       

           <mx:VBox left="0" top="0" right="0">

       

                <mx:Spacer height="1"/>

       

       

                <mx:HBox>

       

                     <mx:Spacer width="2"/>

                     <mx:Label

      id="lblAssetTag" text="{asset.type}: " fontWeight="bold" fontSize="12" doubleClickEnabled="true" doubleClick="titleClicked()"/>

       

      id="lblAssetTag" text="{asset.type}: " fontWeight="bold" fontSize="12" doubleClickEnabled="true" doubleClick="titleClicked()"/>

      id="lblAssetTag" text="{asset.type}: " fontWeight="bold" fontSize="12" doubleClickEnabled="true" doubleClick="titleClicked()"/>

       

       

                     <mx:Label id="lblAsset" text="{asset.name}" fontSize="12" doubleClickEnabled="true" doubleClick="titleClicked()"/>

       

                     <mx:Label id="lblAssetId" text="{'(' + asset.id + ')'}" fontSize="12" visible="{mx.core.Application.application.debugMode}"/>

       

                </mx:HBox>

       

       

       

                <mx:HBox horizontalGap="1">

       

                     <mx:Spacer width="2"/>

       

                     <mx:Spacer width="10" />

       

                     <mx:VBox

       

      width="100%">

                          <mx:VBox>

                          </mx:VBox>

       

       

                          <mx:VBox

       

      id="displays" verticalScrollPolicy="auto" height="{calculateActivityRepeaterHeight()}" horizontalScrollPolicy="off">

                          </mx:VBox>

       

       

                     </mx:VBox>

       

       

                </mx:HBox>

       

       

       

                <mx:Spacer height="2"/>

       

           </mx:VBox>

      </mx:Canvas>

       

      I would appreciate any thoughts or feedback you could provide.

       

      ~martin

        • 1. Re: Speed Issues
          QueTwo

          The Canvas is a very heavy object that has lots of overhead.  Even worse is the VBox object that is in there multiple times. 

           

          What exactally are you trying to accomplish?  Just looking over the code, it seems that the same could be done directly with the Graphics API, at a much faster rate.

           

          For each of the VBoxes and Canvases you have, the entire size of each child and parent need to be re-evalulated each time you add or change something.  This is a HUGE overhead, and probably why the app is running so slow.  You may need to convert this app to use simpler objects (UIComponent or something lower-level like that) to get any speed.

           

          Are you using Flex Bulder?  Take a look at the app while the Profiler is running to see what I'm talking about.

          1 person found this helpful
          • 2. Re: Speed Issues
            msparker64 Level 1

            Thanks QueTwo,

             

            Yes, I am using FlexBuilder and I do see the overhead you are referring to. So my problem per-say isn't the drawing of the bitmap itself, rather the multitudes of containers that it is contained within - if I am understanding correctly. I put just this functionality into a small app without all of the containers and I was able to draw 1000 of the color bars in seconds. Thank you for your advice.