Creating Modular Applications

A common application type to create is one large application that has many smaller applications in it. With flex builder you can always build a monolithic application that could do that. However, if you ever want to edit, debug or even add more features you are just making modification more difficult. So before Flex 2.0.1 came out I was trying to create the framework for such an application and it took quite some doing to get it to work right. At that time, flex didn't support modular applications directly ( or at least not officially ) and I had to come up with a way that felt very kludgy. When it came time to implement the framework a little while later flex 2.0.1 was out but I still hadn't heard about modules. Now I have and it makes things much easier, especially with a little help from some other info on the web. ...

My application was a simplistic (web)desktop that allows you to open applications. Because Panels and TitleWindows are the most like applications on the normal desktop they were being used along with the PopUpManager. Using Panels in conjunction with PopUpManager allows the dragging of windows and a usable focus management system. This system worked well when the applications were written into the main application but broke down when I loaded an external swf.

To finally make it work ( before I knew about modules ), I had to load in the swf then listen for the creationComplete event of my application before I could use it. Then I had to take my application ( based on Panel/TitleWindow ) out of the display list of the SWFLoader object I was using and place it in the display list of my main application. At this point I could then drag the windows and it worked for the most part. However, I had problems with scrollbars and the file size was bigger because of the added overhead of the SystemManager for my application which got thrown away anyway. I also didn't like having to write so much clean up code. It felt like such a waste of resources.

Luckily during the implementation phase, while trying to figure out how to make the scroll bars work, I came across Modules. This seemed like the way to go, less overhead and made to work with the SystemManager it is loaded into directly. At first all I gained was the lower overhead and working scroll bars. I still had the same load - listen - remove - add - cleanup scenario that was quite kludgy. But it worked effectively so I left it at that.

Recently, while reading a flex coders mailing list digest I found a link to a blog posting titled "Popup Dialogs as Modules". It explained how to turn a TitleWindow into a loadable module directly. Following Alex's example I was able to do a little refactoring and clean up my code considerably. Not to mention, it seems to run a bit snappier now ( though I have no benchmarks to prove it ). Unlike some of the comments to his post, I was able to use my modules in their own namespace within my larger project.

The final minor annoyance was debugging. I kept having to copy the debug file and rename it to use debugging on my modules. Then I remembered another posting I came across during my module research. It was entitled "How I Debug with Flex Modules" and this simple fix worked to remove this minor annoyance quite well. All you end up doing is loading the module based on whether or not your main application url has the word debug in it. I went a slightly different route for my case that looked like this:

var modulePath:String = APP_DIRECTORY + this.fileLink;// Check to see if the application is the debug version, and if
// so then use the debug module...
if ( Application( Application.application ).url.indexOf( "debug" ) >= 0 )
{
  var debugFileLink:String = this.fileLink.replace( ".swf", "-debug.swf" );
  modulePath =  APP_DIRECTORY + debugFileLink;
}

I am very excited about using modules in many other ways as well. Some things that I have thought of, as well as read are:

• More Object Oriented design of large applications, allowing for easier updates and debugging ( I am doing this now )
• Creating new style sheets loaded at runtime
• Updating and adding complex algorithms to an application similar to dynamic link libraries
• Modules as config files for larger apps so deployment is quicker and easier.

----
Daryl "Deacon" Ducharme is currently Director of Application Development for the Interactive Agency Provis Media Group, LLC which helps organizations enhance identity, connect with customers and increase productivity.