Flex Modules and why to use them.
Flex is a pretty nice and quite powerful way of building web applications. Sure everything compiles to flash and that’s not everyone’s cup of coffee, but Flex is definitely not something to pass by. If you are a web developer familiar with flash, JavaScript HTML and even ASP.Net then you will find it very easy indeed to get on with Flex.
Getting the architecture of your application right will probably be the next challenge after getting used to the framework.
Flex applications have a single tag allowed to define the application itself. It’s easy therefore, to build your app solely within the one page as this has the application tags. Sure you can farm out some of your code to classes and import them, and your app will probably run fine. The problem is in the user experience though, as a user will need to download a big chunk of data before they get to run the app.
Many web developers will already recognise this problem from the old days when many websites had all the JavaScript inside the page (not linked) and images were not as nicely compressed as the lovely png format we have now. Site bloat was a big problem.
To solve this issue Flex has two different solutions each suited to a different purpose. The one we are concerned with here is the use of Modules to break your application down into smaller logical chunks.
By doing this the user will only need to download small chunks of data when it’s needed rather than a much bigger chunk of data which may not all be relevant.
To create a module you right click your project, or a folder ( I like to put my modules into a modules folder somewhere in my project), from the context menu choose new> Module. Fill out the details in the form to create your module.
When the new module opens you will see that it looks exactly like your main application MXML except it has tags where the tags used to be. Script and MXML can be input exactly the same as in your main application MXML file.
Now once you have created your Module you will need to load it somehow. Let’s take a look at some sample code.
</mx><mx :Script>
< ![CDATA[
import mx.core.Container;
import mx.events.IndexChangedEvent;
public function viewstackShow(childViewId:String):void
{
var cont:Container = Container(dash.getChildByName(childViewId));
if(cont != null){
dash.selectedChild = cont;
}
}
]]>
</mx>
<mx :Button label="Load Module 1" id="loadModule1" enabled="true" click="viewstackShow('module2')"/>
<mx :Button label="Load Module 2" id="loadModule2" enabled="true" click="viewstackShow('module1')"/>
<mx :ViewStack id="stack1">
<mx :ModuleLoader id="module1" url="modules/homePage.swf"/>
<mx :ModuleLoader id="module2" url="modules/testReports.swf"/>
</mx>
(The code sample is proving an absolute pain in the ass to insert properly please don’t copy and paste this anywhere it’s for illustration only.)
In this sample we have an application with a single function, two buttons and a ViewStack with two ModuleLoaders.
We shall come to the function in a moment, the ViewStack is a nice control that effectively gives you layers to put your application pieces on, each stacked one on top of the other, inside this I have added two ModuleLoaders. The ModuleLoaders are used to load your modules and as you can see I have given each a unique ID and they have a URL property that points to the relevant Module.
This piece is important. As you can see the url points to module1 and module2 but they are both .swf files not MXML. This is because we will be loading the compiled versions of our modules and these will have a .swf extension.
The Function I have created here is just a simple function that allows me to quickly switch between the different layers in the ViewStack by passing in the ID of the layer I want to load.
always give each object in your MXML an ID, this will make it so much easier to perform an action on them.
So if I were to have a project with my application mxml as shown above and two modules inside a modules folder, one named module1 and the other module2; I would be able to click each button to load each module.
The nice think here is that when my application loads it will only load module1 as this is on the top of the ViewStack module2 doesn’t load until I click the Load Module 2 button.
Quick and simple.
In my next post I will cover a key element you will need to use when you have more complicated modules with lots of controls on them.
Tags: Flex, Modules