I’ve seen a few people ask on the flexcoders mailing list about different methods of loading applications at run time based on a user’s login without navigating to a different URL. There are several ways of doing this using a ViewStack or view states to toggle between application views, using a SWFLoader to load in separate standalone SWF movies at runtime, or using a ModuleLoader to load in Flex modules at runtime, each based on a user’s access rights.
Using a ViewStack/states to accomplish this is probably the least desirable method, especially if your application is even mildly complex. In essence you’re just toggling which view is visible, but each view exists statically in the application at all times. This can cause your application’s file size to be quite large, and can lead to messy event registration and clean up and really complex view clean up logic.
Using a SWFLoader is a bit better with memory clean up and event management, but still isn’t the optimal solution as each of the modules that you download will generally be larger than they need to be because they’re standalone applications and include the overhead of classes already included in the loading application (frameworks, dependent libs, etc.). This will result in a smaller loading application, but when you factor in the size of each subsequent SWF loaded, the total application file size is substantially higher. It also can be a bit complex to manage the applications being loaded in.
Using a ModuleLoader (or ModuleManager) to load Flex modules into the application at run time is very similar to using a SWFLoader: you’re still loading SWF files into the application at runtime, but the difference is the size of the loaded files. Flex Modules are based on either mx:Module if it’s a component that interacts with the framework (view components generally) or mx:ModuleBase if it’s a component that doesn’t need to add things to the display list. This cuts out a lot of overhead as it doesn’t have to include all the application-related objects. Flex Builder also has a built-in tool to help define these modules for your project, making managing them very easy. (See Project Properties -> Flex Modules)
I put together a simplified example using this approach. It’s really just an example and doesn’t have much real-world implementation code, but it does show how to use runtime data to define your application’s behavior while keeping memory and download sizes at a minimum.
My approach involves using a component that consists of a ModuleLoader to load modules in by their package name (eg: “com.beauscott.examples.modules.Module1″), a global UserManager object that handles all login/logout event dispatching and related model information, and a series of 4 modules that are loaded per each users’ module access rights. Each user defined can have one or more modules permitted for their use. If only one is defined, the module loader automatically loads it. If more than one are defined, it will prompt you with a list of available modules to choose from (double-click).
It’s very rough and there may be better methods out there, but I hope this helps as a starting point. I’d love some suggestions and feedback as usual 
Click here to download the project and source code
Click here to see the live demo (you can right-click to see the source here, too)
Great article and sample! I am currently evaluating Flex and javaFX. This is one of what I really want to know. Thanks!
thanks a lot!
hello,
i try to use your demo in appolo but i have a error modules :
Error #2035: L’URL est introuvable. URL: app:/com/beauscott/examples/modules/LoginForm.swf
can your help me to resolve it?
Thanks.
it showing error
Error 2035 while loading module
the problem i think is that its not generating swf for login screen neither for any module
Pingback: Flex Best Practices | Anden Solutions
Is there a way to load flex modules or flex applications from swfs which don’t have the flex framework loaded. I’ve posted this to ActionScript.org
Hi Folks, I’m trying create an ultra lightweight loader and load a flex application. Are there any suggestions on how to go about doing this? What are the tradeoffs using the SWFLoader class, how robust is it, and why should one choose it over the ModuleManager()? Thanks at all.
public var info:IModuleInfo;
private function initApp():void {
info = ModuleManager.getModule(“http://” domain “Viewer.swf”);
info.load();
}
public var ourViewerModule : DisplayObject;
private function onReadyHandler(e:ModuleEvent):void {
ourViewerModule = info.factory.create() as DisplayObject;
ourCanvas.addChild(ourViewer3DModule);
}
I doubt,
If I change it
to
the application run normaly, but if the modules are independents views I thought it should produce a runtime error, however compile and run!
I don’t understand it!
Hi,
very cool example…
can you explain me this piece of code…i can’t understand the meaning of bindable metadata tag in this context..
/**
* Storage for loggedIn
*/
private var _loggedIn:Boolean = false;
[Bindable('loggedInChanged')]
/**
* Flag indicating the current login status of the user
* @readonly
*/
public function get loggedIn() : Boolean
{
return _loggedIn;
}
public function login(userInfo:UserVO) : void
{
if(userInfo != null && !loggedIn)
{
_currentUser = userInfo;
_loggedIn = true;
dispatchEvent(new Event(‘loggedInChanged’));
dispatchEvent(new Event(‘currentUserChanged’));
dispatchEvent(new UserManagerEvent(UserManagerEvent.LOGIN));
}
}
when you set _loggedIn to true and then dispatch the event you alert that the properties has change value..is it true?but why bindable?
thanks in advance
Regards Lorenzo
Hi Beau,
I have a flex site using modules, but I have a problem with the memory. Every time when I unload module this module is not leaving the memory. I have search in google but there are no solutions/workarounds. Your example is not freeing memory too. Do you have any solution?
Thanks.
hi very good example but one problem
when I unload module this module is not leaving the memory. I have search in google but there are no solutions/workarounds. Your example is not freeing memory too. Do you have any solution?
Is there anything special that needs to be done if a loaded Module (using ModuleLoader) is loaded, after which it’s content then loads a class from a swf (that is included in the lib directory of the module that was loaded) that is able to go fullscreen? More specifically (and probably easier to understand):
*Framework app “is” the ModuleLoader
*Framework app loads some module that contains controls
*module reads controls and loads a class that is external to the module(but still in the lib directory).
*Let’s say that control is a video player
In this case, I’m seeing the behavior that the app goes fullscreen, but is blank. To make matters even more confusing, SOMETIMES it works, but there’s no clear pattern as to how & why.
I’m passing allowfullscreen=”true” and wmode=”window” (I’ve toyed around relentlessly with these) to the initial swf that gets injected via SWFObject in the html page.
I’ve also tried using fullScreenRect on the stage to no avail.
have you ever seen anything like this?
Thanks, this article and example were exactly what I needed to make this all come together in my head.
Pingback: Ghost in the machine | yay, tacos!
Nice explanation. I like this approach. I can keep display/views in separate swf by extending Module class and if I have some common code base, which need to be shared among all the views, I can extend ModuleBase and keep all those API’s in it. And possibly have it in memory when the Shell/Application is loaded. I found that pipes framework is a lot easy for this work. You might want to give it a look
Pingback: May meeting recap « Austin Flex User Group
Hello,
I have a problem when launching the FlexLoginModules application in RIA Test:
Module Load Error
Error #2035: URL Not Found. URL: com/beauscott/examples/modules/LoginForm.swf
If I run the .swf file separately in Firefox it works. When I try with RIA Test is sending this error indication.
Can you provide some tips to solve this issue?
Thank you!
Hello,
I have encountered the same problem as Razvan. What it the solution/workaround ?
Am I doing something wrong, because from FB it works, but when calling the RIATest with “In browser, Local loader” option it returns this error.
Thank’s
Hi, really great article, its really helpful, I am trying to connect login form with mySQL , I am little confuse, about how to do it, can you give any example or something, any help will be really appreciated.
Thanks