ria-coder.com » modules http://ria-coder.com/blog Wed, 21 Apr 2010 19:35:08 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Truly Cached Flex Modules http://ria-coder.com/blog/truly-cached-flex-modules http://ria-coder.com/blog/truly-cached-flex-modules#comments Sun, 31 Jan 2010 19:56:14 +0000 Danny Kopping http://ria-coder.com/blog/?p=532 I was working on a project recently and I discovered (or possibly misunderstood – see disclaimer) that Flex does not cache modules correctly, or – at the very least – it does not do it effectively according to my tests.

My test was conducted using Flex SDK 3.4.0.9271, Firefox 3.5.7 and Flex Builder Professional 3.0.214193

According to this page (under the Preloading modules heading), Adobe asserts the following:

When a module is loaded by the Flex application for the first time, the module’s SWF file is transferred across the network and stored in the browser’s cache. If the Flex application unloads that module, but then later reloads it, there should be less wait time because Flash Player loads the module from the cache rather than across the network.

Module SWF files, like all SWF files, reside in the browser’s cache unless and until a user clears them. As a result, modules can be loaded by the main application across several sessions, reducing load time; but this depends on how frequently the browser’s cache is flushed.

I found the above claims to be demonstrably false, or at least just plain inefficient…

Let me qualify this:
According to my tests (conducted with my Firefox browser cache turned both on and off), i found that the application’s memory usage keeps growing exponentially when switching between two loaded modules. There was a variance (as you’d imagine) when the browser cache was left on but nonetheless, the memory usage keeps growing steadily.

In the code sample below, I have extended the functionality of the mx.modules.ModuleLoader class, and added a Dictionary (with a little logic) to manage the (ostensibly) effective caching of previously loaded modules. I have not tested this class extensively, but all the tests that I conducted seemed to produce a significant memory and speed improvement.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188

package
{
	import flash.display.DisplayObject;
	import flash.display.DisplayObjectContainer;
	import flash.utils.ByteArray;
	import flash.utils.Dictionary;
 
	import mx.events.FlexEvent;
	import mx.events.ModuleEvent;
	import mx.modules.IModuleInfo;
	import mx.modules.ModuleLoader;
	import mx.modules.ModuleManager;
 
	/**
	 * This class manages the loading, unloading and caching of Flex Modules
	 * This is a modified version of the mx.modules.ModuleLoader class
	 *
	 * @author Danny Kopping - danny@ria-coder.com
	 */
	public class CachedModuleLoader extends ModuleLoader
	{
		private var map:Dictionary = new Dictionary();
 
		private var _url:String = null;
		private var module:IModuleInfo;
		private var loadRequested:Boolean = false;
 
		public function CachedModuleLoader()
		{
			super();
		}
 
		override public function set url(value:String):void
		{
			if (value == _url)
				return;
 
			if (module)
			{
				module.removeEventListener(ModuleEvent.PROGRESS, moduleProgressHandler);
				module.removeEventListener(ModuleEvent.SETUP, moduleSetupHandler);
				module.removeEventListener(ModuleEvent.READY, moduleReadyHandler);
				module.removeEventListener(ModuleEvent.ERROR, moduleErrorHandler);
				module.removeEventListener(ModuleEvent.UNLOAD, moduleUnloadHandler);
 
				//module.release();
				module = null;
 
				if (child)
				{
					removeChild(child);
					//child = null;
				}
			}
 
			_url = value;
 
			dispatchEvent(new FlexEvent(FlexEvent.URL_CHANGED));
			removeAllChildren();
 
			if (_url != null && loadRequested)
			{
				if(!map[_url])
					loadModule();
				else
				{
 
					child = map[_url];
					addChild(child);
				}
			}
		}
 
		override public function get url():String
		{
			return _url;
		}
 
		override public function createComponentsFromDescriptors(recurse:Boolean = true):void
		{
			super.createComponentsFromDescriptors(recurse);
 
			loadRequested = true;
			loadModule();
		}
 
		override public function loadModule(url:String = null, bytes:ByteArray = null):void
		{
			if (url != null)
				_url = url;
 
			if (_url == null)
			{
				//trace("loadModule() - null url");
				return;
			}
 
			if (map[_url])
			{
				//trace("loadModule() - already created the child");
				return;
			}
 
			if (module)
			{
				//trace("loadModule() - load already initiated");
				return;
			}
 
			dispatchEvent(new FlexEvent(FlexEvent.LOADING));
 
			module = ModuleManager.getModule(_url);
 
			module.addEventListener(ModuleEvent.PROGRESS, moduleProgressHandler);
			module.addEventListener(ModuleEvent.SETUP, moduleSetupHandler);
			module.addEventListener(ModuleEvent.READY, moduleReadyHandler);
			module.addEventListener(ModuleEvent.ERROR, moduleErrorHandler);
			module.addEventListener(ModuleEvent.UNLOAD, moduleUnloadHandler);
 
			module.load(applicationDomain, null, bytes);
		}
 
		override public function unloadModule():void
		{
			if (child && contains(child))
			{
				removeChild(child);
				child = null;
			}
 
			if (module)
			{
				module.removeEventListener(ModuleEvent.PROGRESS, moduleProgressHandler);
				module.removeEventListener(ModuleEvent.SETUP, moduleSetupHandler);
				module.removeEventListener(ModuleEvent.READY, moduleReadyHandler);
				module.removeEventListener(ModuleEvent.ERROR, moduleErrorHandler);
 
				module.unload();
				module.removeEventListener(ModuleEvent.UNLOAD, moduleUnloadHandler);
				module = null;
			}
 
			if(map[_url])
			{
				delete map[_url];
			}
		}
 
		private function moduleProgressHandler(event:ModuleEvent):void
		{
			dispatchEvent(event);
		}
 
		private function moduleSetupHandler(event:ModuleEvent):void
		{
			// Not ready for creation yet, but can call factory.info().
 
			dispatchEvent(event);
		}
 
		private function moduleReadyHandler(event:ModuleEvent):void
		{
			child = module.factory.create() as DisplayObject;
			dispatchEvent(event);
 
			if (child)
			{
				var p:DisplayObjectContainer = parent;
				// p.removeChild(this);
				addChild(child);
 
				map[url] = child;//ModuleManager.getModule(_url);
				//trace(map + ":" + url + ":" + map[url]);
			}
		}
 
		private function moduleErrorHandler(event:ModuleEvent):void
		{
			unloadModule();
			dispatchEvent(event);
		}
 
		private function moduleUnloadHandler(event:ModuleEvent):void
		{
			dispatchEvent(event);
		}
	}
}

