3 Replies Latest reply on Feb 22, 2013 11:48 AM by Flex harUI

    Memory leaks nightmares

    Zolotoj Level 3

      Here is a sample code that according to Profiler creates a memory leak:

       

      public class class1 ButtonRendererBase extends something else

      {

          

           public function class1()

                          {

                                    super();

                     setStyle('skinClass', skinClass); // without this no memeory leak.

                          }

      }

       

      Why is in the world attaching a skin creates a memory leak?

       

      Thanks

        • 1. Re: Memory leaks nightmares
          Flex harUI Adobe Employee

          What does the profiler show?

           

          If the skin adds an event listener to a gc root like timer or frame events, then that skin will pin its host component.

          • 2. Re: Memory leaks nightmares
            Zolotoj Level 3

            Here is the skin:

             

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

            <s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"

                                           xmlns:s="library://ns.adobe.com/flex/spark"

                                     xmlns:fb="http://ns.adobe.com/flashbuilder/2009"

                                           xmlns:mx="library://ns.adobe.com/flex/mx"

                                           xmlns:commons="library://commons.stoneriver.com"

                                           height="{iconDisplayed.height + 6}"

                                           minWidth="21"

                                           minHeight="21"

                                           alpha.disabledStates="0.5"

                                           >

             

             

                <!-- host component -->

                <fx:Metadata>

                <![CDATA[

                    /**

                     * @copy spark.skins.spark.ApplicationSkin#hostComponent

                     */

                    [HostComponent("spark.components.ToggleButton")]

                ]]>

                </fx:Metadata>

               

                <fx:Script fb:purpose="styling">

                    /* Define the skin elements that should not be colorized.

                       For toggle button, the graphics are colorized but the label is not. */

                    static private const exclusions:Array = ["labelDisplay"];

                                private const DEFAULT_TOGGLE_BUTTON_HEIGHT:int = 28;

             

             

                                [Bindable] private var _bgColor:uint;

                                [Bindable] private var _bgColor2:uint;

                                [Bindable] private var _rollOverColor:uint;

             

                                private var _collapsible:Boolean = true;

                                private var _rotateChevron:Boolean = true;

             

                    override public function get colorizeExclusions():Array {return exclusions;}

                   

                    override protected function initializationComplete():void

                    {

                        useChromeColor = true;

                        super.initializationComplete();

             

                                          _bgColor                     = hostComponent.getStyle("bgColor1");

             

                                          var _bg2:uint           = hostComponent.getStyle("bgColor2");

                                          _bgColor2                     = (_bg2)?_bg2:_bgColor;

             

             

                                          var _ta:String          = hostComponent.getStyle("textAlign");

                                          if(_ta){

                                                    labelDisplay.setStyle("textAlign", _ta);

                                          }

                                          var _fontColor:uint = hostComponent.getStyle("color");

                                          if(_fontColor){

                                                    labelDisplay.setStyle("color", _fontColor);

                                          }

                                          _rollOverColor           = hostComponent.getStyle("colorRollOver");

             

                                          _collapsible = hostComponent.getStyle("collapsible");

                    }

                   

                    override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void

                    {

                        var cr:Number = getStyle("cornerRadius");

                        if (cornerRadius != cr){

                            cornerRadius = cr;

                            shadow.radiusX = cornerRadius;

                            fill.radiusX = cornerRadius;

                        }

             

                                          //should this be inside of previous check?

                                          if(_collapsible){

                                                    var arr:Boolean = hostComponent.getStyle("showArrow");

                                                    if(arr){

                                                              arrow.visible = (this.width > 50 &amp;&amp; arrow)?true:false;

                                                    }

                                                    var pnmr:* = this.parent.parent;

                                                    var rot:Boolean = pnmr.getStyle('rotateChevron');

                                                    if(arrow.visible){

                                                              arrow.rotation = rot?270:0;

                                                    }

                                          }

             

             

                                          /* if(arrow.visible){

                                                    var pnmr:* = this.parent.parent;

                                                    trace(this.labelDisplay.text + " pnmr.height: " + pnmr.height);

                                                    if(pnmr.height > DEFAULT_TOGGLE_BUTTON_HEIGHT){

                                                              arrow.rotation = 270;

                                                    }else{

                                                              arrow.rotation = 0;

                                                    }

                                          } */

             

                        super.updateDisplayList(unscaledWidth, unscaledHeight);

                    }

                   

                    private var cornerRadius:Number = 2;

                </fx:Script>

               

                <!-- states -->

                <s:states>

                    <s:State name="up"                                                   stateGroups="unselected" />

                    <s:State name="over"                                         stateGroups="overStates, unselected" />

                    <s:State name="down"                                         stateGroups="downStates, unselected" />

                    <s:State name="disabled"                               stateGroups="disabledStates, unselected" />

                                <s:State name="selected"                              stateGroups="selectedStates" />

                    <s:State name="upAndSelected"                     stateGroups="selectedStates, selectedUpStates" />

                    <s:State name="overAndSelected"           stateGroups="overStates, selectedStates" />

                    <s:State name="downAndSelected"           stateGroups="downStates, selectedStates" />

                    <s:State name="disabledAndSelected" stateGroups="selectedUpStates, disabledStates, selectedStates" />

                </s:states>

               

                <!-- layer 1: shadow -->

                <!--- @private -->

                <s:Rect id="shadow" left="-1" right="-1" top="-1" bottom="-1" radiusX="2">

                    <s:fill>

                        <s:LinearGradient rotation="90">

                                <s:GradientEntry color="0x000000"

                                               color.downStates="0xFFFFFF"

                                               alpha="0.01"

                                               alpha.downStates="0" />

                                <s:GradientEntry color="0x000000"

                                               color.downStates="0xFFFFFF"

                                               alpha="0.07"

                                               alpha.downStates="0.5" />

                        </s:LinearGradient>

                    </s:fill>

                </s:Rect>

               

                <!-- layer 2: fill -->

                <!--- @private -->

                <s:Rect id="fill" left="0" right="0" top="0" bottom="0" radiusX="2">

                    <s:fill>

                        <s:LinearGradient rotation="90">

                            <s:GradientEntry color="{_bgColor}"           ratio="0"           alpha="1" />

                            <s:GradientEntry color="{_bgColor2}"           ratio=".15" alpha="1" />

                        </s:LinearGradient>

                    </s:fill>

                </s:Rect>

               

                <!-- layer 3: fill lowlight -->

                <!--- @private

                <s:Rect id="lowlight" left="1" right="1" top="1" bottom="1" radiusX="2">

                    <s:fill>

                        <s:LinearGradient rotation="270">

                            <s:GradientEntry color="0x000000" ratio="0.0" alpha="0.0627" />

                            <s:GradientEntry color="0x000000" ratio="0.48" alpha="0.0099" />

                            <s:GradientEntry color="0x000000" ratio="0.48001" alpha="0" />

                        </s:LinearGradient>

                    </s:fill>

                </s:Rect>-->

               

                <!-- layer 4: fill highlight -->

                <!--- @private

                <s:Rect id="highlight" left="1" right="1" top="1" bottom="1" radiusX="2">

                    <s:fill>

                        <s:LinearGradient rotation="90">

                            <s:GradientEntry color="0xFFFFFF"

                                             ratio="0.0"

                                             alpha="0.33"

                                             alpha.selectedUpStates="0.22"

                                             alpha.overStates="0.22"

                                             alpha.downStates="0.12"/>

                            <s:GradientEntry color="0xFFFFFF"

                                             ratio="0.48"

                                             alpha="0.33"

                                             alpha.selectedUpStates="0.22"

                                             alpha.overStates="0.22"

                                             alpha.downStates="0.12"/>

                            <s:GradientEntry color="0xFFFFFF"

                                             ratio="0.48001"

                                             alpha="0" />

                        </s:LinearGradient>

                    </s:fill>

                </s:Rect>-->

               

                <!-- layer 6: highlight stroke (down state only) -->

                <!--- @private

                <s:Rect id="hldownstroke1" left="1" right="1" top="1" bottom="1" radiusX="2"

                        includeIn="downStates, selectedUpStates, overAndSelected">

                    <s:stroke>

                        <s:LinearGradientStroke rotation="90" weight="1">

                            <s:GradientEntry color="0x000000" alpha="0.25" ratio="0.0" />

                            <s:GradientEntry color="0x000000" alpha="0.25" ratio="0.001" />

                            <s:GradientEntry color="0x000000" alpha="0.07" ratio="0.0011" />

                            <s:GradientEntry color="0x000000" alpha="0.07" ratio="0.965" />

                            <s:GradientEntry color="0x000000" alpha="0.00" ratio="0.9651" />

                        </s:LinearGradientStroke>

                    </s:stroke>

                </s:Rect>-->

                <!--- @private

                <s:Rect id="hldownstroke2" left="2" right="2" top="2" bottom="2" radiusX="2"

                        includeIn="downStates, selectedUpStates, overAndSelected">

                    <s:stroke>

                        <s:LinearGradientStroke rotation="90" weight="1">

                            <s:GradientEntry color="0x000000" alpha="0.09" ratio="0.0" />

                            <s:GradientEntry color="0x000000" alpha="0.00" ratio="0.0001" />

                        </s:LinearGradientStroke>

                    </s:stroke>

                </s:Rect>-->

               

                <!-- layer 8: text -->

                <!--- @copy spark.components.supportClasses.ButtonBase#labelDisplay -->

                      <s:Label id="labelDisplay"

                                           textAlign="left"

                                           verticalAlign="middle"

                                           maxDisplayedLines="1"

                                           verticalCenter="1"

                                           left="28"

                                           top="2"

                                           color.overStates="{_rollOverColor}"

                                           fontWeight.selectedStates="bold"

                                           fontWeight.downStates="bold"

                                           bottom="2">

                      </s:Label>

             

                      <s:BitmapImage id="iconDisplayed"

                                                      smooth="true"

                                                      width="20"

                                                      height="20"

                                                      verticalCenter="0"

                                                      left="2"/>

               

                      <!-- layer 9: arrow -->

                      <!--- The arrow graphic displayed in the anchor button. -->

                      <commons:Chevron  id="arrow"/>

             

            </s:SparkSkin>

            • 3. Re: Memory leaks nightmares
              Flex harUI Adobe Employee

              Hard to say.  I saw a BitmapImage in there.  If that hosts a  SWF that animates that will cause a leak.  If Chevron is an animation that can also be a problem.  Try removing those elements as a test.