Modular Flex Apps

Hello all,

I've searched a long time on Google for it, but nothing ...

I would like to make some modular flex apps with Intellij Idea, but really don't understand how to it.

On Flash Builder, it was easy, I created a mxml module (<mx:module></mx:module>) and I load it with my main app with a ModuleLoader.

But in Intellij Idea, I'm really lost.

Is someone have an example how to make it please ?

Thanks a lot.

16 comments

Terms: here I will use Flex module to represent class inherited from mx.modules.Module (e.g. mxml file with <mx:Module> root tag) and IDEA module to tell about part of IntelliJ IDEA project structure (see File | Project Structure | Modules).

There are 2 ways to organize your sources: either you keep sources of main application and of Flex module in one IDEA module or in 2 separate IDEA modules. With Flash Builder people usually use first approach and sources of both main app and Flex module are stored in one Flash Builder project. But I would prefer using 2 separate IDEA modules just not to mix sources.

So you can create 2 IDEA modules of 'Flex' type and configure Flex Compiler Settings for both (File | Project Structure | Modules | <your module> | Flex Compiler Settings tab). The difference will be in 'Main class' fileld (for example MainApp and MyFlexModule respectively). Also you may override compiler output path for one or both of IDEA modules so that both SWFs are compiled in the same output folder. Then open Dependencies tab and add dependency of main application IDEA module on Flex module IDEA module (sorry for tautology, I hope you understand). Actually that's all. To run main application create Flex run configuration (Run | Edit Configurations | Add | Flex), configure that this run configuration is for module 'MainApp' and select MainApp.swf from output folder as 'HTML wrapper or SWF file'.

If you want to keep sources in one IDEA module then you need to create IDEA module of 'Java' type and add 2 Flex facets to it. Configure facets at File | Project Structure | Modules | <your module> | <facet name>. Configuration looks similar to Flex Compiler Settings tab in case of IDEA module of 'Flex' type. The rest is the same.

0

Thanks a lot for your help Alexander,

I'm a little lost with Intellij Idea after using a lot Flash Builder 4.

I've choose the second solution, with separated IDEA modules. It was't easy, but it's good now, I've succeed

Thanks a lot :x

0

Attached is a sample project. I created it using IntelliJ IDEA 10 EAP: http://confluence.jetbrains.net/display/IDEADEV/IDEA+X+EAP
You'll probbably need to set Flex SDK at File | Project Structure | Modules | MainAppAndModule | MainApp facet | Flex SDK, because SDK name may be different on your computer. If you launch "MainApp.swf" run configuration in Debug mode breakpoint in MyModule.mxml will be hit.



Attachment(s):
MainAppAndModule.zip
0

Hi,

I am trying to refactor my fairly large application which uses .as & <mx:Module> components
to identify unused functions & class fields which are not being used. I am using Flex 3.3 SDK.

I am finding that the latest version of IDEA is not able to find usages of a field or a function
which has been referenced from a <mx:Module> or an Actionscript file using mx.core.Application.application
prefix. In my application there is a fairly large usage of this prefix from both mxml &
.as files.

I modified the project sent by Alexander to work with Flex 3.3 & added a function & a field
to MainAppAndModule.mxml. IntelliJ identifies the added integer field as unsused field
although it is being referenced from MyModule::module_creationCompleteHandler().

Similarly "Find Usages ..." for function test() in MainAppAndModule.mxml in project files,
Module or project production files doesn't find any usages although it is being called
successfully from MyModule at run time. Autocomplete doesn't work for the integer field in
MyModule.mxml but works from function test().

Please let me know if I am missing any project settings.

Thanks,
Aejaz



Attachment(s):
MainAppAndModule.zip
0

The value mx.core.Application.application is known only at runtime, so stricly speaking neither IDEA nor compiler know where mx.core.Application.application.test() would point to in runtime. There won't be compilation error if you call unexistent function. Also you may have several main application classes in the module and there's no way to guess which of them will become mx.core.Application.application. So there's no explicit function usage and that explains IDEA's behavior.

0

Hi Alexander,

Thanks for your quick reply.

-Aejaz

0

Alexander, thanks for the detailed explanation and the sample app, as I too am struggling with a modular Flex app.

I downloaded the app you attached in this thread, and did not have any issues running it. For my app, I am following the same approach (single Java module with a Intellij Flex facet for the main Flex mxml file and four Intellij Flex facets which represent the Flex modules and an artifact organizing the output structure). With my app, I am unable to load the modules in the main app.

The app works fine in my Flex windows Vista environment. I am porting it to Macbook pro (10.6) using IntelliJ 10. The main app has many remote service calls using BlazeDS and a toolbar to call the modules. The modules, which are in a subdirectory called 'mod' contain various user interfaces.

Compiling in the windows Flex environment, the main swf file is 1.5 megs while the one compiled with IntelliJ is 300 KB. None of the Flex modules in Intellij app seem to load, although they all compile with sizes a bit larger than the windows files. I liked your approach of putting a line of trace in a creationComplete event in the modules for debugging, but it does not reach there - so I guess the modules are not being loaded.

I have been struggling with this for several days and am out of ideas.
Any suggestions would be much appreciated.

Thank you.

0

If all is ok on Windows then it probably means that something is wrong with project structure on Mac. First of all I can advise to compare compiler output on Mac and Windows which is shown in Messages tool window. (You can use 'Export to text file action' to copy/paste its content. Please compare compiler command lines (that start with mxmlc or compc) and content of generated config files (paths are printed after -load-config+=...).

0

Thanks for the response, Alexander, but how do you make the Messages window stay open long enough to examine it? As soon as the compile is done, the window disappears.

0

Messages tool window stays open if there's a least one warning during compilation and 'Hide warnings' button on its left side is not pressed.

0

Note that if you can cast mx.core.Application.application to you real application class and thus make its methods usage explicit:
MainAppAndModule(mx.core.Application.application).test()
In such case you'll have Find Usages working and will not have 'unused method' highlighting.

0

There are no warning messages, only Information comments so the Message window does not stay open. The original app that works was in an Adobe Flex Windows environment. Is there any dependency I need to specify for the main swf to link to the module swf's in Intellij?

I really like the Intellij IDE - it would be great if this would work.

Thanks for the help.

0

You can add some fake line of code to get warning (sorry for hacky suggestion) like this:
var a;

We seem to use a bit different terms, so I'm not sure that I got everything correct. I'm afraid I could understood incorrectly what you call 'Adobe Flex Windows environment' and 'dependency for the main swf to link to the module swf'. As I understand, the problem is that on Mac main application fails to load modules. To find the cause we need to make sure that SWFs are compiled correctly and to correct destinations. Also you should add some truoubleshooting logic to listeners that are called when module loading fails.

0

Alexander, thank you for the quick response. Yes, your understanding of the problem is correct.

I am not familiar with the listeners that are called when module loading fails. Could you please refer me to some documentation to understand how to do this? Thanks.

0

Use standard Adobe's documentation and IDEAs capabilities:

1. Smart code completion (Ctrl+Shift+Space):
1.png
2. Event Handler generation (Alt + Insert):
2.png
3. Explore values in debug mode:
3.png

0

Alexander, thanks so much for all your help.

0

Please sign in to leave a comment.