The usage of this class is exactly the same as the regular mx.modules.ModuleLoader class. I hope this helps!

Download this file: Download

**DISCLAIMER**
I know a bit about Flex modules from hours of obsessing over them, but i do not know everything. From my tests of the efficacy of the above code & explanation, i found that it reduces memory usage and increases the general usability of my Flex project; i could be very wrong on this topic, and if i am – please tell me. Maybe i’m just an idiot, but it seems to work…

]]> http://ria-coder.com/blog/truly-cached-flex-modules/feed 3 Using Modules with Preloaders http://ria-coder.com/blog/using-modules-with-preloaders http://ria-coder.com/blog/using-modules-with-preloaders#comments Sat, 11 Apr 2009 20:29:12 +0000 Danny Kopping http://ria-coder.com/blog/?p=240 Here’s a quick and dirty way to show a preloader while your module loads:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117

<?xml version="1.0" encoding="utf-8"?>
<mx:ModuleLoader xmlns:mx="http://www.adobe.com/2006/mxml" currentState="loading">
	<mx:states>
		<mx:State name="loading">
			<mx:SetStyle name="horizontalAlign" value="center"/>		<!-- Align progress bar to center -->
			<mx:SetStyle name="verticalAlign" value="middle"/>			<!-- Align progress bar to middle -->
			<mx:AddChild position="lastChild">
				<mx:ProgressBar id="progressBar" labelPlacement="center" mode="manual"/>
			</mx:AddChild>
		</mx:State>
	</mx:states>
 
	<mx:Script>
		<![CDATA[
			import mx.modules.IModuleInfo;
			import mx.events.FlexEvent;
			import mx.modules.ModuleManager;
			import mx.events.ModuleEvent;
 
			private var module:IModuleInfo;
 
			override public function loadModule():void
			{
			    if (url == null)
			        return;
 
			    if (child)
			        return;
 
			    if (module)
			        return;
 
			    dispatchEvent(new FlexEvent(FlexEvent.LOADING));
 
			    module = ModuleManager.getModule(url);
 
			    module.addEventListener(ModuleEvent.PROGRESS, moduleProgressHandler);
			    module.addEventListener(ModuleEvent.SETUP, moduleSetupHandler);
			    module.addEventListener(ModuleEvent.READY, moduleReadyHandler);
			    module.addEventListener(ModuleEvent.ERROR, moduleErrorHandler);
			    module.addEventListener(ModuleEvent.UNLOAD, moduleUnloadHandler);
 
			    module.load(applicationDomain);
			}
 
			private function moduleProgressHandler(event:ModuleEvent):void
			{
			    dispatchEvent(event);
 
			    try
			    {
			    	progressBar.setProgress(event.bytesLoaded / event.bytesTotal, 1);
			    }
			    catch(e:Error)
			    {
			    }
			}
 
			private function moduleSetupHandler(event:ModuleEvent):void
			{
			    // Not ready for creation yet, but can call factory.info().
 
			    dispatchEvent(event);
			}
 
			private function moduleReadyHandler(event:ModuleEvent):void
			{
			    child = module.factory.create() as DisplayObject;
			    dispatchEvent(event);
 
			    if (child)
			    {
			        var p:DisplayObjectContainer = parent;
			        // p.removeChild(this);
			        addChild(child);
 
			        setStyle('horizontalAlign', '');			// Reset horizontalAlign
			        setStyle('verticalAlign', '');				// Reset verticalAlign
			    	currentState = '';
			    }
			}
 
			private function moduleErrorHandler(event:ModuleEvent):void
			{
			    unloadModule();
			    dispatchEvent(event);
			}
 
			private function moduleUnloadHandler(event:ModuleEvent):void
			{
			    dispatchEvent(event);
			}
 
			override public function unloadModule():void
			{
			    if (child)
			    {
			        removeChild(child);
			        child = null;
			    }
 
			    if (module)
			    {
			        module.removeEventListener(ModuleEvent.PROGRESS,
			                                   moduleProgressHandler);
			        module.removeEventListener(ModuleEvent.SETUP, moduleSetupHandler);
			        module.removeEventListener(ModuleEvent.READY, moduleReadyHandler);
			        module.removeEventListener(ModuleEvent.ERROR, moduleErrorHandler);
 
			        module.unload();
			        module.removeEventListener(ModuleEvent.UNLOAD, moduleUnloadHandler);
			        module = null;
			    }
			}
		]]>
	</mx:Script>
</mx:ModuleLoader>

Or you can download the file here.

]]> http://ria-coder.com/blog/using-modules-with-preloaders/feed 5