Popup Dialogs as Modules

Recently, it was pointed out that there were bugs in the PopUpDialogAsModule example. The dialog would not center and was not draggable. The reason was that the thing being popped up was a Module that parented a TitleWindow and not the TitleWindow tiself. After thinking about that for a bit, I decided to create a subclass of TitleWindow that can be a Module’s top level MXML tag. The source is available at this link:
Download source
Of course, the usual caveats apply. I could have certainly missed something again.
In theory, any component can be made into a module’s top-level tag by adding the [frame] metadata. Hope this helps. I’ve been seeing this issue a lot recently. Also, sorry for the errors in the older example.

17 Responses to Popup Dialogs as Modules

  1. Angel says:

    Very Interesting,
    But, you have try to make the popup not modal as:
    PopUpManager.addPopUp(loginDialog, Application.application as DisplayObject,false);
    And try to make more popups!…. then IExplorer process are bigger, you kill popups, and memory not free. ¿Is a bug?.
    To big applications that´s could be a big problem.
    In this week i must decide if i develop a proyect with this or not… 70% no, 30% yes… 🙁
    Sorry for my poor english!.
    My testing does not how any memory leaks. Make sure you read my blog on garbage collection/memory management because memory statistics can be misleading.
    Good luck,

  2. sateesh says:

    When i try to run this app by moving the module specific files into a package/folder say testpackage then i am getting the following Error
    1 Error found.
    Error /MyTests/testpackage/MyApp.mxml
    A file found in a source-path must have the same package structure ”, as the definition’s package, ‘testpackage’.
    I added the package testpackage for the two ActionScript Files and
    in the LoginDialog.mxml
    Not sure what went wrong..
    Your directory structure must match the package structure. Modules do not like being in subdirectories so build them in their own project directory.

  3. sateesh says:

    Hi Alex,
    Also when i try to run the Module it self i am getting the Error:
    Error /MyTests/testpackage/LoginDialog.mxml
    Unable to locate specified base class ‘testpackage.ModuleTitleWindow’ for component class ‘LoginDialog’.
    I am sure this is a simple namespace issue but some how i cannot figure it out..
    could u pls let me know..
    Thanks a lot for your help..
    same problem. Put everything in its own project directory.

  4. Very nice, this cleans up a messy workaround I was using before.
    Also, I have successfully used the modules in subdirectories of my larger project. It takes a little work with namespace but it seems to work fine. However, making it runnable is a bit of a hack as you have to edit the .actionScriptProperties file by hand to make it runnable, clean your project, close your project, then reopen your project, and possibly clean your project again.

  5. Gerard says:

    Hi Alex,
    I have an example of using Modules which works but only by hard linking to the loaded module. For best practice I’d like to use and interface but I can’t cast the loaded module to the interface because it must be typed DisplayObject:
    Note: I need to use ModuleManager because I’m loading multiple modules dynamically, many of which may be duplicates.
    = modUrlArr.length)
    public function initModule():void{
    var i:int;
    for (i=0; i
    I have an Interface for the module but don’t know how to use it in this scenario.
    Thanks for any help.
    You should be able to cast from the interface to DisplayObject.

  6. Many thanks for share the “Download Source”…
    Very usefully….

  7. Werbeagentur says:

    hi Alex,
    I´ve got the same Problem like saatesh.
    Error /MyTests/testpackage/MyApp.mxml
    Please replay… Or write an email please (admin@medienstern.de)
    Try it without putting the module in a package. Modules are like sub-apps and should be in the default package.

  8. it works excellent. many thanks again

  9. Werbeagentur says:

    Thanks for the Great Informations and the Download… A usefully Blog. I could learn very usefully things here… Thanks

  10. Sebin says:

    D:\flexTestProjects>mxmlc test\Person.as
    Loading configuration file D:\Program Files\Adobe\Flex Builder 2 Plug-in\Flex SD
    K 2\frameworks\flex-config.xml
    D:\flexTestProjects\test\Person.as: Error: A file found in a source-path must ha
    ve the same package structure ”, as the definition’s package, ‘test’.
    what went wrong here? I have the code inside
    package test{
    And as you can see, i have the file inside the test folder.
    Do flex having something like CLASSPATH in java?
    Alex responds:
    Generally, an application or module cannot be in a package. I think someone has made it work, but in general I don’t do that. You can set source-path options to try to compile something in a subdirectory

  11. Kaushal Shah says:

    Thanks for such a nice example.
    I have following error while running this.
    first, If I use ModuleEvent.READY it does not work anything, and when I change it to ModuleEvent.SETUP, it gives me following error
    TypeError: Error #1009: Cannot access a property or method of a null object reference.
    at mx.managers::PopUpManagerImpl/addPopUp()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\managers\PopUpManagerImpl.as:229]
    at mx.managers::PopUpManager$/addPopUp()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\managers\PopUpManager.as:169]
    at ()[D:\kaushal\download\flex3\example_tutorial\PopUpDialogAsModule2\src\MyApp.mxml:19]
    Alex responds:
    The example I posted works in Flex 3. You should be getting and using the READY event. SETUP might be at the wrong time.

  12. Kaushal Shah says:

    Nice example,
    I have change folder structure and find it is not working. You can view source from (right click > view source)
    Please run on debugger version which shows you error.
    I am using flex 3.0 (build 3.0.164161).
    I have temporary solution for that is to change as below in MyModule.mxml
    private var loginDialog:*;
    loginDialog = m.factory.create();
    Anyone can help me, how to avoid that error? Thanks
    Alex responds:
    Please post this question on FlexCoders.

  13. Prashant says:

    Hi Alex,
    Nice Example. I was able to run this successfully on one PC. However on another installation i am getting a runtime error – VerifyError: Error #1014: Class mx.containers::TitleWindow could not be found.

    I have looked at the .actionScript Properties, project file and could not figure out why this is happening. Both installations use the same version of flexbuilder 3.0.2.

    Any ideas??

    • Alex Harui says:

      Sounds like the titleWindow class didn’t get linked into one of the SWFS. Check the link reports.

  14. Sujeeth says:

    Hello Alex,

    I am new to Flex World. I am having Flash Builder 4.

    When I copy your files to my project, I received a warning : ‘application’ has been deprecated since 4.0. Please use ‘FlexGlobals.topLevelApplication’.

    For this, I used : FlexGlobals.topLevelApplication, then warning is gone.

    When I run the application, and click on login button, noting happens.. 🙁 I have IE 8.

    Pls. guide me


    • Alex Harui says:

      Try running the original code with the warning. It should work either way. Maybe you didn’t build the module swf as well?

  15. Adnan Doric says:

    It seems that the context menu does not work in spark modules defined this way, I cannot even do right click copy or paste in a text area.
    Is this a bug or a limitation?

    mx.containers.TitleWindow works but spark.components.TitleWindow not.

    Any thoughts?