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…

CursorManager
{
	/* You can use PNGs, SWFs or JPEGs */
	busyCursor: Embed(source="path/to/your/resource");
}

To invoke the busy cursor, use the following line:

CursorManager.setBusyCursor();

…or you could set the showBusyCursor to true in your HTTPService or RemoteObject instances.

Background

My development environment is Windows-based (against my wishes… not enough loot or motivation for a Mac, lack of Adobe software on Linux) but i make up for this by running a virtual Linux installation in my Windows environment and networking the two together. It actually works really well, and the process for setting this up can be found here. To cut a very long and boring story short, essentially i cannot use localhost as your server when using this architecture since i have my LAMPP stack running on my Linux environment, so my “local server” can only be accessed using the IP address of the virtual system.

This complicates things a bit when trying to use asSQL to connect to my MySQL installation, because MySQL gets all paranoid and won’t accept connections from a foreign IP address (the IP of my Windows machine on which my AIR app is running)… To get around this, all you have to do is create a new user in MySQL (i used phpMyAdmin), set the user’s hostname to the IP address of your remote system (i’ve explained how to do this below) and you’re ready to rock and roll!

Solution

The first thing you need to do is get the IP address of the remote system…

Windows: Open the command line, type ipconfig
Linux & Mac: Open the terminal, type ifconfig

In this example, my IP address is 192.168.56.1

I’ll be using phpMyAdmin to fix the problem.

1. Open phpMyAdmin and click on the Privileges tab.
2. Click Add a new User
3. Enter any username you like, paste the IP address obtained in the Host field and put in a password
4. Under the Database for user panel, leave it at None
5. Under the Global privileges, you can Check All

That should sort it out… Remember, this is HIGHLY insecure and should only be used on development environments and NOT production environments.

I was browsing through the documentation like i had many times before, but this time i noticed the offscreenExtraRowsOrColumns property. At first you think “wtf” but then i got curious…

Say you have 25 images in a grid that displays one row of 5 images at a time:

The row in green will be the only row visible at this point in time. When you scroll, Flex will chuck out the first row and create the second row:

…and so on. Isn’t that just damn irritating? (If you’re thinking “nah, what’s the big deal?” then you obviously haven’t tried this before).

Anyway, the way to fix it is to tell Flex how many rows there are offscreen so that it can create them in the interim. This seems like a bit of a weird method because in the navigator classes (ViewStack, et al) there is a creationPolicy property which – when set to “all” – will create all the non-visible components before they’re navigated to, thus slowing down the processing a bit (depending on your app) but also speeding up the switch between views. Alas, no such property to be found in the TileList component. Can anybody tell me why? I think i should code a modified version of the TileList component to accept this property… +1 to TODO list… *sigh*

Hopefully this will help those of you experiencing the ball-ache that i did.

It’s been quite a fascinating year thus far; Adobe has really started getting serious about Flash, Flex and the developers involved. This year, we have seen two amazing additions to Adobe’s web-dominating arsenal – Adobe Flash Catalyst (now in beta 2) and Adobe Flash Builder 4 (now in beta 2). After some preliminary buggering around in both of these, I came to the conclusion that working with a beta version of any software to create enterprise applications is putting yourself on the edge of the cliff, and working on a version 1.0 beta is hiring somebody to push you over the edge.

This raises an interesting catch-22:
When a massive piece of software is released, the community has the onus to test it and give feedback on any bugs, requested features and expedience tips – however, if your beta software tends to be very buggy (and how could it not be? The SDK is huge) then how are you going to get developers to test your software on real, enterprise projects?

In any case, Adobe has really been playing the part this year. This year we have seen the release of the Flex 4 SDK, major advancements in the Open Screen Project, Flash Player 10′s penetration rate to 93.5%, AIR surpassing 100 million installations and the introduction of Flash Player 10.1 most recently. Other great things i’ve seen are WorkflowLab, BrowserLab, Project Squiggly, Slider previews, Flash CS5 sneak previews and Community Help.

For all of those unlucky and miserable enough to miss Adobe Max this year (myself included), there’s an entire channel dedicated to Max 2009 Developer talks… Go check them out!

Oh, and if you have any luck getting these videos to play in Adobe Media Player, let me know. That app is more full of bugs than a salad in Nigeria.

Danny Kopping Consulting. Unfortunately, all the cool names were taken, so i went for the one that i knew wouldn’t be taken .

I’ll be focusing primarily on building advanced, highly customized Flex-based systems and websites, using PHP, MySQL & Apache on the back-end. I’ll also be doing some training on the side for Flash & Flex (with a little PHP). Hopefully this freelance venture will pan out well and i’ll have even less time to muck about than i did before

A special thanks goes out to my best mate Neil de la Harpe for doing all my corporate branding!

I’ve set up a temporary site over at http://www.dannykopping.co.za/. Check it out…

So i carried on happily putting the finishing touches on the site when disaster struck! The embedded fonts no longer showed up! I was perplexed… After about an hour of trying ever single bloody trick in the book and vociferous googling, i found… nothing. The worst part was that any other font worked, except the one that i was using for the site, and the client needed that specific font – no compromise.

As luck would have it, i had a chance brainfart and decided to check my font embedding settings in my Flash preloader. Wouldn’t you know it… Flash was screwing up my fonts! It’s no fault of Flash’s though… It was embedding the fonts before Flex could, and it was embedding only a handful of glyphs.

So… Next time your fonts spontaneously stop working in Flex, check out any Flash resources you’re including in the site to make sure that the font embedding isn’t pernicious.

