Speed Issues

Question

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

Answer 1

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.