Flexible Module Loader – a handy tool to review modules in Adobe Flex 3 (Air)

Simon Biemer Dieser Artikel wurde von geschrieben.

Flexible Module LoaderA common way to load code during run time in a Flex 3 (Air) application is using Modules. This special type of dynamically loaded SWF files allows the application to load separate parts that it requires only when it needs them. The user experiences shorter loading times due to smaller SWF file size and the developer can separate features into single modules that he can work on independently.

So far so good but unfortunately they cannot be run in a stand-alone way. Instead they must be loaded in an application. This makes it rather complicated when it comes to testing. If you have an extensive application with lots of different functionalities which are encapsulated into many different modules it can be very annoying to deploy the whole application just for testing only a small aspect. At this point the ‘Flexible Module Loader’ (FML) is going to be a very helpful tool.

Just install the downloaded Air file and run the application. Now you have three possibilities to easily load a module from your local file system:

  1. Double click on your selected SWF file in the file system tree navigator.
  2. Type the URI directly in the ‘Module location’ input field and click the ‘Load module’ button.
  3. Simply drag’n'drop the SWF file from everywhere of your desktop at the stage of the FML.

In any of the three cases your module will be loaded in the application wrapped by a ‘Module Panel’ which includes an unload button to remove the module again. Of course you can load more than one module in the application at the same time. In that case they will be horizontally aligned. Now feel free and give it a try!

IMPORTANT: The application can only load SWF files which are ‘Modules’, this means they must have the <mx:Module></mx:Module> tag included.

Loading remote modules in an Adobe Air application

For those who are interested in and familiar with the security issue of loading remote modules within an Air application I would like to recommend the article ‘Loading Modules in Air application‘ at ESOFTHEAD’S BLOG. The code example on this site helped me creating a workaround of loading modules from everywhere in the file system in the same directory as the main application SWF file. Because of the AIR runtime security model of sandboxes usually remote files cannot directly access the application sandbox (application directory tree), regardless of calls to the Security.allowDomain() method. But when you’re using modules in an AIR application, the module SWF must be located in the same directory as the main application SWF or in one of its subdirectories. Thus instead of using the ModuleLoader class you can make use of the Loader.loadBytes() method. Therefore the module must initially be loaded as a ByteArray into the application storage directory. Et voilà you can load modules from everywhere in your file system.

Download: Flexible Module Loader

Post to Twitter


13 Kommentare bisher »

  1. Wrenn sagt

    am 18. Juni 2009 @ 15:17

    Is there a way to download the source code ?

  2. Simon Biemer sagt

    am 28. Juni 2009 @ 15:03

    Sorry, not yet. We are working one a solution to publish the project and I guess it will be available in the next two weeks. Thanks for your interest and I hope you enjoy the Flexible Module Loader…

  3. prabodh sagt

    am 10. Juli 2009 @ 8:24

    hi i want to load compiled font(basically swf module)
    i got error swf is not loadable module plz help….

  4. Simon Biemer sagt

    am 10. Juli 2009 @ 14:45

    Hi Prabodh, hope I am capable to help you. Therefore I need a more detailed explanation. How do you embed your font? In mxml with mx:Style or in actionscript with [Embed(source='..', fontName='...', mimeType='..')] ? Be sure, that your root tag is mx:Module. If it is possible post your code of your module and i try to reproduce the error.
    Greetings, Simon

  5. Raymond sagt

    am 15. Juli 2009 @ 4:17

    Hi Simon,

    I myself have modified ESOFTHEAD’S BLOG posting and have used the Loader.loadBytes() method to load modules from anywhere in the file system successfully.

    I am having problems passing parameters to and from the main application to the module. A function call using parentApplication.function() in the module(SWF) gives me a ReferenceError:Error #1069 : Property not found.

    Have you encountered this problem before ?

  6. Simon Biemer sagt

    am 15. Juli 2009 @ 14:52

    Hello Raymond,
    glad to here about your successful implementation. I created a small test scenario with the FlexibleModuleLoader. When my module call parentApplication.function(param) everything is working fine. The paramter is transmitted correctly into the parent application. Don’t forget to set your function to ‘public’ in your parent application and be sure that your function is really in the mx:Application component and not in some underlying actionscript classes or mxml components. Feel free to post a code snippet here, so I will get some more details…

    Greetings, Simon

    If I set my function in the parent application to ‘private’, i got the same error as you. So I think you problem could be solved if you change your visibilty modifier (‘private’ to ‘public’) of your function in the parent application. Please let me know if the problem is solved.

  7. Raymond sagt

    am 16. Juli 2009 @ 5:53

    Hi Simon,

    Thanks for the validation. Mine was a unique problem where I had more than one mxml. Its quite a big application, so i have used the mxml components to load the module.

    I found that in this respect, the parentApplication does not apply to the component mxml that loads the module but to the “main application (mxml)”. Once i have inserted in the functions and variables in the main application, the parentApplication works.

    Thanks for your time.


  8. Raymond sagt

    am 13. Oktober 2009 @ 5:58

    Hi, Simon,

    I wonder if you have tried successfully to send parameters from the parent to the child module using the following technique published by ESOFTHEAD ?

    i am at my ends trying to get the parameters across to the child module. In order to recognise the child module, i don’t seem to have a choice but to use the tag.

    How would you use moduleLoader with the ESOFTHEAD’s sample ?

  9. Simon Biemer sagt

    am 14. Oktober 2009 @ 16:20

    Hi Raymond,
    it wasn’t implemented yet, but i tried it out and it works fine. I chose a very simple way. I don’t know if it is flexible enough for your problem, but at least it is one way how it works.
    In your handler, which is called after the ‘ready’ event, you create your module with the interface IFlexModuleFactory, something like factory.create(). At this point, you have to cast the created Object to your Module.mxml. For example your module is TestModule.mxml than call factory.create() as TestModule and write it at a variable of your choice. Now you can call every property or function of the module.
    However there is still one problem. You have to make an import of your module component in the parent application. If this is no problem in your scenario, than we have fixed your problem. Hope I could have helped you again.
    Greeting Simon

  10. Raymond sagt

    am 15. Oktober 2009 @ 1:09

    Hi Simon,

    Thanks for the quick response. I believe you are referring to the following line of code :

    var factory:IFlexModuleFactory = IFlexModuleFactory(e.target);
    var module:Module = factory.create() as Module;

    How did you import your module component in the parent application ? I don’t think you are referring to import mx.modules.Module;

  11. Simon Biemer sagt

    am 19. Oktober 2009 @ 9:22

    Hi Raymond, you have to import the component of your module. For example your module component is ‘TestModule.mxml’. In your example, the code must look like this:

    var module:TestModule = factory.create() as TestModule;

    (FlexBuilder will automatically import your TestModule component, including ‘import components.TestModule;’ in your parent application)

    Now, you can call every property or function of the module like ‘moduls.testFunction()’ or ‘module.width = 100;’…

    Greetings, Simon

  12. Mihai sagt

    am 22. Januar 2010 @ 17:03

    I tried this application. Tried to load some swf modules that load some fonts and display they intro a label repeater.
    This applications doesn’t load my modules.


  13. Mihai sagt

    am 22. Januar 2010 @ 17:09

    Hi again,

    Sorry, I tried again and it load my modules, after restart the application.


Komentar RSS · TrackBack URI

Hinterlasse einen Kommentar