Check out my article about Flex & AMFPHP integration on Page 54…

For more information and a brief tutorial, visit this link on the Adobe Labs site.

However, it’s not always as quick and easy as some might like to believe. Recently i’ve been playing around with RSLs and different versions of the Flex SDK and i’ve been encountering the dreaded Error #1001 runtime error. This pernicious and convoluted little error can cause a spontaneous force of attraction between your forehead and your desk. It’s quite strange indeed… Well, after a bit of digging and some messing around, i seem to have noticed a general pattern for failure and subsequently getting the error message above, and how to fix it…

I’ve created a Flex project and have merrily gone about my day coding, styling, flexisizing etc… I’ve set my project to use RSLs (using the 3.2.0 Flex SDK) and everything is working just fine. Now i notice on the Adobe Labs site that there’s a new Flex SDK available (say… 3.3.0). I decide to chuck the current SDK and replace it with the new one… Only to see the following after a compile of the project:

Eek. Nothing like a good ol’ spanner in the works, eh?

After a bit of scratching around in the 3.3.0 SDK folder, i came upon the flex-config.xml file (located at $FLEX_INSTALL_PATH/sdks/$SDK_VERSION/frameworks). If you scour through the file, you’ll see that towards the bottom there’s a node called runtime-shared-library-path. Here’s what it looks like in the 3.3.0 SDK:

<runtime-shared-library-path>
	<path-element>libs/framework.swc</path-element>
	<rsl-url>framework_3.3.0.4852.swz</rsl-url>
	<policy-file-url></policy-file-url>
	<rsl-url>framework_3.3.0.4852.swf</rsl-url>
	<policy-file-url></policy-file-url>
</runtime-shared-library-path>

Check out the two rsl-url properties… One is the name of a SWZ (signed SWF) file and the other is a plain SWF file… Notice the naming of those URLs and then refer back to the image above. Flex Builder obviously didn’t change the RSL linkages when i changed my SDK in my Flex project.

The SOLUTION:

Open your Flex Project Properties dialog, select the Flex Build Path option on the left, then the Library Path tab at the top. You will then see something like this:

Notice how the version numbers of the RSL files do not correlate with the version of Flex SDK? For some reason, Flex doesn’t change the RSL linkage when you switch SDKs in a Flex Project. I wonder whether this is a bug or a feature (like i often wonder about the ON button on Windows machines).

Anyway, the quick fix for this is as follows:

Simple select the Flex SDK and hit the REMOVE button on the right. The Add Flex SDK button will then become active and you can go ahead and click on it. This will scan the flex-config.xml file we looked at earlier and pick up the correct files to use for the RSL.

Done! You can now close the Properties dialog.

Go ahead and clean your project at this point by going to the menu, Project -> Clean. This will delete all the compiled code that was previously generated and it will then trigger a new build. Once the build has completed, run your Flex application…

Oh, don’t you just love it when shit works?!

You could use the following syntax for handling mutliple method-calls from a remote script (in this example MyService):

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

<mx:RemoteObject id="service" destination="amfphp" source="MyService" makeObjectsBindable="true">
 	<mx:method name="doSomething" result="doSomethingResult(event)" fault="doSomethingFault(event)"/>
 	<mx:method name="doAnotherSomething" result="doAnotherSomethingResult(event)" fault="doAnotherSomethingFault(event)"/>
 </mx:RemoteObject>
 
<mx:Script>
 	<![CDATA[
		private function doSomethingResult(event:ResultEvent):void
		{
			// custom logic
		}
 
		private function doSomethingFault(event:FaultEvent):void
		{
			// custom logic
		}
 
		private function doAnotherSomethingResult(event:ResultEvent):void
		{
			// custom logic
		}
 
		private function doAnotherSomethingFault(event:FaultEvent):void
		{
			// custom logic
		}
 	]]>
</mx:Script>

I dunno about you, but to have to define special tags in MXML for each bloody method in your script is too much effort (and can leave you with some nasty/tricky bugs if you forget to add a new tag after adding a new method in your server-side script!). I used the following mechanism in my post about integrating CodeIgniter, Flex and PHP if i remember correctly… Give me a break… I was too lazy to check (it’s midnight and i’m sleepless).

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

<mx:RemoteObject id="service" destination="amfphp" source="MyService" makeObjectsBindable="true"
result="resultHandler(event)" fault="faultHandler(event)"/>
 
<mx:Script>
 	<![CDATA[
		private function resultHandler(event:ResultEvent):void
		{
			var message:RemotingMessage = event.token.message as RemotingMessage;
 
			switch(message.operation)
			{
				case "doSomething":
					// custom logic
					break;
				case "doAnotherSomething":
					// custom logic
					break;
				default:
					trace("Shit... Missed this one... " + message.operation);
					break;
			}
		}
 
		private function faultHandler(event:FaultEvent):void
		{
			var message:RemotingMessage = event.token.message as RemotingMessage;
 
			switch(message.operation)
			{
				case "doSomething":
					// custom logic
					break;
				case "doAnotherSomething":
					// custom logic
					break;
				default:
					trace("Shit... Missed this one... " + message.operation);
					break;
			}
		}
 	]]>
</mx:Script>

Seems much easier, doesn’t it? Essentially all you’re doing is examining the event parameter of the ResultEvent or FaultEvent, finding which method was just called and acting accordingly… This will work with any number of method calls, from any number of different RemoteObjects. You can point them all to the same handlers!

If you guys have any alternative ways of doing this, let me know!