The correct way to dispose of a list and all associated assets

crooksy88

Hi,

I'm currently getting an app crash on Android when refreshing a list content.

Currently I'm trying to dispose of the list and all assets entirely on a PanelScreen transition out complete listener, by calling clearList(), and recreating it on transition in start with createList().

Could you look at how I am currently handling the creation and disposal of a Feathers list and let me know if there is a better/correct way to do this.

public function createList():void {
if (_list) {
clearList();
}

for(var i:int = 0; i < imageDataArray.length; i++) {
_items.push(new GalleryListItem());
}
			
_list = new List();					
_list.itemRendererFactory = function():IListItemRenderer {
_renderer = new DragDropItemRenderer();				
_renderer.isLongPressEnabled = true;
return _renderer;
};
								
_vl = new VerticalLayout();
_vl.hasVariableItemDimensions = true;
_vl.useVirtualLayout = false;
_list.layout = _vl;						

_list.snapScrollPositionsToPixels = true;
_list.itemRendererProperties.hasLabelTextRenderer = false;
_list.verticalScrollPolicy = feathers.controls.ScrollPolicy.ON;
_list.horizontalScrollPolicy = feathers.controls.ScrollPolicy.OFF;
_list.scrollBarDisplayMode = feathers.controls.ScrollBarDisplayMode.FLOAT;				
_list.verticalMouseWheelScrollDirection = "vertical";
_list.verticalMouseWheelScrollStep = 50;
				
_list.topPullView = _pullView;
_list.addEventListener(starling.events.Event.UPDATE, list_updateHandler);
_pullView.addEventListener(FeathersEventType.PULLING, pullView_pullingHandler);
_list.verticalScrollBarFactory = myScrollBarFactoryFunction;
_list.isSelectable = true;
_list.hasElasticEdges = true;
_list.itemRendererProperties.width = 600;
_list.itemRendererProperties.height = 600;			
_list.addEventListener(TouchEvent.TOUCH, isTouched);
_list.addEventListener(FeathersEventType.RENDERER_ADD, rendererAdded);
_list.addEventListener(FeathersEventType.RENDERER_REMOVE, rendererRemoved);
_list.addEventListener(starling.events.Event.CHANGE, list_changeHandler);
_list.width = FullScreenExtension.screenWidth;
_list.height = FullScreenExtension.screenHeight - (Main.HEADER_HEIGHT + 80);
_list.y = 80;
addChildAt(_list,1);				
createListCollection();				
}


private function createListCollection():void {
if (_listCollection) {
_list.dataProvider = null;
_listCollection = null;
}

_listCollection = new ListCollection(_items);
_list.dataProvider = _listCollection;
}


private function clearList():void {
try{
_list.removeEventListener(starling.events.Event.UPDATE, list_updateHandler);
_pullView.removeEventListener(FeathersEventType.PULLING, pullView_pullingHandler);
_list.removeEventListener(FeathersEventType.RENDERER_ADD, rendererAdded);
_list.removeEventListener(FeathersEventType.RENDERER_REMOVE, rendererRemoved);
} catch (e:Error) {
}
					
try{
removeChild(_list);
} catch (e:Error) {
}

try{
_vl = null;
_renderer = null;
} catch (e:Error) {				
}
	
try{
if (_items) {
for(var i:int = _items.length; i > -1; i--) {						
_items.pop();		
}
}	
} catch (e:Error) {				
}
			
try{
_items = null;
} catch (e:Error) {				
}
			
try{
_listCollection = null;
} catch (e:Error) {				
}
			
try{				
_list = null;
} catch (e:Error) {				
}
			
}


private function myScrollBarFactoryFunction():IScrollBar {
var scrollBar:SimpleScrollBar = new SimpleScrollBar();
 scrollBar.direction = "vertical";
var scrollBarGraphic:Image = new Image(Main.assets.getTexture("vertical-scroll-bar-thumb-skin"));
scrollBarGraphic.scale9Grid = new Rectangle( 5, 5, 16, 10 );			
scrollBar.thumbProperties.defaultSkin = scrollBarGraphic; 	  
scrollBar.thumbProperties.width = 8;
 scrollBar.thumbProperties.minHeight = 40;
scrollBar.width = 8;
return scrollBar;
}

Thanks, Mark

PS the 'code' formatting button seems to have disappeared!

joshtynjala

crooksy88 PS the 'code' formatting button seems to have disappeared!

I hid it purposefully because it would format as "inline" code and not "block" code. Inline code is in the middle of the sentence, like this, but block code is a standalone section of code. Most people want block code formatting when they post code in a forum, so the inline code button was not helpful.

