AS3 PureMVC Dynamic Modules

Okay, I’ve had some questions on refactoring my PureMVC dynamic modules classes to support AS3 projects (i.e. no flex).

I’ve posted a sample app that does just that.

I threw this together off the cuff, so don’t expect too much 🙂

The app (10K) simply loads 6 modules dynamically, 3 “RedTint” modules and 3 “GreenTint” modules (4k each). The app sends a notification every second containing a random color. The loaded modules pick up on this notification and display the color – each with their corresponding tint.

Keep a close eye on Cliff’s Pipe utility as these classes may soon be obsolete 🙂 Until that time, I hope you might find this useful – if you do, drop me a line and let me know.

I’ve got some time between projects if anyone is looking for some RIA development…

Adobe AIR on MAC

While wrapping up a project for a client, I ran into a problem that one of my AIR apps didn’t work on the client’s Mac. This particular project consisted of a ‘suite’ of applications, two AIR apps and one Flex app. The other two apps in the suite worked great, however the problematic AIR app just displayed a gray screen. In case anyone else runs into this – it turned out to be due to the omission of the ‘height’ parameter in the WindowedApplication tag.

Dynamic Modules … General Tips

Okay, for those of you getting ready to work with dynamic modules, I thought I’d share a few minor points I picked up on this past week.
Your application must include a reference to any interfaces the module implements.

<mx:Moudule implements"com.company.project.SomeInterface">

You’d want a reference to com.company.project.SomeInterface in your main app.
Likewise if the module has subclassed Module

public class MyModule extends Module

You’ll need a reference to MyModule in your main app as well.

There are compiler options to include these references, however I find it easiest to just declare a variable of the corresponding type.

i.e. var interfaceDef:ICustomInterface

If you find yourself wanting to create your own ‘View’ class in PureMVC it’s pretty straightforward. Just ensure that you subclass the controller as well.

Here’s a sample facade utilizing a custom view class…

protected override function initializeController( ):void
{
if ( controller != null )
return;
controller = CustomController.getInstance( multitonKey );
}

// Our custom View subclass in action
protected override function initializeView( ):void
{
if ( view != null )
return;
view = CustomView.getInstance( multitonKey );
}

And the custom controller…

public static function getInstance( key:String ) : IController
{
if ( instanceMap[ key ] == null )
instanceMap[ key ] = new CustomController( key );
return instanceMap[ key ];
}

override protected function initializeController( ) : void
{
view = CustomView.getInstance(multitonKey);
}

Finally, our custom View

public static function getInstance( key:String ) : IView
{
if ( instanceMap[ key ] == null )
instanceMap[ key ] = new CustomView( key );
return instanceMap[ key ];
}

In practice the view in initialized in the controller’s initializeController() method, so without subclassing your Controller you still maintain the standard View.

Dynamic Flex Modules with PureMVC

I’m rolling out a large project, and I wanted to utilize dynamic modules for scalability.

For those who aren’t familiar will modules, basically, there a great way to encapsulate “pieces” of your application. A trivial example would be a small ‘shell application’ that once the user logs in, loaded the appropriate use-case module. If your working in a team environment modules make for an easy project divide-and-conquer approach.

I’ve been using the PureMVC framework lately and figured adding support for dynamic modules wouldn’t be too difficult as Cliff and the gang have already been hard at working getting the framework changes in place to make this possible (replacing singletons with multitons etc).

Well after some working laying this out, I’m glad to say I’ve got it working. Check out this sample app Dynamic Mortgage Demo.

The demo allows the user to get loan quotes from [fictional] banks. The demo allows the user to dynamically load / unload bank “modules.”

The application and modules are very well encapsulated. Here’s whats required from each party…

Application:

Must compile with…

A reference to any interfaces the modules loaded at runtime implement (ILoadableModule in our case).

A reference to any subclasses of mx:Module the modules are using (PureMVCLoadableModule in our case). This is only necessary if your subclassing mx:Module.

That’s it.

Here’s the integration point on the modules end…

The modules facade implements an “InitializeMapping” function which maps application notification names to local (module) notification names [inbound mapping]. The function also defines module notification name to application notification name [outbound] mappings.

Here’s an example

override public function initializeMappings():void
{
outboundMappings:Array = new Array();
outboundMappings[QUOTE_GENERATED] = EventNames.LOAN_QUOTE_READY;

inboundMappings = new Array();
inboundMappings[EventNames.REQUEST_FOR_LOAN] = QUOTE_REQUESTED;
}

And thats the extent of what our application and modules know of each other. The rest of the ‘work’ is done automatically by a few interfaces / subclasses I wrote on top of PureMVC to make this possible. (i.e. your modules facade subclasses ModuleFacadeBase etc). No framework changes we’re required just some subclassing here and there.