By the way, if you want to use block quote, put three backticks (```) on the lines immediately before and after your code.

joshtynjala

removeChild(_list);

It looks like you are removing the List from the display list, setting it to null, but you are not disposing it. This is probably the main reason why you are having a crash. It's eating up GPU resources and not freeing them to be used again. A classic memory leak.

Switch to removeChild(_list, true) instead.

Making sure that components get disposed is the most important part of my response. Everything below is just some general advice.

_renderer = null;

A List displays multiple item renderers. Saving a reference to only one of them doesn't really make any sense. You can remove this _renderer variable entirely. You don't need to save references to item renderers, actually. They are completely managed by the List. When you dispose the List, its item renderers will be disposed too.

try{
_vl = null;

This is also something that isn't worth saving in a variable. The only reference to this VerticalLayout object will be held by the List, so when the List gets garbage collected, the VerticalLayout will be too.

Additionally, setting something to null will not throw any exceptions, so you don't need the try/catch here.

for(var i:int = items.length; i > -1; i--) {
items.pop();

A while back, I discovered that you can remove all items from an array with one line: _items.length = 0

crooksy88

Thanks Josh,

I seem to be having trouble with removing lists when the list has been touched.
After applying your suggestions to my code, if I remove the list without touching it, everything is cleared from memory.

If I touch a list renderer to select it and then try to clear the list the following items remain referenced, so cannot be cleared.

Any ideas what might be causing this?

  Found reference to [object PidListItemRenderer], label:'MainMenu _renderer'
  Found reference to [object Image], label:'MainMenu img'
  Found reference to [object List], label:'MainMenu List'
  Found reference to [object PidListItem], label:'PidListRentalsItem11'

package feathers.bespokeRenderers
{
	public class PidListItem
	{
		
		public var _pid:String;
		public var _address:String;
		public var _price:String;
		public var _access:String;
		public var _aid:String;
		public var _thumb:String;
		
		public function PidListItem(pid:String, address:String, price:String, access:String, aid:String, thumb:String = null) {
			this._pid = pid;
			this._address = address;
			this._price = price;
			this._access = access;
			this._aid = aid;
			this._thumb = thumb;

		}

	}
}

package feathers.bespokeRenderers
{
	import feathers.controls.List;
	import feathers.controls.Label;
	import feathers.controls.renderers.IListItemRenderer;
	import feathers.controls.renderers.DefaultListItemRenderer;
	import feathers.core.FeathersControl;
	import feathers.controls.Button;
	import feathers.controls.ImageLoader;
 
	import flash.geom.Point;
	import flash.net.URLLoader;
	import flash.net.URLRequest;
	import flash.net.URLRequestHeader;
	import flash.net.URLRequestMethod;
	import flash.net.URLVariables;
	import flash.events.IOErrorEvent;
	import flash.display.Loader;
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.geom.Matrix;
	import flash.geom.Rectangle;
	import flash.events.SecurityErrorEvent;
 
	import starling.events.Event;
	import starling.events.Touch;
	import starling.events.TouchEvent;
	import starling.events.TouchPhase;
	import starling.text.TextFormat;
	import starling.animation.Transitions;
	import starling.animation.Tween;
	import starling.core.Starling;
	import starling.display.Image;
	import starling.events.Touch;
	import starling.events.TouchEvent;
	import starling.events.TouchPhase;
	import starling.textures.Texture;
	import starling.text.BitmapFont;
	import starling.text.TextField;
	import starling.display.Sprite;
	import starling.textures.TextureSmoothing;
	
	import com.greensock.layout.*;
	import com.greensock.*;
	import com.greensock.easing.*;
	
	import com.Main;
	import starling.extensions.brinkbit.fullscreenscreenextension.FullScreenExtension;
	
	public class PidListItemRenderer extends DefaultListItemRenderer implements IListItemRenderer {

	private var _pid:String;		
	private var _containerSprite:Sprite;	
	private var _addressText:TextField;
	private var _priceText:TextField;
	private var _statusText:TextField;
	private var _indicator:Image;			
	private var _boldTextFormat:starling.text.TextFormat;
	private var _lightTextFormat:starling.text.TextFormat;
	private var _greyQuad:starling.display.Quad;
	private var _photoOverlay:Image;
	private var _imageLoadTryCount:int;		
	private var _imageLoader:ImageLoader;
	
	override protected function initialize():void {
		super.initialize();

		_imageLoadTryCount = 0;
		
		this.isQuickHitAreaEnabled = true;
	
		_boldTextFormat = new starling.text.TextFormat(Main.FONT_BOLD, 35, Main.FONT_COLOUR_DARK, "left", "top");
		_lightTextFormat = new starling.text.TextFormat(Main.FONT_LIGHT, 31, Main.FONT_COLOUR_DARK, "left", "top");

		if(!_containerSprite) {
			_containerSprite = new Sprite();
			_containerSprite.touchable = false;
			addChild(_containerSprite);		
			_greyQuad = new starling.display.Quad(242, 160 , 0x666666);
			_greyQuad.touchable = false;
			_containerSprite.addChild(_greyQuad);			
			_indicator = new Image(Main.assets.getTexture("pidlistIndicator"));
			_indicator.touchable = false;
			_indicator.x = FullScreenExtension.screenWidth - 60;
			_indicator.y = 5;
			_containerSprite.addChild(_indicator);			
			_priceText = new TextField(300,40, "",_boldTextFormat);
			_priceText.x = 250;	
			_priceText.y = 12;
			_priceText.touchable = false;
			_containerSprite.addChild(_priceText);	
			_addressText = new TextField(360,100, "",_lightTextFormat);
			_addressText.x = 250;
			_addressText.y = 52;
			_addressText.touchable = false;
			_containerSprite.addChild(_addressText);		
			_photoOverlay = new Image(Main.assets.getTexture("pidListItemS1Overlay"));
			_photoOverlay.touchable = false;
			_photoOverlay.width = 242;
			_photoOverlay.height = 160;
			addChild(_photoOverlay);
			this.addEventListener(starling.events.Event.REMOVED_FROM_STAGE, destroy);	
				
		}
	}
 
	
	override protected function draw():void {
		super.draw();
		const dataInvalid:Boolean = isInvalid(INVALIDATION_FLAG_DATA);
		if (dataInvalid) {
			if (_data) {

				_addressText.text = this._data._address;			
				_priceText.text = this._data._price;	
				
				if (this._data._access == "lock") {
					_indicator.texture = Main.assets.getTexture("pidlistClockIndicator");
					_indicator.readjustSize();
				} else if (this._data._access == "done") {
					_indicator.texture = Main.assets.getTexture("pidlistTickIndicator");
					_indicator.readjustSize();
				} else {
					_indicator.texture = Main.assets.getTexture("pidlistIndicator");
					_indicator.readjustSize();
				}
				
				loadThumbnail();
			
			} else {
				_addressText.text = "";				
				_priceText.text = "";
			}

		}
		
		
	}
	

	
	private function loadThumbnail():void {
		if (!_imageLoader){
			_imageLoader = new ImageLoader();
			_imageLoader.addEventListener( Event.COMPLETE, loader_completeHandler );
			_imageLoader.addEventListener( IOErrorEvent.IO_ERROR, loader_ioErrorHandler );
			_imageLoader.maintainAspectRatio = false;
			_imageLoader.textureSmoothing = TextureSmoothing.BILINEAR;
			
		}
			_imageLoader.alpha = 0;
			_imageLoader.source = this._data._thumb;
			_containerSprite.addChild(_imageLoader);
						
	}
	
	
	private function loader_completeHandler(e:starling.events.Event):void {
		_imageLoader.width = 242;
		_imageLoader.height = 160;

		TweenMax.to(_imageLoader, .5, {alpha:1});		
	}
	
	private function loader_ioErrorHandler(e:starling.events.Event, data:IOErrorEvent):void {
		if (_imageLoadTryCount < 6) {
			
			trace("IMAGE LOAD RETRY");	
			_imageLoadTryCount++;
			_containerSprite.removeChild(_imageLoader);
			_imageLoader = null;
			//wait half a second before trying again
			TweenMax.delayedCall(.5,loadThumbnail);
				
			} else {
			trace("IMAGE LOADING ERROR");
			loadMissingImage();
			}
	}
	
	
	private function loadMissingImage():void {
	
		_imageLoader.source = Main.assets.getTexture("missingImageS2");
		_imageLoader.width = 242;
		_imageLoader.height = 160;
		_imageLoader.touchable = false;
		TweenMax.to(_imageLoader, .5, {alpha:1});
		
	}
	
			
	private function destroy(e:Event):void {

		this.removeEventListener(starling.events.Event.REMOVED_FROM_STAGE, destroy);
				
			try{
				
				_containerSprite.removeChild(_greyQuad);
				_containerSprite.removeChild(_indicator);
				_containerSprite.removeChild(_priceText);
				_containerSprite.removeChild(_addressText);
				removeChild(_photoOverlay);
				removeChild(_containerSprite);
				
				_greyQuad = null;
				_indicator = null;
				_priceText = null;
				_addressText = null;
				_photoOverlay = null;
				trace("renderer destroyed");

			} catch(e:Error) {
				trace("destroying renderer error");
			}
			
			
			try{
				_containerSprite.removeChild(_imageLoader);
				_containerSprite = null;
			} catch(e:Error) {
				trace("destroying _imageLoader1 error", e.message);
			}
			
			try{
				_imageLoader.dispose();	
			} catch(e:Error) {
				trace("destroying _imageLoader2 error", e.message);
			}
			
			try{
				_imageLoader = null;	
			} catch(e:Error) {
				trace("destroying _imageLoader3 error", e.message);
			}
		
	}
		

		
}
	
}

joshtynjala

If I touch a list renderer to select it and then try to clear the list the following items remain referenced, so cannot be cleared.

How are you tracking these references? Using Scout?

Regardless, it may be that the references are only held temporarily. For instance, the List probably would have received focus on touch, so that reference may be held until the something else receives focus. Just a guess. I would never be able to figure out exactly where the references are held without running all of your code myself.

containerSprite.removeChild(greyQuad);

I see that you are removing several children, and you are not disposing them. This is similar to the previous issue that I mentioned. It will cause memory leaks.

crooksy88

Thanks Josh. I'm using a class called MemoryTracker but when testing in conjunction with Scout I can't see any memory leaks so it seems to be an issue with the class.